/* GENERATED by build.py from the stylesheets listed in source/layout.html — edit those files, not this one. */

/* ==== styles/game.css ==== */

  :root{
    --blue:#1f73ce;
    --steel1:#dce6eb;
    --steel2:#8c9aa2;
    --gold:#d59b00;
    --gold2:#8a5700;
    --lime:#29f500;
    --dark:#061016;
  }
  *{box-sizing:border-box}
  html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06090d;font-family:Arial,Helvetica,sans-serif}
  body{display:grid;place-items:center}
  #fit{
    width:854px;height:570px;transform-origin:center center;
  }
  #game{
    position:relative;width:854px;height:570px;overflow:hidden;
    background:linear-gradient(#141414,#030303);
    border:0;
    box-shadow:0 18px 55px rgba(0,0,0,.52);
    color:#fff;
  }

  /* Windows-style titlebar */
  
  
  
  
  .winbtn.close{background:linear-gradient(#fb7a47,#cd3f18)}

  /* -----------------------------------------------------------
     TOP NAVIGATION — pure CSS recreation of the later Nitto 1320 UI
     ----------------------------------------------------------- */
  .menu{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:38px;
    display:flex;
    align-items:stretch;
    z-index:40;
    overflow:hidden;
    background:
      linear-gradient(to bottom,
        #f7fafc 0%,
        #e6edf1 7%,
        #cbd6dd 19%,
        #9dabb4 50%,
        #7a8993 68%,
        #a4b2ba 86%,
        #6a7881 100%);
    border-top:1px solid #ffffff;
    border-bottom:2px solid #101417;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 0 rgba(255,255,255,.28),
      0 2px 0 #263038;
  }

  .menu:before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:13px;
    pointer-events:none;
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.78),
      rgba(255,255,255,.12)
    );
    opacity:.72;
  }

  .menu:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:2px;
    height:1px;
    pointer-events:none;
    background:rgba(255,255,255,.40);
  }

  .menu button{
    position:relative;
    height:100%;
    margin:0;
    padding:0 16px;
    border:0;
    border-right:2px solid #263038;
    border-left:1px solid rgba(255,255,255,.72);
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,.38) 0%,
        rgba(255,255,255,.08) 32%,
        rgba(0,0,0,.045) 58%,
        rgba(255,255,255,.09) 82%,
        rgba(0,0,0,.10) 100%);
    color:#0b0e10;
    font-family:Arial Black,Arial,Helvetica,sans-serif;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.15px;
    white-space:nowrap;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 -1px 0 rgba(0,0,0,.12);
    cursor:pointer;
    z-index:1;
    transform:none;
    filter:none;
  }

  .menu button:first-child{
    border-left:0;
  }

  .menu button:last-child{
    border-right:0;
  }

  .menu button:before{
    content:"";
    position:absolute;
    inset:1px 2px auto 2px;
    height:1px;
    background:rgba(255,255,255,.76);
    pointer-events:none;
  }

  .menu button:after{
    content:"";
    position:absolute;
    left:2px;right:2px;bottom:3px;
    height:1px;
    background:rgba(0,0,0,.18);
    pointer-events:none;
  }

  .menu button:hover{
    color:#000;
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,.55),
        rgba(216,232,241,.26) 38%,
        rgba(77,111,131,.14) 68%,
        rgba(255,255,255,.17));
  }

  .menu button:active{
    padding-top:1px;
    background:
      linear-gradient(to bottom,
        rgba(53,67,77,.16),
        rgba(255,255,255,.20) 62%,
        rgba(0,0,0,.14));
    box-shadow:inset 0 2px 5px rgba(0,0,0,.20);
  }

  /* Proportions modeled after the reference screenshot */
  .menu button:nth-child(1){width:8.2%}
  .menu button:nth-child(2){width:15.9%}
  .menu button:nth-child(3){width:11.0%}
  .menu button:nth-child(4){width:12.6%}
  .menu button:nth-child(5){width:13.5%}
  .menu button:nth-child(6){width:16.6%}
  .menu button:nth-child(7){width:8.5%}
  .menu button:nth-child(8){width:13.7%}

  /* -----------------------------------------------------------
     NITTO / 1320 BRAND BANNER — 100% HTML + CSS, no image
     ----------------------------------------------------------- */
  .brandbar{
    position:absolute;
    left:0;
    top:38px;
    width:100%;
    height:60px;
    overflow:hidden;
    z-index:39;
    background:
      /* fine vertical grille lines */
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.045) 0px,
        rgba(255,255,255,.045) 1px,
        rgba(0,0,0,.16) 1px,
        rgba(0,0,0,.16) 3px
      ),
      /* subtle center glow */
      radial-gradient(
        ellipse at 50% 50%,
        rgba(98,111,119,.18) 0%,
        rgba(16,19,21,.03) 42%,
        rgba(0,0,0,.28) 100%
      ),
      linear-gradient(
        to bottom,
        #1e2326 0%,
        #080a0b 18%,
        #111416 55%,
        #050607 100%
      );
    border-top:1px solid #353d41;
    border-bottom:2px solid #14181a;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(255,255,255,.07),
      0 2px 0 #ad8a00,
      0 4px 0 #1d2326;
  }

  .brandbar:before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:4px;
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,.14),
        rgba(0,0,0,.0));
    pointer-events:none;
  }

  .brandbar:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:1px;
    height:1px;
    background:#c3a300;
    opacity:.88;
    pointer-events:none;
  }

  .nitto{
    position:absolute;
    left:14px;
    top:3px;
    width:198px;
    height:52px;
    margin:0;
    transform:none;
    color:transparent;
    font-size:0;
    text-shadow:none;
  }

  /* main gold NITTO word */
  .nitto:before{
    content:"NITTO";
    position:absolute;
    left:0;
    top:-1px;
    font-family:Impact,Arial Black,Arial,sans-serif;
    font-size:31px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-1.4px;
    transform:skewX(-11deg) scaleX(1.09);
    transform-origin:left center;
    color:#f0c414;
    background:
      linear-gradient(
        to bottom,
        #fff197 0%,
        #efc41b 20%,
        #a66d00 49%,
        #ffe65b 61%,
        #a46a00 82%,
        #e7bd13 100%
      );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:
      drop-shadow(1px 1px 0 #301f00)
      drop-shadow(2px 2px 0 #050505);
    white-space:nowrap;
  }

  /* small EXTREME PERFORMANCE line */
  .nitto small{
    display:block;
    position:absolute;
    left:4px;
    top:36px;
    margin:0;
    transform:none;
    font-family:Arial Black,Arial,sans-serif;
    font-size:6px;
    font-weight:900;
    font-style:normal;
    letter-spacing:2.35px;
    color:#d8dde0;
    -webkit-text-fill-color:#d8dde0;
    text-shadow:
      0 1px 0 #000,
      1px 0 0 rgba(255,255,255,.16);
    white-space:nowrap;
  }

  

  /* giant metallic 1320 */
  

  /* CHALLENGE tail */
  

  /* Gold member orb */
  .member-badge{
    position:absolute;
    right:118px;
    top:15px;
    height:30px;
    display:flex;
    align-items:center;
    gap:7px;
    z-index:3;
  }

  .member-orb{
    width:28px;
    height:28px;
    border-radius:50%;
    position:relative;
    background:
      radial-gradient(circle at 35% 28%,
        #fff8a5 0 7%,
        #f5c528 17%,
        #9c6400 45%,
        #251600 67%,
        #c48d00 78%,
        #f1c124 100%);
    border:1px solid #362300;
    box-shadow:
      inset 0 0 0 2px rgba(255,232,114,.22),
      0 1px 0 #000,
      0 0 5px rgba(226,173,0,.20);
  }

  .member-orb:before{
    content:"";
    position:absolute;
    left:8px;
    top:5px;
    width:11px;
    height:16px;
    border-radius:50%;
    border:3px solid #171717;
    border-right-color:transparent;
    transform:rotate(-15deg);
    opacity:.92;
  }

  .member-orb:after{
    content:"";
    position:absolute;
    right:2px;
    bottom:3px;
    width:8px;
    height:3px;
    border-radius:50%;
    background:#f8da58;
    transform:rotate(-18deg);
    opacity:.7;
  }

  .member-word{
    color:#eceff1;
    font-family:Arial Black,Arial,sans-serif;
    font-size:11px;
    font-style:italic;
    font-weight:900;
    letter-spacing:.7px;
    text-shadow:0 2px 0 #000;
  }

  .version{
    position:absolute;
    right:12px;
    bottom:13px;
    color:#24ef24;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:900;
    text-shadow:0 1px 1px #000;
    z-index:3;
  }


  .header-divider{
    position:absolute;
    left:0;
    top:98px;
    width:100%;
    height:7px;
    z-index:38;
    pointer-events:none;
    background:
      linear-gradient(
        to bottom,
        #101416 0%,
        #2b3439 22%,
        #0c0f11 47%,
        #151b1f 70%,
        #07090a 100%);
    border-top:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid #000;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  }

  .header-divider:after{
    content:"";
    position:absolute;
    left:0;right:0;top:1px;
    height:4px;
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0 25px,
        rgba(255,255,255,.035) 25px 27px,
        transparent 27px 52px
      );
  }

  /* scene */
  .scene{position:absolute;left:0;top:105px;width:100%;height:438px;background:#8d5b00}
  .goldside{
    position:absolute;top:0;width:52px;height:100%;
    background:linear-gradient(90deg,#a25e00,#efab03 45%,#a55d00);
    box-shadow:inset 0 0 13px #4a2600;
  }
  .goldside.left{left:0}.goldside.right{right:0}

  .meter-strip{
    --marker-bottom:3px;
    position:absolute;left:20px;top:10px;width:28px;height:346px;background:#523100;
    border:1px solid #b07100;box-shadow:inset 0 0 4px #000;
  }
  .meter-strip:before{
    content:"";position:absolute;left:5px;top:0;width:18px;height:100%;
    background:linear-gradient(to bottom,
      #d87c00 0 40%, #ffe70a 40% 45%, #13e600 45% 54%,
      #ffe70a 54% 59%, #d87c00 59% 100%);
  }
  .meter-strip:after{
    content:"";position:absolute;left:-7px;bottom:var(--marker-bottom);width:41px;height:18px;
    clip-path:polygon(0 22%,68% 22%,68% 0,100% 50%,68% 100%,68% 78%,0 78%);
    background:#090909;filter:drop-shadow(0 1px 1px #d39a00);transition:bottom .035s linear;
  }


  .meter-strip.race-mode{
    background:#090c0e;
    border-color:#876100;
    box-shadow:inset 0 0 7px #000,0 0 0 1px #2c1c00;
  }
  .meter-strip.race-mode:before,
  .meter-strip.race-mode:after{display:none}
  .race-map{
    position:absolute;inset:3px;display:none;overflow:hidden;
    background:
      linear-gradient(90deg,
        #242b2e 0 7%,
        #555d60 7% 10%,
        #202629 10% 48%,
        #d8d8d8 48% 51%,
        #202629 51% 90%,
        #555d60 90% 93%,
        #242b2e 93% 100%);
    border:1px solid #111;
  }
  .meter-strip.race-mode .race-map{display:block}
  .race-map:before{
    content:"";position:absolute;left:0;right:0;top:8px;height:7px;
    background:repeating-conic-gradient(#eee 0 25%,#111 0 50%) 0/7px 7px;
    box-shadow:0 1px 0 #000;
  }
  .race-map:after{
    content:"1320";position:absolute;left:50%;top:18px;transform:translateX(-50%);
    color:#b9b9b9;font:700 6px Arial;letter-spacing:.5px;
  }
  .map-tick{
    position:absolute;left:3px;right:3px;height:1px;background:rgba(255,255,255,.18)
  }
  .map-tick.t1{bottom:25%}.map-tick.t2{bottom:50%}.map-tick.t3{bottom:75%}
  .race-dot{
    position:absolute;width:9px;height:9px;border-radius:50%;bottom:6px;
    transform:translate(-50%,50%);z-index:4;
    border:1px solid rgba(255,255,255,.9);box-shadow:0 0 5px #000;
    transition:bottom .04s linear;
  }
  .race-dot.player{left:31%;background:#ffe000;box-shadow:0 0 6px #ffe000}
  .race-dot.opponent{left:69%;background:#d14949;box-shadow:0 0 6px #ff4e4e}
  .race-map .lane-label{
    position:absolute;bottom:2px;color:rgba(255,255,255,.5);font:700 5px Arial;z-index:2
  }
  .race-map .lane-label.you{left:3px}.race-map .lane-label.cpu{right:2px}


  /* Full 3D race viewport. The old photo world and fake DOM/canvas
     road layers are intentionally gone in v13. */
  #raceVignette{
    position:absolute;inset:0;z-index:7;pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 54%,transparent 0 45%,rgba(0,0,0,.12) 70%,rgba(0,0,0,.48) 100%),
      linear-gradient(180deg,rgba(0,0,0,.18),transparent 28%,transparent 74%,rgba(0,0,0,.18));
  }

  /* Secondary high-speed polish only. The 3D world itself provides motion. */
  #raceSpeedFX{
    position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;
    opacity:0;transition:opacity .08s linear;
  }
  #raceSpeedFX:before,
  #raceSpeedFX:after{
    content:"";position:absolute;top:5%;bottom:0;width:17%;
    opacity:.65;
    background:
      linear-gradient(100deg,transparent 15%,rgba(155,194,226,.08),transparent 70%),
      repeating-linear-gradient(176deg,transparent 0 27px,rgba(243,203,142,.16) 29px,transparent 34px 78px);
    animation:raceEdgeRush var(--rush-duration,.42s) linear infinite;
  }
  #raceSpeedFX:before{left:-3%;transform:skewY(-16deg);transform-origin:right center}
  #raceSpeedFX:after{right:-3%;transform:skewY(16deg);transform-origin:left center}
  @keyframes raceEdgeRush{from{background-position:0 0}to{background-position:0 156px}}
  @media(prefers-reduced-motion:reduce){#raceSpeedFX{display:none}}

  /* Full 3D central race viewport. */
  #threeCanvas{
    position:absolute;inset:0;width:100%;height:100%;display:block;z-index:5;
    pointer-events:none;background:#050810;
  }
  .webgl-badge{
    position:absolute;right:5px;bottom:5px;z-index:7;
    padding:2px 4px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.20);
    color:rgba(255,255,255,.72);font:700 6px Arial;letter-spacing:.5px;
    pointer-events:none
  }
  .webgl-badge.real-car{color:#8fffa2;border-color:rgba(105,255,133,.35)}
  .webgl-badge.loading-car{color:#ffe168;border-color:rgba(255,220,75,.35)}

  .track-wrap{
    position:absolute;left:211px;top:0;width:456px;height:332px;overflow:hidden;
    border-left:2px solid #111;border-right:2px solid #111;
    background:#020307;
  }

  /* side racer panels */
  .racer-panel{
    position:absolute;top:4px;width:148px;height:248px;background:linear-gradient(#d7edf3,#a6d9e6);
    border:5px solid #111;box-shadow:0 0 0 1px #c39800,0 3px 8px #000;
  }
  .racer-panel.left{left:67px}.racer-panel.right{right:30px}
  .bulbs{position:absolute;left:-3px;top:-21px;width:154px;height:17px;padding:3px 4px;background:#2b1405;display:flex;gap:4px}
  .bulbs i{display:block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e2ae6c,#704016 65%,#281608)}
  .panel-time{
    position:absolute;right:14px;top:0;background:#5f120a;color:#e7a737;width:64px;height:18px;text-align:right;padding:2px 6px 0 0;font:700 11px monospace
  }
  .brand{
    position:absolute;left:0;top:20px;width:100%;height:72px;display:grid;place-items:center;color:#173b57;text-align:center;
    font:bold 14px Arial;text-shadow:0 1px white;
  }
  .mopar-mark{
    width:58px;height:42px;border-radius:50% 50% 45% 45%;
    border:4px solid #176f98;position:relative;margin:auto;
  }
  .mopar-mark:after{
    content:"";position:absolute;left:22px;top:-4px;width:9px;height:44px;background:#176f98;transform:skewX(-10deg)
  }
  .chrysler{font:700 20px/1 Georgia,serif;letter-spacing:4px;color:#606b6e;text-shadow:0 1px #fff}
  .chrysler:after{content:"";display:block;width:80px;height:10px;border:2px solid #6a6a6a;border-top:0;border-radius:50%;margin:2px auto}
  .scorebox{
    position:absolute;
    left:5px;
    bottom:8px;
    width:134px;
    height:121px;
    padding:9px 9px 7px;
    background:
      linear-gradient(180deg,#020303,#000 58%,#020606);
    border:2px solid #0a4454;
    box-shadow:
      inset 0 0 12px rgba(0,81,99,.30),
      inset 0 1px 0 rgba(255,255,255,.035);
    overflow:hidden;
  }

  .scorebox:before{
    content:"RACE DATA";
    display:block;
    padding-bottom:6px;
    margin-bottom:3px;
    border-bottom:1px solid rgba(32,150,175,.25);
    color:#5d9aa7;
    font:700 6px/1 Arial;
    letter-spacing:1.5px;
    text-align:center;
  }

  .score-row{
    height:28px;
    display:grid;
    grid-template-columns:33px 1fr;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.045);
  }

  .score-row:last-child{border-bottom:0}

  .score-label{
    color:#6e8990;
    font:700 7px/1 Arial;
    letter-spacing:.7px;
  }

  .score-value{
    position:relative;
    color:#e6ab28;
    font:700 14px/1 "Courier New",monospace;
    text-align:right;
    letter-spacing:.2px;
    text-shadow:0 0 5px rgba(238,167,34,.36);
  }

  .score-value small{
    margin-left:2px;
    color:#8d6b28;
    font:700 6px Arial;
    text-shadow:none;
  }

  .score-value.live{
    color:#f2c45b;
  }

  .scorebox.finished .score-value{
    color:#ffd76c;
    text-shadow:0 0 7px rgba(255,191,49,.52);
  }

  .scorebox.redlight .score-value.rt{
    color:#ff3b32;
    text-shadow:0 0 7px rgba(255,40,32,.62);
  }

  /* prestage labels */
  .prestages{position:absolute;left:323px;top:2px;width:221px;height:79px;display:flex;justify-content:space-between;pointer-events:none}
  .stagebox{width:78px;text-align:center}
  .stagebox .lbl{height:14px;color:#d23038;background:#ececec;font:bold 8px Arial;border-bottom:1px solid #bbb}
  .stagebox .lampbox{height:24px;background:#404b4d;border-bottom:1px solid #b8d1d4;display:flex;justify-content:center;gap:3px;padding-top:4px}
  .stagebox .lampbox i{width:13px;height:13px;border-radius:50%;background:#bcb99d}
  .stagebox .lampbox.on i{background:#fff8bb;box-shadow:0 0 10px #fff66b}

  /* tree */
  .tree{
    position:absolute;left:414px;top:25px;width:48px;height:137px;z-index:6;
    display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:24px;gap:2px 6px;
  }
  .light{
    width:20px;height:20px;border-radius:50%;border:3px solid #303030;
    background:radial-gradient(circle at 38% 34%,#555,#1c1c1c 70%);
    box-shadow:0 1px 2px #000;
  }
  .light.amber.on{background:radial-gradient(circle at 38% 34%,#ffe261,#b17800 70%);box-shadow:0 0 10px #ffb600}
  .light.green.on{background:radial-gradient(circle at 38% 34%,#66ff74,#00810e 70%);box-shadow:0 0 12px #24ff40}
  .light.red.on{background:radial-gradient(circle at 38% 34%,#ff6c72,#a80000 70%);box-shadow:0 0 12px #ff1c25}

  .stage-arrow{
    position:absolute;left:399px;top:151px;width:80px;height:73px;z-index:5;text-align:center;
  }
  .arrowshape{
    width:50px;height:34px;margin:auto;background:#ffd000;
    clip-path:polygon(50% 0,100% 50%,67% 50%,67% 100%,33% 100%,33% 50%,0 50%);
    filter:drop-shadow(0 2px 1px #7f6100);
  }
  .stage-text{font:900 27px Impact,Arial Black,sans-serif;color:#2fff00;text-shadow:2px 2px #1b5300;margin-top:1px}

  /* lower dash */
  .dash{
    position:absolute;left:92px;right:92px;bottom:0;height:206px;z-index:25;
    background:none;
    clip-path:none;
    border-top:0;
    box-shadow:none;
    overflow:visible;
  }

  /* Grey top lip / bevel, matching the original game's 3D dashboard cap. */
  .dash:before{
    content:"";position:absolute;left:-44px;right:-44px;top:54px;height:18px;z-index:2;
    background:
      linear-gradient(180deg,#f1f3f5 0%,#c8ced3 18%,#8c969d 48%,#657078 52%,#32383d 100%);
    border-top:1px solid rgba(255,255,255,.80);
    border-bottom:1px solid rgba(0,0,0,.70);
    border-radius:380px 380px 28px 28px / 26px 26px 12px 12px;
    box-shadow:
      0 -1px 0 rgba(255,255,255,.25),
      0 2px 5px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.60);
    pointer-events:none;
  }

  /* Main rounded dash shell. */
  .dash:after{
    content:"";position:absolute;left:-58px;right:-58px;top:66px;bottom:0;z-index:0;
    background:
      radial-gradient(ellipse at 50% 2%,rgba(255,255,255,.18) 0 10%,transparent 20%),
      radial-gradient(ellipse at 50% 0%,#5a6268 0 8%,#343c41 17%,#171c1f 34%,#0a0d10 57%,#040607 82%),
      linear-gradient(180deg,#20272b,#050708);
    border-radius:420px 420px 22px 22px / 150px 150px 20px 20px;
    box-shadow:
      0 -10px 18px rgba(0,0,0,.32),
      0 18px 30px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.05),
      inset 0 -40px 60px rgba(0,0,0,.42);
    pointer-events:none;
  }

  .gauge{
    position:absolute;border-radius:50%;color:white;overflow:visible;
    background:
      radial-gradient(circle at 36% 27%,rgba(255,255,255,.17) 0 7%,rgba(255,255,255,.04) 19%,transparent 31%),
      radial-gradient(circle at 50% 53%,#080b0e 0 46%,#0d1115 47% 54%,#161b20 55% 59%,#050709 60% 100%);
    border:1px solid #050608;
    box-shadow:
      0 0 0 2px #242a2f,
      0 0 0 4px #c9ced1,
      0 0 0 6px #525a60,
      0 0 0 8px #171b1f,
      0 9px 18px rgba(0,0,0,.92),
      inset 0 0 0 2px rgba(255,255,255,.06),
      inset 0 0 22px rgba(0,0,0,.95);
    text-shadow:0 1px 2px #000;
  }

  .gauge:before{
    content:"";position:absolute;inset:6px;border-radius:50%;z-index:1;pointer-events:none;
    background:
      linear-gradient(145deg,rgba(255,255,255,.16) 0 8%,rgba(255,255,255,.035) 15%,transparent 32% 68%,rgba(90,145,190,.04) 83%,transparent 100%);
    box-shadow:
      inset 0 0 0 1px rgba(230,240,248,.07),
      inset 0 9px 15px rgba(255,255,255,.018),
      inset 0 -15px 22px rgba(0,0,0,.58);
  }

  .gauge:after{
    content:"";position:absolute;left:15%;right:15%;top:8%;height:29%;z-index:9;pointer-events:none;
    border-radius:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0));
    filter:blur(.2px);
  }

  .gauge.boost{left:118px;top:74px;width:92px;height:92px;z-index:4}
  .gauge.rpm{left:225px;top:26px;width:142px;height:142px;z-index:5}
  .gauge.mph{left:373px;top:28px;width:140px;height:140px;z-index:5}

  
  .tick{
    position:absolute;left:50%;top:50%;width:2px;height:8px;
    background:linear-gradient(180deg,#fff,#9ea8af);
    transform-origin:0 0;z-index:4;border-radius:1px;
    box-shadow:0 0 2px rgba(255,255,255,.35);
  }
  .tick.big{
    height:13px;width:3px;background:linear-gradient(180deg,#fff,#d8dfe3);
    box-shadow:0 0 3px rgba(255,255,255,.55);
  }
  .gauge.rpm .tick.redline{
    background:linear-gradient(180deg,#ff9c8f,#ff2b1c 45%,#9d0800);
    box-shadow:0 0 4px rgba(255,47,31,.95),0 0 8px rgba(255,30,18,.42);
  }

  .needle{
    position:absolute;left:50%;top:50%;width:42%;height:7px;
    transform-origin:0 50%;z-index:8;
    clip-path:polygon(0 21%,83% 5%,100% 50%,83% 95%,0 79%);
    background:
      linear-gradient(180deg,#fff4ef 0 7%,#ff7b56 10%,#f23818 46%,#a91305 70%,#4f0802 100%);
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(255,67,35,.45));
  }
  .needle:before{
    content:"";position:absolute;left:-10px;top:-7px;width:20px;height:20px;border-radius:50%;
    background:
      radial-gradient(circle at 36% 28%,#fff 0 5%,#dfe5e8 6% 17%,#626a70 18% 32%,#1b2024 33% 52%,#090b0d 53% 100%);
    box-shadow:0 2px 4px #000,0 0 0 2px #060708,0 0 0 3px rgba(255,255,255,.18);
  }
  .needle:after{
    content:"";position:absolute;left:-5px;top:-2px;width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#ffad90,#ed3d20 44%,#7a0e04 80%);
    box-shadow:0 0 5px rgba(255,61,27,.65);
  }
  .needle.boostN{transform:rotate(145deg)}
  .needle.rpmN{width:39%;transform:rotate(150deg)}
  .needle.mphN{width:39%;transform:rotate(145deg)}

  .g-title{
    position:absolute;left:0;right:0;bottom:17px;text-align:center;z-index:5;
    font:900 10px Arial;color:#e8edf0;letter-spacing:.9px;
    text-shadow:0 1px 1px #000,0 0 4px rgba(160,205,240,.14);
  }
  .g-sub{
    position:absolute;left:0;right:0;bottom:7px;text-align:center;z-index:5;
    font:700 7px Arial;color:#8f9ba3;letter-spacing:.6px;
  }

  .rpm-numbers,.mph-numbers,.boost-numbers{
    position:absolute;inset:0;z-index:5;font:800 12px Arial;color:#f1f4f6;
  }
  .rpm-numbers span,.mph-numbers span,.boost-numbers span{
    position:absolute;transform:translate(-50%,-50%);
    text-shadow:0 1px 2px #000,0 0 3px rgba(255,255,255,.16);
  }
  .gauge.rpm .rpm-numbers span:nth-last-child(-n+3){
    color:#ff5d4e;
    text-shadow:0 0 4px rgba(255,37,22,.75),0 1px 2px #000;
  }

  .g-readout{
    position:absolute;z-index:6;left:50%;bottom:29px;transform:translateX(-50%);
    min-width:42px;height:14px;padding:0 4px;border-radius:2px;
    background:linear-gradient(180deg,#06090b,#10161a);
    border:1px solid #343e44;
    box-shadow:inset 0 1px 3px #000,0 1px 0 rgba(255,255,255,.06);
    font:800 9px/14px "Courier New",monospace;text-align:center;letter-spacing:.5px;
    color:#bde9ff;text-shadow:0 0 4px rgba(84,195,255,.58);
  }
  .gauge.rpm .g-readout{
    color:#ffd5a4;text-shadow:0 0 4px rgba(255,141,52,.55);
  }

  .shift-lights{
    position:absolute;left:50%;top:31px;transform:translateX(-50%);z-index:7;
    display:flex;gap:3px;pointer-events:none;
  }
  .shift-lights i{
    width:8px;height:8px;border-radius:50%;display:block;
    background:radial-gradient(circle at 35% 28%,#5b5b5b,#17191a 62%,#050606 100%);
    border:1px solid #34383a;
    box-shadow:inset 0 -1px 2px #000;
  }
  .shift-lights i.on.green{
    background:radial-gradient(circle at 35% 28%,#e5ffd8,#65ff4b 34%,#0d8c16 70%,#043309);
    box-shadow:0 0 5px #4dff36,0 0 9px rgba(69,255,41,.45);
  }
  .shift-lights i.on.amber{
    background:radial-gradient(circle at 35% 28%,#fff2bd,#ffc434 34%,#a55e00 70%,#3c1a00);
    box-shadow:0 0 5px #ffbd2c,0 0 9px rgba(255,180,24,.45);
  }
  .shift-lights i.on.red{
    background:radial-gradient(circle at 35% 28%,#ffe0d8,#ff513a 34%,#af0d05 70%,#460400);
    box-shadow:0 0 6px #ff2f1f,0 0 11px rgba(255,34,18,.62);
  }
  .gauge.rpm.shift-ready{
    box-shadow:
      0 0 0 2px #242a2f,
      0 0 0 4px #c9ced1,
      0 0 0 6px #525a60,
      0 0 0 8px #171b1f,
      0 0 13px rgba(255,35,20,.28),
      0 9px 18px rgba(0,0,0,.92),
      inset 0 0 22px rgba(0,0,0,.95);
  }


  .pedalbox{
    position:absolute;left:536px;top:66px;width:110px;height:94px;border-left:0;
    display:flex;gap:15px;align-items:center;justify-content:center;
    z-index:20;pointer-events:auto;
  }
  .pedal-wrap{height:88px;display:flex;align-items:center;gap:5px}
  .pedal{
    width:18px;height:80px;border-radius:10px;background:#171717;border:2px solid #8b8b8b;
    position:relative;overflow:visible;touch-action:none;cursor:ns-resize;
    box-shadow:inset 0 0 5px #000;
  }
  .pedal-fill{
    position:absolute;left:3px;right:3px;bottom:3px;height:0%;
    border-radius:8px;background:linear-gradient(#2d9d37,#5fff54);
    box-shadow:0 0 5px #00ff2a;pointer-events:none;
  }
  .gas-knob{
    position:absolute;left:50%;bottom:3px;transform:translate(-50%,50%);
    width:17px;height:17px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#afffae 0 15%,#25e339 38%,#087315 78%,#033607 100%);
    border:2px solid #c5c5c5;box-shadow:0 0 7px #19ff38,0 1px 2px #000;
    z-index:3;pointer-events:none;
  }
  .pedal-label{writing-mode:vertical-rl;transform:rotate(180deg);font:bold 11px Arial;color:#cfcfcf;letter-spacing:1px}
  
  .clutch-slot.braking{border-color:#d7d7d7;box-shadow:inset 0 0 5px #000,0 0 7px rgba(255,55,30,.75)}
  
  .clutch-label{writing-mode:vertical-rl;transform:rotate(180deg);font:bold 10px Arial;color:#bdbdbd;margin-left:4px}

  .gearbox{
    position:absolute;right:18px;top:66px;width:30px;height:114px;z-index:20;
    display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  }
  .gear{
    width:24px;height:13px;border-radius:4px;background:linear-gradient(#8c8c8c,#454545);
    color:#fff;font:bold 11px/13px Arial;text-align:center;text-shadow:0 1px #111;
    box-shadow:inset 0 1px #d8d8d8;
  }
  .gear.active{background:linear-gradient(#f3391f,#c30b00);box-shadow:0 0 6px #ff5a35,inset 0 1px #ffad94}

  /* gfx button */
  .gfx{
    position:absolute;left:58px;top:296px;width:101px;height:38px;z-index:12;
    background:linear-gradient(#4f7f81,#285158);border:2px solid #e4bc22;border-radius:3px;
    color:white;font:bold 11px Arial;text-align:center;padding:5px 3px 0 30px;
    box-shadow:0 2px 4px #000;cursor:pointer;
  }
  .gfx:before{
    content:"";position:absolute;left:6px;top:3px;width:22px;height:22px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff2a0,#e5b405 42%,#7a4c00 72%,#120b00);
    box-shadow:0 0 0 2px #2e2104;
  }


  /* Neon showroom / loading-car-select screen.
     Inspired by the visual ideas in Domenicobrz's R3F car-show demo,
     but implemented here directly in vanilla Three.js so the racing game
     does not need to be rewritten around React. */
  #showroomOverlay{
    position:absolute;left:0;right:0;top:105px;bottom:49px;z-index:60;
    overflow:hidden;background:#030407;
    opacity:1;visibility:visible;
  }
  /* Opens instantly (a fade-in let the 3D track behind it flash through); still fades out when you go race. */
  #showroomOverlay.closed{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .42s ease,visibility .42s ease}
  
  
  .showroom-head{
    position:absolute;left:24px;top:20px;z-index:5;width:250px;
    text-shadow:0 2px 8px #000;
  }
  
  
  
  
  .showroom-card .label{color:#6d879c;font:700 7px Arial;letter-spacing:1.8px}
  
  
  
  
  
  
  
  
  .paint-swatch.active:after{
    content:"";position:absolute;inset:-5px;border:1px solid #fff;border-radius:50%
  }
  .paint-swatch.yellow{background:#f0cd00}
  .paint-swatch.red{background:#c63232}
  .paint-swatch.blue{background:#196ee8}
  .paint-swatch.black{background:#171b20}
  
  
  
  
  
  
  .showroom-loading.done{opacity:0;pointer-events:none}
  
  
  .showroom-progress{
    width:180px;height:3px;background:rgba(255,255,255,.13);margin-top:9px;overflow:hidden
  }
  .showroom-progress i{
    display:block;width:0;height:100%;background:#2ca8ff;box-shadow:0 0 8px #2ca8ff;
    transition:width .12s linear
  }
  

  /* bottom status */
  .status{
    position:absolute;left:0;bottom:0;width:100%;height:49px;background:
      repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
      linear-gradient(#17242a,#091014);
    border-top:5px solid #e1b300;box-shadow:0 -2px 0 #050505;
    display:flex;align-items:center;z-index:20;font-size:12px;
  }
  .selected-label{color:#e0d71b;font-weight:bold;margin-left:19px}
  
  
  
  .car-name{font-weight:bold;color:#ddd;margin-left:4px}
  .edit{margin-left:auto;margin-right:85px;color:#ddd;font-weight:bold}
  .edit:before{content:"●";color:#daa612;margin-right:6px}
  .challenge{position:absolute;right:12px;color:#ddd}
  .challenge:before{content:"●";color:#692c32;margin-right:8px}

  /* tiny status display for prototype behavior */
  #msg{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:394px;
    z-index:18;
    max-width:610px;
    padding:3px 9px 2px;
    border-radius:2px;
    background:rgba(0,0,0,.58);
    border-top:1px solid rgba(255,255,255,.08);
    font:bold 10px Arial;
    color:#ffe700;
    text-align:center;
    text-shadow:1px 1px #000;
    pointer-events:none;
    white-space:nowrap;
  }
  .hidden{display:none!important}

  /* =========================================================
     MOBILE RACE UI — purpose-built rather than scaled desktop
     ========================================================= */
  .mobile-topbar,.mobile-nav-drawer,.mobile-race-hud,.mobile-control-deck{display:none}

  body.mobile-layout{
    display:block;
    background:#020408;
    overscroll-behavior:none;
    touch-action:manipulation;
  }
  body.mobile-layout #fit{
    width:100%;
    height:100%;
    transform:none !important;
  }
  body.mobile-layout #game{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    border:0;
    box-shadow:none;
    background:#030609;
    overflow:hidden;
  }

  body.mobile-layout .menu,
  body.mobile-layout .brandbar,
  body.mobile-layout .header-divider,
  body.mobile-layout .status,
  body.mobile-layout .racer-panel,
  body.mobile-layout .goldside,
  body.mobile-layout .prestages,
  body.mobile-layout .stage-arrow,
  body.mobile-layout .gfx,
  body.mobile-layout .dash{
    display:none !important;
  }

  body.mobile-layout .mobile-topbar{
    display:flex;
    position:absolute;
    left:0;right:0;top:0;
    height:48px;
    z-index:90;
    align-items:center;
    padding:0 max(11px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-left));
    background:
      linear-gradient(180deg,rgba(244,248,250,.98) 0%,rgba(186,198,205,.98) 47%,rgba(91,106,115,.99) 49%,rgba(126,140,148,.99) 100%);
    border-bottom:2px solid #11171b;
    box-shadow:0 3px 0 #d29a00,0 5px 12px rgba(0,0,0,.72);
    color:#080b0d;
  }
  .mobile-brand{
    display:flex;align-items:baseline;gap:7px;min-width:0;
    text-shadow:0 1px rgba(255,255,255,.82);
  }
  .mobile-brand>b{
    font:italic 900 17px/1 Arial Black,Arial;
    letter-spacing:-1px;
  }
  .mobile-brand>span{
    font:900 14px/1 Arial Black,Arial;
    letter-spacing:-.8px;
  }
  .mobile-brand em{
    display:inline;
    color:#805300;
    font-style:normal;font-size:8px;letter-spacing:.4px;
  }
  .mobile-top-gear{
    margin-left:auto;
    margin-right:11px;
    padding:4px 8px;
    border-radius:2px;
    background:linear-gradient(#101619,#020405);
    border:1px solid #77858d;
    box-shadow:inset 0 0 6px #000,0 1px rgba(255,255,255,.42);
    color:#8a9aa3;font:700 7px Arial;letter-spacing:.8px;
  }
  .mobile-top-gear strong{
    color:#ffd84d;font:900 16px/1 Arial;margin-left:4px;text-shadow:0 0 5px rgba(255,198,29,.35);
  }
  .mobile-menu-button{
    width:38px;height:34px;padding:0;
    border:1px solid #47545c;border-radius:3px;
    background:linear-gradient(#f6f8f9,#8d9ba3);
    box-shadow:inset 0 1px #fff,0 1px 2px #20282d;
    color:#101519;font:900 20px/30px Arial;
  }

  body.mobile-layout .mobile-nav-drawer{
    display:flex;
    position:absolute;z-index:120;
    right:8px;top:52px;width:min(280px,calc(100% - 16px));
    max-height:calc(100% - 62px);
    flex-direction:column;
    padding:7px;
    background:linear-gradient(145deg,#141b20,#050708 72%);
    border:1px solid #667680;
    border-top:3px solid #d5a200;
    box-shadow:0 18px 45px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.07);
    transform:translateX(calc(100% + 18px));
    opacity:0;
    pointer-events:none;
    transition:transform .18s ease,opacity .18s ease;
  }
  body.mobile-layout .mobile-nav-drawer.open{
    transform:translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  .mobile-nav-head{
    display:flex;align-items:center;height:38px;
    padding:0 4px 6px 8px;border-bottom:1px solid rgba(255,255,255,.08);
    color:#e9eef1;font:900 12px Arial;letter-spacing:1px;
  }
  .mobile-nav-head button{
    margin-left:auto;width:34px;height:32px;border:0;background:#171d21;color:#fff;font:22px Arial;
  }
  .mobile-nav-drawer>button{
    height:42px;text-align:left;padding:0 13px;
    border:0;border-bottom:1px solid rgba(255,255,255,.06);
    background:transparent;color:#dbe4e9;
    font:900 10px Arial;letter-spacing:.55px;
  }
  .mobile-nav-drawer>button:active{background:#202b32;color:#ffcf35}

  body.mobile-layout .scene{
    left:0;right:0;top:48px;bottom:0;
    width:100%;height:auto;
    background:#030609;
    overflow:hidden;
  }
  body.mobile-layout .track-wrap{
    left:0;right:0;top:0;
    width:100%;
    height:54%;
    border:0;
    border-bottom:2px solid #765000;
    box-shadow:0 5px 18px rgba(0,0,0,.85);
  }
  body.mobile-layout #threeCanvas{width:100%;height:100%}
  body.mobile-layout .webgl-badge{right:7px;bottom:6px;opacity:.55}

  body.mobile-layout .tree{
    left:auto;right:8px;top:50px;
    transform:scale(.70);
    transform-origin:top right;
    z-index:15;
    filter:drop-shadow(0 3px 4px #000);
  }
  body.mobile-layout .meter-strip{
    left:9px;top:50px;width:23px;height:190px;z-index:15;
    opacity:.88;
  }
  body.mobile-layout .race-map:after{font-size:5px}
  body.mobile-layout #msg{display:none}

  body.mobile-layout .mobile-race-hud{
    display:block;
    position:absolute;
    z-index:22;
    left:8px;right:8px;
    top:calc(54% - 74px);
    height:70px;
    pointer-events:none;
  }

  .mobile-stage-card{
    position:absolute;left:0;bottom:0;height:62px;width:118px;
    display:grid;grid-template-columns:42px 42px;grid-template-rows:38px 20px;
    gap:1px 4px;padding:5px 6px 4px;
    background:linear-gradient(145deg,rgba(12,18,22,.92),rgba(2,4,6,.92));
    border:1px solid rgba(154,177,190,.42);
    box-shadow:0 5px 13px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.08);
  }
  .mobile-stage-item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:#8798a1;font:800 6px Arial;letter-spacing:.7px;
  }
  .mobile-stage-item i{
    width:17px;height:17px;border-radius:50%;
    background:radial-gradient(circle at 36% 30%,#606060,#17191a 66%,#060707);
    border:2px solid #3b4144;
    box-shadow:inset 0 -2px 4px #000;
  }
  .mobile-stage-item i.on{
    background:radial-gradient(circle at 35% 30%,#fffde2 0 15%,#fff17c 24%,#c9a800 67%,#493700 100%);
    box-shadow:0 0 8px #ffe65a,0 0 14px rgba(255,226,67,.36);
  }
  .mobile-stage-message{
    grid-column:1/3;align-self:end;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    color:#ffd537;font:900 7px/18px Arial;text-align:center;letter-spacing:.4px;
  }

  .mobile-rpm-card{
    position:absolute;left:126px;right:109px;bottom:0;height:62px;
    padding:7px 9px 6px;
    background:linear-gradient(145deg,rgba(12,17,21,.93),rgba(2,4,5,.94));
    border:1px solid rgba(129,148,158,.38);
    box-shadow:0 5px 13px rgba(0,0,0,.60),inset 0 1px rgba(255,255,255,.065);
  }
  .mobile-rpm-top{
    display:flex;justify-content:space-between;align-items:baseline;
    color:#7e8f98;font:800 7px Arial;letter-spacing:1px;
  }
  .mobile-rpm-top strong{
    color:#f4e3b0;font:900 13px/1 "Courier New",monospace;
    text-shadow:0 0 5px rgba(255,188,83,.32);
  }
  .mobile-rpm-track{
    position:relative;height:9px;margin-top:5px;overflow:hidden;
    background:linear-gradient(#020303,#111618);
    border:1px solid #313b40;border-radius:1px;
    box-shadow:inset 0 1px 4px #000;
  }
  .mobile-rpm-track>i{
    position:absolute;left:0;top:0;bottom:0;width:0%;
    background:linear-gradient(90deg,#36cd36 0 55%,#e8b424 72%,#ef3c24 100%);
    box-shadow:0 0 7px rgba(70,222,63,.25);
  }
  .mobile-red-zone{
    position:absolute;right:0;top:0;bottom:0;width:18%;
    border-left:1px solid rgba(255,75,48,.85);
    background:repeating-linear-gradient(135deg,rgba(255,46,28,.13) 0 3px,transparent 3px 6px);
  }
  .mobile-shift-lamps{
    display:flex;gap:4px;justify-content:center;margin-top:6px;
  }
  .mobile-shift-lamps i{
    width:7px;height:7px;border-radius:50%;
    background:#191d1f;border:1px solid #394145;
  }
  .mobile-shift-lamps i.on.green{background:#57ff3d;box-shadow:0 0 6px #47ff2f}
  .mobile-shift-lamps i.on.amber{background:#ffc235;box-shadow:0 0 6px #ffb01e}
  .mobile-shift-lamps i.on.red{background:#ff4933;box-shadow:0 0 7px #ff2b18}
  .mobile-rpm-card.shift-ready{
    border-color:rgba(255,64,41,.72);
    box-shadow:0 0 10px rgba(255,48,29,.28),0 5px 13px rgba(0,0,0,.60);
  }

  .mobile-speed-card{
    position:absolute;right:0;bottom:0;width:101px;height:62px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,rgba(13,19,23,.95),rgba(2,4,5,.96));
    border:1px solid rgba(129,148,158,.40);
    box-shadow:0 5px 13px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.06);
  }
  .mobile-speed-card strong{
    color:#f4f7f8;font:italic 900 29px/1 Arial Black,Arial;
    letter-spacing:-2px;text-shadow:0 2px 2px #000;
  }
  .mobile-speed-card span{
    align-self:flex-end;margin:0 0 8px 4px;
    color:#8899a2;font:800 7px Arial;
  }

  .mobile-gear-card{
    display:none;
    position:absolute;
  }
  .mobile-time-card{
    position:absolute;right:0;top:-22px;height:18px;
    display:flex;gap:9px;align-items:center;
    padding:0 6px;background:rgba(0,0,0,.67);
    border-top:1px solid rgba(255,255,255,.08);
    color:#83939b;font:700 6px Arial;letter-spacing:.4px;
  }
  .mobile-time-card b{
    color:#ffd35a;font:800 8px "Courier New",monospace;margin-left:2px;
  }

  body.mobile-layout .mobile-control-deck{
    display:block;
    position:absolute;z-index:28;
    left:0;right:0;bottom:0;
    height:40%;
    min-height:210px;
    padding-bottom:max(8px,env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg,rgba(9,14,18,.98),#020405 42%),
      repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.018) 31px 32px);
    border-top:2px solid #9f7200;
    box-shadow:0 -5px 18px rgba(0,0,0,.82),inset 0 1px rgba(255,255,255,.055);
  }
  .mobile-control-head{
    position:absolute;left:8px;right:8px;top:7px;height:32px;
    display:grid;grid-template-columns:68px 1fr 43px;gap:6px;align-items:center;
  }
  .mobile-reset{
    height:28px;border:1px solid #4d5a61;border-radius:3px;
    background:linear-gradient(#222a2f,#090d0f);color:#aebbc2;
    font:800 7px Arial;letter-spacing:.4px;
  }
  #mobileInstruction{
    min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    text-align:center;color:#ffd239;font:900 8px Arial;letter-spacing:.4px;
  }
  #mobileThrottleReadout{
    text-align:right;color:#6eb8e8;font:900 10px "Courier New",monospace;
  }

  .mobile-brake-pad{
    position:absolute;
    left:12px;bottom:max(12px,env(safe-area-inset-bottom));
    width:31%;max-width:138px;height:128px;
    border:1px solid #646d72;border-radius:8px;
    touch-action:none;user-select:none;-webkit-user-select:none;
    background:
      repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 5px,transparent 5px 11px),
      linear-gradient(#3b4246,#171b1e 62%,#090b0c);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.18),
      inset 0 -8px 18px rgba(0,0,0,.52),
      0 7px 15px rgba(0,0,0,.6);
    color:#e4e7e8;
  }
  .mobile-brake-pad span{
    display:block;font:900 17px Arial Black,Arial;letter-spacing:.5px;
  }
  .mobile-brake-pad small{
    display:block;margin-top:5px;color:#8c999f;font:800 7px Arial;letter-spacing:1px;
  }
  .mobile-brake-pad.braking{
    transform:translateY(3px);
    border-color:#e34d3f;
    background:
      repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 5px,transparent 5px 11px),
      linear-gradient(#512721,#1c0c0a 67%,#090403);
    box-shadow:inset 0 4px 12px rgba(0,0,0,.7),0 0 10px rgba(255,51,32,.20);
    color:#ff8c7f;
  }

  .mobile-shift-stack{
    position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    width:112px;height:145px;
    display:grid;grid-template-rows:52px 35px 52px;gap:3px;
  }
  .mobile-shift{
    border:1px solid #59676f;border-radius:5px;
    background:linear-gradient(#263139,#090d10 70%);
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 8px rgba(0,0,0,.52);
    color:#d9e2e6;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .mobile-shift:active{transform:translateY(2px);filter:brightness(1.22)}
  .mobile-shift span{font:900 7px Arial;letter-spacing:1.1px;margin-right:5px;color:#84969f}
  .mobile-shift b{font:900 24px/1 Arial;color:#f7c835}
  .mobile-shift.down b{color:#85a8be}
  .mobile-shift-gear{
    display:grid;place-items:center;
    background:#010303;border:1px solid #2c3b42;border-radius:3px;
    box-shadow:inset 0 0 9px #000;
    color:#ffe04e;font:900 23px/1 Arial;text-shadow:0 0 7px rgba(255,197,25,.32);
  }

  .mobile-gas-wrap{
    position:absolute;
    right:11px;bottom:max(10px,env(safe-area-inset-bottom));
    width:31%;max-width:142px;height:154px;
  }
  .mobile-gas-label{
    position:absolute;left:0;right:0;top:0;height:24px;
    display:flex;align-items:baseline;justify-content:center;gap:6px;
    color:#dfe9ed;
  }
  .mobile-gas-label span{font:900 15px Arial Black,Arial}
  .mobile-gas-label small{font:800 6px Arial;color:#718a98;letter-spacing:1px}
  .mobile-gas{
    position:absolute;left:50%;top:25px;bottom:0;width:78px;transform:translateX(-50%);
    border:1px solid #53636b;border-radius:9px;
    overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
    background:
      linear-gradient(90deg,rgba(255,255,255,.025),transparent 30% 70%,rgba(255,255,255,.025)),
      linear-gradient(#0c1114,#030506);
    box-shadow:inset 0 0 12px #000,0 5px 12px rgba(0,0,0,.60);
  }
  .mobile-gas-fill{
    position:absolute;left:5px;right:5px;bottom:5px;height:0%;
    border-radius:5px;
    background:linear-gradient(0deg,#096c2c,#20c15a 55%,#8cff72);
    box-shadow:0 0 10px rgba(47,255,101,.26),inset 0 1px rgba(255,255,255,.35);
  }
  .mobile-gas-thumb{
    position:absolute;left:4px;right:4px;bottom:4px;height:24px;
    border-radius:5px;
    background:
      repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.24) 4px 5px),
      linear-gradient(#d5dade,#69747b);
    border:1px solid #e0e5e7;
    box-shadow:0 3px 7px #000,inset 0 1px #fff;
    transform:translateY(0);
  }
  .mobile-gas-thumb i{
    position:absolute;left:50%;top:50%;width:28px;height:2px;transform:translate(-50%,-50%);
    background:#263137;box-shadow:0 -5px #263137,0 5px #263137;
  }
  .mobile-gas-scale{
    position:absolute;right:5px;top:8px;bottom:8px;width:5px;pointer-events:none;
    display:flex;flex-direction:column;justify-content:space-between;
  }
  .mobile-gas-scale i{display:block;height:1px;background:rgba(255,255,255,.34)}

  /* Portrait phone */
  body.mobile-layout.mobile-portrait #showroomOverlay{
    top:48px;bottom:0;
  }
  body.mobile-layout.mobile-portrait .showroom-head{
    left:14px;right:14px;top:13px;width:auto;
  }
  body.mobile-layout.mobile-portrait .showroom-title{font-size:23px}
  body.mobile-layout.mobile-portrait .showroom-sub{font-size:9px;max-width:230px}
  body.mobile-layout.mobile-portrait .showroom-card{
    left:12px;right:12px;top:auto;bottom:73px;width:auto;
    display:grid;grid-template-columns:1fr auto;column-gap:12px;
    padding:10px 12px;
  }
  body.mobile-layout.mobile-portrait .showroom-car-name{font-size:15px;margin-bottom:5px}
  body.mobile-layout.mobile-portrait .showroom-stats{
    grid-column:1/3;
    grid-template-columns:repeat(4,1fr);
    gap:4px;padding-top:6px;margin-top:2px;
  }
  body.mobile-layout.mobile-portrait .paint-row{
    grid-column:2;grid-row:1/3;margin:0;align-self:start;
  }
  body.mobile-layout.mobile-portrait .paint-swatches{gap:6px}
  body.mobile-layout.mobile-portrait .paint-swatch{width:24px;height:24px}
  body.mobile-layout.mobile-portrait .showroom-bottom{
    height:66px;padding:0 12px;
  }
  body.mobile-layout.mobile-portrait .showroom-hint{display:none}
  body.mobile-layout.mobile-portrait .showroom-enter{
    width:100%;height:44px;margin:0;font-size:11px;
  }
  body.mobile-layout.mobile-portrait .showroom-credit{display:none}

  /* Landscape phone: race scene fills nearly the whole screen, controls float. */
  body.mobile-layout.mobile-landscape .mobile-topbar{
    height:38px;
  }
  body.mobile-layout.mobile-landscape .mobile-brand>b{font-size:14px}
  body.mobile-layout.mobile-landscape .mobile-brand>span{font-size:11px}
  body.mobile-layout.mobile-landscape .mobile-menu-button{height:29px;width:34px;font-size:17px;line-height:25px}
  body.mobile-layout.mobile-landscape .mobile-top-gear{padding:2px 6px}
  body.mobile-layout.mobile-landscape .mobile-top-gear strong{font-size:13px}
  body.mobile-layout.mobile-landscape .scene{top:38px}
  body.mobile-layout.mobile-landscape .track-wrap{height:100%;border-bottom:0}
  body.mobile-layout.mobile-landscape .mobile-race-hud{
    top:6px;left:44px;right:58px;height:58px;
  }
  body.mobile-layout.mobile-landscape .mobile-stage-card{
    width:105px;height:53px;grid-template-columns:37px 37px;grid-template-rows:33px 15px;
    padding:3px 5px;
  }
  body.mobile-layout.mobile-landscape .mobile-stage-item i{width:14px;height:14px}
  body.mobile-layout.mobile-landscape .mobile-stage-message{font-size:6px;line-height:14px}
  body.mobile-layout.mobile-landscape .mobile-rpm-card{
    left:112px;right:102px;height:53px;padding:5px 8px;
  }
  body.mobile-layout.mobile-landscape .mobile-rpm-top strong{font-size:11px}
  body.mobile-layout.mobile-landscape .mobile-rpm-track{height:7px;margin-top:3px}
  body.mobile-layout.mobile-landscape .mobile-shift-lamps{margin-top:4px}
  body.mobile-layout.mobile-landscape .mobile-speed-card{height:53px;width:95px}
  body.mobile-layout.mobile-landscape .mobile-speed-card strong{font-size:25px}
  body.mobile-layout.mobile-landscape .mobile-time-card{top:55px;right:0}
  body.mobile-layout.mobile-landscape .meter-strip{
    top:70px;left:8px;height:122px;width:20px;
  }
  body.mobile-layout.mobile-landscape .tree{
    right:7px;top:62px;transform:scale(.55);
  }
  body.mobile-layout.mobile-landscape .mobile-control-deck{
    left:0;right:0;bottom:0;height:118px;min-height:0;
    background:linear-gradient(180deg,transparent,rgba(2,5,7,.78) 27%,rgba(2,5,7,.95));
    border-top:0;box-shadow:none;
    pointer-events:none;
  }
  body.mobile-layout.mobile-landscape .mobile-control-head{
    left:50%;right:auto;top:auto;bottom:4px;width:220px;height:23px;
    transform:translateX(-50%);
    grid-template-columns:52px 1fr 35px;
    pointer-events:auto;
  }
  body.mobile-layout.mobile-landscape .mobile-reset{height:22px;font-size:6px;background:rgba(8,12,14,.88)}
  body.mobile-layout.mobile-landscape #mobileInstruction{font-size:6px}
  body.mobile-layout.mobile-landscape #mobileThrottleReadout{font-size:8px}
  body.mobile-layout.mobile-landscape .mobile-brake-pad{
    pointer-events:auto;
    left:10px;bottom:8px;width:102px;height:78px;
    background:linear-gradient(rgba(59,66,70,.93),rgba(8,11,12,.95));
  }
  body.mobile-layout.mobile-landscape .mobile-brake-pad span{font-size:13px}
  body.mobile-layout.mobile-landscape .mobile-brake-pad small{font-size:6px}
  body.mobile-layout.mobile-landscape .mobile-shift-stack{
    pointer-events:auto;
    left:auto;right:114px;bottom:7px;transform:none;
    width:85px;height:92px;
    grid-template-rows:34px 22px 34px;
  }
  body.mobile-layout.mobile-landscape .mobile-shift b{font-size:18px}
  body.mobile-layout.mobile-landscape .mobile-shift span{font-size:5px}
  body.mobile-layout.mobile-landscape .mobile-shift-gear{font-size:16px}
  body.mobile-layout.mobile-landscape .mobile-gas-wrap{
    pointer-events:auto;
    right:8px;bottom:5px;width:102px;height:100px;
  }
  body.mobile-layout.mobile-landscape .mobile-gas-label{height:18px}
  body.mobile-layout.mobile-landscape .mobile-gas-label span{font-size:12px}
  body.mobile-layout.mobile-landscape .mobile-gas{top:18px;width:72px}
  body.mobile-layout.mobile-landscape .mobile-nav-drawer{top:42px}

  body.mobile-layout.mobile-landscape #showroomOverlay{top:38px;bottom:0}
  body.mobile-layout.mobile-landscape .showroom-head{left:14px;top:11px}
  body.mobile-layout.mobile-landscape .showroom-title{font-size:21px}
  body.mobile-layout.mobile-landscape .showroom-sub{display:none}
  body.mobile-layout.mobile-landscape .showroom-card{right:12px;top:10px;width:178px;padding:9px 10px}
  body.mobile-layout.mobile-landscape .showroom-stats{display:none}
  body.mobile-layout.mobile-landscape .paint-row{margin-top:7px}
  body.mobile-layout.mobile-landscape .paint-swatch{width:22px;height:22px}
  body.mobile-layout.mobile-landscape .showroom-bottom{height:52px;padding:0 12px}
  body.mobile-layout.mobile-landscape .showroom-hint{display:none}
  body.mobile-layout.mobile-landscape .showroom-enter{margin-left:auto;height:38px;padding:7px 17px}
  body.mobile-layout.mobile-landscape .showroom-credit{display:none}

  @media (max-width:360px){
    body.mobile-layout .mobile-rpm-card{left:116px;right:91px}
    body.mobile-layout .mobile-speed-card{width:84px}
    body.mobile-layout .mobile-speed-card strong{font-size:25px}
    body.mobile-layout .mobile-brake-pad{width:30%}
    body.mobile-layout .mobile-shift-stack{width:98px}
    body.mobile-layout .mobile-gas-wrap{width:29%}
  }

  body:not(.mobile-layout) .status{
    z-index:8;
    height:34px;
    border-top:1px solid #2d3337;
    box-shadow:inset 0 1px rgba(255,255,255,.04);
    background:
      linear-gradient(180deg,#0c1013,#020304 74%);
  }
  body:not(.mobile-layout) .status > *{
    visibility:visible;
  }

  /* =========================================================
     v25 DESKTOP DASH — reference-driven Nitto layout
     ========================================================= */
  body:not(.mobile-layout) .scene{
    height:438px;
  }

  body:not(.mobile-layout) .track-wrap{
    height:342px;
  }

  body:not(.mobile-layout) .dash{
    left:78px;
    right:70px;
    bottom:0;
    height:208px;
    z-index:25;
    overflow:visible;
    background:none;
    box-shadow:none;
  }

  /* Neutralize the older shell pseudo-elements. */
  body:not(.mobile-layout) .dash:before,
  body:not(.mobile-layout) .dash:after{
    content:none;
  }

  /* Broad rounded dashboard that rises behind the gauges like the original. */
  body:not(.mobile-layout) .dash-shell{
    position:absolute;
    left:-24px;
    right:-22px;
    top:42px;
    bottom:0;
    z-index:0;
    overflow:visible;
    border-radius:48% 48% 16px 16px / 42% 42% 12px 12px;
    background:
      radial-gradient(ellipse at 50% -4%,
        rgba(137,147,153,.72) 0%,
        rgba(81,91,98,.72) 16%,
        rgba(43,51,56,.94) 30%,
        rgba(19,24,28,.98) 49%,
        #080b0d 72%,
        #030405 100%);
    box-shadow:
      0 -9px 19px rgba(0,0,0,.33),
      0 12px 24px rgba(0,0,0,.60),
      inset 0 2px 0 rgba(255,255,255,.10),
      inset 0 -52px 72px rgba(0,0,0,.44);
    pointer-events:none;
  }

  /* The thick grey/chrome upper cap is curved, not a straight bar. */
  body:not(.mobile-layout) .dash-shell:before{
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    top:-8px;
    height:35px;
    border-radius:50% 50% 22px 22px / 100% 100% 40% 40%;
    background:
      linear-gradient(180deg,
        #f5f7f8 0%,
        #dfe3e5 13%,
        #aeb7bc 31%,
        #727d83 53%,
        #3f484d 71%,
        #171c1f 100%);
    border-top:1px solid rgba(255,255,255,.92);
    border-bottom:1px solid rgba(0,0,0,.72);
    box-shadow:
      0 2px 5px rgba(0,0,0,.52),
      inset 0 2px 1px rgba(255,255,255,.52),
      inset 0 -3px 4px rgba(0,0,0,.28);
  }

  /* Inner shadow below the lip gives the shell real depth. */
  body:not(.mobile-layout) .dash-shell:after{
    content:"";
    position:absolute;
    left:30px;
    right:30px;
    top:20px;
    height:26px;
    border-radius:50%;
    background:radial-gradient(ellipse at center,
      rgba(0,0,0,.48) 0%,
      rgba(0,0,0,.24) 48%,
      transparent 76%);
    filter:blur(2px);
  }

  /* Gauge chrome: thicker, less glossy, closer to the old Nitto cluster. */
  body:not(.mobile-layout) .gauge{
    border:2px solid #171a1c;
    background:
      radial-gradient(circle at 44% 42%,#12171a 0 45%,#090c0e 57%,#030405 78%,#010202 100%);
    box-shadow:
      0 0 0 2px #4b5155,
      0 0 0 5px #d4d8da,
      0 0 0 7px #70777b,
      0 0 0 9px #292e31,
      0 8px 13px rgba(0,0,0,.72),
      inset 0 0 0 2px rgba(255,255,255,.035),
      inset 0 0 18px rgba(0,0,0,.92);
  }

  body:not(.mobile-layout) .gauge:before{
    inset:7px;
    background:
      radial-gradient(circle at 40% 34%,rgba(255,255,255,.045),transparent 29%),
      radial-gradient(circle at 50% 58%,transparent 0 68%,rgba(0,0,0,.42) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(182,196,204,.10),
      inset 0 -12px 18px rgba(0,0,0,.52);
  }

  body:not(.mobile-layout) .gauge:after{
    left:18%;
    right:18%;
    top:7%;
    height:22%;
    opacity:.42;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0));
  }

  /* All instruments share the same bottom baseline, exactly like the reference. */
  body:not(.mobile-layout) .gauge.boost{
    left:111px;
    bottom:27px;
    top:auto;
    width:108px;
    height:108px;
    z-index:5;
  }
  body:not(.mobile-layout) .gauge.rpm{
    left:225px;
    bottom:27px;
    top:auto;
    width:158px;
    height:158px;
    z-index:6;
  }
  body:not(.mobile-layout) .gauge.mph{
    left:390px;
    bottom:27px;
    top:auto;
    width:154px;
    height:154px;
    z-index:6;
  }

  body:not(.mobile-layout) .rpm-numbers,
  body:not(.mobile-layout) .mph-numbers{
    font-size:11px;
    font-weight:900;
  }
  body:not(.mobile-layout) .boost-numbers{
    font-size:9px;
    font-weight:900;
  }

  body:not(.mobile-layout) .tick{
    width:2px;
    height:7px;
    background:#f5f5f1;
    box-shadow:0 0 2px rgba(255,255,255,.25);
  }
  body:not(.mobile-layout) .tick.big{
    width:3px;
    height:11px;
  }

  body:not(.mobile-layout) .needle{
    height:6px;
    background:linear-gradient(180deg,#ffb08f 0%,#f44725 25%,#db240e 62%,#7c0d04 100%);
    filter:drop-shadow(0 2px 1px #000) drop-shadow(0 0 2px rgba(255,55,28,.32));
  }

  /* Reference doesn't have large digital boxes inside the dials. */
  body:not(.mobile-layout) .g-readout{
    display:none;
  }

  body:not(.mobile-layout) .g-title{
    bottom:18px;
    font-size:10px;
    letter-spacing:.4px;
    color:#f1f1ec;
  }
  body:not(.mobile-layout) .g-sub{
    bottom:8px;
    font-size:6px;
    color:#8f9699;
  }
  body:not(.mobile-layout) .gauge.boost .g-title{
    bottom:16px;
    font-size:9px;
  }
  body:not(.mobile-layout) .gauge.boost .g-sub{
    bottom:7px;
    font-size:5px;
  }

  /* Keep the requested shift lamps, but make them look like tiny dash LEDs. */
  body:not(.mobile-layout) .shift-lights{
    top:42px;
    gap:4px;
  }
  body:not(.mobile-layout) .shift-lights i{
    width:6px;
    height:6px;
    border-color:#242829;
  }

  /* Pedal/control console integrated into the rounded dash. */
  body:not(.mobile-layout) .pedalbox{
    left:556px;
    top:auto;
    bottom:27px;
    width:123px;
    height:118px;
    gap:13px;
    padding:7px 8px 6px;
    box-sizing:border-box;
    border-left:0;
    border-radius:8px 8px 13px 13px;
    background:
      linear-gradient(180deg,#262d31 0%,#14191c 46%,#090c0e 100%);
    border:1px solid #30373b;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 0 14px rgba(0,0,0,.76),
      0 3px 8px rgba(0,0,0,.44);
    z-index:5;
  }
  body:not(.mobile-layout) .pedal-wrap{
    height:101px;
  }
  body:not(.mobile-layout) .pedal{
    width:20px;
    height:91px;
    background:#0b0e10;
    border-color:#737a7e;
  }
  body:not(.mobile-layout) .clutch-slot{
    width:22px;
    height:91px;
    background:#0b0e10;
    border-color:#737a7e;
  }
  body:not(.mobile-layout) .pedal-label,
  body:not(.mobile-layout) .clutch-label{
    font-size:9px;
    color:#d4d6d7;
  }

  body:not(.mobile-layout) .gearbox{
    right:7px;
    top:auto;
    bottom:27px;
    width:31px;
    height:127px;
    z-index:6;
  }
  body:not(.mobile-layout) .gear{
    width:25px;
    height:14px;
    font-size:11px;
    line-height:14px;
    border-radius:4px;
  }

  /* Reposition the graphic-settings card to the reference's lower-left zone. */
  body:not(.mobile-layout) .gfx{
    left:60px;
    top:280px;
    z-index:30;
  }

  /* Keep the footer thin and visually separate from the dashboard. */
  body:not(.mobile-layout) .status{
    height:34px;
    border-top:3px solid #111;
    box-shadow:inset 0 2px 0 #5d6366;
  }

  /* =========================================================
     v26 DESKTOP: extend the race scene under the timing panels
     ========================================================= */
  body:not(.mobile-layout) .scene{
    background:#04070a;
  }

  /* Remove the orange/gold underlay behind the timing panels. */
  body:not(.mobile-layout) .goldside{
    background:transparent;
    box-shadow:none;
  }

  /* Let the 3D race viewport run almost the full width of the scene so the
     side timing panels sit on top of the race world rather than a gold layer. */
  body:not(.mobile-layout) .track-wrap{
    left:67px;
    right:30px;
    width:auto;
    height:342px;
    z-index:1;
    border-left:2px solid #111;
    border-right:2px solid #111;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  }

  body:not(.mobile-layout) .racer-panel{
    z-index:6;
  }
  body:not(.mobile-layout) .meter-strip{
    z-index:7;
  }
  body:not(.mobile-layout) .gfx{
    z-index:30;
  }

  /* =========================================================
     v28 — gauges rebuilt directly from the uploaded inspiration
     ========================================================= */

  /* Use the conic tick ring from the inspiration. Hide only the generated
     minor DOM ticks on desktop; retain the longer major marks. */
  body:not(.mobile-layout) .gauge .tick:not(.big){
    display:none;
  }

  body:not(.mobile-layout) .gauge{
    overflow:visible;
    border:0;
    background:
      radial-gradient(circle at 50% 48%,#020304 0 56%,transparent 56.4%),
      repeating-conic-gradient(
        from -132deg,
        rgba(255,255,255,.92) 0deg 1.3deg,
        transparent 1.3deg 7.3deg
      ),
      conic-gradient(
        from -132deg,
        rgba(255,255,255,.95) 0 195deg,
        #ff2018 195deg 276deg,
        transparent 276deg 360deg
      );
    box-shadow:
      0 7px 13px rgba(0,0,0,.90),
      0 0 2px rgba(255,65,45,.30),
      inset 0 0 0 3px #111,
      inset 0 0 0 5px #7f858c,
      inset 0 0 0 7px #e6e8e9,
      inset 0 0 0 9px #3d4248,
      inset 0 0 0 10px #050607,
      inset 0 0 23px #000;
  }

  body:not(.mobile-layout) .gauge.mph{
    background:
      radial-gradient(circle at 50% 48%,#020304 0 56%,transparent 56.4%),
      repeating-conic-gradient(
        from -132deg,
        rgba(255,255,255,.90) 0deg 1.2deg,
        transparent 1.2deg 7.1deg
      ),
      conic-gradient(
        from -132deg,
        rgba(245,250,255,.95) 0 273deg,
        transparent 273deg 360deg
      );
    box-shadow:
      0 7px 13px rgba(0,0,0,.90),
      inset 0 0 0 3px #111,
      inset 0 0 0 5px #777e86,
      inset 0 0 0 7px #e8e8e8,
      inset 0 0 0 9px #41464c,
      inset 0 0 0 10px #050607,
      inset 0 0 23px #000,
      0 0 2px rgba(90,150,210,.22);
  }

  body:not(.mobile-layout) .gauge.boost{
    background:
      radial-gradient(circle at 50% 48%,#020304 0 55%,transparent 55.4%),
      repeating-conic-gradient(
        from -132deg,
        rgba(255,255,255,.85) 0deg 1.25deg,
        transparent 1.25deg 8.4deg
      ),
      conic-gradient(
        from -132deg,
        rgba(245,250,255,.92) 0 207deg,
        #ff2018 207deg 276deg,
        transparent 276deg 360deg
      );
    box-shadow:
      0 6px 10px rgba(0,0,0,.90),
      inset 0 0 0 2px #111,
      inset 0 0 0 4px #70767d,
      inset 0 0 0 6px #d9dcdf,
      inset 0 0 0 8px #3c4147,
      inset 0 0 0 9px #050607,
      inset 0 0 17px #000,
      0 0 2px rgba(90,150,210,.18);
  }

  /* Dark textured dial center from the inspiration. */
  body:not(.mobile-layout) .gauge:before{
    content:"";
    position:absolute;
    inset:5.2%;
    border-radius:50%;
    z-index:1;
    background:
      radial-gradient(circle at 50% 52%,transparent 0 23%,rgba(0,0,0,.40) 24% 54%,transparent 55%),
      repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.02) 1px 2px),
      radial-gradient(circle at 50% 45%,#131619,#050607 55%,#020203 100%);
    box-shadow:inset 0 0 16px #000;
    pointer-events:none;
  }

  body:not(.mobile-layout) .gauge:after{
    content:"";
    position:absolute;
    inset:4%;
    z-index:9;
    border-radius:50%;
    background:none;
    box-shadow:
      inset 0 0 2px rgba(255,255,255,.52),
      inset 0 0 8px #000;
    pointer-events:none;
  }

  body:not(.mobile-layout) .rim-cool{
    position:absolute;
    inset:7.4%;
    border-radius:50%;
    z-index:3;
    border:1px solid rgba(120,190,255,.13);
    box-shadow:
      0 0 2px rgba(80,160,255,.09),
      inset 0 0 1px rgba(100,170,255,.08);
    pointer-events:none;
  }
  body:not(.mobile-layout) .gauge.rpm .rim-cool{
    border-color:rgba(130,190,255,.08);
    box-shadow:none;
  }

  body:not(.mobile-layout) .hub{
    position:absolute;
    left:43%;
    top:43%;
    width:14%;
    height:14%;
    z-index:10;
    border-radius:50%;
    background:
      radial-gradient(circle at 38% 32%,
        #5d636a 0 4%,
        #15181c 8% 32%,
        #030405 35% 56%,
        #4a5057 60% 68%,
        #050607 74%);
    box-shadow:
      0 0 3px #000,
      inset 0 0 1px rgba(255,255,255,.28);
  }
  body:not(.mobile-layout) .hub:after{
    content:"";
    position:absolute;
    left:29%;
    top:29%;
    width:42%;
    height:42%;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#21252a,#050607 68%);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
  }

  /* Let the dedicated hub replace the old pseudo-element hub. */
  body:not(.mobile-layout) .needle:before{
    display:none;
  }
  body:not(.mobile-layout) .needle{
    z-index:8;
    top:49%;
    height:6px;
    border-radius:0 10px 10px 0;
    background:linear-gradient(180deg,#ffb18b 0,#ff3a21 34%,#d90d0d 66%,#7d0606 100%);
    filter:none;
    box-shadow:
      0 0 3px rgba(255,45,20,.82),
      0 1px 1px #000;
  }
  body:not(.mobile-layout) .needle:after{
    content:"";
    position:absolute;
    right:-4px;
    left:auto;
    top:-2px;
    width:7px;
    height:10px;
    border-radius:0;
    clip-path:polygon(0 0,100% 50%,0 100%);
    background:#ff4a2c;
    box-shadow:none;
  }
  body:not(.mobile-layout) .needle.rpmN{width:39%}
  body:not(.mobile-layout) .needle.mphN{width:37%}
  body:not(.mobile-layout) .needle.boostN{width:36%;height:5px}

  body:not(.mobile-layout) .rpm-numbers,
  body:not(.mobile-layout) .mph-numbers,
  body:not(.mobile-layout) .boost-numbers{
    position:absolute;
    inset:0;
    z-index:7;
    font-family:Arial Black,Arial,sans-serif;
    font-style:italic;
    font-weight:900;
    color:#f1f3f5;
  }
  body:not(.mobile-layout) .rpm-numbers span,
  body:not(.mobile-layout) .mph-numbers span,
  body:not(.mobile-layout) .boost-numbers span{
    position:absolute;
    transform:translate(-50%,-50%);
    text-shadow:0 1px 1px #000;
  }

  /* Numeral placement copied from the uploaded inspiration. */
  body:not(.mobile-layout) .rpm-numbers{font-size:12px}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(1){left:24%;top:76%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(2){left:16%;top:63%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(3){left:14%;top:46%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(4){left:20%;top:30%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(5){left:34%;top:19%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(6){left:51%;top:15%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(7){left:67%;top:19%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(8){left:79%;top:31%}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(9){left:85%;top:47%;color:#ff2b22;text-shadow:0 0 3px #ff2e22,0 1px #000}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(10){left:79%;top:64%;color:#ff2b22;text-shadow:0 0 3px #ff2e22,0 1px #000}
  body:not(.mobile-layout) .rpm-numbers span:nth-child(11){left:69%;top:78%;color:#ff2b22;text-shadow:0 0 3px #ff2e22,0 1px #000}

  body:not(.mobile-layout) .mph-numbers{font-size:10px}
  body:not(.mobile-layout) .mph-numbers span:nth-child(1){left:29%;top:77%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(2){left:18%;top:68%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(3){left:13%;top:55%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(4){left:15%;top:41%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(5){left:26%;top:25%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(6){left:44%;top:19%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(7){left:73%;top:34%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(8){left:82%;top:54%}
  body:not(.mobile-layout) .mph-numbers span:nth-child(9){left:77%;top:68%}

  body:not(.mobile-layout) .boost-numbers{font-size:8px}
  body:not(.mobile-layout) .boost-numbers span:nth-child(1){left:30%;top:74%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(2){left:20%;top:61%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(3){left:19%;top:45%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(4){left:45%;top:20%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(5){left:77%;top:39%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(6){left:70%;top:24%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(7){left:84%;top:60%}
  body:not(.mobile-layout) .boost-numbers span:nth-child(8){left:79%;top:74%}

  body:not(.mobile-layout) .g-title{
    bottom:13%;
    z-index:11;
    font-family:Arial Black,Arial,sans-serif;
    font-style:italic;
    font-weight:900;
    font-size:12px;
    letter-spacing:0;
    color:#e5e7e9;
    text-shadow:0 1px 1px #000;
  }
  body:not(.mobile-layout) .g-sub{
    bottom:5%;
    z-index:11;
    font-family:Arial,sans-serif;
    font-style:normal;
    font-size:6px;
    font-weight:700;
    letter-spacing:1px;
    color:#d2d5d8;
  }
  body:not(.mobile-layout) .gauge.boost .g-title{font-size:9px}
  body:not(.mobile-layout) .gauge.boost .g-sub{font-size:5px}

  body:not(.mobile-layout) .g-readout{
    display:none;
  }

  body:not(.mobile-layout) .tick.big{
    display:block;
    width:2px;
    height:11px;
    z-index:6;
    background:#fff;
    box-shadow:0 0 2px rgba(255,255,255,.40);
  }
  body:not(.mobile-layout) .gauge.boost .tick.big{
    height:9px;
  }
  body:not(.mobile-layout) .gauge.rpm .tick.big.redline{
    background:#ff2b22;
    box-shadow:0 0 3px rgba(255,45,30,.75);
  }

  body:not(.mobile-layout) .shift-lights{
    top:42px;
    z-index:12;
    gap:5px;
  }
  body:not(.mobile-layout) .shift-lights i{
    width:7px;
    height:7px;
  }

  /* =========================================================
     v29 — edge tick marks only, based on the uploaded gauge inspo
     ========================================================= */
  /* Remove the repeated full-circle tick texture from the background.
     Keep only the clean arc band, then draw the small lines with DOM ticks. */
  body:not(.mobile-layout) .gauge{
    background:
      radial-gradient(circle at 50% 48%,#020304 0 54.8%,transparent 55.1%),
      conic-gradient(from -132deg,rgba(255,255,255,.97) 0 194deg,#ff2018 194deg 278deg,transparent 278deg 360deg) !important;
  }
  body:not(.mobile-layout) .gauge.mph{
    background:
      radial-gradient(circle at 50% 48%,#020304 0 54.8%,transparent 55.1%),
      conic-gradient(from -132deg,rgba(245,250,255,.96) 0 272deg,transparent 272deg 360deg) !important;
  }
  body:not(.mobile-layout) .gauge.boost{
    background:
      radial-gradient(circle at 50% 48%,#020304 0 55%,transparent 55.3%),
      conic-gradient(from -132deg,rgba(245,250,255,.94) 0 208deg,#ff2018 208deg 278deg,transparent 278deg 360deg) !important;
  }

  /* Show all of the generated ticks again. */
  body:not(.mobile-layout) .gauge .tick{
    display:block !important;
    position:absolute;
    left:50%;
    top:50%;
    transform-origin:0 50%;
    z-index:7;
    width:1.5px;
    height:6px;
    margin-top:-3px;
    border-radius:1px;
    background:linear-gradient(180deg,#fefefe,#d8dee2);
    box-shadow:0 0 2px rgba(255,255,255,.35);
  }
  body:not(.mobile-layout) .gauge .tick.big{
    width:2px;
    height:11px;
    margin-top:-5.5px;
    background:linear-gradient(180deg,#ffffff,#e0e6e9);
    box-shadow:0 0 3px rgba(255,255,255,.55);
  }
  body:not(.mobile-layout) .gauge.boost .tick{
    height:5px;
    margin-top:-2.5px;
  }
  body:not(.mobile-layout) .gauge.boost .tick.big{
    height:9px;
    margin-top:-4.5px;
  }
  body:not(.mobile-layout) .gauge.rpm .tick.redline{
    background:linear-gradient(180deg,#ffb4a8,#ff3b2a 42%,#990600 100%);
    box-shadow:0 0 4px rgba(255,45,20,.9);
  }

  /* Slightly crisper face / glass, mirroring the uploaded file. */
  body:not(.mobile-layout) .gauge:before{
    inset:5.6%;
    background:
      radial-gradient(circle at 50% 51%,transparent 0 22%,rgba(0,0,0,.48) 23% 52%,transparent 53%),
      repeating-linear-gradient(45deg,rgba(255,255,255,.013) 0 1px,rgba(0,0,0,.024) 1px 2px),
      radial-gradient(circle at 50% 44%,#161a1f,#050607 55%,#010203 100%);
    box-shadow:inset 0 0 18px #000;
  }
  body:not(.mobile-layout) .gauge:after{
    inset:4.6%;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.35),
      inset 0 -2px 4px rgba(0,0,0,.72),
      inset 0 0 8px #000;
  }

  /* Keep numerals and titles above the ticks. */
  body:not(.mobile-layout) .rpm-numbers,
  body:not(.mobile-layout) .mph-numbers,
  body:not(.mobile-layout) .boost-numbers,
  body:not(.mobile-layout) .g-title,
  body:not(.mobile-layout) .g-sub,
  body:not(.mobile-layout) .shift-lights,
  body:not(.mobile-layout) .hub{
    z-index:10;
  }
  body:not(.mobile-layout) .needle{
    z-index:9;
  }

  /* =========================================================
     v30 — FIX THE OVAL / CIRCLE SHINE ARTIFACTS
     ========================================================= */

  /* The old dashboard cap was literally a giant rounded capsule, which is why
     the right-hand end looked like a floating silver circle. Replace it with a
     tapered curved band that has no circular end caps. */
  body:not(.mobile-layout) .dash-shell:before{
    content:"";
    position:absolute;
    left:-2px;
    right:-2px;
    top:-16px;
    height:72px;
    z-index:2;
    border:0;
    border-radius:0;
    box-shadow:
      0 2px 5px rgba(0,0,0,.48),
      inset 0 1px 0 rgba(255,255,255,.42);
    background:
      linear-gradient(180deg,
        #f4f6f7 0%,
        #d8dde0 12%,
        #a5adb2 29%,
        #6c767c 50%,
        #394147 69%,
        #171c1f 100%);
    clip-path:polygon(
      1% 77%,
      4% 57%,
      10% 39%,
      19% 24%,
      31% 13%,
      43% 7%,
      50% 6%,
      57% 7%,
      69% 13%,
      81% 24%,
      90% 39%,
      96% 57%,
      99% 77%,
      98% 89%,
      94% 74%,
      87% 59%,
      78% 46%,
      67% 36%,
      57% 31%,
      50% 30%,
      43% 31%,
      33% 36%,
      22% 46%,
      13% 59%,
      6% 74%,
      2% 89%
    );
    pointer-events:none;
  }

  /* Kill the giant elliptical inner-shadow blob too; use a shallow soft shadow
     tucked immediately below the metal lip instead. */
  body:not(.mobile-layout) .dash-shell:after{
    content:"";
    position:absolute;
    left:4%;
    right:4%;
    top:20px;
    height:18px;
    border-radius:0;
    background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0));
    filter:blur(3px);
    pointer-events:none;
  }

  /* Clip all gauge effects to the actual circular dial. This prevents any
     glass/highlight element from becoming a separate horizontal oval. */
  body:not(.mobile-layout) .gauge{
    overflow:hidden;
  }

  /* The older :after rule had inherited a top/height/background from a much
     earlier version. Explicitly reset EVERY geometry property. */
  body:not(.mobile-layout) .gauge:after{
    content:"";
    position:absolute;
    inset:4.6%;
    width:auto;
    height:auto;
    left:4.6%;
    right:4.6%;
    top:4.6%;
    bottom:4.6%;
    z-index:13;
    border-radius:50%;
    opacity:1;
    background:none;
    filter:none;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.26),
      inset 0 -2px 4px rgba(0,0,0,.70),
      inset 0 0 8px rgba(0,0,0,.88);
    pointer-events:none;
  }

  /* Use the inspiration's masked RIM shine idea, not a filled ellipse.
     The highlight only lives in the thin outer ring. */
  body:not(.mobile-layout) .rim-shine{
    position:absolute;
    inset:2.4%;
    z-index:8;
    border-radius:50%;
    pointer-events:none;
    background:
      radial-gradient(78% 52% at 43% 10%,rgba(255,255,255,.72),transparent 45%),
      conic-gradient(
        from 205deg,
        transparent 0 29%,
        rgba(255,255,255,.30) 31% 34%,
        transparent 36% 73%,
        rgba(255,255,255,.14) 74% 78%,
        transparent 80% 100%
      );
    -webkit-mask:radial-gradient(
      farthest-side,
      transparent calc(100% - 9%),
      #000 calc(100% - 9%) calc(100% - 2%),
      transparent calc(100% - 2%)
    );
    mask:radial-gradient(
      farthest-side,
      transparent calc(100% - 9%),
      #000 calc(100% - 9%) calc(100% - 2%),
      transparent calc(100% - 2%)
    );
    opacity:.66;
  }

  /* Glass reflection is now a small diagonal wedge contained inside the face.
     No horizontal oval/radial ellipse at all. */
  body:not(.mobile-layout) .glass{
    position:absolute;
    inset:6.4%;
    z-index:12;
    border-radius:50%;
    overflow:hidden;
    pointer-events:none;
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.20) 0%,
        rgba(255,255,255,.075) 11%,
        rgba(255,255,255,0) 27%
      );
    opacity:.56;
  }

  /* Keep the actual dial information above face texture but below glass. */
  body:not(.mobile-layout) .rpm-numbers,
  body:not(.mobile-layout) .mph-numbers,
  body:not(.mobile-layout) .boost-numbers,
  body:not(.mobile-layout) .g-title,
  body:not(.mobile-layout) .g-sub,
  body:not(.mobile-layout) .shift-lights,
  body:not(.mobile-layout) .hub{
    z-index:10;
  }
  body:not(.mobile-layout) .needle{
    z-index:11;
  }

/* Race cockpit redesign. Header and brand bar retain their original styles. */
body:not(.mobile-layout) .scene{height:431px;background:#080d12}
body:not(.mobile-layout) .track-wrap{left:0;right:0;top:0;height:290px;border:0;width:100%}
body:not(.mobile-layout) .goldside,body:not(.mobile-layout) .stage-arrow,body:not(.mobile-layout) .gfx{display:none}
body:not(.mobile-layout) .racer-panel{top:14px;width:188px;height:65px;border:1px solid #ffffff20;border-radius:5px;background:linear-gradient(120deg,#0b121deb,#0b121d99);box-shadow:0 4px 20px #0005;backdrop-filter:blur(8px);pointer-events:none}
body:not(.mobile-layout) .racer-panel.left{left:18px;border-top:2px solid #edc859}
body:not(.mobile-layout) .racer-panel.right{right:18px;border-top:2px solid #e7847a}
body:not(.mobile-layout) .racer-panel .brand,body:not(.mobile-layout) .racer-panel .bulbs,body:not(.mobile-layout) .panel-time{display:none}
body:not(.mobile-layout) .racer-panel:before{content:'01 / YOU';position:absolute;left:10px;top:8px;font:700 9px Arial;letter-spacing:1.6px;color:#edc859}
body:not(.mobile-layout) .racer-panel.right:before{content:'02 / OPPONENT';color:#e7847a}
body:not(.mobile-layout) .scorebox{left:10px;bottom:7px;width:166px;height:28px;padding:0;display:flex;border:0;background:none;box-shadow:none;overflow:visible}
body:not(.mobile-layout) .scorebox:before{display:none}
body:not(.mobile-layout) .score-row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:33.33%;height:auto;border:0}
body:not(.mobile-layout) .score-label{font-size:6px;letter-spacing:1px;color:#80919f}
body:not(.mobile-layout) .score-value{font:700 11px monospace;color:#e8edf3;text-shadow:none}
body:not(.mobile-layout) .prestages{left:353px;top:12px;width:148px;z-index:8}
body:not(.mobile-layout) .stagebox{width:58px}
body:not(.mobile-layout) .stagebox .lbl{background:none;border:0;color:#8f9fad;font-size:6px;height:10px;letter-spacing:1px}
body:not(.mobile-layout) .stagebox .lampbox{height:15px;border:0;background:none;padding:0;gap:4px}
body:not(.mobile-layout) .stagebox .lampbox i{width:7px;height:7px;background:#38414a}
body:not(.mobile-layout) .stagebox .lampbox.on i{background:#fff2bf;box-shadow:0 0 7px #f8dd88}
body:not(.mobile-layout) .tree{left:408px;top:81px;grid-auto-rows:18px;gap:3px 5px;width:38px;height:107px;padding:4px;background:#0b101bb8;border:1px solid #ffffff12;border-radius:20px;z-index:8}
body:not(.mobile-layout) .tree .light{width:12px;height:12px;border:2px solid #343c45}
body:not(.mobile-layout) .meter-strip{left:13px;top:94px;transform:scale(.46);transform-origin:top left;opacity:.8}
body:not(.mobile-layout) #msg{top:267px;width:100%;max-width:none;height:23px;margin:0;padding:7px 10px 0;background:#090f18d9;border-top:1px solid #ffffff12;border-radius:0;color:#c5d2de;font-size:8px;letter-spacing:.35px;z-index:26}
body:not(.mobile-layout) .dash{left:0;right:0;bottom:0;height:141px;background:linear-gradient(180deg,#17202a,#0a1018 30%,#080d13);border-top:1px solid #34404c;box-shadow:0 -5px 22px #0007}
body:not(.mobile-layout) .dash-shell{inset:0;border-radius:0;background:repeating-linear-gradient(115deg,transparent 0 3px,#ffffff02 3px 4px);box-shadow:none}
body:not(.mobile-layout) .dash-shell:before,body:not(.mobile-layout) .dash-shell:after{display:none}
body:not(.mobile-layout) .gauge{background:radial-gradient(circle at 50% 35%,#1a2530,#080e15 72%);border:2px solid #4c5964;box-shadow:0 0 0 3px #070b10,0 0 0 4px #25313d,0 7px 14px #0008,inset 0 0 12px #000;overflow:hidden}
body:not(.mobile-layout) .gauge.rpm{left:275px;bottom:5px;width:132px;height:132px}
body:not(.mobile-layout) .gauge.mph{left:449px;bottom:5px;width:132px;height:132px}
body:not(.mobile-layout) .gauge.boost{left:166px;bottom:16px;width:88px;height:88px;opacity:.65}
body:not(.mobile-layout) .gauge:before,body:not(.mobile-layout) .gauge:after,body:not(.mobile-layout) .rim-shine,body:not(.mobile-layout) .rim-cool,body:not(.mobile-layout) .glass{display:none}
body:not(.mobile-layout) .gauge .tick{display:block;width:1px;height:4px;background:#627481;box-shadow:none;z-index:2}
body:not(.mobile-layout) .gauge .tick.big{width:2px;height:7px;background:#d7e3ed;box-shadow:none}
body:not(.mobile-layout) .gauge.rpm .tick.redline{background:#f76c58}
body:not(.mobile-layout) .rpm-numbers,body:not(.mobile-layout) .mph-numbers,body:not(.mobile-layout) .boost-numbers{inset:0;font:600 9px Arial;color:#c7d3df;text-shadow:none}
body:not(.mobile-layout) .boost-numbers{font-size:7px}
body:not(.mobile-layout) .needle{width:39%;height:2px;background:#f1bb64;filter:drop-shadow(0 0 2px #e8ad4c88);z-index:6;transition:transform .065s linear}
body:not(.mobile-layout) .needle:after,body:not(.mobile-layout) .needle:before{display:none}
body:not(.mobile-layout) .hub{width:10px;height:10px;background:#19232c;border:2px solid #8596a6;box-shadow:0 1px 3px #000;z-index:7}
body:not(.mobile-layout) .hub:after{display:none}
body:not(.mobile-layout) .g-readout{display:block;position:absolute;top:79px;bottom:auto;left:0;width:100%;background:none;border:0;box-shadow:none;font:700 19px/1 monospace;letter-spacing:0;color:#edf4fa;text-shadow:none}
body:not(.mobile-layout) .g-title{top:101px;bottom:auto;font:700 6px Arial;letter-spacing:1.5px;color:#8b9baa}
body:not(.mobile-layout) .g-sub{display:none}
body:not(.mobile-layout) .gauge.boost .g-title{top:62px;font-size:6px}
body:not(.mobile-layout) .shift-lights{top:37px;gap:3px}
body:not(.mobile-layout) .shift-lights i{width:5px;height:4px;border-radius:1px;box-shadow:none}
body:not(.mobile-layout) .gauge.shift-ready{border-color:#eabe54;box-shadow:0 0 0 3px #070b10,0 0 14px #eabe5444}
body:not(.mobile-layout) .gearbox{left:414px;right:auto;bottom:30px;width:28px;height:77px}
body:not(.mobile-layout) .gear{display:none;background:none;box-shadow:none}
body:not(.mobile-layout) .gear.active{display:block;position:absolute;top:19px;font:700 30px/1 monospace;color:#eac465;text-shadow:none;background:none;box-shadow:none}
body:not(.mobile-layout) .gearbox:before{content:'GEAR';position:absolute;top:0;font:700 6px Arial;letter-spacing:1px;color:#8292a2}
body:not(.mobile-layout) .pedalbox{left:648px;bottom:16px;width:167px;height:110px;background:#0b121a;border:1px solid #25323e;box-shadow:none;border-radius:4px;gap:22px}
body:not(.mobile-layout) .pedal-wrap{height:85px}
body:not(.mobile-layout) .pedal,body:not(.mobile-layout) .clutch-slot{height:79px;width:28px;border-radius:3px;border:1px solid #3c4c5a;background:#070c12}
body:not(.mobile-layout) .pedal-fill{background:#a6c877;border-radius:1px;box-shadow:none}
body:not(.mobile-layout) .gas-knob{width:30px;height:7px;border-radius:1px;background:#dce7ee;border:1px solid #718190;box-shadow:0 2px 5px #000}
body:not(.mobile-layout) .clutch-knob{width:18px;height:10px;border-radius:2px;background:#db8677;box-shadow:none}
body:not(.mobile-layout) .pedal-label,body:not(.mobile-layout) .clutch-label{font-size:7px;letter-spacing:1px;color:#9eacba}
.cockpit-caption{position:absolute;left:24px;top:28px;font:700 8px/1.8 Arial;letter-spacing:2px;color:#9daab6}
.cockpit-caption strong{display:block;font:italic 700 21px/1.4 Arial;letter-spacing:-.8px;color:#e4eaf0}
.cockpit-caption small{font-size:6px;letter-spacing:1px;color:#647888}
.race-reset{position:absolute;left:24px;bottom:18px;border:1px solid #354553;border-radius:3px;background:#18232e;color:#bbcad6;font:700 7px Arial;letter-spacing:1px;padding:7px 12px;cursor:pointer}
.race-reset:hover{background:#2a3947;color:#fff}
body.mobile-layout .cockpit-caption,body.mobile-layout .race-reset{display:none}
body.mobile-layout .mobile-control-deck{background:linear-gradient(#17212c,#080e15);border-top:1px solid #40505d}
body.mobile-layout .mobile-rpm-card,body.mobile-layout .mobile-speed-card,body.mobile-layout .mobile-stage-card{background:#0c1520de;border:1px solid #ffffff25;border-radius:5px}
body.mobile-layout .mobile-rpm-track i{background:linear-gradient(90deg,#98bda5,#e5be60,#ef765f)}


body:not(.mobile-layout) .g-readout{transform:none;text-align:center}
body:not(.mobile-layout) .gauge .tick:not(.big){display:block}
body:not(.mobile-layout) .gauge .needle{top:50%;height:2px;box-shadow:none}

/* Classic 1320 frame — the Night Run instrument faces and 3D world are retained. */
body:not(.mobile-layout) #fit,body:not(.mobile-layout) #game{height:600px}
body:not(.mobile-layout) #game{border:3px solid #1652a4;border-radius:7px 7px 0 0}

body:not(.mobile-layout) .classic-titlebar{position:absolute;left:0;right:0;top:0;height:28px;display:flex;align-items:center;padding:0 4px;color:#fff;font:700 14px Tahoma,Arial,sans-serif;letter-spacing:.15px;text-shadow:1px 1px #123568;background:linear-gradient(#3998ff 0%,#0874f6 12%,#0059d9 52%,#0863df 82%,#00399a);box-shadow:inset 0 1px #8ac4ff;z-index:45}




body:not(.mobile-layout) .menu{top:28px;height:38px}
body:not(.mobile-layout) .menu button{padding:0 7px;font-size:10.5px}
body:not(.mobile-layout) .brandbar{top:66px;height:57px}
body:not(.mobile-layout) .header-divider{top:123px;height:7px}
body:not(.mobile-layout) .nitto{left:14px;top:0;width:177px}
body:not(.mobile-layout) .nitto:before{font-size:35px;letter-spacing:-1px;transform:skewX(-17deg) scaleX(1.37)}
body:not(.mobile-layout) .nitto small{top:35px;font-size:6px;letter-spacing:1.4px}
body:not(.mobile-layout) .logo1320{left:244px;top:5px}
body:not(.mobile-layout) .logo1320:before{font-size:53px;transform:skewX(-15deg) scaleX(1.45)}
body:not(.mobile-layout) .logo1320 span{left:197px;top:19px;font-size:20px;letter-spacing:.3px;transform:skewX(-15deg) scaleY(.72)}
body:not(.mobile-layout) .member-badge{display:none}
body:not(.mobile-layout) .version{right:22px;bottom:9px;color:#2cf82b}
body:not(.mobile-layout) .scene{top:130px;height:415px;background:linear-gradient(90deg,#855700,#d5a62c 15%,#816019 30%,#816019 70%,#d5a62c 85%,#855700)}
body:not(.mobile-layout) .goldside{display:block;width:51px;background:linear-gradient(90deg,#965600,#b46b00 45%,#dea122);box-shadow:inset 0 0 8px #774500}
body:not(.mobile-layout) .track-wrap{left:170px;right:137px;width:auto;height:315px;border:0;clip-path:polygon(9% 0,90% 0,100% 100%,0 100%)}
body:not(.mobile-layout) .racer-panel{top:8px;width:149px;height:233px;border:5px solid #457782;border-top:0;border-radius:0;box-shadow:0 0 0 1px #183943,0 3px 5px #0006;backdrop-filter:none;pointer-events:none}
body:not(.mobile-layout) .racer-panel.left{left:66px;background:linear-gradient(90deg,#0589ae,#02607b 70%,#164355);border-color:#176981}
body:not(.mobile-layout) .racer-panel.right{right:30px;background:linear-gradient(110deg,#9db5b9,#e0e6df 50%,#9caeae);border-color:#a9bab9}
body:not(.mobile-layout) .racer-panel:before{display:none}
body:not(.mobile-layout) .racer-panel .bulbs{display:flex;left:-4px;top:-5px;width:147px;height:17px;padding:3px 2px;gap:2px;background:#281607;border-top:2px solid #76542f}
body:not(.mobile-layout) .bulbs i{width:11px;height:11px}
body:not(.mobile-layout) .panel-time{display:block;right:26px;top:16px;width:95px;height:15px;padding:1px 4px;font:italic 10px monospace}
body:not(.mobile-layout) .racer-panel .brand{display:grid;top:35px;height:67px;font-size:9px;color:#d6ecee;text-shadow:1px 1px #174454}
body:not(.mobile-layout) .mopar-mark{width:44px;height:34px;border-width:4px;border-color:#094475;box-shadow:1px 0 0 #6ec4d1}
body:not(.mobile-layout) .mopar-mark:after{left:16px;height:34px;width:7px;background:#094475;box-shadow:1px 0 #6ec4d1}
body:not(.mobile-layout) .chrysler{font:700 13px Georgia,serif;letter-spacing:2px;color:#f6ffff;text-shadow:1px 2px #273539}
body:not(.mobile-layout) .chrysler:after{width:104px;height:15px;border-bottom:4px solid #616e70;border-radius:50%;box-shadow:0 2px 0 #d8e3e3}
body:not(.mobile-layout) .scorebox{left:1px;bottom:9px;width:133px;height:121px;display:block;padding:12px 7px;background:#000;border:1px solid #14282b;box-shadow:none}
body:not(.mobile-layout) .score-row{height:32px;width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:0;border:0}
body:not(.mobile-layout) .score-label{font-size:7px;color:#64818a}
body:not(.mobile-layout) .score-value{font:700 13px monospace;color:#e0be69}
body:not(.mobile-layout) .prestages{left:321px;top:0;width:246px;height:76px}
body:not(.mobile-layout) .stagebox{width:82px}
body:not(.mobile-layout) .stagebox .lbl{height:13px;background:linear-gradient(#fff,#d9e3df);color:#a83428;font:700 7px/13px Arial;letter-spacing:.4px}
body:not(.mobile-layout) .stagebox .lampbox{height:23px;background:#576e69;padding-top:3px;gap:3px}
body:not(.mobile-layout) .stagebox .lampbox i{width:13px;height:16px;background:#aead81;box-shadow:inset 0 1px 3px #303c32;border-radius:50%}
body:not(.mobile-layout) .stagebox .lampbox.on i{background:#fff5b2;box-shadow:0 0 13px #ffffc5}
body:not(.mobile-layout) .tree{left:414px;top:34px;width:53px;height:115px;padding:0;background:none;border:0;grid-auto-rows:21px;gap:2px 9px}
body:not(.mobile-layout) .tree .light{width:20px;height:20px;border:3px solid #5d6151;box-shadow:0 1px 2px #000}
body:not(.mobile-layout) .stage-arrow{display:block;left:395px;top:156px;width:90px;height:74px;z-index:8}
body:not(.mobile-layout) .stage-text{font-size:27px;color:#36ff10}
body:not(.mobile-layout) .meter-strip{left:19px;top:0;width:23px;height:347px;transform:none;opacity:1;border:0;background:#c77a00;box-shadow:none}
body:not(.mobile-layout) .meter-strip:before{left:0;width:100%;background:linear-gradient(#c77a00 0 42%,#ffdd00 42% 46%,#13ee00 46% 54%,#ffdd00 54% 58%,#c77a00 58%)}
body:not(.mobile-layout) .meter-strip:after{left:-5px;width:32px;height:17px;clip-path:polygon(0 0,25% 40%,75% 40%,100% 0,100% 100%,75% 60%,25% 60%,0 100%)}
body:not(.mobile-layout) .dash{left:54px;right:34px;bottom:0;height:180px;background:none;border:0;box-shadow:none}
body:not(.mobile-layout) .dash-shell{inset:0;border-radius:50% 50% 5% 5% / 90% 90% 12% 12%;background:linear-gradient(120deg,#707579,#d8d9d8 22%,#7d8386 48%,#989d9e 75%,#5c6265);box-shadow:inset 0 3px 0 #e1e3e1,0 -3px 9px #0005;overflow:hidden}
body:not(.mobile-layout) .dash-shell:before{display:block;content:'';position:absolute;inset:9px 14px -12px;border-radius:50% 50% 5% 5% / 85% 85% 12% 12%;height:auto;background:radial-gradient(ellipse at 50% 0,#42474b,#13171b 64%,#080b0e);border:0;box-shadow:inset 0 2px 2px #000}
/* Only instrument placement changes; their face styling remains Night Run. */
body:not(.mobile-layout) .gauge.boost{left:131px;bottom:22px;transform:scale(1.08);transform-origin:center bottom;opacity:1}
body:not(.mobile-layout) .gauge.rpm{left:244px;bottom:18px;transform:scale(1.16);transform-origin:center bottom}
body:not(.mobile-layout) .gauge.mph{left:410px;bottom:18px;transform:scale(1.16);transform-origin:center bottom}
body:not(.mobile-layout) .gearbox{left:auto;right:4px;bottom:5px;width:27px;height:153px;display:flex;flex-direction:column;gap:2px}
body:not(.mobile-layout) .gearbox:before{display:none}
body:not(.mobile-layout) .gear,body:not(.mobile-layout) .gear.active{display:block;position:static;width:20px;height:16px;border-radius:4px;background:linear-gradient(#b7b9b9,#60666a);box-shadow:inset 0 1px #e0e3e4;color:#fff;font:700 14px/16px Arial;text-shadow:0 1px #555;cursor:pointer}
body:not(.mobile-layout) .gear.active{background:linear-gradient(#ff5a45,#d90906);box-shadow:inset 0 1px #ffbc98,0 0 4px #d52816}
body:not(.mobile-layout) .pedalbox{left:571px;bottom:17px;width:106px;height:103px;background:none;border:0;padding:0;gap:12px}
body:not(.mobile-layout) .pedal,body:not(.mobile-layout) .clutch-slot{width:12px;height:90px;border:1px solid #b6c1c4;border-radius:6px;background:repeating-linear-gradient(0deg,#272b2d 0 3px,#838a8b 3px 4px)}
body:not(.mobile-layout) .pedal-label,body:not(.mobile-layout) .clutch-label{font:700 9px Arial;color:#d4d9dc;letter-spacing:.5px}
body:not(.mobile-layout) .gas-knob{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b4ff89,#27be19 50%,#124709);border:2px solid #a7aeb2;box-shadow:0 1px 4px #000}
body:not(.mobile-layout) .clutch-knob{left:-1px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffea0,#a5ab16 60%,#5c6400)}
body:not(.mobile-layout) .cockpit-caption,body:not(.mobile-layout) .race-reset{display:none}
body:not(.mobile-layout) .gfx{display:block;left:63px;top:251px;width:94px;height:32px;z-index:30;background:linear-gradient(#8aaea5,#487d72);border:2px solid #ddd3a0;font-size:10px;padding:1px 2px 0 22px}
body:not(.mobile-layout) .gfx:before{left:-6px;top:2px;width:23px;height:23px}
body:not(.mobile-layout) #msg{top:394px;left:50%;width:auto;max-width:740px;height:19px;padding:4px 8px 0;background:#080d12a3;border:0;color:#d9d7bb;font-size:7px;z-index:30}
body:not(.mobile-layout) .status{height:49px;border-top:2px solid #e0d4a1;box-shadow:0 -1px #16191a;background:linear-gradient(to bottom,transparent 0 15px,#b5b9aa 15px 17px,#061119 17px,#1b303b 100%),repeating-linear-gradient(90deg,#1e2323 0 1px,#5b5c4b 1px 2px,#101313 2px 3px);padding-top:17px;font-size:10px}
body:not(.mobile-layout) .selected-label{font-size:10px;margin-left:16px}
body:not(.mobile-layout) .mini-car{margin-left:12px}
body:not(.mobile-layout) .edit{margin-right:145px;font-size:10px}
body:not(.mobile-layout) .challenge{right:18px;font-size:10px}
body:not(.mobile-layout) #showroomOverlay{top:130px;bottom:49px}


/* Sculpted dashboard: satin metal return around a fine-grained molded fascia. */
body:not(.mobile-layout) #fit,body:not(.mobile-layout) #game{height:572px}
body:not(.mobile-layout) #game{border:0;border-radius:0}
body:not(.mobile-layout) .menu{top:0}
body:not(.mobile-layout) .brandbar{top:38px}
body:not(.mobile-layout) .header-divider{top:95px}
body:not(.mobile-layout) .scene{top:102px}
body:not(.mobile-layout) #showroomOverlay{top:102px}
body:not(.mobile-layout) .dash-shell{inset:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 -3px 3px #0005)}
body:not(.mobile-layout) .dash-shell:before,body:not(.mobile-layout) .dash-shell:after{content:none;display:none}
.molded-panel{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}



/* The classic lobby is built entirely from HTML and CSS. Uploaded artwork is optional. */
#showroomOverlay{background:#096986}
.classic-lobby{position:absolute;width:854px;height:423px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--lobby-scale,1));transform-origin:center;overflow:hidden;color:#eff6f6;background:linear-gradient(0deg,#5e92a340,transparent 30%),linear-gradient(180deg,transparent 43%,#3995ae55 44%,transparent 45%,transparent 48%,#206c8d 49%,transparent 50%,transparent 70%,#9bb8bd35 71%,transparent 73%),radial-gradient(ellipse at 9% 80%,#4f9ab1,transparent 42%),linear-gradient(120deg,#0d2132 8%,#007fa7 42%,#18334e 78%,#113e5b)}
.league-toolbar{position:absolute;left:0;right:0;top:0;height:65px;border-top:7px ridge #424f58;border-bottom:4px ridge #283643;background:linear-gradient(#526674,#1e303e 65%,#102231);box-shadow:0 3px 7px #0007}


.league-button{border:1px solid #c6e3e6;border-radius:4px;background:linear-gradient(#4899ab,#14748c);box-shadow:inset 0 1px #ffffff70,0 1px 3px #0006;color:#fff;font:900 14px Impact,'Arial Narrow',Arial;cursor:pointer;text-shadow:0 1px #527781;letter-spacing:.4px}
.league-button:hover{filter:brightness(1.2)}
.league-button:active{transform:translateY(1px)}
.lobby-back{position:absolute;left:129px;top:16px;width:94px;height:26px}
.league-badge{position:absolute;right:23px;top:13px;display:flex;align-items:center;gap:11px}
.league-badge i{display:grid;place-items:center;width:32px;height:32px;border:3px ridge #c4c0a0;border-radius:50%;background:radial-gradient(#e2d8a7,#6f715e);color:#414638;font-style:normal;font-size:22px;box-shadow:0 0 0 2px #182832}
.league-badge span{font:900 15px/15px Arial;letter-spacing:2px}.league-badge b{display:block;background:#e7ece9;color:#26323d;font-size:14px;letter-spacing:5px;padding:0 3px}
.bracket-mark{position:absolute;left:91px;top:126px;width:70px;text-align:center;font:900 18px Impact,Arial;text-shadow:2px 2px #07131f}
.bracket-mark span{display:block;height:26px;border:1px solid #d2e4ec;background:linear-gradient(120deg,#283f83,#08234a);font:italic 900 35px/20px Arial;color:#fff}
.driver-class{position:absolute;left:249px;top:65px;font:700 10px/11px Georgia;text-align:center;letter-spacing:.4px}
.driver-class b{position:absolute;left:50px;top:0;border:2px solid #ff7d7d;border-radius:50%;background:#e91620;font:700 12px/18px Arial;width:22px;height:22px}
.art-slot{position:absolute;display:grid;place-items:center;background:linear-gradient(135deg,#19395b90,#2298b690);border:1px dashed #a0d4db90;color:#b8dce4;cursor:pointer;overflow:hidden;padding:0}
.art-slot>span{font:300 30px/1 Arial;text-align:center}.art-slot small{display:block;font:700 9px Arial;letter-spacing:1.5px;margin-top:9px}
.art-slot:hover{background-color:#4dbfcd55;border-color:white}.art-slot img{width:100%;height:100%;object-fit:contain;display:block}
.racer-portrait{left:298px;top:69px;width:185px;height:183px;border:3px solid #d6eff2;border-radius:50%;box-shadow:0 2px 5px #051a2866}
.racer-copy{position:absolute;left:475px;top:67px;width:260px}.racer-copy h2{margin:0;color:#f0f3f0;font:italic 900 22px Arial;letter-spacing:1px;transform:scaleY(.78);transform-origin:left top;white-space:nowrap}.racer-copy p{margin:8px 0 0 22px;width:188px;font:13px/16px Arial;color:#dfe7e7}
.lobby-challenge{position:absolute;left:717px;top:142px;width:122px;height:26px}
.racer-car{left:405px;top:192px;width:285px;height:113px;border-radius:35% 10% 12% 15%;background:linear-gradient(170deg,#377b9755,#062c4a44);transform:skewX(-5deg)}
.racer-car img{transform:skewX(5deg)}
.prize-money{position:absolute;right:22px;top:192px;width:108px;text-align:center}.prize-money i{display:block;margin:0 auto 6px;width:35px;height:35px;border:3px ridge #d1e3c5;border-radius:50%;background:radial-gradient(#83a87b,#426f54);font:900 29px/30px Arial;font-style:normal;box-shadow:0 3px 0 #112c38}.prize-money strong{display:block;font:900 17px Arial}.prize-money span{display:block;margin-top:8px;font:700 11px Arial}
.race-me{position:absolute;left:16px;top:294px;width:65px;height:35px;border-radius:50%;background:linear-gradient(#fff,#c7e6ed);border:1px solid #94b8c1;box-shadow:1px 2px 4px #14242b;color:#173042;text-align:center;font:900 10px/10px Arial;padding-top:6px;z-index:3}.race-me:after{content:'';position:absolute;bottom:-6px;right:8px;border:6px solid transparent;border-top-color:#c7e6ed;transform:rotate(-22deg)}
.lobby-opponents{position:absolute;left:69px;top:304px;display:flex;gap:58px;width:900px}
.opponent-card{position:relative;flex:0 0 252px;height:111px;border:0;padding:0;background:transparent;color:#d2e9ee;cursor:pointer;text-align:left}
.card-portrait{position:absolute;left:0;top:0;width:98px;height:108px;border:2px solid #cee7e9;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#326593,#1899b0);font:italic 900 30px Arial;color:#82b7c7;overflow:hidden}
.opponent-card:nth-child(2) .card-portrait{background:linear-gradient(140deg,#77694a,#389295)}
.opponent-card:nth-child(3) .card-portrait{background:linear-gradient(140deg,#833c40,#3b5e6a)}
.card-title{position:absolute;left:83px;top:0;width:165px}.card-title small{display:block;height:15px;font:700 5px/8px Georgia;width:45px;letter-spacing:.5px;color:#d9e7ec}.card-title small b{color:#fff;background:#e1272e;border-radius:50%;padding:2px}
.card-title strong{display:block;background:#01080d;clip-path:polygon(0 0,100% 0,96% 100%,0 100%);font:italic 900 12px/17px Arial;letter-spacing:.5px;padding-left:3px;color:#e9edf0;white-space:nowrap}
.card-car{position:absolute;left:79px;top:44px;width:144px;height:57px;border:1px dashed #99bac366;border-radius:35% 15% 10% 10%;display:grid;place-items:center;font:700 7px Arial;letter-spacing:1px;color:#9ac0cc;background:#163e5850}
.card-portrait img,.card-car img{width:100%;height:100%;object-fit:contain}
.opponent-card[aria-pressed="true"] .card-portrait{border-color:#fff2b7;box-shadow:0 0 7px #ebd78b66}
.opponent-card:hover .card-title strong{background:#173748}
.classic-lobby button:focus-visible{outline:3px solid #ffe8a3;outline-offset:3px}
.lobby-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.mobile-layout #showroomOverlay{top:58px;bottom:0}body.mobile-layout.mobile-landscape #showroomOverlay{top:38px;bottom:0}
/* Let every visible part of the knob receive pointer input, including overhang. */
body:not(.mobile-layout) #gasKnob{pointer-events:auto;cursor:grab;touch-action:none}
body:not(.mobile-layout) #gasKnob:before{content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:auto}
body:not(.mobile-layout) #gasKnob:active{cursor:grabbing}
body:not(.mobile-layout) #brakePedal{appearance:none;display:block;flex:none;width:34px;height:34px;padding:0;border:3px solid #a5aeb0;border-radius:50%;background:radial-gradient(circle at 35% 27%,#ffbcab 0,#f74939 22%,#cb161c 55%,#630810 90%);box-shadow:0 0 0 2px #252c30,0 3px 5px #0009,inset 0 1px 2px #fff8;cursor:pointer;touch-action:none}
body:not(.mobile-layout) #brakePedal.braking{background:radial-gradient(circle at 40% 35%,#b82322,#75080e);box-shadow:0 0 0 2px #252c30,inset 0 3px 6px #300,0 0 9px #fa332b55;transform:translateY(2px)}
body:not(.mobile-layout) .brake-wrap{align-items:flex-end;padding-bottom:0}
body:not(.mobile-layout) .brake-wrap .clutch-label{margin-bottom:3px}
#brakePedal:focus-visible{outline:2px solid white;outline-offset:4px}


.art-slot>span{font:700 10px Arial;letter-spacing:1px}

.lobby-opponents{width:785px;height:119px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#719ba8 transparent}
.lobby-opponents::-webkit-scrollbar{height:4px}
.lobby-opponents::-webkit-scrollbar-thumb{background:#719ba8;border-radius:3px}


/* v53: staging arrow bobs up and down; past the beams it flips and reads BACK UP */
#stageArrow .arrowshape{animation:stage-arrow-bob 1s ease-in-out infinite}
#stageArrow.reverse .arrowshape{animation-name:stage-arrow-bob-back;background:#ff9a1a;filter:drop-shadow(0 -2px 1px #7f3d00)}
#stageArrow.reverse .stage-text{color:#ff9a1a;text-shadow:2px 2px #5a2400;animation:stage-arrow-flash 1s ease-in-out infinite}
@keyframes stage-arrow-bob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-9px)}}
@keyframes stage-arrow-bob-back{0%,100%{transform:rotate(180deg) translateY(3px)}50%{transform:rotate(180deg) translateY(-9px)}}
@keyframes stage-arrow-flash{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){#stageArrow .arrowshape,#stageArrow .stage-text{animation:none}#stageArrow.reverse .arrowshape{transform:rotate(180deg)}}
#stageArrow .stage-text{white-space:nowrap;margin-left:-40px;margin-right:-40px}

/* ==== styles/customization.css ==== */
#customGarage{position:absolute;inset:102px 0 49px;z-index:75;padding:0;background:#142a35;color:#dbe7e9;border-top:2px solid #7e9da6;font:12px Arial;display:flex;flex-direction:column}
#customGarage[hidden]{display:none}.garage-custom-head{height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:linear-gradient(#52616a,#172d3a 52%,#10202c);border-bottom:2px solid #07121b;box-shadow:inset 0 1px #c3d4d74d}
.garage-custom-head small{font:8px Arial;letter-spacing:2px;color:#a3b6bf}.garage-custom-head h2{font:italic 900 22px Arial;margin:1px 0 0;letter-spacing:.5px}
#customGarage button,#customGarage select{padding:6px 9px;background:linear-gradient(#2a8aa0,#15576c);border:1px solid #91bbc5;border-radius:3px;color:white;cursor:pointer;font:700 10px Arial}
#customGarage button:hover{filter:brightness(1.2)}#customGarage button:focus-visible,#customGarage input:focus-visible,#customGarage select:focus-visible{outline:2px solid #ffe36b;outline-offset:2px}
.garage-body{display:grid;grid-template-columns:minmax(0,1fr) 264px;min-height:0;flex:1}.garage-view{position:relative;overflow:hidden;background:#10212b;min-height:200px}.garage-view canvas{width:100%;height:100%;display:block;touch-action:none}
.garage-views{position:absolute;bottom:12px;left:14px;display:flex;gap:5px}.garage-views button{min-width:58px}
#garageLoading{position:absolute;inset:0;display:grid;place-items:center;background:#10212bf0;color:#b7d4de;font:italic bold 17px Arial}#garageLoading[hidden]{display:none}

#customGarage label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-weight:bold;font-size:10px}#customGarage input[type=checkbox]{accent-color:#47bed1;width:16px;height:16px}#customGarage select{max-width:152px;font-size:10px;padding:5px}#customGarage select option{background:#173543}



#garageFeedback{flex:none;min-height:28px;box-sizing:border-box;margin:0;padding:8px 13px;color:#b9d2db;background:#101f29;border-top:1px solid #486472;font:10px Arial}
body.mobile-layout #customGarage{inset:58px 0 0}body.mobile-layout.mobile-landscape #customGarage{top:38px}.mobile-portrait .garage-body{grid-template-columns:1fr;grid-template-rows:minmax(200px,46%) 1fr}.mobile-portrait .garage-custom-head{height:50px}.mobile-portrait .garage-custom-head h2{font-size:19px}
#carSelection{position:absolute;inset:102px 0 49px;z-index:74;display:flex;flex-direction:column;color:#dbe7e9;font:12px Arial;background:linear-gradient(125deg,#184352,#0c2433 65%,#071b29);border-top:2px solid #8098a0}
#carSelection[hidden]{display:none}
#carSelection button{cursor:pointer}#carSelection button:focus-visible{outline:3px solid #f5d865;outline-offset:2px}.selection-head button,.selection-bottom button,#garageRace{padding:9px 13px;background:linear-gradient(#30859a,#175268);border:1px solid #92bdc8;box-shadow:inset 0 1px #ffffff30;border-radius:3px;color:white;font:900 10px Arial}
.car-selected{position:absolute;right:10px;top:16px;font:8px Arial;letter-spacing:.5px;color:#aac4ce}.car-card[aria-pressed=true] .car-selected{color:#f6dc82}
#customGarage label[hidden]{display:none}.garage-head-actions #garageDone{background:linear-gradient(#4a606d,#263b48)}
body.mobile-layout #carSelection{inset:58px 0 0}body.mobile-layout.mobile-landscape #carSelection{top:38px}.mobile-portrait .car-collection{grid-template-columns:1fr;padding:0 13px;gap:10px;overflow-y:auto}.mobile-portrait .car-card{min-height:200px}.mobile-portrait .car-card img{min-height:125px}.mobile-portrait .selection-bottom{padding:10px 13px;flex-wrap:wrap}.mobile-portrait .selection-bottom button{width:100%}.mobile-portrait .selection-credit{padding:2px 13px 8px}.mobile-portrait .selection-head{padding:0 13px;height:51px}.mobile-portrait .garage-head-actions{gap:4px}.mobile-portrait .garage-head-actions button{font-size:8px!important;padding:6px!important}


/* ==== styles/entry.css ==== */
/* Classic registration shell: live HTML controls, CSS panels, supplied helmets. */
body.entry-active #fit{visibility:hidden}.entry-screen[hidden]{display:none}.entry-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#020407;overflow:hidden;color:white;font:14px Arial,sans-serif}.entry-stage{position:relative;width:854px;height:572px;overflow:hidden;transform-origin:center;background:#030713;isolation:isolate;box-shadow:0 0 50px #000}.entry-stage button{cursor:pointer;font-family:Arial,sans-serif}.entry-stage button:focus-visible,.entry-stage input:focus-visible,.entry-stage select:focus-visible,.terms-paper:focus-visible{outline:2px solid #fff08a;outline-offset:3px}.entry-page[hidden]{display:none}.entry-page{position:absolute;inset:0;z-index:3;animation:entry-in .28s ease both}.entry-streaks{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 9px,#5293bc20 10px,transparent 12px 15px,#d9943620 16px,transparent 19px 24px),radial-gradient(ellipse at 96% 28%,#b57d08bb,transparent 32%),radial-gradient(ellipse at 7% 43%,#0424aab0,transparent 50%),linear-gradient(120deg,#02040d 15%,#090b28 48%,#43102a 66%,#070819 92%)}.entry-streaks:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,transparent 4%,#bb8d434d 4.3%,transparent 4.8%,transparent 10%,#3c78ce66 10.4%,transparent 11%,transparent 67%,#ce994849 68%,transparent 70%,transparent 83%,#9eb3c455 83.4%,transparent 84%,transparent 96%,#b8c9d440 97%,transparent 98%);filter:blur(.6px)}.entry-blue-band{position:absolute;top:228px;left:0;width:100%;height:155px;background:repeating-linear-gradient(0deg,transparent 0 23px,#4bcefd20 24px 27px,transparent 29px 43px),linear-gradient(100deg,#0874b9,#1487c6 66%,#0a689a);border-top:3px solid #429edc80;box-shadow:0 7px 20px #040918}.entry-blue-band:before{content:'';position:absolute;right:0;top:-30px;height:30px;width:235px;background:#117aab;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,3% 20%)}
.entry-brand{position:absolute;left:75px;top:31px;z-index:2;width:720px;height:160px;filter:drop-shadow(4px 6px 2px #000)}
.gold-panel{position:absolute;filter:drop-shadow(6px 6px 3px #0009);color:#191607}.panel-metal{position:absolute;inset:8px 5px 0 22px;background:var(--nitto-banner-texture);border-top:3px solid #bfa559;border-bottom:3px solid #917530}.panel-face{position:absolute;inset:0;background:linear-gradient(100deg,#c3990b,#d8aa0b 35%,#bf8f09 63%,#946512);clip-path:polygon(0 0,85% 0,90% 12%,100% 12%,100% 68%,96% 68%,91% 71%,86% 76%,81% 85%,78% 93%,77% 100%,0 100%);box-shadow:inset 2px 2px 2px #fff2aa,inset -2px -3px 3px #554200;border-radius:10px 0 0 0}.gold-panel h1{position:relative;display:flex;gap:12px;align-items:center;color:#fff;font:italic 900 22px/1 Arial;letter-spacing:1.2px;text-shadow:2px 2px 1px #705514;margin:11px 20px 10px;white-space:nowrap;transform:scaleY(.78);transform-origin:left}.gold-panel h1 img{width:27px;height:31px;object-fit:contain;filter:drop-shadow(2px 2px 1px #3c2900);transform:rotate(-12deg)}.gold-panel label{position:relative;display:block;font:italic 900 11px/1.2 Arial;letter-spacing:.7px;margin-bottom:12px}.gold-panel input:not([type=radio]),.gold-panel select{display:block;width:100%;height:22px;border:1px solid #bbbda2;border-radius:5px;background:#fff;color:#15191b;box-shadow:inset 1px 1px 1px #858574;padding:2px 7px;margin-top:2px;font:14px/1 Arial;letter-spacing:0}.gold-panel select{border-radius:0;height:22px;padding:0 4px}.entry-metal{border:1px solid #90a3a7;border-radius:0;background:linear-gradient(#f3fcff,#c6d8e0 40%,#839ca7 49%,#d5e3e7 65%,#c8dadd);box-shadow:0 1px 2px #0b151c;text-shadow:0 1px #fff;color:#1d272f;font:italic 900 11px/1 Arial;min-height:21px;padding:2px 5px;transition:filter .15s}.entry-metal:hover{filter:brightness(1.2)}.entry-metal:active{transform:translateY(1px)}.login-panel{left:238px;top:279px;width:365px;height:160px}.login-fields{position:relative;width:172px;margin:10px 0 0 25px}.login-fields label{margin-bottom:15px}.login-actions{position:absolute;right:0;top:81px;display:flex;flex-direction:column;gap:14px;width:137px}.login-actions button:first-child{margin-left:28px}.helmet{position:absolute;object-fit:contain;filter:drop-shadow(2px 8px 5px #0009);pointer-events:none}.helmet-returning{right:-12px;bottom:18px;width:252px;height:275px;transform:rotate(-6deg);animation:helmet-rise .65s ease both}.returning-label{position:absolute;right:14px;top:279px;color:#e0f1ff;font-weight:bold}.entry-switch{position:absolute;z-index:4;background:none;border:0;color:white;padding:0;text-align:center;font-size:14px;font-weight:700;line-height:15px;text-shadow:1px 1px #000}.entry-switch img{display:block;object-fit:contain;transition:transform .25s}.entry-switch:hover img{transform:translateY(-5px) rotate(-3deg)}.switch-new{left:17px;bottom:24px;width:133px}.switch-new img{width:120px;height:108px;margin:13px auto 0}.turn-arrow{display:block;font:900 82px/.65 Arial;text-shadow:none;color:red;transform:rotate(195deg);margin-bottom:13px}.register-panel{left:228px;top:204px;width:516px;height:302px}.register-panel h1{font-size:23px;margin-top:13px}.register-fields{position:relative;display:grid;grid-template-columns:172px 172px;gap:42px;margin:5px 0 0 24px}.register-fields label{margin-bottom:10px;font-size:10px}.register-fields fieldset{border:0;padding:0;margin:0;font:italic 900 10px/1.2 Arial;letter-spacing:.7px}.register-fields fieldset legend{margin:0 0 4px}.register-fields fieldset label{display:flex;align-items:center;gap:7px;margin:0 0 3px}.register-fields input[type=radio]{width:14px;height:14px;margin:0;accent-color:#111}.birth-row{display:flex;align-items:center;gap:10px;white-space:nowrap;font:12px Arial;letter-spacing:0}.birth-row input{max-width:76px}.panel-submit{position:absolute;bottom:24px;right:0;width:139px}.helmet-new{left:-27px;bottom:23px;width:242px;height:252px;transform:rotate(-5deg);animation:helmet-rise .6s ease both}.new-racers-label{position:absolute;left:36px;top:292px;font-weight:bold}.switch-return{right:0;bottom:24px;width:92px}.switch-return .turn-arrow{transform:rotate(-18deg);color:#002aff;font-size:77px;margin-bottom:10px}.switch-return img{width:95px;height:104px;margin-top:8px}.terms-panel{left:74px;top:199px;width:710px;height:301px}.terms-paper{position:absolute;left:25px;top:45px;width:516px;height:244px;overflow-y:scroll;background:white;color:#222;border:2px inset #c3c3b3;font:13px/1.5 Arial;padding:4px 9px}.terms-paper h2{font-size:13px;margin:0;background:black;color:#fff;display:inline;font-weight:400}.terms-paper p{max-width:410px;margin-top:20px}.terms-instruction{position:absolute;top:66px;right:18px;width:135px;font-size:14px;line-height:18px;color:#fff2ce}.terms-panel .panel-submit{bottom:27px}.recover-panel{left:224px;top:248px;width:470px;height:211px}.recover-panel label{margin:20px 24px;width:230px}.recover-panel p{position:relative;margin:10px 24px;max-width:282px;font-size:12px;line-height:1.4}.recover-panel h1{font-size:20px}.entry-back{position:absolute;left:25px;bottom:40px;background:none;border:0;color:#d2e9f4;font:bold 10px Arial!important;letter-spacing:.5px;padding:6px}.entry-back:hover{color:#fff}.entry-preview-note{position:absolute;z-index:8;bottom:4px;left:0;width:100%;text-align:center;margin:0;color:#a4a7b4;font:8px Arial;letter-spacing:1.3px;pointer-events:none}.starter-brand,.starter-bottom{display:none}
.entry-stage[data-page=rides],.entry-stage[data-page=detail]{background:radial-gradient(ellipse at 65% 100%,#667e9f 0,#344c6a 31%,#171e2c 65%,#131b25 100%)}.entry-stage[data-page=rides] .entry-brand,.entry-stage[data-page=detail] .entry-brand,.entry-stage[data-page=rides] .entry-streaks,.entry-stage[data-page=detail] .entry-streaks,.entry-stage[data-page=rides] .entry-blue-band,.entry-stage[data-page=detail] .entry-blue-band{display:none}.entry-stage[data-page=rides] .starter-brand,.entry-stage[data-page=detail] .starter-brand{display:flex}.starter-brand{position:absolute;left:0;top:0;height:94px;width:100%;z-index:5;align-items:center;padding:24px 15px 0;background:linear-gradient(#eff8fc,#a1b6c3 22px,#263b49 29px,transparent 32px),var(--nitto-banner-texture);border-bottom:4px ridge #c6b577;box-shadow:0 7px 8px #000a}.starter-brand>div{width:225px}.starter-brand b{font:italic 1000 34px/.8 'Arial Black',Arial;letter-spacing:-2px;color:#f8d344}.starter-brand small{display:block;font:8px Arial;letter-spacing:.9px}.starter-brand strong{font:italic 1000 57px/.8 'Arial Black',Arial;letter-spacing:-5px;background:linear-gradient(#fef0a4,#492b03 28%,#b7831f 40%,#fff99a 58%,#aa7717 70%,#fff2a1);background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}.starter-brand strong span{display:inline-block;font:italic 900 26px Arial;letter-spacing:-1px;margin-left:1px;background:linear-gradient(#faffff,#5b6973 46%,#fff 50%,#77858c);background-clip:text;transform:scaleY(.8)}.starter-brand em{position:absolute;right:17px;bottom:10px;color:#24f207;font:700 10px Arial}.entry-stage[data-page=rides] .starter-bottom,.entry-stage[data-page=detail] .starter-bottom{display:block;position:absolute;left:0;bottom:0;width:100%;height:50px;border-top:4px ridge #beae74;background:linear-gradient(transparent 14px,#ddce8477 15px,#061820 18px,#273942 48px),var(--nitto-banner-texture);z-index:2}.rides-page h1{position:absolute;left:100px;top:140px;margin:0;font:italic 900 22px Arial;transform:scaleY(.76);letter-spacing:1px;text-shadow:1px 1px #8494a6}.ride-intro{position:absolute;left:445px;top:139px;margin:0;font:14px/16px Arial}.ride-window{position:absolute;left:25px;right:25px;top:203px;height:290px;overflow:hidden}.ride-track{display:flex;height:100%;width:100%;transition:transform .52s cubic-bezier(.22,.72,.2,1);will-change:transform}.starter-car{position:relative;flex:0 0 50%;height:100%;min-width:0}.starter-car h2{position:absolute;top:15px;left:0;width:100%;text-align:center;margin:0;font:900 25px Arial;letter-spacing:.5px;z-index:2;text-shadow:1px 2px #707983}.starter-car h2 i,.detail-page h2 i{font:italic 1000 40px/.8 Arial;display:inline-block;color:#e62424;-webkit-text-stroke:1px #eee;filter:drop-shadow(2px 3px 2px #000);letter-spacing:-4px;margin-left:8px}.starter-car h2 small{display:block;font:900 19px Arial;letter-spacing:3px;margin-bottom:7px}.locked-car h2{top:1px;font-style:italic}.locked-car h2 i{font-size:25px;color:#ebf3f6}.starter-model{position:absolute;left:0;top:68px;width:100%;height:203px}.starter-model:before,.detail-model:before{content:'';position:absolute;left:15%;right:12%;bottom:15%;height:13%;background:#0007;border-radius:50%;filter:blur(9px);pointer-events:none}.starter-model canvas,.detail-model canvas{position:relative;display:block;width:100%;height:100%}.model-loading{position:absolute;top:50%;left:0;width:100%;text-align:center;font:11px Arial;color:#a8c8da}.ride-detail{position:absolute;right:23px;bottom:7px;z-index:4;min-width:92px}.entry-aqua{background:linear-gradient(#70bbce,#3194aa);border:2px solid #d7eef6;border-radius:5px;color:white;padding:5px 12px;font:900 13px Arial!important;text-shadow:1px 1px #518898;box-shadow:0 1px 3px #102734;transition:filter .15s,transform .15s}.entry-aqua:hover{filter:brightness(1.18);transform:translateY(-1px)}.ride-lock{position:absolute;inset:59px 40px 4px;z-index:3;display:grid;place-items:center;pointer-events:none}.no-entry{width:208px;height:208px;border:19px solid #f00b;border-radius:50%;position:absolute}.no-entry:after{content:'';position:absolute;left:70px;top:-12px;width:21px;height:195px;background:#f00b;transform:rotate(40deg)}.ride-lock strong{position:relative;background:#000;color:#ff0808;font:900 29px Arial;letter-spacing:1px;width:258px;text-align:center;padding:3px 0;box-shadow:0 2px 6px #0004}.locked-caption{position:absolute;bottom:0;width:100%;text-align:center;font:8px Arial;letter-spacing:1px;color:#d6dce4;margin:0}.ride-navigation{position:absolute;bottom:59px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:17px;color:#acbdcb;font:10px Arial;z-index:5}.ride-navigation button{border:1px solid #8bacb9;background:linear-gradient(#578898,#1d4b64);color:#e2f8ff;border-radius:3px;width:30px;height:24px}.rides-page .entry-back,.detail-page .entry-back{bottom:26px;z-index:5}.detail-page h2{position:absolute;right:47px;top:183px;font:900 25px Arial;z-index:4;text-shadow:1px 2px #707983;margin:0}.starter-specs{position:absolute;left:26px;top:146px;width:348px;z-index:4}.starter-specs h3{font:900 11px Arial;display:block;width:149px;border-bottom:2px solid #c5cbd1;margin:0 0 5px;padding-bottom:3px}.starter-specs p{font:14px/17px Arial;margin:0 0 48px}.starter-colors{width:270px;margin:6px 0 10px;color:#e7eef5}.starter-specs .starter-copy{margin:0 0 24px;width:330px;font:14px/16px Arial}.starter-specs .entry-aqua{float:right;margin-right:0}.detail-model{position:absolute;left:405px;right:10px;top:258px;height:229px}.detail-model:before{bottom:8%}.detail-model canvas{width:100%;height:100%}
@keyframes entry-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}@keyframes helmet-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.entry-page,.helmet{animation:none}.ride-track,.entry-stage button,.entry-switch img{transition:none}}
.panel-face{clip-path:polygon(0 0,85% 0,90% 12%,100% 12%,100% 68%,98% 68.1%,96% 68.4%,94% 69%,92% 69.9%,90% 71.2%,88% 72.8%,86% 74.8%,84% 77.2%,82% 80.3%,80.3% 84%,78.8% 88.5%,77.7% 94%,77% 100%,0 100%)}
.login-panel .panel-face{clip-path:polygon(0 0,73% 0,80% 23%,100% 23%,100% 39%,96% 39%,91% 40%,86% 42%,81% 46%,77% 51%,73% 57%,70% 64%,67% 72%,64% 81%,62% 90%,61% 100%,0 100%)}
/* Supplied logo, kept at its original proportions. The compact banner places
   the top and bottom artwork side by side with CSS cropping. */
.entry-brand{left:44px;top:-1px;width:770px;height:247px;filter:drop-shadow(3px 5px 2px #0009)}.entry-brand>img{width:100%;height:100%;object-fit:contain}.supplied-nitto,.supplied-challenge{position:absolute;display:block;overflow:hidden;pointer-events:none}.brandbar>.supplied-nitto,.starter-brand>.supplied-nitto{left:10px;top:9px;width:204px;height:48px}.supplied-nitto img{position:absolute;width:310px;max-width:none;height:auto;left:-6px;top:-13px}.brandbar>.supplied-challenge,.starter-brand>.supplied-challenge{left:226px;right:102px;top:3px;height:61px}.supplied-challenge img{position:absolute;width:525px;max-width:none;height:auto;left:-6px;top:-91px}.starter-brand>.supplied-nitto{top:40px}.starter-brand>.supplied-challenge{top:34px}.mobile-supplied-logo{display:block;width:205px;height:64px;object-fit:contain}.brandbar>.version{z-index:2}.entry-stage .entry-page h1:focus{outline:none}

body.entry-active #fit,body.entry-active #fit *{visibility:hidden!important}
.brandbar>.supplied-nitto,.starter-brand>.supplied-nitto{height:40px}


.starter-model>img{position:relative;display:block;width:100%;height:100%;object-fit:contain}.locked-car h2 i{letter-spacing:-1px}

/* ==== styles/garage.css ==== */
/* The classic collection, vehicle setup and paint shop share one blue studio. */
#carSelection,#customGarage{display:block;inset:102px 0 49px;background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%);border-top:1px solid #59727d;overflow:hidden;color:white}.classic-owned-stage,.classic-paint-stage{position:relative;width:854px;height:421px;transform:scale(var(--classic-scale,1));transform-origin:top left}.classic-garage-bar,.garage-custom-head{position:absolute;top:0;left:0;width:854px;height:52px;padding:0 36px;background:linear-gradient(#486273,#1d3447 35%,#0b1c29 79%,#304a5d 83%,#07141e 91%);border-top:2px solid #66849388;border-bottom:2px solid #516b8044;box-shadow:0 4px 9px #0008;z-index:5}.classic-aqua,#customGarage .classic-aqua,.vehicle-setup-tile,.setup-tiles button,.paint-nav button{border:2px solid #d8edf1;border-radius:6px;background:#1885a0;color:#fff;font:18px/1.15 Impact,'Arial Narrow',Arial,sans-serif;box-shadow:inset 0 0 0 1px #c7ecf038,0 1px 3px #101d2c;cursor:pointer;text-shadow:0 1px 1px #74a2ac;padding:6px 11px}.classic-aqua:hover,.vehicle-setup-tile:hover,.setup-tiles button:hover,.paint-nav button:hover{background:#25c7ed!important}.classic-aqua:focus-visible,.setup-tiles button:focus-visible,.vehicle-setup-tile:focus-visible{outline:3px solid #f7de78;outline-offset:3px}.garage-track{position:absolute;right:24px;top:10px;font-size:12px;padding:5px 10px}#garageBrowseHint{position:absolute;left:30px;top:19px;font:8px Arial;letter-spacing:1px;color:#b1c3cf}#setupBack{position:absolute;left:36px;top:10px;width:94px;font-size:14px;padding:4px}#setupCarTitle{position:absolute;right:65px;top:12px;margin:0;font:900 23px Arial;letter-spacing:1px}#setupCarTitle i,.owned-car h2 i{display:inline-block;font:italic 1000 40px/.75 Arial;color:#e72929;-webkit-text-stroke:1px #f5f9ff;letter-spacing:-3px;filter:drop-shadow(2px 3px 1px #050d19);margin-left:5px}.owned-car h2 i.acr,#setupCarTitle i.acr{font-size:26px;letter-spacing:-1px}.owned-viewport{position:absolute;top:53px;left:0;width:854px;height:351px;overflow:hidden;touch-action:pan-y;outline:none}.owned-rail{position:relative;display:flex;width:max-content;height:100%;transform:translateX(127px);will-change:transform}.owned-car{position:relative;flex:0 0 600px;width:600px;height:350px}.owned-car h2{position:absolute;top:31px;left:110px;margin:0;font:900 24px Arial;letter-spacing:.7px;white-space:nowrap;text-shadow:1px 2px #485367}.vehicle-setup-tile{position:absolute;left:155px;top:96px;width:162px;height:177px;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;font-size:19px;background:#1686a1}.owned-render{position:absolute;left:114px;top:142px;width:370px;height:207px;object-fit:contain;pointer-events:none;z-index:2}.owned-shadow{position:absolute;left:160px;top:290px;width:270px;height:30px;background:#0009;border-radius:50%;filter:blur(9px)}.owned-loading{position:absolute;left:190px;top:239px;font:12px Arial}.choose-owned{position:absolute;right:82px;bottom:23px;z-index:3;display:flex;align-items:center;gap:7px;font-size:13px;min-width:124px;justify-content:center}.choose-owned img,.setup-selected img{width:19px;height:20px;object-fit:contain}.owned-nav{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:8px Arial;color:#aec2d4;z-index:6}.owned-nav button{background:none;border:0;color:#aacbdf;font-size:16px;cursor:pointer;padding:4px 8px}.classic-credit{position:absolute;bottom:6px;left:17px;color:#a5b6ca;font:7px Arial;letter-spacing:.5px;text-decoration:none;z-index:6}.classic-blue-stripe{position:absolute;left:0;right:0;top:180px;height:118px;background:linear-gradient(#0b7db299,#0b87b0ae);border-bottom:8px solid #30506b;box-shadow:0 13px #047caf80;pointer-events:none}#vehicleSetupView{position:absolute;inset:52px 0 0}.setup-tiles{position:absolute;top:20px;left:48px;right:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:29px;z-index:1}.setup-tiles button{height:178px;display:flex;align-items:flex-start;justify-content:center;padding:15px 3px;font-size:19px;background:#178ba6b8}.setup-power{position:absolute;left:233px;bottom:130px;font:1000 30px Arial;text-shadow:2px 3px #123242;z-index:2}#setupCarRender{position:absolute;right:7px;bottom:10px;width:458px;height:257px;object-fit:contain;pointer-events:none;z-index:2}.setup-shadow{position:absolute;right:62px;bottom:40px;width:317px;height:27px;filter:blur(9px);background:#000a;border-radius:50%}.setup-admin{position:absolute;left:13px;bottom:30px;display:grid;gap:17px;z-index:3}.setup-admin button{font-size:17px;text-align:left;padding:5px 10px}.setup-admin .reset-look{background:#ad2945}.setup-selected{position:absolute;right:23px;bottom:28px;z-index:3;font-size:12px;display:flex;align-items:center;gap:6px}#setupNotice{position:absolute;left:165px;bottom:4px;width:500px;text-align:center;font:10px Arial;color:#f7e2a5;z-index:4;margin:0}#vehicleSetupView .classic-blue-stripe{top:128px}.classic-paint-stage .garage-custom-head{display:flex;align-items:center;justify-content:flex-start;gap:50px}.classic-paint-stage #garageDone{font:15px Impact,Arial;padding:5px 15px;min-width:91px;background:#259cb5;border:2px solid #cde6ed}.paint-nav{display:flex;gap:7px}.paint-nav button,#customGarage .paint-nav button{font:17px Impact,'Arial Narrow',Arial;border:2px solid #dceef3;border-radius:5px;padding:6px 11px;background:#2094b0}.paint-nav .current,#customGarage .paint-nav .current{background:#22c5ee}.classic-paint-stage .garage-body{position:absolute;top:52px;left:0;width:854px;height:369px;display:block;min-height:0}.classic-paint-stage .classic-blue-stripe{top:130px;height:105px}.paint-intro{position:absolute;left:351px;top:20px;width:422px;margin:0;font:14px/17px Arial;text-shadow:1px 1px #44536b}.classic-color-panel{position:absolute;left:20px;top:25px;width:298px;height:284px;filter:drop-shadow(3px 3px 2px #0005);z-index:4;color:#241c06}.color-panel-metal{position:absolute;inset:6px 5px 28px 10px;background:var(--nitto-banner-texture);border-top:3px ridge #d2b855;border-bottom:4px ridge #b89620}.color-panel-face{position:absolute;inset:0;background:linear-gradient(95deg,#cda816,#d6af1a 35%,#bd9219 66%,#957014);border-radius:9px 0 0 0;box-shadow:inset 2px 2px 2px #fff0a6;clip-path:polygon(0 0,72% 0,80% 13%,100% 13%,100% 65%,97% 65%,93% 65.7%,89% 67%,85% 69%,81% 72%,77% 75.5%,73% 80%,69% 85.5%,66% 92%,64% 100%,0 100%)}.classic-color-panel h3{position:absolute;left:17px;top:14px;margin:0;font:900 11px Arial;letter-spacing:.3px}.classic-paint-stage .garage-view{position:absolute;left:362px;right:0;top:113px;height:235px;min-height:0;background:transparent;overflow:visible;z-index:2}.classic-paint-stage .garage-view:before{content:'';position:absolute;bottom:23px;left:68px;right:39px;height:26px;border-radius:50%;background:#0009;filter:blur(8px)}.classic-paint-stage #garageCanvas{position:relative;z-index:1}.classic-paint-stage .garage-views{bottom:0;left:auto;right:17px;gap:4px;z-index:3}.classic-paint-stage .garage-views button,#customGarage .garage-views button{font:8px Arial;padding:3px 7px;min-width:0;background:#234e68c9;border:1px solid #96b5c3}.classic-paint-stage #garageLoading{background:transparent;pointer-events:none;font:14px Arial}.paint-balance{position:absolute;left:69px;top:313px;font:bold 12px Arial;color:#dce9f2;margin:0;text-shadow:1px 1px #6c7b90}.classic-paint-stage #garageFeedback{position:absolute;left:360px;bottom:2px;width:480px;min-height:0;background:none;border:0;text-align:center;padding:2px 3px;font:8px Arial;color:#d5e4f3;pointer-events:none;z-index:4}.classic-paint-stage [hidden]{display:none!important}
.choose-owned .car-selected{position:static;font:13px Impact,'Arial Narrow',Arial;color:#fff;letter-spacing:0}.owned-car h2{left:155px}


/* Workshop photography stays behind the paint shop controls and transparent car. */
#customGarage .garage-body{background:linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,.58) 22%,rgba(0,0,0,.15) 55%,transparent 80%),url('../assets/paint-shop-workshop.png') center center/cover no-repeat}
#customGarage .classic-blue-stripe{display:none}
#customGarage .paint-intro{text-shadow:0 1px 3px #000c,0 0 8px #0008}
#customGarage .paint-balance,#customGarage #garageFeedback{text-shadow:0 1px 3px #000c}

#customGarage .garage-view:before{display:none}

#customGarage .garage-body{background-size:100% 100%,125% auto}
body.mobile-layout #customGarage .garage-body{background-size:100% 100%,auto 125%}

/* Lift the car and its 3D contact shadow together within the paint shop. */
#customGarage #garageCanvas{transform:translateY(-10%)}

/* v81 — cars with catalog "locked" rims / graphics (05-customization.js updateCarSelection) */



/* ==== styles/performance.css ==== */
#graphicsPanel{position:absolute;z-index:80;left:22px;top:165px;width:236px;padding:16px;background:linear-gradient(120deg,#cbaa25,#9b7618);color:#151c21;border:2px solid #eee1a3;box-shadow:4px 6px 20px #000a;border-radius:5px;font:12px Arial}#graphicsPanel[hidden]{display:none}#graphicsPanel h3{font:bold italic 16px Arial;margin:0 0 17px}#graphicsPanel label{display:flex;align-items:center;justify-content:space-between;font-weight:bold}#raceQuality{font:12px Arial;padding:5px}#graphicsPanel p{line-height:1.4;margin:12px 0}#racePerformance{display:block;font:11px/1.6 monospace;color:#f5f9fc;background:#162331;padding:8px}#closeGraphics{float:right;background:none;border:0;font:22px Arial;color:#172939;cursor:pointer}.entry-active #graphicsPanel{display:none}

#selectedCarThumbnail{width:84px;height:43px;object-fit:contain;margin-left:10px;align-self:center;transform:translateY(-3px)}


.engine-audio-settings{border-top:1px solid #71581888;margin-top:12px;padding-top:5px}.engine-audio-settings h4{font:bold 12px Arial;letter-spacing:.7px;margin:8px 0}.engine-audio-settings label{margin:8px 0;font:bold 11px Arial}.engine-audio-settings input[type=range]{width:126px;accent-color:#126d85}.engine-audio-settings input[type=checkbox]{accent-color:#126d85;width:16px;height:16px}#engineAudioProfile{max-width:144px;font:10px Arial;padding:4px}#engineAudioStatus{display:block;color:#213a43;font:10px/14px Arial;min-height:28px;margin-top:8px}

/* ==== styles/tune-dyno.css ==== */
/* Tune & Dyno = the paint-shop page in "tune" mode: same gold panel frame, ratio boxes instead of colors. */
#customGarage[data-mode=tune] #paintPanel,
#customGarage[data-mode=tune] .paint-balance{display:none!important}
.classic-tune-panel[hidden]{display:none!important}
.classic-tune-panel [data-tune-pane]{position:absolute;inset:0}
.classic-tune-panel [data-tune-pane][hidden]{display:none}
.tune-tabs{position:absolute;left:14px;top:9px;display:flex;gap:4px;z-index:2}
.tune-tabs button{padding:3px 12px;font:900 11px Arial;letter-spacing:.3px;color:#241c06;background:linear-gradient(#f4e29a,#c9a52b);border:1px solid #7c5f12;border-radius:3px 3px 0 0;cursor:pointer}
.tune-tabs button[aria-pressed=true]{background:linear-gradient(#fffbe3,#e3c45a);box-shadow:inset 0 -2px #a88418}
.tune-gears{position:absolute;left:16px;top:44px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,23px);gap:2px 10px}
.tune-gears label{display:flex;align-items:center;gap:6px;font:bold 12px Arial;color:#241c06}
.tune-gears label[hidden]{display:none}
.tune-gears label span{width:28px;text-align:right}.tune-gears sup{font-size:8px}
.classic-tune-panel input{width:62px;height:19px;box-sizing:border-box;padding:1px 4px;font:bold 12px Arial;color:#16232a;background:linear-gradient(#fff,#e8eef0);border:1px solid #6d7a80;box-shadow:inset 1px 1px 2px #0003;text-align:right}
.classic-tune-panel input:disabled{color:#5c5440;background:#e7dcb0}
.tune-final{position:absolute;left:200px;display:flex;flex-direction:column;gap:3px;font:900 11px Arial;color:#241c06}
.tune-final{top:46px}
/* 7+ gears: second column of ratios, Final Drive moves underneath it */
.tune-gears.two-columns~.tune-final{left:126px;top:122px;flex-direction:row;align-items:center;gap:6px}
.tune-gearbox-art{position:absolute;left:12px;bottom:30px;width:74px;filter:drop-shadow(2px 3px 2px #0006);pointer-events:none}
#tuneStatus{position:absolute;left:92px;width:80px;top:203px;margin:0;font:bold 10px/1.3 Arial;color:#241c06}
#customGarage #tuneSave,#customGarage #tuneStock{position:absolute;right:0;width:123px;height:20px;padding:1px;background:linear-gradient(#f7ffff,#a0afb4 52%,#dce7e9);border:1px solid #bbc6c8;border-radius:0;color:#16232a;text-shadow:0 1px white;font:bold 11px Arial;cursor:pointer;box-shadow:none}
#customGarage #tuneSave{bottom:47px}#customGarage #tuneStock{bottom:72px;font-size:10px}
#customGarage #tuneSave[hidden],#customGarage #tuneStock[hidden]{display:none}
.tune-dyno-soon{position:absolute;left:0;right:70px;top:110px;margin:0;text-align:center;font:900 22px Arial;letter-spacing:2px;color:#241c06aa}
.tune-dyno-soon small{font:bold 11px Arial;letter-spacing:0}
/* phones: the panel stacks under the car like the color panel does */
body.mobile-layout .classic-tune-panel{position:relative;inset:auto;width:100%;height:auto;min-height:260px;padding:44px 16px 64px;border-radius:16px;background:linear-gradient(130deg,#d7b347,#c19a25 55%,#a8791c);filter:none}
body.mobile-layout .classic-tune-panel .color-panel-metal,body.mobile-layout .classic-tune-panel .color-panel-face{display:none}
body.mobile-layout .classic-tune-panel [data-tune-pane]{position:relative;inset:auto;min-height:200px}
body.mobile-layout .tune-gears{left:0;top:0}
body.mobile-layout .tune-final{left:auto;right:0;top:0}
body.mobile-layout .tune-gearbox-art{display:none}
body.mobile-layout #tuneStatus{position:static;margin-top:160px}
body.mobile-layout #customGarage #tuneSave{bottom:-50px;right:0}body.mobile-layout #customGarage #tuneStock{bottom:-50px;right:130px}
body.mobile-layout .tune-gears.two-columns~.tune-final{left:auto;right:0}

/* ==== styles/track-loading.css ==== */
/* v36 track loading card: covers the race scene until cars, textures and shaders are ready. */
#trackLoading{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#16222c 0%,#070a0e 70%);opacity:1;transition:opacity .3s ease}
#trackLoading[hidden]{display:none}
#trackLoading.done{opacity:0;pointer-events:none}
.track-loading-card{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(420px,80%)}
.track-loading-card img{width:100%;max-width:340px;filter:drop-shadow(0 4px 10px #000a)}
.track-loading-card b{font:900 20px Arial;letter-spacing:4px;color:#f4d35e;text-shadow:0 2px 0 #4a3500,0 0 14px #f4c03a55}
.track-loading-bar{width:100%;height:12px;border:1px solid #b6912a;border-radius:7px;background:#1b1508;box-shadow:inset 0 2px 4px #000c;overflow:hidden}
.track-loading-bar i{display:block;height:100%;width:5%;background:linear-gradient(#fff3b0,#e2b33a 55%,#a77b14);border-radius:6px;transition:width .25s ease}
.track-loading-step{font:bold 12px Arial;color:#c9d4dc;letter-spacing:.5px;min-height:15px}
@media (prefers-reduced-motion:reduce){#trackLoading,.track-loading-bar i{transition:none}}

/* ==== styles/glass.css ==== */
/* Shared "black glass" look (from the account-balance drawer): use .ui-glass for panels, .ui-row for list rows,
   .ui-kicker for small gold labels and .ui-ico for the round icon at the start of a row. */
:root{
  --glass-bg:linear-gradient(115deg,transparent 30%,#ffffff10 30.5%,#ffffff04 52%,transparent 70%),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(#161d22,#040608 85%);
  --glass-border:#3a434a;--glass-gold:#c9a23c;--glass-text:#e6edf1;--glass-dim:#7f8f99;--glass-green:#7dff6a;--glass-red:#ff6b62;
  --row-bg:linear-gradient(115deg,transparent 45%,#ffffff07 45.5%,transparent 80%),#ffffff06;
}
.ui-glass{border:1px solid var(--glass-border);border-radius:12px;color:var(--glass-text);background:var(--glass-bg);box-shadow:0 10px 26px #000a,0 0 0 1px #000,inset 0 1px #ffffff1c}
.ui-glass.ui-gold{border-top-color:var(--glass-gold)}
.ui-kicker{font:900 8.5px Arial;letter-spacing:2px;color:var(--glass-gold);text-transform:uppercase}
.ui-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0a;color:var(--glass-text);text-align:left}
.ui-row>div{min-width:0}
.ui-row b{display:block;font:bold 11px Arial;color:#eef3f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row small{display:block;margin-top:2px;font:10px Arial;color:var(--glass-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row em{font:italic 900 12px Arial;font-variant-numeric:tabular-nums;color:#e9eef1}
.ui-row em.in{color:var(--glass-green)}.ui-row em.loss{color:var(--glass-red)}
button.ui-row{cursor:pointer;width:100%;transition:border-color .12s,background .12s}
button.ui-row:hover,.ui-row.selected{border-color:#c9a23c88;background:linear-gradient(115deg,transparent 45%,#ffffff0c 45.5%,transparent 80%),#c9a23c14}
.ui-row.selected{box-shadow:inset 3px 0 var(--glass-gold)}
.ui-ico{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:900 12px Arial;font-style:normal;color:#fff;background:radial-gradient(circle at 35% 30%,#59656d,#262e34 70%);overflow:hidden;flex:none}
.ui-ico.in{color:#071a05;background:radial-gradient(circle at 35% 30%,#c5ffb5,#43d22f 60%,#1d7d12)}
.ui-ico.loss{color:#fff;background:radial-gradient(circle at 35% 30%,#ffb3ab,#e1453b 60%,#8a1912)}
.ui-ico.gold{color:#241605;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b33a 60%,#8a6410)}
.ui-ico img{width:100%;height:100%;object-fit:contain}
/* Pill buttons in the style of the Challenges tab (INCOMING / OUTGOING): graphite glass with a faint
   diagonal shine by default; blue glass for the main action or the selected tab; red glass for leave/withdraw.
   .result-btn (race result screen) shares the same look. */
.ui-btn,.result-btn{cursor:pointer;color:#f1f5f8;border:1px solid #03080d;border-radius:999px;padding:7px 16px;font:900 9.5px/14px Arial;letter-spacing:.4px;text-shadow:0 1px 1px #000b;
  background:linear-gradient(113deg,transparent 0 46%,#dce5ec17 46.3%,#b0c1cf08 72%,transparent 100%),linear-gradient(180deg,#ffffff0b,#ffffff02 44%,#00000028 53%,#ffffff06),linear-gradient(#1c2227,#0a0d10);
  box-shadow:inset 0 0 0 1px #e5f0f32b,inset 0 1px 1px #f5fcff26,inset 0 -1px 2px #00000055,0 1px 0 #ffffff14,0 -1px 2px #0009;transition:filter .12s,box-shadow .15s,transform .12s}
.ui-btn:hover,.result-btn:hover{filter:brightness(1.25)}
.ui-btn:active,.result-btn:active{transform:translateY(1px);filter:brightness(.95)}
.ui-btn[aria-pressed=true],.ui-btn-primary,.result-btn-primary{color:#fff;border-color:#03182a;
  background:linear-gradient(113deg,transparent 0 46%,#d6f1ff30 46.3%,#a9dcff10 72%,transparent 100%),linear-gradient(180deg,#ffffff24,#ffffff08 44%,#0000002e 53%,#ffffff10),linear-gradient(#2b85c3,#185f95 55%,#0d3a60);
  box-shadow:inset 0 0 0 1px #9fd8ff5c,inset 0 1px 1px #e4f6ff70,inset 0 -1px 2px #001a3088,0 1px 0 #ffffff14,0 0 12px #1f8fe038}
.ui-btn-danger,.ui-btn.team-danger{color:#ffe9e6;border-color:#1c0504;
  background:linear-gradient(113deg,transparent 0 46%,#ffd9d42a 46.3%,transparent 78%),linear-gradient(180deg,#ffffff1e,#ffffff06 44%,#0000002e 53%,#ffffff0c),linear-gradient(#a3352d,#6e1d17 55%,#45100c);
  box-shadow:inset 0 0 0 1px #ffb3ab4d,inset 0 1px 1px #ffe2de5c,inset 0 -1px 2px #2a050388,0 1px 0 #ffffff14,0 0 10px #e1453b2e}
.ui-btn:disabled{cursor:default;opacity:.5;filter:none;transform:none}
.ui-btn:focus-visible,.result-btn:focus-visible,button.ui-row:focus-visible{outline:2px solid #f4d377;outline-offset:2px}
@keyframes ui-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ui-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ui-glass,.ui-row{animation:none!important}}

/* ==== styles/wallet.css ==== */
/* Account balance: footer chip + pull-up drawer + flying cash. Black glass with the game's diagonal shine. */
#game .status>#walletChip{position:absolute}
.wallet-chip{--shine:linear-gradient(115deg,transparent 38%,#ffffff12 38.6%,#ffffff05 55%,transparent 74%);
  position:absolute;left:50%;top:calc(50% + 8px);transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:7px;height:25px;padding:0 10px 0 4px;
  border:1px solid #3b444b;border-radius:13px;cursor:pointer;color:#e9eef1;font:bold 10px Arial;
  background:var(--shine),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(#1a2127,#05080a);
  box-shadow:inset 0 1px #ffffff1a,inset 0 -1px #000,0 2px 6px #000a;transition:border-color .15s,box-shadow .15s}
.wallet-chip:hover,.wallet-chip.open{border-color:#c9a23c;box-shadow:inset 0 1px #ffffff26,0 0 0 1px #c9a23c55,0 0 14px #f4c03a33}
.wallet-chip:focus-visible{outline:2px solid #f2d17c;outline-offset:2px}
.wallet-coin{width:24px;height:auto;filter:drop-shadow(0 1px 1px #000)}
.wallet-label{font:900 7.5px Arial;letter-spacing:1.6px;color:#8c9aa3}
#walletAmount{font:italic 900 13px Arial;letter-spacing:.3px;color:#7dff6a;text-shadow:0 0 8px #3cff3a33;font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.wallet-caret{width:0;height:0;border:4px solid transparent;border-bottom:5px solid #8c9aa3;margin-top:-5px;transition:transform .2s}
.wallet-chip.open .wallet-caret{transform:translateY(4px) rotate(180deg)}
.wallet-chip.hit{animation:wallet-hit .28s ease-out}
.wallet-chip.gaining #walletAmount{color:#b6ff9f;text-shadow:0 0 12px #6aff4a99}
.wallet-plus{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);font:italic 900 15px Arial;color:#7dff6a;text-shadow:0 2px 0 #000,0 0 10px #3cff3a88;white-space:nowrap;pointer-events:none;animation:wallet-plus 2.2s ease-out forwards}
@keyframes wallet-hit{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes wallet-plus{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}15%{opacity:1;transform:translate(-50%,-4px) scale(1.1)}70%{opacity:1;transform:translate(-50%,-18px) scale(1)}100%{opacity:0;transform:translate(-50%,-30px)}}

/* drawer: grows up out of the footer above the chip */
.wallet-drawer{position:absolute;left:50%;bottom:40px;z-index:95;width:300px;transform:translateX(-50%);transform-origin:50% 100%;padding:12px 14px 10px;border-radius:12px;color:#e6edf1;font-family:Arial,sans-serif;
  border:1px solid var(--glass-border);border-top-color:var(--glass-gold);
  background:var(--glass-bg);   /* shared with the team page: styles/glass.css */
  box-shadow:0 18px 40px #000d,0 0 0 1px #000,inset 0 1px #ffffff1c}
.wallet-drawer:after{content:'';position:absolute;left:50%;bottom:-7px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:#05080a;border-right:1px solid #3a434a;border-bottom:1px solid #3a434a}
.wallet-drawer[hidden]{display:none}
.wallet-drawer.opening{animation:wallet-open .32s cubic-bezier(.2,1.2,.4,1) both}
.wallet-drawer.closing{animation:wallet-close .2s ease-in both}
.wallet-drawer header{display:flex;justify-content:space-between;align-items:center;font:900 9px Arial;letter-spacing:2px;color:#9aa8b1}
.wallet-close{width:22px;height:22px;border:1px solid #39424a;border-radius:6px;background:#0b1014;color:#b9c6ce;font-size:11px;cursor:pointer}
.wallet-close:hover{border-color:#c9a23c;color:#fff}
.wallet-hero{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.wallet-hero img{width:42px;height:auto;filter:drop-shadow(0 3px 4px #000)}
.wallet-big{font:italic 900 30px/1 Arial;color:#f4f8fa;letter-spacing:.5px;text-shadow:0 2px 0 #000;font-variant-numeric:tabular-nums}
.wallet-sub{margin:4px 0 10px 52px;font:bold 10px Arial;color:#8c9aa3}
.wallet-sub .up{color:#7dff6a}.wallet-sub .down{color:#ff6b62}
.wallet-drawer h4{margin:0 0 6px;padding-top:9px;border-top:1px solid #ffffff14;font:900 8.5px Arial;letter-spacing:2px;color:#c9a23c}
.wallet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.wallet-list li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0a}
.wallet-drawer.opening .wallet-list li{animation:wallet-row .3s calc(.08s + var(--i)*.04s) ease-out both}
.wallet-list li>i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:900 13px Arial;font-style:normal}
.wallet-list li>i.in{color:#071a05;background:radial-gradient(circle at 35% 30%,#c5ffb5,#43d22f 60%,#1d7d12)}
.wallet-list li>i.out{color:#fff;background:radial-gradient(circle at 35% 30%,#59656d,#262e34 70%)}
.wallet-list li>div{min-width:0}
.wallet-list b{display:block;font:bold 11px Arial;color:#eef3f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet-list small{display:block;margin-top:2px;font:10px Arial;color:#7f8f99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet-list em{font:italic 900 12px Arial;font-variant-numeric:tabular-nums}
.wallet-list em.in{color:#7dff6a}.wallet-list em.out{color:#e9eef1}
.wallet-note{margin:9px 0 0;font:9px Arial;color:#5f6e77;text-align:center}
@keyframes wallet-open{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.92)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes wallet-close{to{opacity:0;transform:translateX(-50%) translateY(10px) scale(.95)}}
@keyframes wallet-row{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* flying cash (lives on <body>, positioned from screen coordinates) */
.wallet-fly{position:fixed;z-index:10050;pointer-events:none;filter:drop-shadow(0 3px 4px #000a) drop-shadow(0 0 6px #4dff3a66);will-change:transform}

/* the footer is hidden on phones; the balance shows in the phone menu instead */
body.mobile-layout .wallet-chip,body.mobile-layout .wallet-drawer{display:none!important}
@media(prefers-reduced-motion:reduce){.wallet-chip,.wallet-drawer,.wallet-drawer *,.wallet-plus{animation:none!important;transition:none!important}}

/* ==== styles/dev-tuning.css ==== */
/* Hidden 1320 tuning page (Option/Alt + 1320). Developer screen: dense, readable, matches the gold/dark game chrome. */
#devTuning{position:fixed;inset:0;z-index:10000;display:flex;justify-content:center;padding:18px;background:#05080ce6;font:13px Arial,sans-serif;color:#dfe6ea}
#devTuning[hidden]{display:none}
.dt-window{display:flex;flex-direction:column;width:min(1180px,100%);max-height:100%;background:linear-gradient(#141c24,#0b1117);border:1px solid #b6912a;border-radius:8px;box-shadow:0 10px 40px #000c}
#devTuning header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #b6912a55}
#devTuning header b{display:block;font:900 18px Arial;letter-spacing:3px;color:#f4d35e}
#dtServer{font-size:11px;color:#9fb0ba}#dtServer.dt-warn{color:#ffb35c}
.dt-actions{display:flex;align-items:center;gap:8px}
#dtDirty{font-size:12px;color:#f4d35e;margin-right:4px}
.dt-actions button{padding:6px 12px;font:900 12px Arial;letter-spacing:.5px;border-radius:4px;cursor:pointer;border:1px solid #6d7a80;background:linear-gradient(#f7ffff,#a0afb4 52%,#dce7e9);color:#16232a}
#dtSave{background:linear-gradient(#fff3b0,#e2b33a 55%,#a77b14);border-color:#7c5f12;color:#241c06}
#dtSave:disabled{opacity:.45;cursor:default}
#dtClose{width:32px;padding:6px 0;font-size:15px}
#devTuning nav{display:flex;flex-wrap:wrap;gap:4px;padding:10px 16px 0}
#devTuning nav button{padding:6px 12px;font:900 11px Arial;letter-spacing:.6px;color:#c9d4dc;background:#1c2731;border:1px solid #2f3e4a;border-bottom:0;border-radius:4px 4px 0 0;cursor:pointer}
#devTuning nav button.on{color:#241c06;background:linear-gradient(#fffbe3,#e3c45a);border-color:#a88418}
#dtStatus{margin:0;padding:6px 16px;min-height:16px;font-size:12px;color:#9fb0ba;border-top:1px solid #b6912a55}
#dtStatus.dt-ok{color:#8fe39a}#dtStatus.dt-error{color:#ff8a7a;white-space:pre-wrap}
.dt-pane{overflow:auto;padding:4px 16px 18px}
.dt-pane h3{margin:16px 0 6px;font:900 12px Arial;letter-spacing:1px;color:#f4d35e;text-transform:uppercase}
.dt-pane h3 small{font:11px Arial;color:#8a9aa4;text-transform:none;letter-spacing:0;margin-left:6px}
.dt-note{margin:10px 0 4px;padding:8px 10px;font-size:12px;line-height:1.45;color:#b9c6ce;background:#ffffff08;border-left:3px solid #b6912a;border-radius:3px}
.dt-row{display:grid;grid-template-columns:minmax(260px,1fr) 110px minmax(180px,.9fr);align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #ffffff0d}
.dt-label{display:flex;flex-direction:column;gap:2px;font-weight:bold;color:#e6edf1}
.dt-label small{font-weight:normal;font-size:10.5px;color:#7f8f99}
.dt-hint{font-style:normal;font-size:11px;color:#9fd3ff}
#devTuning input{width:100px;height:24px;box-sizing:border-box;padding:2px 6px;font:bold 12px Arial;text-align:right;color:#16232a;background:linear-gradient(#fff,#e8eef0);border:1px solid #6d7a80;border-radius:2px}
#devTuning input.dt-changed{background:#fff3c4;border-color:#e2b33a;box-shadow:0 0 0 2px #e2b33a55}
.dt-car{margin-top:8px;padding:4px 12px 10px;background:#ffffff06;border:1px solid #2a3742;border-radius:6px}
.dt-grid,.dt-effects{display:flex;flex-wrap:wrap;gap:8px 14px}
.dt-grid label,.dt-effects label,.dt-ratios label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:#9fb0ba}
.dt-effects i{font:bold 13px Arial;color:#9fb0ba;padding-top:4px}
.dt-ratios{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin-top:8px}
.dt-ratios b{width:62px;font-size:11px;color:#f4d35e;padding-bottom:5px}
.dt-ratios label span{text-align:center}
.dt-ratios .dt-fd{margin-left:10px}
.dt-part{display:grid;grid-template-columns:minmax(240px,300px) 1fr;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #ffffff0d}
body.dev-tuning-open{overflow:hidden}
@media (max-width:760px){.dt-row{grid-template-columns:1fr 100px}.dt-row .dt-hint{grid-column:1/-1}.dt-part{grid-template-columns:1fr}#devTuning header{flex-direction:column;align-items:flex-start}}
.dt-racer .dt-effects{align-items:flex-end}.dt-racer .dt-hint{padding-bottom:5px;min-width:150px}

#devTuning .dt-select{width:110px;height:24px;font:bold 12px Arial;color:#16232a;background:linear-gradient(#fff,#e8eef0);border:1px solid #6d7a80;border-radius:2px}

/* ==== styles/community.css ==== */
/* Community (v47 redesign) — same black-glass kit as the team page (styles/glass.css).
   Header band → channels | chat | online. Names use the gold helmet; the racer card shows the avatar. */
#communityScreen{position:absolute;inset:102px 0 49px;z-index:75;color:var(--glass-text);font:12px Arial,sans-serif;overflow:hidden;
  background:radial-gradient(ellipse at 20% 115%,#c9a23c12,transparent 55%),radial-gradient(ellipse at 85% -10%,#5d7e9a33,transparent 55%),linear-gradient(160deg,#151c22,#07090b 70%)}
#communityScreen[hidden],#communityScreen [hidden]{display:none!important}
#communityScreen button{font-family:Arial,sans-serif}
#communityScreen :is(button,input,textarea,summary):focus-visible{outline:2px solid #f4d377;outline-offset:2px}
.community-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
#communityScreen .community-stage{position:absolute;inset:0;display:grid;grid-template-columns:192px minmax(0,1fr) 196px;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px 14px 8px}
#communityScreen .ui-glass{min-height:0}
#communityScreen .cm-round{width:28px;height:28px;padding:0;display:grid;place-items:center;flex:none}
#communityScreen .cm-round svg{width:14px;height:14px}

/* ---------- header band ---------- */
.cm-hero{grid-column:1/-1;position:relative;display:flex;align-items:center;gap:12px;padding:8px 12px;overflow:hidden}
.cm-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 50%,#c9a23c26,transparent 40%)}
.cm-hero>*{position:relative;z-index:1}
.cm-hero-helmet{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 3px 4px #000a)}
.cm-hero-title h1{margin:1px 0 0;font:italic 900 19px/1 Arial;letter-spacing:.4px;color:#fff;text-shadow:0 2px 3px #0008}
.cm-live{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:10px;border:1px solid #7dff6a40;background:#7dff6a10;font:900 7.5px Arial;letter-spacing:1.2px;color:var(--glass-green)}
.cm-live i,.community-server p i{width:6px;height:6px;border-radius:50%;background:var(--glass-green);box-shadow:0 0 6px var(--glass-green);animation:cm-pulse 1.8s ease-in-out infinite}
.cm-hero-sub{flex:1;min-width:0;margin:0;font:italic 9.5px Arial;color:var(--glass-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-views{display:flex;gap:4px}
.cm-views .ui-btn{padding:7px 15px;font-size:9px}
.cm-hero.cm-arrive>*{animation:cm-arrive .3s cubic-bezier(.2,.8,.2,1) both}

/* ---------- channels ---------- */
.community-channels{display:flex;flex-direction:column;gap:7px;padding:9px 9px 8px}
.community-server{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:0 2px}
.community-server p{display:flex;align-items:center;gap:5px;margin:3px 0 0;font:700 8px Arial;letter-spacing:.4px;color:#9aa8b1}
.community-channel-search input{width:100%;box-sizing:border-box;padding:6px 9px;border-radius:999px;border:1px solid var(--glass-border);background:#05080a;color:#f2f5f7;font:10px Arial;box-shadow:inset 0 2px 4px #000c;outline:none}
.community-channel-search input:focus{border-color:#c9a23caa}
.community-channel-search input::placeholder{color:#5f6b73}
.community-channel-list{flex:1;min-height:0;overflow:auto;margin:0 -3px;padding:0 3px;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.community-category{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 4px;font:900 7.5px Arial;letter-spacing:1.6px;color:var(--glass-gold)}
.community-category:first-child{margin-top:0}
#communityScreen .cm-add{width:20px;height:20px;padding:0;font:900 13px/1 Arial;display:grid;place-items:center}
.community-channel{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;min-height:25px;margin:0 0 2px;padding:4px 7px;border:1px solid transparent;border-radius:7px;background:none;color:#aab6be;text-align:left;font:700 10px Arial;cursor:pointer;transition:background .12s,color .12s}
.community-channel:hover{color:#fff;background:var(--row-bg);border-color:#ffffff0a}
.community-channel.active{color:#fff;border-color:#c9a23c88;background:linear-gradient(115deg,transparent 45%,#ffffff0c 45.5%,transparent 80%),#c9a23c14;box-shadow:inset 3px 0 var(--glass-gold)}
.community-symbol{font:900 13px/1 Arial;color:#6f7d86;text-align:center}
.community-channel.active .community-symbol{color:var(--glass-gold)}
.community-symbol svg{width:12px;height:12px;vertical-align:middle}
.cm-chan-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-unread{min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;border-radius:8px;font:900 8px Arial;color:#241605;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b33a 60%,#8a6410);box-shadow:0 0 6px #e2b33a66}
.community-voice{grid-template-columns:14px minmax(0,1fr) auto auto}
.cm-voice-faces{display:flex;align-items:center}
.cm-voice-faces .community-avatar{width:16px;height:16px;margin-left:-5px}
.cm-voice-faces .community-avatar:first-child{margin-left:0}
.cm-voice-faces em{margin-left:3px;font:900 7.5px Arial;font-style:normal;color:#9aa8b1}
.cm-voice-join{font:900 7px Arial;letter-spacing:1px;color:#8fd0ff;opacity:0;transition:opacity .12s}
.community-voice:hover .cm-voice-join,.community-voice.active .cm-voice-join{opacity:1}
.community-voice.active{color:#fff;border-color:#67addb88;background:#2a7db722;box-shadow:inset 3px 0 #67addb}
.community-voice.active .cm-voice-join{color:#ffb0a8}

/* ---------- gold helmet (everyone, on this tab) ---------- */
.community-avatar{position:relative;flex:none;display:block;width:28px;height:28px}
.community-avatar>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #000a)}
.community-avatar:after{content:'';position:absolute;right:-1px;bottom:0;width:7px;height:7px;border-radius:50%;border:1.5px solid #0b1014;background:var(--glass-green);box-shadow:0 0 4px #7dff6a88;display:none}
.community-avatar.is-online:after,.community-avatar.is-racing:after,.community-avatar.is-offline:after{display:block}
.community-avatar.is-racing:after{background:#4fb8ff;box-shadow:0 0 4px #4fb8ff99}
.community-avatar.is-offline:after{background:#5b656c;box-shadow:none}

/* ---------- chat ---------- */
.community-main{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:0;overflow:hidden}
.community-chat-head{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid #ffffff10}
.community-hash{font:900 20px/1 Arial;color:var(--glass-gold)}
.cm-chan{flex:1;min-width:0}
.cm-chan h2{margin:0;font:italic 900 15px Arial;color:#fff}
.cm-chan p{margin:1px 0 0;font:9px Arial;color:var(--glass-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.community-head-tools{display:flex;gap:5px}
.cm-chat-wrap{position:relative;min-height:0}
.community-chat{position:absolute;inset:0;overflow-y:auto;padding:8px 12px 10px;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.cm-day{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font:900 7px Arial;letter-spacing:1.6px;color:#6f7d86}
.cm-day:before,.cm-day:after{content:'';flex:1;height:1px;background:#ffffff12}
.community-message{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;margin:0 -6px;padding:5px 6px 4px;border-radius:7px;animation:ui-row-in .22s ease-out both;transition:background .12s}
.community-message:hover{background:#ffffff07}
.community-message.cont{padding-top:1px;margin-top:-2px}
.community-message+.community-message:not(.cont){margin-top:4px}
.cm-face{padding:0;border:0;background:none;cursor:pointer;align-self:start}
.cm-face .community-avatar{width:30px;height:30px}
.cm-face:hover .community-avatar>img{filter:drop-shadow(0 0 5px #f4d37799)}
.community-message-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;margin-bottom:1px}
.cm-name{padding:0;border:0;background:none;cursor:pointer;font:bold 11px Arial;color:var(--racer-color,#7fd2ff)}
.cm-name:hover{text-decoration:underline}
.cm-tag{padding:1px 5px;border-radius:7px;font:900 7px Arial;letter-spacing:.6px;color:#cfd8de;background:#ffffff10;border:1px solid #ffffff18}
.cm-tag.cm-mod{color:#241605;background:#e2b33a;border-color:#ffe08a}
.community-message-head time{font:8px Arial;color:#6f7d86}
.community-message-content p{margin:0;font:10.5px/1.45 Arial;color:#dfe7ec;white-space:pre-wrap;overflow-wrap:anywhere}
.community-message.moderator .community-message-content p{color:#ffe7a3}
.community-message-art{display:block;max-width:200px;max-height:120px;margin-top:5px;border:1px solid #ffffff22;border-radius:8px;object-fit:contain}
.community-system{display:table;margin:8px auto;padding:4px 11px;border-radius:999px;border:1px solid #c9a23c55;background:#c9a23c14;font:700 8.5px Arial;letter-spacing:.3px;color:#f4d377}
#communityScreen .cm-jump{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:5px 13px;font-size:8px;z-index:2}
.community-compose{display:flex;align-items:center;gap:5px;margin:0 10px;padding:5px 5px 5px 6px;border-radius:999px;border:1px solid var(--glass-border);background:#05080a;box-shadow:inset 0 2px 5px #000c}
.community-compose:focus-within{border-color:#c9a23caa}
.community-compose textarea{flex:1;min-width:0;height:22px;padding:4px 6px;resize:none;border:0;background:none;color:#f2f5f7;font:11px/14px Arial;outline:none;scrollbar-width:none}
.community-compose textarea::placeholder{color:#5f6b73}
#communityScreen .cm-icon{width:24px;height:24px;padding:0;display:grid;place-items:center;flex:none;font:900 12px/1 Arial}
#communityScreen .cm-icon svg{width:13px;height:13px}
#communityScreen .cm-gif{width:30px;font-size:8px;letter-spacing:.3px}
#communityScreen .community-send{padding:6px 16px;font-size:9px}
.community-picker{position:absolute;right:52px;bottom:48px;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:6px;border-radius:10px;animation:ui-pop .16s ease-out both}
.community-picker button{width:30px;height:30px;border:0;border-radius:7px;background:none;font:18px Arial;cursor:pointer}
.community-picker button:hover{background:#ffffff14}
.community-notice{margin:5px 12px 6px;font:8px Arial;color:#66737c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- online panel ---------- */
.community-roster{display:flex;flex-direction:column;padding:9px 8px 8px}
.cm-roster-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px;border-bottom:1px solid #ffffff10}
.cm-roster-head h2{margin:0}
.community-racers{flex:1;min-height:0;overflow:auto;padding-top:4px;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.cm-group h3,.cm-offline>summary{margin:8px 4px 4px;font:900 7px Arial;letter-spacing:1.4px;color:#7f8f99}
.cm-offline>summary{cursor:pointer;list-style:none}
.cm-offline>summary::-webkit-details-marker{display:none}
.cm-offline>summary:before{content:'▸ ';color:var(--glass-gold)}
.cm-offline[open]>summary:before{content:'▾ '}
.cm-racer{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;margin:0 0 2px;padding:4px 6px;border:1px solid transparent;border-radius:7px;background:none;color:var(--glass-text);text-align:left;cursor:pointer;animation:ui-row-in .24s ease-out both;animation-delay:calc(var(--i,0)*25ms);transition:background .12s,border-color .12s}
.cm-racer .community-avatar{width:26px;height:26px}
.cm-racer:hover{background:var(--row-bg);border-color:#ffffff0a}
.cm-racer[aria-pressed=true]{border-color:#c9a23c88;background:linear-gradient(115deg,transparent 45%,#ffffff0c 45.5%,transparent 80%),#c9a23c14;box-shadow:inset 3px 0 var(--glass-gold)}
.cm-racer>div{min-width:0}
.cm-racer b{display:block;font:bold 10.5px Arial;color:#eef3f6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-racer small{display:block;margin-top:1px;font:8.5px Arial;color:var(--glass-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-racer.offline{opacity:.6}
.cm-star{font-style:normal;color:#f4d377;font-size:10px}
.cm-empty{margin:14px 6px;font:10px/1.45 Arial;color:var(--glass-dim);text-align:center}

/* ---------- racer card (opens beside the name) ---------- */
#communityScreen .community-racer-dialog{position:absolute;inset:auto;left:50%;top:60px;margin:0;width:252px;max-width:calc(100% - 16px);box-sizing:border-box;padding:12px;z-index:20;color:var(--glass-text);overflow:hidden}
#communityScreen .community-racer-dialog:not([open]){display:none}
#communityScreen .community-racer-dialog.cm-pop{animation:cm-card-r .26s cubic-bezier(.18,1.2,.4,1) both}
#communityScreen .community-racer-dialog.cm-pop[data-side=left]{animation-name:cm-card-l}
#communityRacerClose{position:absolute;right:9px;top:9px;z-index:2}
.cm-card-head{display:flex;align-items:center;gap:10px;padding-right:24px}
.cm-card-head .nitto-avatar{width:62px;height:62px;flex:none;border-width:1.5px;box-shadow:0 0 0 3px #c9a23c33,0 4px 10px #000a}
.cm-card-head>div{min-width:0}
.cm-chip{display:inline-block;max-width:100%;padding:2px 7px;border-radius:8px;font:900 7px Arial;letter-spacing:.8px;color:#f4d377;background:#c9a23c1c;border:1px solid #c9a23c44;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.cm-card-head h3{margin:4px 0 3px;font:italic 900 18px/1.05 Arial;color:#fff;overflow-wrap:anywhere}
.community-preview-status{font:900 7.5px Arial;letter-spacing:1px;color:var(--glass-green)}
.community-preview-status[data-status=racing]{color:#4fb8ff}.community-preview-status[data-status=offline]{color:#7f8f99}
.cm-card-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:10px 0 0}
.cm-card-stats>div{padding:5px 7px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0d}
.cm-card-stats dt{font:900 6.5px Arial;letter-spacing:1.3px;color:var(--glass-gold)}
.cm-card-stats dd{margin:2px 0 0;font:italic 900 11.5px Arial;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-card-car{position:relative;height:92px;margin:6px -12px 0;background:radial-gradient(ellipse at 50% 85%,#ffffff14,transparent 60%)}
.cm-card-car img{position:absolute;left:4%;bottom:12px;width:92%;height:78px;object-fit:contain;filter:drop-shadow(0 7px 5px #000b)}
.cm-card-car p{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font:700 8.5px Arial;color:#b3bfc6}
.cm-card-actions{display:flex;gap:6px;margin-top:8px}
.cm-card-actions .ui-btn{flex:1;padding:7px 8px;font-size:8.5px;white-space:nowrap}

/* ---------- settings ---------- */
#communityScreen #communityHelpPanel{position:absolute;left:auto;right:14px;top:58px;bottom:auto;width:290px;box-sizing:border-box;margin:0;padding:14px 16px;z-index:21;font:10.5px/1.55 Arial;color:#b3bfc6;border-radius:12px;animation:ui-pop .2s ease-out both}
#communityScreen #communityHelpPanel::before{display:none}
#communityScreen #communityHelpPanel h2{margin:4px 0 8px;font:italic 900 16px Arial;color:#fff}
#communityScreen #communityHelpPanel p{margin:0 0 8px}
#communityScreen #communityHelpClose{position:absolute;right:10px;top:10px;width:24px;height:24px;font:13px Arial}

@keyframes cm-pulse{50%{opacity:.35}}
@keyframes cm-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes cm-card-r{from{opacity:0;transform:translateX(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cm-card-l{from{opacity:0;transform:translateX(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes cm-sheet{from{opacity:.5;transform:translateY(100%)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#communityScreen *,#communityScreen *:before,#communityScreen *:after{animation:none!important;transition:none!important}}

/* Help-panel base (also used by the challenge message and Used Car Lot build dialogs). */
.community-help-panel{position:absolute;left:27%;right:20%;top:80px;padding:20px;border:1px solid #32bcf5;border-radius:10px;background:linear-gradient(130deg,#1b3344,#0c1822);box-shadow:0 10px 35px #000a;z-index:8;font:12px/1.5 Arial;color:#c4d7e7}
.community-help-panel[hidden]{display:none}
.community-help-panel>img{float:left;width:36px;height:36px;object-fit:contain;margin-right:10px}
.community-help-panel h2{font:900 17px Arial;color:#fff;margin:8px 0 23px}
.community-help-panel>button{position:absolute;right:7px;top:5px;border:0;background:none;font:23px Arial;color:#bcd5e9;cursor:pointer}
body.mobile-portrait .community-help-panel{left:12%;right:8%;top:65px}

/* ---------- phone ---------- */
body.mobile-layout #communityScreen{inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 calc(var(--phone-foot) + env(safe-area-inset-bottom))}
body.mobile-layout #communityScreen .community-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px}
body.mobile-layout .cm-hero{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
body.mobile-layout .cm-hero-title h1{font-size:20px}
body.mobile-layout .cm-hero-sub{display:none}
body.mobile-layout .cm-live{margin-right:auto;font-size:9px}
body.mobile-layout .cm-views{order:5;flex:1 0 100%}
body.mobile-layout .cm-views .ui-btn{flex:1;min-height:38px;font-size:11px}
body.mobile-layout #communityScreen .cm-round{width:38px;height:38px}
body.mobile-layout #communityScreen .cm-round svg{width:18px;height:18px}
body.mobile-layout #mobileChannels{font-size:16px}
body.mobile-layout .community-channels,body.mobile-layout .community-roster{position:fixed;z-index:30;top:calc(var(--phone-head) + env(safe-area-inset-top) + 8px);bottom:calc(var(--phone-foot) + env(safe-area-inset-bottom) + 8px);width:min(300px,calc(100vw - 32px));display:none;box-shadow:0 0 0 100vmax #000a,0 10px 30px #000c}
body.mobile-layout .community-channels{left:8px}
body.mobile-layout .community-roster{right:8px}
body.mobile-layout .community-stage.channels-open .community-channels{display:flex;animation:cm-card-r .28s cubic-bezier(.18,1.2,.4,1) both}
body.mobile-layout .community-stage.members-open .community-roster{display:flex;animation:cm-card-l .28s cubic-bezier(.18,1.2,.4,1) both}
body.mobile-layout #communityScreen .tm-x{width:34px;height:34px;font-size:16px}
body.mobile-layout .community-channel{min-height:40px;font-size:14px}
body.mobile-layout .community-channel-search input{font-size:16px;min-height:40px}
body.mobile-layout .cm-racer{grid-template-columns:34px minmax(0,1fr) auto;padding:7px 8px}
body.mobile-layout .cm-racer .community-avatar{width:34px;height:34px}
body.mobile-layout .cm-racer b{font-size:14px}
body.mobile-layout .cm-racer small{font-size:11px}
body.mobile-layout .cm-chan h2{font-size:18px}
body.mobile-layout .cm-chan p{font-size:11px}
body.mobile-layout .community-message{grid-template-columns:36px minmax(0,1fr)}
body.mobile-layout .cm-face .community-avatar{width:36px;height:36px}
body.mobile-layout .cm-name{font-size:14px}
body.mobile-layout .community-message-head time{font-size:10px}
body.mobile-layout .community-message-content p{font-size:14px}
body.mobile-layout .community-compose{margin:0 8px;padding:6px}
body.mobile-layout .community-compose textarea{font-size:16px;height:30px}
body.mobile-layout #communityScreen .cm-icon{width:34px;height:34px}
body.mobile-layout #communityScreen #communityGift,body.mobile-layout #communityScreen .cm-gif{display:none}
body.mobile-layout #communityScreen .community-send{min-height:36px;font-size:11px}
body.mobile-layout .community-notice{font-size:10px}
body.mobile-layout #communityScreen .community-racer-dialog{position:fixed;left:8px!important;right:8px;top:auto!important;bottom:calc(var(--phone-foot) + env(safe-area-inset-bottom) + 8px);width:auto;max-width:none;padding:16px;z-index:40;box-shadow:0 0 0 100vmax #000a,0 -10px 30px #000c}
body.mobile-layout #communityScreen .community-racer-dialog.cm-pop{animation:cm-sheet .3s cubic-bezier(.18,1.1,.4,1) both}
body.mobile-layout .cm-card-head .nitto-avatar{width:72px;height:72px}
body.mobile-layout .cm-card-head h3{font-size:22px}
body.mobile-layout .cm-card-stats dd{font-size:15px}
body.mobile-layout .cm-card-stats dt{font-size:8px}
body.mobile-layout .cm-card-car{height:130px}
body.mobile-layout .cm-card-car img{height:110px}
body.mobile-layout .cm-card-car p{font-size:11px}
body.mobile-layout .cm-card-actions .ui-btn{min-height:44px;font-size:11px}
body.mobile-layout #communityScreen #communityHelpPanel{position:fixed;left:12px;right:12px;width:auto;top:calc(var(--phone-head) + env(safe-area-inset-top) + 12px);font-size:14px}
body:not(.mobile-layout) #communityScreen .mobile-only{display:none!important}
#communityScreen #communityHelpPanel{background:var(--glass-bg);border:1px solid var(--glass-border);border-top-color:var(--glass-gold);box-shadow:0 10px 26px #000a,0 0 0 1px #000,inset 0 1px #ffffff1c;text-shadow:none}
#communityScreen #communityHelpPanel .ui-kicker{display:block;position:static;color:var(--glass-gold)}
.community-main{grid-template-columns:minmax(0,1fr)}

/* ===== BLUE BACKGROUND TEST (v69) — the car showroom's blue gradient replaces the dark base colour.
   Delete this whole block to switch back. ===== */
#communityScreen{background:radial-gradient(ellipse at 20% 115%,#c9a23c12,transparent 55%),radial-gradient(ellipse at 85% -10%,#5d7e9a33,transparent 55%),radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
/* ===== end BLUE BACKGROUND TEST ===== */

/* ==== styles/showroom.css ==== */
/* A dense, image-based catalog: no live 3D renderer per card. */
#carShowroomScreen{position:absolute;inset:102px 0 49px;z-index:74;background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%);color:white;overflow:hidden;border-top:1px solid #59727d}
#carShowroomScreen[hidden]{display:none!important}.showroom-head h1{position:absolute;left:28px;top:17px;margin:0;font:italic 900 14px Arial;letter-spacing:1px}.showroom-head>span{position:absolute;right:30px;top:22px;font:8px Arial;letter-spacing:1px;color:#afc2cf}.showroom-head #showroomBack{position:absolute;left:28px;top:10px;font-size:14px;padding:4px 15px}.showroom-head #showroomDetailTitle{position:absolute;right:32px;top:17px;margin:0;font:900 19px Arial}.showroom-car{position:relative;flex:0 0 390px;width:390px;height:351px}.showroom-car h2{position:absolute;left:0;right:0;top:45px;margin:0;text-align:center;font:900 23px Arial;letter-spacing:1px;white-space:nowrap;text-shadow:1px 2px #485367}.showroom-car h2 i,#showroomDetailTitle i{display:inline-block;color:#e82929;font:italic 1000 27px/.9 Arial;letter-spacing:-2px;-webkit-text-stroke:.6px #f5f9ff;filter:drop-shadow(2px 3px 1px #050d19);margin-left:4px}.showroom-car[data-showroom-car=evo] h2{font-size:17px;letter-spacing:.4px}.showroom-car[data-showroom-car=evo] h2 i{font-size:23px}.showroom-car img{position:absolute;left:0;top:100px;width:390px;height:219px;object-fit:contain;pointer-events:none;z-index:2}.showroom-car .showroom-shadow{position:absolute;left:55px;right:48px;top:265px;height:25px;border-radius:50%;background:#000a;filter:blur(9px)}.showroom-price{position:absolute;left:26px;bottom:14px;font:italic 900 18px Arial;text-shadow:1px 2px #122238}.showroom-actions{position:absolute;right:18px;bottom:9px;display:flex;gap:6px;z-index:3}.showroom-actions .classic-aqua{font-size:12px;padding:5px 10px;min-width:70px}.showroom-actions [disabled]{background:#264153!important;color:#bac9d4;border-color:#7a9bac;cursor:default;box-shadow:none;text-shadow:none}.showroom-demo-note{position:absolute;left:18px;bottom:6px;font:6px Arial;letter-spacing:.5px;color:#a8bdce;z-index:4}#showroomDetail{position:absolute;inset:52px 0 0}.showroom-specs{position:absolute;left:30px;top:38px;width:280px;z-index:3}.showroom-specs h3{width:185px;border-bottom:2px solid #d6dce6;padding-bottom:3px;margin:0 0 6px;font:900 10px Arial}.showroom-specs ul{list-style:none;padding:0;margin:0;color:#e1ebf3;font:12px/18px Arial}.showroom-specs>p{margin:24px 0 14px;font:12px/17px Arial;color:#dbe5ef}.showroom-specs>strong{display:block;margin:0 0 12px;font:italic 900 25px Arial;text-shadow:1px 2px #14293d}.showroom-specs .classic-aqua{font-size:14px;padding:7px 13px}.showroom-specs #showroomPurchaseStatus{margin:10px 0;color:#f4d374;font:10px/14px Arial}.showroom-detail-shadow{position:absolute;left:365px;right:44px;top:285px;height:30px;border-radius:50%;background:#000a;filter:blur(10px)}#showroomDetailRender{position:absolute;right:0;top:71px;width:530px;height:297px;object-fit:contain;pointer-events:none}.showroom-head:has(#showroomBack:not([hidden])) h1{display:none}
/* Closer garage cars, retaining the setup tile and selected-car button. */
.owned-car{flex-basis:390px;width:390px}.owned-car h2{left:0;right:0;top:40px;text-align:center;font-size:23px;letter-spacing:.6px}.owned-car h2 i{font-size:33px}.owned-car[data-car=evo] h2{font-size:17px}.owned-car[data-car=evo] h2 i{font-size:23px}.owned-car .vehicle-setup-tile{left:111px;top:100px;width:151px;height:148px;font-size:17px;padding-top:12px}.owned-car .owned-render{left:0;top:137px;width:390px;height:219px}.owned-car .owned-shadow{left:58px;top:283px;width:275px}.owned-car .choose-owned{right:24px;bottom:17px;font-size:12px}.owned-car .choose-owned .car-selected{font-size:12px}.owned-loading{left:140px;font-size:11px}#carShowroomScreen [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.owned-rail{will-change:auto}}

/* Shadows are captured from each car on its actual ground plane. */
.owned-shadow,.showroom-shadow,.setup-shadow,.showroom-detail-shadow{display:none}
/* Feather only the transparent margins so broad studio shadows never form a rectangular edge. */
.owned-render,.showroom-car img,#setupCarRender,#showroomDetailRender{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,#000 88%,transparent);
  mask-composite:intersect;
}
/* v74 — paint picker + 3D car on the showroom detail page */
.showroom-detail-model{position:absolute;pointer-events:none;opacity:0}
.showroom-detail-model.ready{opacity:1}
.showroom-detail-model canvas{display:block;width:100%;height:100%}
#showroomDetailRender{transition:none}#showroomDetailRender.is-3d,#showroomDetailRender.model-loading{opacity:0}
.showroom-paint-bar{position:absolute;right:0;width:530px;top:322px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none}
.showroom-paint-bar>*{pointer-events:auto}
.showroom-color-head{font:900 9px Arial;letter-spacing:1.5px;color:#e1ebf3}
.showroom-colors{position:relative;margin:0}



#showroomColorNote{font:7px Arial;color:#c7d3dc;max-width:110px;line-height:1.25}#showroomColorNote:empty{display:none}
body.mobile-layout .showroom-paint-bar{position:static;width:auto;order:-1;flex-wrap:wrap;margin:4px 0 10px}


/* ==== styles/parts-shop.css ==== */
#partsShopScreen{position:absolute;inset:102px 0 49px;z-index:74;color:#fff;overflow:hidden;background:#0a88c7;font:12px Arial}#partsShopScreen[hidden],#partsShopScreen [hidden]{display:none!important}.speedshop-stage{isolation:isolate}.speedshop-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#00caff95,transparent 50%),linear-gradient(110deg,#002479 0%,#057eb3 47%,#128dcc 66%,#0d8dcd);overflow:hidden;z-index:-3}.speedshop-backdrop:before{content:'';position:absolute;inset:55px 0 0;background:repeating-linear-gradient(0deg,transparent 0 2px,#78d5ff16 2px 3px),linear-gradient(123deg,transparent 13%,#01389d44 14% 18%,transparent 19% 32%,#0056b844 33% 38%,transparent 39%);clip-path:polygon(0 0,69% 0,45% 100%,0 100%)}.speedshop-rings{position:absolute;width:650px;height:650px;right:-350px;top:45px;border:8px solid #71c8ec20;border-radius:50%;box-shadow:0 0 0 37px #0aa0d345,0 0 0 47px #81ccde20,0 0 0 96px #119fdb36,0 0 0 104px #87d2e71c}.speedshop-gold{position:absolute;left:0;top:0;bottom:0;width:184px;background:linear-gradient(130deg,#d5a72c,#b27c04 40%,#e8b82e);clip-path:polygon(0 0,100% 0,72% 7%,47% 15%,28% 26%,13% 40%,6% 55%,7% 72%,17% 89%,30% 100%,0 100%);z-index:-1}/* Graphite Speedshop toolbar. The plate and controls share one unclipped layout. */
.speedshop-header{position:absolute;inset:0 0 auto;height:73px;padding:0 28px;display:flex;align-items:center;gap:12px;isolation:isolate;overflow:visible;clip-path:none;border:0;border-bottom:1px solid #030405;background:linear-gradient(116deg,transparent 45%,#c4c9ce12 45.2%,transparent 78%),radial-gradient(ellipse 60% 90% at 40% 0,#d7af4f0a,transparent 75%),linear-gradient(#101317,#030405 72%);box-shadow:0 4px 9px #0006}
.speedshop-header:before{content:'';position:absolute;inset:0 0 auto;height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#aebbc24d 50%,transparent)}
.speedshop-header:after{content:'';position:absolute;inset:auto 0 0;height:2px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,#d3b15a66 28%,#d3b15a22 70%,transparent)}
#speedshopTitle{position:static;flex:1;min-width:0;margin:0;color:#f3f6f8;font:italic 900 28px/1 Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;text-shadow:0 2px 2px #000;white-space:nowrap;user-select:none}
#partsInventory,#partsBack{position:static;z-index:1;flex-shrink:0;margin:0;min-height:30px;padding:7px 12px;border:1px solid #65afdc77;border-radius:5px;background:linear-gradient(#297cb3,#195682 55%,#123c5d);box-shadow:inset 0 1px #c5ecff44,inset 0 -1px #04263b99,0 2px 4px #0008;color:#f4f9fc;font:700 10px/14px Arial,sans-serif;letter-spacing:.4px;text-shadow:0 1px 1px #0007}
#partsBack{border-color:#727d8866;background:linear-gradient(#343d46,#20272e 60%,#161b20);color:#dce5ed}
#partsInventory:hover,#partsBack:hover{filter:brightness(1.16)}
#partsInventory:focus-visible,#partsBack:focus-visible{outline:2px solid #e9d794;outline-offset:3px}
.speedshop-context{position:absolute;top:91px;left:54px;right:28px;display:flex;justify-content:space-between;align-items:center;text-shadow:1px 2px #005580;font:bold 9px Arial;letter-spacing:1px}#partsCarName{font-size:8px;color:#d5f2ff;letter-spacing:.5px}#partsViewport{position:absolute;left:0;top:189px;width:854px;height:212px;overflow:hidden;touch-action:pan-y;outline:none}#partsRail{position:relative;display:flex;width:max-content;height:100%;will-change:transform}.parts-card{flex:0 0 200px;width:200px;height:201px;padding:0 16px;position:relative}.parts-art,.parts-detail-art{position:relative;width:168px;height:194px;border:0;border-radius:4px;color:#fff;background:linear-gradient(115deg,#303b4d 24%,#49576c 51%,#26323f 83%);box-shadow:inset -6px -5px 15px #0006,4px 7px 8px #002a6280;overflow:hidden}.parts-art:before,.parts-detail-art:before{content:'';position:absolute;inset:0;background:linear-gradient(165deg,#000 0,#040a118a 24%,transparent 54%,#0007 100%);pointer-events:none}.parts-art{cursor:pointer;display:block;padding:0}.parts-art h2,.parts-detail-art h2{position:absolute;top:14px;left:10px;right:10px;margin:0;font:15px/18px Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:.2px;text-align:center;text-shadow:0 2px #172235}.parts-art:hover{background:linear-gradient(115deg,#375169 24%,#667b8f 51%,#2a475c 83%);box-shadow:inset 0 0 0 2px #adeafa,4px 7px 8px #002a6280}.parts-art:focus-visible{outline:3px solid #ffdc71;outline-offset:-3px}.parts-tile-price{position:absolute;bottom:14px;left:0;right:0;text-align:center;font:italic 900 15px Arial;color:#f9df95}.parts-tile-owned{position:absolute;bottom:34px;left:0;right:0;font:bold 8px Arial;letter-spacing:1px;color:#d4f0ff}.speedshop-balance{position:absolute;left:50%;transform:translateX(-50%);bottom:9px;margin:0;font:bold 10px Arial;text-shadow:1px 2px #095075}.speedshop-preview{position:absolute;right:17px;bottom:7px;margin:0;font:5px Arial;letter-spacing:.5px;color:#c1e3ed}.parts-detail-art{position:absolute;left:59px;top:134px;width:211px;height:242px}.parts-detail-art h2{font-size:18px;line-height:22px}.part-detail-info{position:absolute;left:321px;top:137px;width:466px}.part-detail-info>span{font:bold 9px Arial;letter-spacing:1px;color:#c3e5f7}.part-detail-info h2{font:21px Impact,Arial;letter-spacing:.6px;margin:8px 0 19px}.part-detail-info p{font:12px/17px Arial;color:#e3f5ff;max-width:405px;text-shadow:1px 1px #00679a}.part-detail-info>strong{display:block;font:italic 900 24px Arial;margin:17px 0 13px;color:#ffdf8d}.part-detail-info .classic-aqua{font-size:13px}#partFeedback{font:10px/15px Arial;margin-top:10px;color:#ffebae}#partsOwned{position:absolute;left:58px;right:35px;top:119px;bottom:45px}#partsOwned>h2{font:20px Impact,Arial;margin:0 0 12px;letter-spacing:1px}#partsOwnedList{max-height:212px;overflow-y:auto;padding-right:5px;scrollbar-color:#78cdea #15496d;scrollbar-width:thin}.owned-part-row{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:5px;background:linear-gradient(110deg,#183952ee,#164f77cc);border:1px solid #63b5d588;border-radius:3px}.owned-part-row strong{flex:1;font:14px Impact,Arial;letter-spacing:.5px}.owned-part-row small{color:#c2e7f5;font:9px Arial}.owned-part-row .classic-aqua{font-size:11px;padding:4px 10px}.owned-part-row [aria-pressed=true]{background:#aa7724}#partsOwned>p{font:13px/20px Arial;color:#def3ff;max-width:430px}#partsShopReturn{margin-top:9px;font-size:12px}

/* Product cutouts remain separate from the gradient, heading and price. */
.part-product-image{position:absolute;z-index:1;left:9px;right:9px;top:58px;width:calc(100% - 18px);height:88px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 4px #0005)}
.parts-art h2,.parts-detail-art h2{z-index:2}
.parts-tile-price,.parts-tile-owned{z-index:2}
.parts-detail-art .part-product-image{left:12px;right:12px;top:69px;width:calc(100% - 24px);height:157px}

/* Increase the product cutouts while keeping labels and prices in place. */
.part-product-image{transform:scale(1.25);transform-origin:center;}
.parts-detail-art .part-product-image{top:57px;height:157px;}
body.mobile-layout .parts-detail-art .part-product-image{top:61px;height:104px;}

.parts-art,.parts-detail-art{overflow:visible;}
.parts-art:before,.parts-detail-art:before{border-radius:4px;}

/* Back stays at the left edge of the toolbar, including narrow phone layouts. */
body.mobile-layout .speedshop-header #partsBack {margin-left:0;order:0}
body.mobile-layout .speedshop-header #speedshopTitle {order:1}
body.mobile-layout .speedshop-header #partsInventory {order:2}
@media(max-width:400px) {body.mobile-layout .speedshop-header #speedshopTitle {flex:1 1 100px}}

/* ==== styles/paint-shop.css ==== */
/* ==== COLOR BARS (01f-color-bars.js) — the one color picker: hue / saturation / brightness, hex, recent colors ==== */
.color-bars{display:grid;gap:4px;color:inherit}
.color-bars .cb-row,#customGarage .color-bars .cb-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0;padding:0;min-height:18px;height:auto;border:0;font:900 7px Arial;letter-spacing:.3px;color:inherit}
.color-bars .cb-row span{order:2;width:58px;flex:none}
.color-bars .cb-row input{appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:auto;height:8px;margin:0;padding:0;border:1px inset #eee7b4;border-radius:0;cursor:pointer;accent-color:auto}
.color-bars [data-bar=h]{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.color-bars [data-bar=s]{background:linear-gradient(90deg,var(--cb-sat0,#fff),var(--cb-sat1,#f00))}
.color-bars [data-bar=v]{background:linear-gradient(90deg,#000,var(--cb-val1,#f00))}
.color-bars .cb-row input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:10px;height:17px;border:1px solid #525750;border-radius:1px;background:linear-gradient(90deg,#a6ada9,#c8cdc9,#8e9791);box-shadow:1px 1px 1px #51451c}
.color-bars .cb-row input::-moz-range-thumb{width:9px;height:16px;border:1px solid #525750;border-radius:1px;background:#afb7b0}
.color-bars .cb-foot{display:flex;align-items:center;gap:9px;margin-top:2px}
.color-bars .cb-hex,#customGarage .color-bars .cb-hex{display:flex;align-items:center;gap:5px;margin:0;padding:0;font:900 7px Arial;letter-spacing:.3px;color:inherit;flex:none}
.color-bars .cb-hex input{width:64px;height:18px;box-sizing:border-box;margin:0;padding:1px 4px;border:1px solid #6d7a80;border-radius:0;background:#fff;color:#16232a;font:bold 10px ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;box-shadow:inset 1px 1px 2px #0003}
.color-bars .cb-hex:before{content:'';order:3;width:18px;height:18px;box-sizing:border-box;border:1px solid #3d2f08;background:var(--cb-color,#fff)}
.color-bars .cb-recent{display:flex;flex-wrap:wrap;gap:3px;min-width:0}
.color-bars .cb-recent button,#customGarage .color-bars .cb-recent button{width:14px;height:14px;min-width:0;margin:0;padding:0;border:1px solid #3d2f08;border-radius:2px;background:var(--chip);box-shadow:inset 0 1px #fff5;cursor:pointer}
.color-bars .cb-recent button:hover{transform:scale(1.15)}
.color-bars .cb-recent:empty:before{content:'Recent colors show here';font:italic 8px Arial;opacity:.65}
.color-bars.disabled{opacity:.4;pointer-events:none}
.color-bars input:focus-visible,.color-bars button:focus-visible{outline:2px solid #fff3b0;outline-offset:2px}

/* ==== PAINT SHOP PANEL (05b-paint-shop.js) — one gold panel: tabs, color slots + bars, settings, save ==== */
#paintPanel{position:absolute;left:14px;top:8px;width:332px;height:352px;box-sizing:border-box;z-index:4;display:flex;flex-direction:column;gap:5px;padding:8px 9px 9px;color:#241c06;border-radius:9px 9px 4px 4px;background:linear-gradient(95deg,#cda816,#d6af1a 35%,#bd9219 66%,#957014);box-shadow:inset 2px 2px 2px #fff0a6,inset -1px -2px 2px #6d5208,3px 3px 4px #0006}
#customGarage #paintPanel button{filter:none;cursor:pointer}
#customGarage #paintPanel button:disabled{cursor:default}
.paint-tabs{display:flex;gap:3px}
#customGarage .paint-tabs button{flex:1 1 auto;padding:5px 3px;border:1px solid #7c5f12;border-radius:3px;background:linear-gradient(#f4e29a,#c9a52b);color:#241c06;font:900 8.5px Arial;letter-spacing:.3px;text-shadow:none;box-shadow:none}
#customGarage .paint-tabs button[aria-pressed=true]{background:linear-gradient(#fffbe3,#e3c45a);box-shadow:inset 0 -2px #a88418,0 0 0 1px #fff6c4}
.paint-mixer{display:flex;flex-direction:column;gap:7px;padding:2px 2px 3px}
.paint-slots{display:flex;gap:8px}
.paint-slots:empty{display:none}
#customGarage .paint-slots button{display:flex;flex-direction:column;align-items:stretch;width:64px;padding:0;border:0;background:none;color:#3b2e08;font:900 7px/8px Arial;letter-spacing:.4px;text-align:center;box-shadow:none;text-shadow:none}
.paint-slots i{display:block;height:22px;margin-top:3px;border:2px ridge #b7901a;background:var(--slot)}
#customGarage .paint-slots button[aria-checked=true]{color:#000}
.paint-slots button[aria-checked=true] i{outline:2px solid #fff6c4;outline-offset:2px;box-shadow:0 0 6px #fff3}
.paint-slots-hint{min-height:34px;margin:0;display:flex;align-items:center;font:bold 9px/12px Arial;color:#3b2e08}
.paint-options{flex:1;min-height:0;overflow-y:auto;padding:4px 9px 6px;border:1px solid #6d5208;border-radius:4px;background:linear-gradient(#2a2410,#151109);box-shadow:inset 0 2px 5px #000a;color:#f1dc8e;scrollbar-width:thin;scrollbar-color:#a88418 #1c170a}
#customGarage .paint-options .paint-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:21px;margin:0;padding:2px 0;border-bottom:1px solid #ffffff10;font:900 8px Arial;letter-spacing:.4px;color:#f1dc8e}
#customGarage .paint-options select{width:150px;max-width:none;height:19px;padding:1px 3px;border:1px solid #c0b587;border-radius:0;background:#fff;color:#111;font:11px Arial;box-shadow:none}
#customGarage .paint-options select option{background:#fff;color:#111}
#customGarage .paint-options input[type=range]{width:140px;height:14px;margin:0;accent-color:#e3c45a;cursor:pointer}
#customGarage .paint-options input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:#e3c45a;cursor:pointer}
#customGarage .paint-number-row{justify-content:flex-start;gap:12px}
#customGarage .paint-number,#customGarage .paint-check{display:flex;align-items:center;gap:6px;margin:0;padding:0;font:900 8px Arial;letter-spacing:.4px;color:#f1dc8e}
#customGarage .paint-number input{width:48px;height:22px;box-sizing:border-box;padding:0;border:1px solid #c8bb87;border-radius:1px;background:#fff;color:#111;text-align:center;font:18px Impact,Arial}
#customGarage .paint-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px 12px;padding:3px 0 2px;border-bottom:1px solid #ffffff10}
#customGarage .paint-grid label{display:flex;align-items:center;gap:5px;min-height:19px;margin:0;padding:0;font:900 7.5px Arial;letter-spacing:.3px;color:#f1dc8e}
#customGarage .paint-grid label span{width:40px;flex:none}
#customGarage .paint-options .paint-grid input[type=range]{width:auto;flex:1;min-width:0}
#customGarage .paint-inline{display:flex;align-items:center;gap:8px;margin:0;padding:0;font:900 8px Arial;letter-spacing:.4px;color:#f1dc8e}
#customGarage .paint-options .paint-inline select{width:118px}
.paint-help{margin:6px 0 2px;font:9px/12px Arial;color:#cdbb7f}
#customGarage .paint-small-button{margin-top:5px;padding:4px 8px;border:1px solid #8a7224;border-radius:3px;background:linear-gradient(#3b3216,#221c0b);color:#f1dc8e;font:900 8px Arial;letter-spacing:.3px;box-shadow:none}
.paint-actions{display:flex;gap:5px}
#customGarage .paint-actions button{flex:1;height:22px;padding:1px;border:1px solid #6d7a80;border-radius:2px;background:linear-gradient(#f7ffff,#a0afb4 52%,#dce7e9);color:#16232a;text-shadow:0 1px #fff;font:bold 10px Arial;box-shadow:none}
#customGarage .paint-actions #paintSave{flex:1.5}
#customGarage .paint-actions button:disabled{opacity:.55}
#customGarage #paintPanel.dirty #paintSave{background:linear-gradient(#fff6c4,#f0c43a 52%,#ffe68a);border-color:#7c5f12;box-shadow:0 0 0 2px #fff8,0 0 10px #ffd84a}
#customGarage #paintPanel :is(button,select,input):focus-visible{outline:2px solid #fff3b0;outline-offset:1px}
.classic-paint-stage .paint-balance{left:auto;right:18px;top:76px;font:bold 11px Arial}

/* Leave with unsaved edits → SAVE · DISCARD · KEEP EDITING */
.paint-confirm{position:absolute;left:380px;right:24px;top:118px;z-index:12;padding:14px 14px 12px;text-align:center;border:2px solid #e3c45a;border-radius:8px;background:linear-gradient(#24323c,#0e1820);box-shadow:0 8px 24px #000c}
.paint-confirm p{margin:0 0 11px;font:bold 13px Arial;color:#f4f7f9}
#customGarage .paint-confirm button{margin:0 3px;padding:6px 10px;border:1px solid #d5eaf4;border-radius:4px;font:900 10px Arial;color:#fff;background:#217b94;box-shadow:none}
#customGarage .paint-confirm [data-confirm=save]{background:linear-gradient(#fff6c4,#e3c45a);border-color:#7c5f12;color:#241c06}
#customGarage .paint-confirm [data-confirm=discard]{background:#4a5964}

/* ==== Phones: the car stays pinned at the top while the panel scrolls under it ==== */
body.mobile-layout #customGarage .classic-paint-stage .garage-view{position:sticky;top:0;z-index:6}
body.mobile-layout #paintPanel{position:relative;left:auto;top:auto;width:auto;height:auto;gap:12px;padding:14px;border:1px solid #917b484d;border-radius:7px;background:linear-gradient(#343127,#171b1e);box-shadow:inset 0 1px #f0d89b30,0 6px 14px #0006;color:#e2d1a0}
body.mobile-layout #customGarage .paint-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
body.mobile-layout #customGarage .paint-tabs button{min-height:44px;font:bold 11px Arial;border-radius:6px;border-color:#7c5f12}
body.mobile-layout .paint-slots{flex-wrap:wrap;gap:12px}
body.mobile-layout #customGarage .paint-slots button{width:calc(25% - 9px);min-width:64px;font:bold 10px/1.3 Arial;color:#cdbb7f}
body.mobile-layout #customGarage .paint-slots button[aria-checked=true]{color:#f0d383}
body.mobile-layout .paint-slots i{height:36px;border-radius:6px}
body.mobile-layout .paint-slots-hint{color:#cdbb7f;font:12px/1.5 Arial}
body.mobile-layout .color-bars{gap:6px}
body.mobile-layout #customGarage .color-bars .cb-row{min-height:44px;font:bold 10px Arial;gap:12px}
body.mobile-layout .color-bars .cb-row span{width:78px}
body.mobile-layout .color-bars .cb-row input{height:14px;border-radius:7px}
body.mobile-layout .color-bars .cb-row input::-webkit-slider-thumb{width:22px;height:30px;border-radius:7px;background:linear-gradient(#fafbde,#a5b1ae)}
body.mobile-layout .color-bars .cb-row input::-moz-range-thumb{width:22px;height:30px;border-radius:7px}
body.mobile-layout #customGarage .color-bars .cb-hex{font:bold 10px Arial}
body.mobile-layout .color-bars .cb-hex input{width:92px;height:40px;font-size:15px;border-radius:6px}
body.mobile-layout .color-bars .cb-hex:before{width:40px;height:40px;border-radius:6px}
body.mobile-layout .color-bars .cb-foot{flex-wrap:wrap;gap:10px}
body.mobile-layout #customGarage .color-bars .cb-recent button,body.mobile-layout .color-bars .cb-recent button{width:30px;height:30px;border-radius:6px}
body.mobile-layout .paint-options{overflow:visible;padding:6px 12px 10px;border-color:#7894a466;background:#0e161d}
body.mobile-layout #customGarage .paint-options .paint-row{min-height:50px;font:bold 11px Arial;color:#c5d4df}
body.mobile-layout #customGarage .paint-options select{width:58%;height:40px;font:14px Arial;border-radius:6px}
body.mobile-layout #customGarage .paint-options input[type=range]{width:52%;height:32px}
body.mobile-layout #customGarage .paint-options input[type=checkbox]{width:24px;height:24px}
body.mobile-layout #customGarage :is(.paint-number,.paint-check){font:bold 11px Arial;color:#c5d4df}
body.mobile-layout #customGarage .paint-number input{width:70px;height:42px;font-size:26px;border-radius:6px}
body.mobile-layout #customGarage .paint-grid{grid-template-columns:1fr;gap:4px}
body.mobile-layout #customGarage .paint-grid label{min-height:46px;font:bold 11px Arial;color:#c5d4df;gap:10px}
body.mobile-layout #customGarage .paint-grid label span{width:90px}
body.mobile-layout #customGarage .paint-inline{font:bold 11px Arial;color:#c5d4df}
body.mobile-layout #customGarage .paint-options .paint-inline select{width:auto;flex:1}
body.mobile-layout .paint-help{font:12px/1.6 Arial;color:#95a9b9}
body.mobile-layout #customGarage .paint-small-button{min-height:44px;width:100%;font:bold 11px Arial}
body.mobile-layout .paint-actions{position:sticky;bottom:0;z-index:5;margin:0 -14px -14px;padding:10px 14px;border-radius:0 0 7px 7px;background:linear-gradient(#232120f2,#141617f7);gap:8px}
body.mobile-layout #customGarage .paint-actions button{height:48px;border-radius:8px;font:bold 13px Arial}
body.mobile-layout .classic-paint-stage .paint-balance{position:static;font:12px/1.5 Arial}
body.mobile-layout .paint-confirm{position:fixed;left:16px;right:16px;top:38%;padding:18px}
body.mobile-layout #customGarage .paint-confirm button{display:block;width:100%;min-height:46px;margin:8px 0 0;font:bold 13px Arial}

/* ==== COLOR POP-UP (createColorPopover) — swatch button that opens the color bars; used by the showroom ==== */
.color-pop-wrap{position:relative;display:inline-block}
.color-pop-button{display:flex;align-items:center;gap:7px;padding:4px 9px 4px 5px;border:1px solid #ffffff2e;border-radius:999px;background:#07111bd0;color:#e1ebf3;font:bold 9px ui-monospace,Menlo,Consolas,monospace;box-shadow:0 4px 10px #0007;cursor:pointer}
.color-pop-button i{width:18px;height:18px;border-radius:50%;border:2px solid #d3dce3;box-shadow:inset 0 2px 3px #ffffff55,inset 0 -2px 3px #0006}
.color-pop-button b{font-size:8px;opacity:.8}
.color-pop-button:hover{border-color:#f3da76}
.color-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:20;width:250px;padding:10px 11px;border:1px solid #f3da7699;border-radius:8px;background:linear-gradient(#1e2c38,#0b141c);box-shadow:0 10px 26px #000b;color:#e1ebf3}
.color-pop-factory{display:block;width:100%;margin-top:8px;padding:5px;border:1px solid #91bbc5;border-radius:4px;background:#1d6378;color:#fff;font:900 9px Arial;letter-spacing:.5px;cursor:pointer}
body.mobile-layout .color-pop{position:fixed;left:16px;right:16px;bottom:auto;top:30%;width:auto;transform:none;padding:14px}
body.mobile-layout .color-pop-button{padding:7px 14px 7px 7px;font-size:13px}
body.mobile-layout .color-pop-button i{width:30px;height:30px}
body.mobile-layout .color-pop-factory{min-height:44px;font-size:12px}
/* Compact bars (sign-up starter car, showroom pop-up) sit on dark blue, not gold */
.color-bars.compact .cb-row input{border-color:#ffffff40}
.color-bars.compact{gap:3px}
.color-bars.compact .cb-row{min-height:13px}
.color-bars.compact .cb-row input{height:7px}
.color-bars.compact .cb-row input::-webkit-slider-thumb{height:13px;width:9px}
.color-bars.compact .cb-foot{margin-top:1px}
.color-bars.compact .cb-hex:before{border-color:#ffffff60}
.color-bars.compact .cb-recent button{border-color:#ffffff60}

/* ==== WHEELS: rim thumbnails (GARAGE_RIMS) ==== */
#customGarage .paint-options .rim-head{border-bottom:0}
.rim-name{font:bold 9px Arial;letter-spacing:0;color:#fff3c4}
.rim-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:2px 0 6px;border-bottom:1px solid #ffffff10}
#customGarage .rim-grid button{aspect-ratio:1;min-width:0;padding:1px;border:1px solid #6d5208;border-radius:4px;background:radial-gradient(circle at 50% 40%,#4a4430,#1a160b 75%);color:#f1dc8e;font:900 5px Arial;letter-spacing:0;box-shadow:none}
.rim-grid img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#customGarage .rim-grid button:hover{border-color:#e3c45a}
#customGarage .rim-grid button[aria-checked=true]{border-color:#fff3c4;box-shadow:0 0 0 1px #fff3c4,0 0 8px #ffd84a88;background:radial-gradient(circle at 50% 40%,#6b5d2c,#2a2410 75%)}
body.mobile-layout .rim-grid{grid-template-columns:repeat(4,1fr);gap:8px}
body.mobile-layout .rim-name{font-size:12px}
body.mobile-layout #customGarage .rim-grid button{font-size:10px;border-radius:8px}

/* ==== styles/race-track.css ==== */
/* Classic race selection: shared navigation and footer remain in place. */
#raceTrackScreen{position:absolute;inset:102px 0 49px;z-index:80;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%);border-top:1px solid #59727d}
#raceTrackScreen [hidden],#raceTrackScreen[hidden],#bracketShade[hidden]{display:none!important}
.race-track-stage{position:relative;width:854px;height:421px;transform:scale(var(--track-scale,1));transform-origin:top left}
.track-toolbar #trackToolbarHelmet{position:absolute;left:13px;top:-4px;width:75px;height:59px;object-fit:contain;filter:drop-shadow(0 3px 2px #0009)}
#trackLandingBack{position:absolute;left:124px;top:14px;width:95px;padding:3px 10px;font-size:14px}
.track-choice{position:absolute;top:101px;width:210px}.computer-choice{left:190px}.online-choice{left:461px}
.challenge-tile{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:163px;height:181px;margin:0 auto;padding:14px 12px 15px;border:2px solid #e6f3f6;border-radius:7px;background:linear-gradient(#17829bdb,#1ca5d0ad);box-shadow:inset 0 0 0 1px #91d4de88,0 2px 3px #04102055;color:white;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s}
.challenge-tile strong{font:900 20px/1.15 Impact,'Arial Narrow',Arial,sans-serif;text-shadow:0 1px 2px #568892}
.challenge-tile img{width:86px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 2px #041b2b80)}
.challenge-tile:hover{background:linear-gradient(#2dc1e0,#21b7e0b8);box-shadow:inset 0 0 0 1px #ebffffaa,0 3px 14px #31cbdf44;transform:translateY(-2px)}
.challenge-tile:focus-visible,#raceTrackScreen button:focus-visible,#bracketDialog button:focus-visible,#bracketET:focus-visible{outline:3px solid #ffe38a;outline-offset:3px}
.track-choice p{margin:30px 0 0;font:14px/17px 'Arial Narrow',Arial,sans-serif;color:#e8edf5;text-shadow:0 1px 1px #253449}
#computerLeagues{position:absolute;inset:52px 0 0;--league-glow:#00b7df;--league-haze:#b7eff2}
.league-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 103% 96%,var(--league-haze),transparent 35%),radial-gradient(ellipse at 84% 68%,var(--league-glow),transparent 64%);opacity:.85;transition:background .3s}
.league-atmosphere:after{content:'';position:absolute;left:380px;right:-60px;bottom:22px;height:130px;transform:skewX(-23deg);background:repeating-linear-gradient(0deg,transparent 0 20px,#d7ecf619 21px 22px,transparent 24px 32px);filter:blur(2px)}
.league-selector{position:absolute;left:32px;top:29px;display:flex;flex-direction:column;gap:24px;width:221px}
.league-selector button{height:36px;font-size:20px;padding:3px 8px;white-space:nowrap;background:#1987a3ce}
.league-selector button[aria-pressed=true]{background:#147b92;box-shadow:inset 0 0 0 1px #f6ffff77,0 2px 4px #07121f88}
#leagueDescription{position:absolute;left:317px;top:32px;width:219px;margin:0;font:14px/17px 'Arial Narrow',Arial,sans-serif;text-shadow:0 1px 2px #172630}
.league-heading{position:absolute;left:581px;right:37px;top:18px;margin:0;text-align:center;font:900 32px/.95 Arial,sans-serif;letter-spacing:2px;text-shadow:0 3px 3px #16373b}
.league-heading span{display:block;margin-top:2px;background:#e9f4ef;color:#174b58;letter-spacing:9px;font-size:29px;padding-left:6px;box-shadow:0 2px 3px #08263466}
#computerLeagues[data-league=sport] .league-heading,#computerLeagues[data-league=pro] .league-heading,#computerLeagues[data-league=special] .league-heading{left:546px;right:15px;top:32px;font-style:italic;font-size:29px;letter-spacing:-.5px;white-space:nowrap}
.league-award{position:absolute;left:562px;top:173px;width:220px;height:190px;filter:drop-shadow(0 7px 4px #06182b88)}
.league-medallion{position:absolute;left:18px;top:0;width:182px;height:182px;padding:12px;border-radius:50%;border:5px ridge #c8b37d;box-shadow:0 0 0 2px #756340,inset 0 0 0 4px #514c3b,inset 0 0 0 7px #eedcb0;background:repeating-conic-gradient(#b5a379 0deg 1deg,#6f6042 1deg 2deg,#e0d2ad 2deg 3deg)}
.league-medallion>div{position:relative;width:100%;height:100%;border-radius:50%;border:4px ridge #e2cfa0;background:linear-gradient(142deg,#faf0cf,#a48f5a 39%,#eee3c4 42%,#b6a178 63%,#6c5c37);text-align:center;color:#f5eace;text-shadow:1px 2px #5d5138,-1px -1px #fffae8}
.league-medallion b{display:block;margin-top:24px;font:italic 900 35px Arial;letter-spacing:-4px}.league-medallion span{font:italic 900 9px Arial}.league-medallion i{display:block;font:normal 31px Georgia}.league-medallion small{display:block;font:900 7px Arial;letter-spacing:.7px}
.league-trophy{display:none;position:absolute;left:34px;top:-36px;width:160px;height:224px}
.league-trophy>*{position:absolute}.trophy-handles{left:30px;top:17px;width:102px;height:97px;border:6px ridge #c1b985;border-top:0;border-radius:0 0 50% 50%;background:transparent}.trophy-cup{left:46px;top:12px;width:72px;height:105px;border-radius:12% 12% 47% 47%;border-top:7px ridge #e1d2a1;background:linear-gradient(90deg,#5e512d,#e8d9a4 20%,#fff4c1 34%,#a29564 69%,#574b2a 84%,#dfcf9a);box-shadow:inset 0 4px #58462788}.trophy-stem{left:73px;top:109px;width:18px;height:55px;background:linear-gradient(90deg,#716033,#f4df9d 40%,#c0ab70 67%,#63532f);border-radius:35%}.trophy-foot{left:47px;top:155px;width:71px;height:16px;border-radius:50%;background:linear-gradient(#f8e0a2,#77603a 65%,#d1ba83);box-shadow:0 3px #46391e}.trophy-base{left:26px;top:173px;width:111px;height:54px;background:linear-gradient(105deg,#391c21,#1b0f15 35%,#61302c);border-top:7px solid #7c4140;border-bottom:8px solid #442027;transform:skewY(3deg);box-shadow:3px 3px #211015}.trophy-base b{position:absolute;left:27px;top:9px;background:linear-gradient(110deg,#f1dfb3,#ae905e);padding:8px 9px;color:#7e683e;font:italic 900 13px Arial;box-shadow:0 1px 2px #05050a}
#computerLeagues:not([data-league=amateur]) .league-medallion{display:none}#computerLeagues:not([data-league=amateur]) .league-trophy{display:block}
.league-race-actions{position:absolute;left:327px;top:200px;display:flex;flex-direction:column;gap:24px;width:159px}.league-race-actions button{font-size:19px;padding:5px 7px;background:#20c6e7cc}.league-race-actions button:last-child{background:#1895accc}
#leaguePreviewNotice{position:absolute;left:318px;top:305px;width:225px;margin:0;font:12px/16px Arial;color:#fff3ad;text-shadow:0 1px #141820}

/* The bracket dialog shades the game shell, including its bars, like the original. */
#bracketShade{position:absolute;inset:0;z-index:200;background:#008ede99;display:grid;place-items:center}
#bracketDialog{position:relative;width:402px;height:165px;transform:translateY(-40px) scale(var(--bracket-scale,1));color:white;filter:drop-shadow(6px 9px 5px #07142299)}
.bracket-metal{position:absolute;inset:9px 0 8px 215px;background:var(--nitto-banner-texture);border-top:4px ridge #c5ab60;border-bottom:4px ridge #998139}
.bracket-gold{position:absolute;inset:0;background:linear-gradient(110deg,#e8ba14,#d6a707 40%,#af8616 70%,#956a0e);clip-path:path('M 2 165 L 2 11 Q 2 2 13 2 L 304 2 L 332 39 L 402 39 L 402 64 Q 274 64 261 165 Z');box-shadow:inset 2px 2px 1px #fff2b7}
.bracket-popup-mark{position:absolute;left:24px;top:18px;width:70px;text-align:center;font:900 19px Impact,Arial;text-shadow:2px 2px #242621}.bracket-popup-mark span{display:block;height:26px;border:2px ridge #eaf1e5;background:linear-gradient(110deg,#335cac,#001352);font:italic 900 35px/20px Arial}.bracket-popup-mark b{display:block}
#bracketTitle{position:absolute;left:111px;top:28px;margin:0;font:500 25px Arial}
#bracketForm label{position:absolute;left:45px;top:76px;font:20px Impact,'Arial Narrow',Arial}
#bracketET{width:73px;height:28px;padding:1px 4px;border:1px solid #b6b39c;border-radius:5px;background:#fffdf0;color:#171a1d;font:900 21px Impact,Arial;text-align:center}
#bracketInstructions{position:absolute;left:25px;top:112px;margin:0;width:216px;text-align:center;font:14px/17px Arial}
#bracketError{position:absolute;left:25px;top:142px;margin:0;width:220px;color:#442100;font:bold 10px Arial}
.bracket-silver{position:absolute;left:294px;top:86px;width:108px;height:19px;padding:0;border:1px solid #a4b2b9;background:linear-gradient(#eff8fb,#adbec7 48%,#edf6f7 50%,#a1b2bc);color:#273a47;font:bold 11px Arial;cursor:pointer;box-shadow:0 2px 2px #071018aa}.bracket-silver:hover{filter:brightness(1.15)}.bracket-ok{left:268px;top:120px;width:134px}
#bracketDialog.invalid #bracketInstructions{top:109px;font-size:12px}
body.mobile-layout #raceTrackScreen{top:58px;bottom:0}body.mobile-layout.mobile-landscape #raceTrackScreen{top:38px}
@media(prefers-reduced-motion:reduce){.challenge-tile,.league-atmosphere{transition:none}.challenge-tile:hover{transform:none}}
/* Online search layout: a gold directory beside a mouse-driven player garage. */
#onlineChallengePreview{inset:0;text-align:left}
.race-track-stage[data-view=online] .track-toolbar #trackLandingBack{left:468px;top:17px}
.race-track-stage[data-view=online] .track-toolbar #trackToolbarHelmet{left:auto;right:12px;top:-5px;width:67px;height:65px}
.online-gold-sweep{position:absolute;left:0;top:0;width:470px;height:140px;background:linear-gradient(120deg,#bc890a,#e7ac0c);clip-path:polygon(0 0,100% 0,0 100%)}
.racer-search-panel{position:absolute;left:7px;top:9px;width:293px;height:400px;z-index:6;border-bottom:3px ridge #b39745;filter:drop-shadow(3px 3px 2px #09182b88)}
.racer-search-tabs{display:flex;height:29px;padding-left:2px;align-items:flex-end}
.racer-search-tabs button{height:29px;padding:4px 7px;border:1px solid #d1b55e;border-radius:10px 10px 0 0;background:linear-gradient(115deg,#b8870a,#865c07);color:#ede5c9;font:bold 10px Arial;cursor:pointer;white-space:nowrap}
.racer-search-tabs button[aria-pressed=true]{background:#c79b13;border-bottom-color:#c79b13;color:white}.racer-search-tabs img{width:15px;height:17px;object-fit:contain;vertical-align:middle}
#playerSearchForm{height:73px;background:linear-gradient(100deg,#d7a313,#c89805);border:2px ridge #efc456;padding:12px 14px 9px}
#playerSearchForm label{display:block;margin:0 0 4px;color:#fff0b7;font:900 11px Arial;letter-spacing:.3px}
#playerSearchForm>div{display:flex;gap:5px}#playerSearchInput{min-width:0;flex:1;height:25px;padding:2px 7px;border:1px solid #a8a49b;border-radius:5px;background:#fffcf0;color:#172430;font:13px Arial}
#playerSearchForm button{padding:2px 5px;font-size:15px;background:#7bae85;border-color:#e6e8b6}
.racer-search-results{height:279px;overflow:auto;background:linear-gradient(116deg,#1f9ed4db,#006ea3e8);border-left:3px ridge #d1ad4a;border-right:3px ridge #d1ad4a;border-radius:29px 0 0 0;scrollbar-color:#aebfc7 #dededa;scrollbar-width:thin}
.racer-search-results button{width:100%;display:flex;align-items:center;gap:12px;height:29px;padding:0 13px 0 12px;border:0;border-bottom:1px solid #5ab0d47a;background:transparent;color:#d9ecf2;text-align:left;font:12px Arial;cursor:pointer}.racer-search-results button:hover,.racer-search-results button[aria-pressed=true]{background:#66c4e733;color:#fff}.racer-search-results img{width:23px;height:25px;object-fit:contain;filter:drop-shadow(1px 2px 1px #001e34)}.racer-search-results small{margin-left:auto;margin-right:17px;font:12px Arial}
.racer-results-caption{height:19px;padding:3px 7px;margin:0;border-left:3px ridge #d1ad4a;border-right:3px ridge #d1ad4a;background:var(--nitto-banner-texture);font:10px Arial;text-align:right}
.online-player-profile{position:absolute;left:359px;top:73px;right:20px;height:95px}.player-profile-avatar{position:absolute;left:0;top:20px;width:31px;height:34px;background:linear-gradient(#9952a0,#dd72dd);border:2px ridge #d0bcda;display:grid;place-items:center}.player-profile-avatar img{width:24px!important;height:27px!important;filter:none!important}
.online-player-profile h1{position:absolute;left:63px;top:0;margin:0;font:italic 900 16px Arial;letter-spacing:1px}.online-player-profile p{position:absolute;left:63px;top:26px;margin:0;color:#e8edf0;font:14px/17px Arial}
.online-select-heading{position:absolute;left:300px;right:0;top:177px;margin:0;height:25px;background:#0976a26b;border-bottom:3px solid #274f6a;font:italic 900 13px/21px Arial;text-align:center;letter-spacing:.7px}
.online-garage-viewport{position:absolute;left:300px;top:207px;width:554px;height:204px;overflow:hidden;touch-action:pan-y;outline:none}.online-garage-viewport:focus-visible{outline:2px inset #e8d173;outline-offset:-2px}.online-garage-rail{display:flex;width:max-content;height:100%;will-change:transform}.online-garage-car{position:relative;flex:0 0 340px;width:340px;height:204px}
.online-car-stats{position:absolute;left:14px;right:8px;top:0;display:flex;justify-content:space-between;gap:9px;font:11px/15px Arial;color:#e0eef3}.online-car-stats span:first-child{max-width:160px}.online-car-stats b{color:#e5472d}
#onlineChallengePreview .online-garage-car img{position:absolute;left:0;top:37px;width:340px;height:190px;object-fit:contain;filter:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.online-garage-car button{position:absolute;right:28px;bottom:1px;font-size:14px;padding:3px 10px}
#onlineRaceNotice{position:absolute;left:319px;right:12px;top:408px;margin:0;font:9px Arial;color:#ffe695;text-shadow:0 1px #182933}

.computer-choice .challenge-tile{position:relative;left:26px}.online-choice .challenge-tile{position:relative;left:-30px}
.league-atmosphere{background:radial-gradient(ellipse at 103% 96%,var(--league-haze),transparent 37%),linear-gradient(100deg,transparent 29%,var(--league-glow) 74%,var(--league-glow));opacity:1}
/* The racer directory borrows Community's dark panel, diagonal sheen and blue glow. */
.racer-search-panel{border:1px solid #299dca;border-radius:9px;background:linear-gradient(135deg,#132330,#0d171f 33%,#0b141a 90%);box-shadow:inset 0 0 13px #038aff14,0 0 7px #008bdf2a;filter:none;overflow:hidden;isolation:isolate;padding-top:7px}
.racer-search-panel:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:polygon(34% 0,100% 0,100% 100%,68% 100%);background:linear-gradient(180deg,#d9ecfa2e,#bbdcf413 40%,#acd3ee04 72%,transparent 94%)}
.racer-search-tabs{height:29px;padding:0 8px;gap:3px}
.racer-search-tabs button{height:28px;flex:1;padding:4px 5px;border:1px solid #3a566a;border-radius:5px;background:linear-gradient(#253d50,#122534);color:#b2c8db;font:bold 10px Arial;transition:background .15s,border-color .15s}.racer-search-tabs button:hover{border-color:#62bdea;color:#effaff}.racer-search-tabs button[aria-pressed=true]{background:linear-gradient(115deg,#0865b3,#113759 90%);border-color:#15b5fc;box-shadow:inset 0 0 8px #039aff45,0 0 4px #099ceb55;color:#fff}
#playerSearchForm{height:73px;background:transparent;border:0;border-bottom:1px solid #2b4557;margin:0 12px;padding:12px 0 10px}#playerSearchForm label{color:#a8bfd2;font:bold 10px Arial;letter-spacing:.5px}
#playerSearchInput{height:26px;background:linear-gradient(#fff,#f0f5f8);border:1px solid #8ca5b5;border-radius:5px;box-shadow:inset 0 2px 4px #17344936,0 1px #ffffff14;font:12px Arial;outline:none}#playerSearchInput:focus{border-color:#46c6ff;box-shadow:inset 0 2px 4px #17344936,0 0 0 2px #37baf233}
#playerSearchForm button{height:26px;min-width:58px;padding:2px 8px;border:1px solid #8ac9f2;border-radius:5px;background:linear-gradient(#4cb2f0,#1978bd 55%,#1067a7);box-shadow:inset 0 1px #d5efff7a,0 2px 4px #020a1155;color:#fff;font:bold 10px Arial;text-shadow:0 1px #145589}#playerSearchForm button:hover{background:linear-gradient(#64c3fc,#218cd4 55%,#1679b6)}
.racer-search-results{height:267px;margin:4px 8px 0;background:transparent;border:0;border-radius:0;scrollbar-color:#2c4655 transparent}
.racer-search-results button{height:29px;padding:2px 8px;gap:10px;border:0;border-radius:5px;color:#d9e8f5;font:11px Arial}.racer-search-results button:hover{background:#1a3a4e}.racer-search-results button[aria-pressed=true]{background:linear-gradient(115deg,#164f73,#142b3b);color:#fff;box-shadow:inset 0 0 0 1px #3296ca66}.racer-search-results small{color:#8ba4b9;font-size:10px;margin-right:2px}
.player-list-avatar{position:relative;width:24px;height:24px;border:1px solid #7693a2;border-radius:50%;background:radial-gradient(ellipse at 30% 20%,#466074,#17252f 60%,#050b11);box-shadow:0 1px 3px #0009;flex:none}
.racer-search-results .player-list-avatar img{position:absolute;inset:1px;width:21px;height:21px;object-fit:contain;filter:var(--player-helmet-filter,none)}.player-list-avatar:after{content:'';position:absolute;right:-2px;bottom:0;width:8px;height:8px;border:2px solid #0c171f;border-radius:50%;background:#4ded61}
.racer-results-caption{height:19px;padding:4px 0;margin:0 13px;background:none;border:0;border-top:1px solid #2b4557;color:#8ca6bb;font:9px Arial;text-align:left}
@media(prefers-reduced-motion:reduce){.racer-search-tabs button{transition:none}}

.bracket-popup-mark img{display:block;width:70px;height:46px;object-fit:cover;filter:drop-shadow(0 2px 2px #0007)}
/* v92 trophies beside the racer's name (cups + tips: .trophy-case in tournament.css) */
.online-player-profile h1{display:flex;align-items:center;gap:9px;white-space:nowrap}
.online-trophies .trophy-pin{width:17px}
.online-trophies .trophy-tip{font-style:normal}
body.mobile-layout .online-trophies .trophy-pin{width:20px}
body.mobile-layout .online-player-profile h1{flex-wrap:wrap;white-space:normal;row-gap:4px}

/* ==== styles/main.css ==== */
#mainScreen{position:absolute;inset:102px 0 49px;z-index:81;overflow:hidden;background:#707070;color:#eaf3f4}#mainScreen[hidden]{display:none!important}
.main-stage{position:relative;width:854px;height:421px;transform:scale(var(--main-scale,1));transform-origin:top left}
.main-original-feature{position:absolute;inset:0 0 auto;height:231px;background:linear-gradient(#242424,#707070 20px,#707070 205px,#303030 228px)}
.main-leaderboard-bar{position:absolute;top:231px;left:0;right:0;height:46px;display:flex;align-items:center;gap:12px;padding:0 37px;border-top:7px ridge #425867;border-bottom:4px ridge #243e4c;background:linear-gradient(#4b6a79,#253d4b 66%,#112634);box-shadow:0 3px 4px #0b141d77}
.main-leaderboard-bar button{width:105px;height:23px;padding:2px 7px;border-radius:4px;font:13px Impact,Arial;background:linear-gradient(#519fb1,#1987a4);border-width:1px}.main-leaderboard-bar button[aria-pressed=true]{border-color:#f0f8f7;background:linear-gradient(#78c1ca,#1987a4)}
.main-leaderboard-description{position:absolute;left:0;top:277px;bottom:0;width:345px;background:repeating-linear-gradient(3deg,#94a9a714 0 1px,transparent 1px 25px),radial-gradient(ellipse at 15% 22%,#13292e66,transparent 60%),linear-gradient(#203b42,#426066 70%,#819795 82%,#527070 84%);box-shadow:inset -2px 0 #183238}
.main-leaderboard-description p{margin:20px 10px;color:#e7edf0;font:14px/18px Arial}.main-leaderboard-description small{position:absolute;left:11px;bottom:6px;color:#abc3c7;font:8px Arial}
.main-leaderboard-table{position:absolute;left:345px;right:0;top:277px;bottom:0}.leaderboard-table-head{height:29px;background:#020609;display:grid;grid-template-columns:1fr 1.3fr;padding:8px 35px;font:italic 900 12px Arial;letter-spacing:1.4px}
.leaderboard-rows{height:115px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b9c3c7 #d5d8da}.leaderboard-row{height:30px;display:grid;grid-template-columns:35px 1fr 1.5fr;align-items:center;padding:0 10px;border-bottom:3px ridge #697d7b;background:#2197a5;color:#d9eced;font:13px Arial}.leaderboard-row:nth-child(even){background:#198995}.leaderboard-row b{font-weight:400}.leaderboard-row:hover{background:#2cabb8}
body.mobile-layout #mainScreen{top:58px;bottom:0}body.mobile-layout.mobile-landscape #mainScreen{top:38px}

/* ===== MAIN PAGE PANELS (v70): membership · upcoming tournaments · daily challenges (desktop only) ===== */
body:not(.mobile-layout) .main-original-feature{background:radial-gradient(ellipse at 50% 120%,#1b3a5a66,transparent 60%),linear-gradient(#05080c,#0b1622 18px,#0a1520 205px,#05090d 228px)}
body.mobile-layout .main-panels{display:none}
.main-panels{position:absolute;inset:9px 8px 11px;display:grid;grid-template-columns:268px 312px minmax(0,1fr);gap:7px;color:#eef3f6;font-family:Arial,sans-serif}
.mp-panel{position:relative;min-width:0;border-radius:7px;overflow:hidden;box-sizing:border-box}
.mp-icon{width:14px;height:14px;flex:none;color:#d8e2e8}
/* shared blue frame */
.mp-blue{display:grid;grid-template-rows:31px repeat(3,minmax(0,1fr));gap:5px;padding:0 5px 5px;border:1px solid #2f7fb8;background:linear-gradient(#0f2234,#0a1724);box-shadow:0 0 0 1px #02060a,0 0 9px #2a8fdc55,inset 0 0 14px #2a8fdc22}
.mp-head{display:flex;align-items:center;gap:7px;margin:0 -5px;padding:0 9px;border-bottom:1px solid #2f7fb877;background:linear-gradient(#1a3550,#0f2134)}
.mp-head h2{flex:1;margin:0;font:17px/1 Impact,'Arial Narrow',sans-serif;letter-spacing:.6px;color:#e9f1f7;text-shadow:0 1px 0 #000,0 0 6px #6cc0ff44;white-space:nowrap}
.mp-head-icon{width:20px;height:20px;color:#e9f1f7}
.mp-chev{font:900 20px/1 Arial;color:#2f9cf0;text-shadow:0 0 5px #2f9cf088;letter-spacing:-3px}
/* membership */
.mp-member{padding:8px 10px 9px;border:1.5px solid #d7a73a;background:radial-gradient(ellipse at 80% 85%,#3b4553aa,transparent 55%),linear-gradient(160deg,#151a20,#07090c 70%);box-shadow:0 0 0 1px #2a1d05,0 0 10px #e6b44455,inset 0 0 12px #e6b44422}
.mp-price{position:relative;z-index:2;margin:0;text-align:center;font:italic 900 26px/.95 Impact,'Arial Black',sans-serif;letter-spacing:.3px;color:#f4f6f8;text-shadow:0 2px 0 #000}
.mp-price span{font-size:31px;background:linear-gradient(#fff3b0,#f2c23f 45%,#a8730f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #000)}
.mp-price i{font-style:italic;margin-left:4px}
.mp-tagline{position:relative;z-index:2;display:flex;align-items:center;gap:6px;margin:4px 0 5px;font:700 8.5px Arial;letter-spacing:2.4px;color:#e9b949;white-space:nowrap}
.mp-tagline:before,.mp-tagline:after{content:'';flex:1;height:1px;background:#e9b94988}
.mp-member-car{position:absolute;right:-34px;bottom:30px;width:178px;filter:brightness(.62) saturate(.35) contrast(1.15) drop-shadow(0 6px 6px #000);transform:scaleX(-1);z-index:1;pointer-events:none}
.mp-vip-crown{position:absolute;right:14px;top:78px;width:28px;z-index:1;filter:drop-shadow(0 0 5px #e6b44488)}
.mp-perks{position:relative;z-index:2;margin:0;padding:0;list-style:none;display:grid;gap:3px;width:150px}
.mp-perks li{display:flex;align-items:center;gap:7px;min-height:17px;font:700 9.5px/1.1 'Arial Narrow',Arial,sans-serif;color:#eef1f4;text-shadow:0 1px 2px #000}
.mp-perks .mp-icon{width:19px;height:19px}
.mp-join{position:absolute;left:18px;right:18px;bottom:8px;z-index:3;height:25px;border-radius:4px;border:1px solid #fff0b0;cursor:pointer;
  background:linear-gradient(#ffe68a,#f2bd34 45%,#c8870f 55%,#e4a826);color:#1b1204;font:italic 900 17px/1 Impact,'Arial Black',sans-serif;letter-spacing:.5px;box-shadow:0 0 0 1px #3a2504,0 3px 6px #000a,inset 0 1px #fffbe0}
.mp-join span{margin-left:6px;font-style:normal}.mp-join:hover{filter:brightness(1.08)}.mp-join:active{transform:translateY(1px)}
/* tournaments */
.mp-tourney{display:grid;grid-template-columns:80px minmax(0,1fr) 52px;align-items:center;gap:7px;padding:4px;border-radius:5px;border:1px solid #2a5b82;background:linear-gradient(#13283c,#0c1a28);min-height:0}
.mp-art{position:relative;height:100%;min-height:44px;border-radius:3px;overflow:hidden;border:1px solid #000}
.mp-art-street{background:linear-gradient(#0c1f3d,#2b5b93 70%,#9fc6e6)}
.mp-art-midnight{background:linear-gradient(#120a2a,#3a1e6b 65%,#7d4bb0)}
.mp-art-turbo{background:radial-gradient(circle at 78% 30%,#ff3b3b,#7a0d10 30%,transparent 55%),linear-gradient(#141619,#050607)}
.mp-sky{position:absolute;inset:auto 0 0;width:100%;height:85%}
.mp-moon{position:absolute;right:12px;top:4px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff,#d7dcef);box-shadow:0 0 6px #fff}
.mp-turbo{position:absolute;left:-6px;top:-4px;width:52px;opacity:.9}
.mp-flare{position:absolute;right:16px;top:9px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 3px #ff5555}
.mp-art-title{position:absolute;left:3px;right:3px;bottom:3px;text-align:center;transform:rotate(-5deg);font:italic 900 10.5px/.92 Impact,'Arial Black',sans-serif;letter-spacing:.2px}
.mp-art-title b{display:block;font-weight:inherit;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.mp-art-title em{display:block;font-style:inherit;font-size:11.5px;filter:drop-shadow(0 1px 0 #000)}
.mp-art-street em{color:#4fb8ff}.mp-art-turbo em{color:#ff3b3b}.mp-art-midnight em{color:#c165ff}
.mp-art-turbo .mp-art-title{font-size:12.5px}.mp-art-turbo em{font-size:10px}
.mp-t-info{min-width:0}
.mp-t-info h3{margin:0 0 1px;font:bold 10.5px/1.1 Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-prize{margin:0 0 2px;font:9.5px Arial;color:#dfe8ee}.mp-prize b{font:900 13px Impact,Arial;letter-spacing:.3px;color:#62e04a;text-shadow:0 0 5px #62e04a55}
.mp-when{display:flex;align-items:center;gap:4px;margin:0;font:7.5px/1.2 Arial;color:#b9c8d2}.mp-when .mp-icon{width:11px;height:11px;color:#b9c8d2}
.mp-signup{height:22px;padding:0 2px;white-space:nowrap;border-radius:4px;border:1px solid #8fd4ff;cursor:pointer;background:linear-gradient(#45b7f5,#1683cc 55%,#0d6aac);color:#fff;font:11px/1 Impact,Arial;letter-spacing:.4px;text-shadow:0 1px 0 #0a3e66;box-shadow:0 2px 4px #000a,inset 0 1px #c9eeff}
.mp-signup:hover{filter:brightness(1.1)}.mp-signup.on{border-color:#b6ff9e;background:linear-gradient(#5fd34a,#2f9a2b 55%,#257d22);font-size:8.5px;text-shadow:0 1px 0 #164d12}
/* daily challenges */
.mp-challenge{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:3px;padding:4px 7px 5px;border-radius:5px;border:1px solid #2a5b82;background:linear-gradient(#13283c,#0c1a28);min-height:0}
.mp-c-top{display:flex;align-items:center;gap:6px;min-width:0}
.mp-c-icon{width:21px;height:21px;color:#d3dde4}
.mp-c-text{flex:1;min-width:0;font:9.5px/1.15 Arial;color:#eef3f6}
.mp-reward{display:grid;grid-template-columns:auto 16px;align-items:end;column-gap:2px;padding-left:6px;border-left:1px solid #ffffff1c;text-align:center}
.mp-reward small{grid-column:1/-1;font:7px Arial;color:#cfd9e0}
.mp-reward b{font:13px/1 Impact,Arial;letter-spacing:.3px;color:#f2c94c;text-shadow:0 1px 0 #000}
.mp-cash{width:16px;height:16px}
.mp-c-bar{display:flex;align-items:center;gap:7px}
.mp-track{flex:1;height:7px;border-radius:999px;background:#05090d;border:1px solid #3d5466;box-shadow:inset 0 1px 2px #000;overflow:hidden}
.mp-fill{display:block;height:100%;border-radius:inherit;transition:width .6s ease}
.mp-blue .mp-fill.mp-blue,.mp-fill.mp-blue{background:linear-gradient(#7fd6ff,#1d9be8);box-shadow:0 0 5px #3fb4ff}
.mp-fill.mp-green{background:linear-gradient(#9cff78,#2fc22a);box-shadow:0 0 5px #5be045}
.mp-fill.mp-gold{background:linear-gradient(#ffe68a,#e0a52a);box-shadow:0 0 5px #f2c23f}
.mp-count{min-width:24px;text-align:right;font:bold 9px Arial;color:#dfe8ee}
.mp-challenge.done .mp-count{color:#7dff6a}
/* notice */
.mp-notice{position:absolute;left:50%;bottom:4px;z-index:5;margin:0;padding:4px 11px;border-radius:999px;border:1px solid #2f7fb8;background:#07111bee;font:bold 9px Arial;color:#eaf3f8;white-space:nowrap;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mp-notice.show{opacity:1;transform:translate(-50%,0)}
.mp-redeem{height:16px;padding:0 9px;border-radius:999px;border:1px solid #fff0b0;cursor:pointer;background:linear-gradient(#ffe68a,#f2bd34 50%,#c8870f);color:#1b1204;font:11px/1 Impact,'Arial Black',sans-serif;letter-spacing:.6px;white-space:nowrap;box-shadow:0 0 0 1px #3a2504,0 0 8px #f2c23f99;animation:mpRedeemPulse 1.4s ease-in-out infinite}
.mp-redeem:hover{filter:brightness(1.1)}.mp-redeem:active{transform:translateY(1px)}
@keyframes mpRedeemPulse{50%{box-shadow:0 0 0 1px #3a2504,0 0 14px #ffd75acc}}
@media(prefers-reduced-motion:reduce){.mp-redeem{animation:none}}
.mp-challenge.done:not(.claimed){border-color:#e6b44499;box-shadow:inset 0 0 10px #e6b44422}
.mp-claimed{font:bold 8.5px Arial;letter-spacing:.6px;color:#7dff6a;white-space:nowrap}
.mp-challenge.claimed .mp-c-text,.mp-challenge.claimed .mp-track{opacity:.6}
.mp-tourney{grid-template-columns:80px minmax(0,1fr) 60px}
.mp-view{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:28px;padding:0 3px}
.mp-view b{font:13px/1 Impact,Arial;font-weight:400;letter-spacing:.6px}
.mp-view small{font:bold 6.4px/1 Arial;letter-spacing:.5px;opacity:.95}
.mp-view.on{font-size:inherit}.mp-view.on small{font-size:6.8px}

/* ==== styles/race-result.css ==== */
/* v41 race results: full-bleed orbiting 3D view, the YOU WIN / YOU LOSE artwork, a time slip and chrome buttons.
   Win = green/gold accent, lose = red. Entrance animations replay on .result-play. */
#raceResult{--accent:#7dff5c;--accent-2:#f4d35e;--glow:#3cff3a55;position:absolute;inset:102px 0 49px;z-index:66;color:#fff;overflow:hidden;pointer-events:auto;font-family:Arial,sans-serif}
#raceResult[data-outcome=lose]{--accent:#ff4b45;--accent-2:#ff8a7a;--glow:#ff2a2a55}
#raceResult[hidden]{display:none!important}
.result-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.result-vignette{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 75% 70% at 50% 42%,transparent 45%,#000000b0 100%),
  linear-gradient(#000000a0,transparent 26%,transparent 58%,#000000d8 100%)}
#raceResult[data-outcome=lose] .result-vignette{background:radial-gradient(ellipse 75% 70% at 50% 42%,transparent 40%,#14000ad0 100%),linear-gradient(#0a0006b0,transparent 26%,transparent 58%,#000000e0 100%)}

/* ---- top: eyebrow + emblem ---- */
.result-top{position:absolute;left:0;right:0;top:6px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.result-eyebrow{font:900 10px/1 Arial;letter-spacing:3px;color:#d9e4ea;text-shadow:0 2px 4px #000;padding:5px 12px;border-radius:20px;background:#00000066;border:1px solid #ffffff1f}
.result-emblem{position:relative;margin-top:4px;width:min(250px,30%);display:flex;align-items:center;justify-content:center}
.result-emblem img{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px #000c)}
.result-glow{position:absolute;inset:-25% -15%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(4px)}
.result-rays{position:absolute;inset:-60% -30%;z-index:1;opacity:.0;background:repeating-conic-gradient(from 0deg,#ffffff14 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
#raceResult[data-outcome=win] .result-rays{opacity:.9}
/* light sweep across the artwork */
.result-emblem:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffffb0 48%,transparent 60%) 200% 0/250% 100% no-repeat;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;mix-blend-mode:screen}
#raceResult[data-outcome=win] .result-emblem:after{-webkit-mask-image:url(../assets/challenge-you-win.png);mask-image:url(../assets/challenge-you-win.png)}
#raceResult[data-outcome=lose] .result-emblem:after{-webkit-mask-image:url(../assets/challenge-you-lose.png);mask-image:url(../assets/challenge-you-lose.png)}

/* ---- bottom bar: prize · time slip · buttons ---- */
.result-bar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:min(1000px,calc(100% - 24px));display:grid;grid-template-columns:150px 1fr 210px;align-items:stretch;gap:0;border-radius:10px;overflow:hidden;
  background:linear-gradient(#0d151dee,#05090df2);border:1px solid #ffffff1c;border-top:2px solid var(--accent);box-shadow:0 10px 30px #000c,0 0 40px var(--glow)}
.result-prize{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px;border-right:1px solid #ffffff14;background:radial-gradient(ellipse at 50% 120%,var(--glow),transparent 70%)}
.result-prize span,.result-lane>div span{font:900 9px/1 Arial;letter-spacing:2px;color:#8fa2ad}
.result-cash{width:54px;height:auto;filter:drop-shadow(0 3px 4px #000c)}
#raceResult[data-outcome=lose] .result-cash{display:none}
#raceResult.result-play .result-cash{animation:res-pop .6s .6s cubic-bezier(.2,1.3,.35,1) both}
#raceResultPrize{font:italic 900 22px/1.05 Arial;color:var(--accent-2);text-align:center;text-shadow:0 2px 0 #000,0 0 12px var(--glow)}
#raceResult[data-outcome=lose] #raceResultPrize{font-size:15px;color:#e8b9b5}
.result-slip{display:flex;flex-direction:column;justify-content:center;padding:6px 14px;gap:4px}
.result-lane{position:relative;display:grid;grid-template-columns:118px repeat(4,1fr);align-items:center;padding:5px 10px;border-radius:6px;background:#ffffff07;border:1px solid transparent}
.result-lane>b{font:900 12px/1.1 Arial;letter-spacing:1px;color:#e7eef2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-lane>div{display:flex;flex-direction:column;gap:3px}
.result-lane>div[hidden]{display:none}
.result-lane strong{font:italic 900 21px/1 Arial;color:#f2f7fa;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #000}
.result-lane.winner{background:linear-gradient(90deg,var(--glow),#ffffff08 60%);border-color:#ffffff1f}
.result-lane.winner>b:after{content:'WIN';margin-left:7px;padding:2px 5px;font:900 8px Arial;letter-spacing:1px;color:#06110a;background:var(--accent);border-radius:3px;vertical-align:2px}
#raceResult[data-outcome=lose] .result-lane.winner>b:after{color:#fff}
.race-result-buttons{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 14px;border-left:1px solid #ffffff14}
#raceResultReason{grid-column:1/-1;margin:0;padding:6px 14px 8px;font:11px/1.35 Arial;color:#a9bac4;text-align:center;border-top:1px solid #ffffff10;background:#00000040}
#raceResultReason:empty{display:none}
.result-summary{display:none}

/* buttons: the inlaid style of the challenge page's INCOMING / OUTGOING tabs — blue = race again, slate = new racer */
.result-btn{position:relative;overflow:hidden;min-height:38px;padding:8px 18px;font-size:11px}   /* look: styles/glass.css */

/* ---- entrance (replays every result) ---- */
#raceResult.result-play .result-vignette{animation:res-fade .6s ease-out both}
#raceResult.result-play .result-eyebrow{animation:res-up .45s .15s ease-out both}
#raceResult.result-play[data-outcome=win] .result-emblem img{animation:res-pop .8s .1s cubic-bezier(.2,1.3,.35,1) both,res-float 3.2s 1s ease-in-out infinite}
#raceResult.result-play[data-outcome=lose] .result-emblem img{animation:res-slam .7s .1s cubic-bezier(.3,1.4,.5,1) both,res-shake .45s .75s ease-in-out both}
#raceResult.result-play .result-glow{animation:res-fade .8s .2s both,res-pulse 2.4s 1s ease-in-out infinite}
#raceResult.result-play .result-rays{animation:res-spin 30s linear infinite}
#raceResult.result-play .result-emblem:after{animation:res-sweep 1.1s .75s ease-in-out both,res-sweep 1.1s 4s ease-in-out infinite}
#raceResult.result-play .result-bar{animation:res-bar .55s .35s cubic-bezier(.2,.9,.3,1) both}
#raceResult.result-play .result-lane{animation:res-left .4s both}
#raceResult.result-play #resultLaneYou{animation-delay:.6s}#raceResult.result-play #resultLaneThem{animation-delay:.72s}
#raceResult.result-play .result-btn{animation:res-up .35s both}
#raceResult.result-play .result-btn:nth-child(1){animation-delay:.85s}#raceResult.result-play .result-btn:nth-child(2){animation-delay:.95s}
@keyframes res-fade{from{opacity:0}to{opacity:1}}
@keyframes res-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes res-left{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes res-bar{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes res-pop{0%{opacity:0;transform:scale(.2) rotate(-10deg)}60%{opacity:1;transform:scale(1.14) rotate(2deg)}80%{transform:scale(.96)}100%{opacity:1;transform:none}}
@keyframes res-slam{0%{opacity:0;transform:translateY(-60px) scale(1.4)}70%{opacity:1;transform:translateY(4px) scale(.97)}100%{opacity:1;transform:none}}
@keyframes res-shake{0%,100%{transform:none}25%{transform:translateX(-6px) rotate(-1deg)}50%{transform:translateX(5px) rotate(1deg)}75%{transform:translateX(-3px)}}
@keyframes res-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes res-pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes res-spin{to{transform:rotate(360deg)}}
@keyframes res-sweep{from{background-position:200% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){#raceResult *,#raceResult *:before,#raceResult *:after{animation:none!important;transition:none!important}}

/* ---- desktop: the 3D view fills the whole race scene while results show ---- */
body.race-result-open:not(.mobile-layout) .track-wrap{left:0!important;right:0!important;top:0!important;width:100%!important;height:100%!important;clip-path:none!important;border:0!important;z-index:4}
body.race-result-open:not(.mobile-layout) .scene>:not(.track-wrap),body.race-result-open .webgl-badge,body.race-result-open #raceSpeedFX{visibility:hidden}
#game:has(#raceResult:not([hidden])) #stageArrow{display:none!important}

/* ---- phones ---- */
body.mobile-layout #raceResult{inset:58px 0 0}
body.mobile-layout.mobile-landscape #raceResult{top:38px}
body.mobile-layout.phone-racing #raceResult{inset:0!important}
body.mobile-layout .result-top{top:calc(10px + env(safe-area-inset-top))}
body.mobile-layout .result-emblem{width:min(260px,62%)}
body.mobile-layout .result-bar{grid-template-columns:1fr;bottom:calc(10px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 20px))}
body.mobile-layout .result-cash{width:30px}
body.mobile-layout .result-prize{flex-direction:row;gap:10px;padding:8px;border-right:0;border-bottom:1px solid #ffffff14}
body.mobile-layout .result-lane{grid-template-columns:86px repeat(4,1fr);padding:5px 8px}
body.mobile-layout .result-lane strong{font-size:17px}
body.mobile-layout .race-result-buttons{flex-direction:row;border-left:0;border-top:1px solid #ffffff14;padding:10px}
body.mobile-layout .result-btn{flex:1;min-height:46px}
body.mobile-layout #raceResultReason{display:none}
@media(max-height:430px){body.mobile-layout .result-emblem{width:min(200px,30%)}body.mobile-layout .result-eyebrow{display:none}body.mobile-layout .result-bar{grid-template-columns:120px 1fr 170px}body.mobile-layout .result-prize{flex-direction:column;border-bottom:0;border-right:1px solid #ffffff14}body.mobile-layout .race-result-buttons{flex-direction:column;border-top:0;border-left:1px solid #ffffff14}}

/* ==== styles/banner-polish.css ==== */
:root{--nitto-banner-texture:radial-gradient(ellipse 44% 125% at 50% 52%,rgba(242,201,113,.10),rgba(175,128,39,.035) 47%,transparent 78%),repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,rgba(0,0,0,.16) 1px 3px),radial-gradient(ellipse at 50% 50%,rgba(98,111,119,.18),rgba(16,19,21,.03) 42%,rgba(0,0,0,.28)),linear-gradient(#1e2326,#080a0b 18%,#111416 55%,#050607)}
.brandbar{background:var(--nitto-banner-texture)}
body:not(.mobile-layout) .status:before{content:'';position:absolute;left:0;right:0;top:0;height:15px;background:var(--nitto-banner-texture);box-shadow:inset 0 1px #c2a23c88,inset 0 -1px #05090c;pointer-events:none;z-index:0}
body:not(.mobile-layout) .status>*{z-index:1}
body:not(.mobile-layout) .status>:not(.challenge){position:relative}

/* ==== styles/mobile-app.css ==== */
/* Phone-only presentation. Desktop layouts and artwork keep their original rules. */
.mobile-only{display:none}
body.mobile-layout{--phone-head:62px;--phone-foot:86px;--phone-blue:#32beff;--phone-gold:#f3cc59;--phone-panel:linear-gradient(140deg,#243b4a,#0e202d 65%);height:100dvh;overflow:hidden;background:#07111d;color:#edf7ff;font:14px/1.45 Arial,sans-serif;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
body.mobile-layout #fit,body.mobile-layout #game{width:100%;height:100dvh;position:relative;transform:none!important;overflow:hidden}
body.mobile-layout .mobile-only{display:block}
body.mobile-layout button{touch-action:manipulation}
body.mobile-layout button:focus-visible{outline:2px solid #ffdf70;outline-offset:3px}
body.mobile-layout .classic-aqua,body.mobile-layout .entry-aqua,body.mobile-layout .league-button{min-height:44px;border:1px solid #7accf0;border-radius:10px;background:linear-gradient(160deg,#29a9cf,#126b98);box-shadow:inset 0 1px #b6eaff66,0 4px 12px #0004;color:#f5fdff;font:bold 13px/1.2 Arial;letter-spacing:.3px;padding:11px 14px;text-shadow:0 1px #071b33}
body.mobile-layout input:not([type=range]):not([type=color]):not([type=checkbox]):not([type=radio]),body.mobile-layout select,body.mobile-layout textarea{font-size:16px!important;min-height:44px}
body.mobile-layout [hidden]{display:none!important}
body.mobile-layout .mobile-topbar{height:calc(var(--phone-head) + env(safe-area-inset-top));top:0;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));display:flex;gap:10px;align-items:center;z-index:90;background:radial-gradient(ellipse at 50% 90%,#d7b54418,transparent 65%),repeating-linear-gradient(90deg,#0a1015 0 1px,#29343a 1px 2px,#0c141b 2px 4px);border-bottom:1px solid #e4c66588;box-shadow:0 4px 14px #0007}
body.mobile-layout .mobile-brand{position:static;width:125px;flex:none;transform:none}
body.mobile-layout .mobile-supplied-logo{width:125px;height:46px;object-fit:contain}
body.mobile-layout .mobile-page-title{flex:1;text-align:right;font:bold 10px Arial;letter-spacing:1.2px;color:#8cafc4}
body.mobile-layout .mobile-top-gear{display:none}
body.mobile-layout .mobile-menu-button{position:static;width:42px;height:42px;padding:0;margin:0;font:24px Arial;border:1px solid #3d637b;border-radius:10px;background:linear-gradient(#274150,#10212f);color:#e6f6ff}
body.mobile-layout .mobile-nav-drawer{position:fixed;inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 0;z-index:130;overflow:auto;border:0;transform:translateX(100%);padding:18px max(20px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 100% 0,#42657a66,transparent 65%),#0b1824;transition:transform .22s ease;box-shadow:none}
body.mobile-layout .mobile-nav-drawer.open{transform:none}
body.mobile-layout .mobile-nav-head{font:bold 18px Arial;letter-spacing:2px;padding:0 0 16px;color:#ffdc69}
body.mobile-layout .mobile-nav-head button{min-width:44px;min-height:44px;color:white;font-size:28px}
body.mobile-layout .mobile-nav-drawer>button{width:100%;min-height:52px;padding:14px;border:1px solid #2a475c;margin:8px 0;border-radius:12px;background:var(--phone-panel);color:#e5f6ff;text-align:left;font:bold 14px Arial;letter-spacing:.8px}
body.mobile-layout .mobile-dock{position:absolute;inset:auto 0 0;height:calc(var(--phone-foot) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:89;background:linear-gradient(#162b39,#09141f);border-top:1px solid #406680;box-shadow:0 -6px 20px #0005}
body.mobile-layout .mobile-selected{height:31px;display:flex;align-items:center;justify-content:center;gap:9px;border-bottom:1px solid #273c4b;background:repeating-linear-gradient(90deg,#091017 0 1px,#25313a 1px 2px,#0e171f 2px 4px);overflow:hidden}
body.mobile-layout .mobile-selected img{width:55px;height:36px;object-fit:contain}
body.mobile-layout .mobile-selected span{font:8px Arial;letter-spacing:.8px;color:#d7b75c}
body.mobile-layout .mobile-selected strong{margin-left:9px;font:10px Arial;letter-spacing:0;color:#d6e8f5}
body.mobile-layout .mobile-dock-links{display:grid;grid-template-columns:repeat(5,1fr);height:55px;max-width:700px;margin:auto}
body.mobile-layout .mobile-dock-links button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border:0;background:transparent;color:#8da8bd;font:9px Arial;letter-spacing:.8px}
body.mobile-layout .mobile-dock-links button b{font:24px/1 Arial;color:#aecbdc}
body.mobile-layout .mobile-dock-links button[aria-current=page]{background:linear-gradient(#1e86c226,transparent);color:#68d7ff;border-top:2px solid #45c9fa}
body.mobile-layout .mobile-dock-links button[aria-current=page] b{color:#4ecbff}
/* All menu pages use natural dimensions, independent of the 854px desktop stage. */
body.mobile-layout :is(#mainScreen,#carSelection,#customGarage,#carShowroomScreen,#partsShopScreen,#raceTrackScreen,#showroomOverlay){inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 calc(var(--phone-foot) + env(safe-area-inset-bottom))!important;width:100%;height:auto;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 75% 65%,#2a577269,transparent 70%),linear-gradient(150deg,#111f2e,#10202e 55%,#1e354a);border-top:0}
body.mobile-layout :is(.classic-owned-stage,.classic-paint-stage,.race-track-stage,.main-stage,.classic-lobby){position:relative;inset:auto;width:100%;height:auto;min-height:100%;transform:none!important;overflow:visible}
body.mobile-layout :is(.classic-garage-bar,.garage-custom-head,.speedshop-header,.league-toolbar){position:relative;inset:auto;width:100%;height:auto;min-height:58px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:0;border-bottom:1px solid #35566b;background:linear-gradient(120deg,#253e50,#102230);box-shadow:none;clip-path:none}
body.mobile-layout :is(.classic-blue-stripe,.setup-shadow,.showroom-detail-shadow,.online-gold-sweep,.speedshop-gold,.race-me){display:none}
body.mobile-layout :is(#garageBrowseHint,#showroomBrowseHint){position:static;font:9px/1.5 Arial;letter-spacing:1px;color:#91b7cf;max-width:145px}
body.mobile-layout :is(#setupBack,#selectionRace,#setupCarTitle,#showroomBack,#showroomDetailTitle,.showroom-head h1){position:static;margin:0;width:auto;max-width:100%;font-size:13px}
body.mobile-layout #setupCarTitle i{font-size:22px;letter-spacing:-1px}
body.mobile-layout :is(.owned-viewport,.online-garage-viewport){position:relative;inset:auto;width:100%;height:auto;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x mandatory;scroll-padding:18px;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:16px 18px}
body.mobile-layout :is(.owned-rail,.online-garage-rail){width:max-content;height:auto;display:flex;transform:none!important;gap:0;will-change:auto}
body.mobile-layout :is(.owned-car,.showroom-car,.online-garage-car){position:relative;flex:0 0 min(82vw,400px);width:min(82vw,400px);height:405px;scroll-snap-align:start;scroll-snap-stop:always;padding:18px 12px;background:radial-gradient(ellipse at 60% 65%,#537d9369,transparent 70%),linear-gradient(140deg,#263a4c,#0c1d2d 65%,#273e51);border:1px solid #43657b;border-radius:18px;box-shadow:inset 0 1px #acd8ed1a;overflow:hidden}
body.mobile-layout :is(.owned-car,.showroom-car,.online-garage-car):not(:last-child){margin-right:14px}
body.mobile-layout :is(.owned-car h2,.showroom-car h2){position:static;left:auto;right:auto;margin:4px 0 12px;font:900 18px/1.3 Arial;letter-spacing:.2px;text-align:center;white-space:normal;text-shadow:0 2px #0004}
body.mobile-layout :is(.owned-car h2 i,.showroom-car h2 i){font-size:24px}
body.mobile-layout :is(.owned-car .owned-render,.showroom-car img){position:absolute;left:-4%;top:98px;width:108%;height:220px;object-fit:contain;pointer-events:none}
body.mobile-layout .owned-car .vehicle-setup-tile{position:absolute;inset:auto 14px 67px;width:calc(100% - 28px);height:48px;min-height:48px;align-items:center;border:1px solid #5998b9;background:linear-gradient(#234a63,#153448);padding:10px;font:bold 12px Arial;border-radius:10px;z-index:3}
body.mobile-layout .owned-stats{position:static;text-align:center;font:10px/1.7 Arial;color:#b3cad9}
body.mobile-layout .owned-car .choose-owned{position:absolute;inset:auto 14px 14px;width:calc(100% - 28px);min-height:44px;font:bold 12px Arial}
body.mobile-layout .owned-car .choose-owned .car-selected{font:bold 12px Arial}
body.mobile-layout .owned-loading{left:0;right:0;top:210px;text-align:center}
body.mobile-layout .showroom-price{position:absolute;left:0;right:0;bottom:82px;text-align:center;color:#ffdc75;font:bold 22px Arial}
body.mobile-layout .showroom-actions{left:14px;right:14px;bottom:16px;display:flex;gap:8px}
body.mobile-layout .showroom-actions button{flex:1;min-height:48px;font:bold 12px Arial}
body.mobile-layout .owned-nav{position:relative;inset:auto;transform:none;display:flex;justify-content:center;margin:3px 0 18px;font:12px Arial;gap:25px}
body.mobile-layout .owned-nav button{min-width:44px;min-height:44px;border:1px solid #416985;border-radius:50%;font-size:18px}
body.mobile-layout :is(.classic-credit,.showroom-demo-note){position:relative;display:block;inset:auto;margin:10px 14px 16px;font:9px/1.5 Arial;text-align:center;letter-spacing:.5px}
/* Selected vehicle setup and purchase details. */
body.mobile-layout #vehicleSetupView{position:relative;inset:auto;display:flex;flex-direction:column;padding:16px 16px 24px;gap:14px}
body.mobile-layout #setupCarRender{position:relative;inset:auto;width:100%;height:220px;order:-2}
body.mobile-layout .setup-power{position:static;font:900 24px Arial;order:-1;color:#e9d275;text-align:center}
body.mobile-layout .setup-tiles{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
body.mobile-layout .setup-tiles button{height:98px;padding:16px;align-items:center;font:bold 15px Arial;border:1px solid #63b9de;border-radius:14px;background:linear-gradient(145deg,#267ba1,#123b58);box-shadow:inset 0 1px #a6e1f944}
body.mobile-layout .setup-admin{position:static;display:flex;gap:12px}
body.mobile-layout .setup-admin button{flex:1;text-align:center;font:bold 11px Arial}
body.mobile-layout :is(.setup-selected,#setupNotice){position:static;width:auto;margin:0;text-align:center;font:12px/1.6 Arial}
body.mobile-layout .setup-selected{align-self:center;min-height:36px;justify-content:center}
body.mobile-layout #showroomDetail{position:relative;inset:auto;display:flex;flex-direction:column;padding:16px;gap:12px}
body.mobile-layout #showroomDetailRender{position:static;width:100%;height:230px;order:-1}
body.mobile-layout .showroom-specs{position:static;width:100%;padding:18px;background:var(--phone-panel);border:1px solid #36586f;border-radius:16px}
body.mobile-layout .showroom-specs h3{font:bold 12px Arial;width:100%;margin-bottom:10px}
body.mobile-layout .showroom-specs ul{font:14px/1.8 Arial}
body.mobile-layout .showroom-specs>p{font:14px/1.6 Arial;margin:12px 0}
body.mobile-layout .showroom-specs>strong{font:bold 26px Arial;color:#ffdc75}
body.mobile-layout :is(#showroomBuy,#showroomGarage){width:100%;margin-bottom:9px}
/* Paint: large live preview first; comfortable controls and full-width studio sheet. */
body.mobile-layout .garage-custom-head{gap:8px}
body.mobile-layout .paint-nav{flex:1;overflow:auto;gap:7px}
body.mobile-layout #customGarage .paint-nav button{font:bold 10px Arial;min-height:44px;padding:8px 10px;white-space:nowrap;border:1px solid #486d83;border-radius:9px;background:#16334a}
body.mobile-layout #customGarage .paint-nav .current{background:#147fa7}
body.mobile-layout .classic-paint-stage .garage-body{position:relative;inset:auto;width:100%;height:auto;display:flex;flex-direction:column;padding:14px;gap:14px}
body.mobile-layout .classic-paint-stage .garage-view{position:relative;inset:auto;width:100%;height:240px;order:-2;overflow:hidden;border-radius:16px;background:radial-gradient(ellipse at 60% 85%,#7599b276,#11283b 70%);border:1px solid #41637a}
body.mobile-layout .classic-paint-stage #garageCanvas{width:100%;height:100%;display:block}
body.mobile-layout .classic-paint-stage .garage-view:before{display:none}
body.mobile-layout .garage-views{position:absolute;left:0!important;right:0!important;bottom:9px;display:flex;justify-content:center}
body.mobile-layout #customGarage .garage-views button{padding:8px 14px;min-height:40px;font:bold 10px Arial;border-radius:8px}
body.mobile-layout .paint-intro{position:static;order:-1;width:auto;font:12px/1.5 Arial;color:#b0c8da;text-shadow:none}
body.mobile-layout .classic-color-panel{position:relative;inset:auto;width:100%;height:auto;padding:20px;border-radius:16px;background:linear-gradient(130deg,#d7b347,#c19a25 55%,#a8791c);box-shadow:inset 0 1px #fff1ac99,0 8px 25px #0003;filter:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}
body.mobile-layout :is(.color-panel-face,.color-panel-metal){display:none}
body.mobile-layout .classic-color-panel h3{position:static;font:bold 14px Arial;grid-column:1/-1}

















body.mobile-layout :is(.paint-balance,#customGarage #garageFeedback){position:static;width:auto;margin:0;transform:none;text-align:center;font:12px/1.5 Arial}
body.mobile-layout #customGarage #garageFeedback{padding:6px 20px 18px;font:12px/1.5 Arial}















/* Parts use a compact touch catalog; desktop retains pointer scrolling. */
body.mobile-layout .speedshop-backdrop{background:radial-gradient(ellipse at 65% 20%,#139bd05c,transparent 70%),linear-gradient(150deg,#142e46,#0e1e2e)}
body.mobile-layout .speedshop-header:after{display:none}
body.mobile-layout :is(#speedshopTitle,#partsInventory,#partsBack){position:static;width:auto;margin:0;transform:none}
body.mobile-layout #speedshopTitle{font:italic 900 22px/1 Arial,sans-serif;letter-spacing:.7px;flex:1 1 130px}
body.mobile-layout #partsInventory{font-size:10px}
body.mobile-layout .speedshop-context{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:8px;padding:16px;margin:0;font:bold 10px Arial;letter-spacing:.5px}
body.mobile-layout #partsCarName{font:11px Arial;letter-spacing:0}
body.mobile-layout #partsViewport{position:relative;inset:auto;width:100%;height:auto;overflow:visible;touch-action:pan-y;padding:0 14px}
body.mobile-layout #partsRail{width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transform:none!important;will-change:auto}
body.mobile-layout .parts-card{width:100%;height:178px;padding:0;min-width:0}
body.mobile-layout .parts-art{width:100%;height:100%;border:1px solid #426179;border-radius:14px;background:radial-gradient(ellipse at 50% 75%,#638ca84d,transparent 70%),linear-gradient(140deg,#304355,#132432)}
body.mobile-layout .parts-art h2{font:bold 13px/1.5 Arial;top:20px;left:12px;right:12px}
body.mobile-layout .parts-tile-price{font:bold 18px Arial;color:#f4d57d}
body.mobile-layout .parts-tile-owned{font:9px Arial}
body.mobile-layout :is(.speedshop-balance,.speedshop-preview){position:static;transform:none;margin:20px 15px;font:10px/1.5 Arial;text-align:center;letter-spacing:.3px}
body.mobile-layout #partsDetail{padding:14px}
body.mobile-layout .parts-detail-art{position:relative;inset:auto;width:100%;height:175px;border-radius:16px}
body.mobile-layout .parts-detail-art h2{font:bold 18px Arial;top:20px}
body.mobile-layout .part-detail-info{position:static;width:auto;margin:18px 0}
body.mobile-layout .part-detail-info h2{font:bold 20px Arial;margin:12px 0}
body.mobile-layout .part-detail-info p{font:14px/1.6 Arial;max-width:none}
body.mobile-layout .part-detail-info .classic-aqua{width:100%;margin:4px 0}
body.mobile-layout #partsOwned{position:relative;inset:auto;padding:14px}
body.mobile-layout #partsOwnedList{max-height:none;overflow:visible}
body.mobile-layout .owned-part-row{flex-wrap:wrap;padding:14px;gap:10px;border-radius:12px}
body.mobile-layout .owned-part-row strong{font:bold 13px Arial;min-width:55%}
body.mobile-layout .owned-part-row button{min-height:44px;font:bold 12px Arial}
/* Login and every signup step are readable at phone size. */
body.mobile-layout .entry-screen{display:block;overflow:auto;height:100dvh;background:#091523}
body.mobile-layout .entry-stage{width:100%;height:auto;min-height:100dvh;transform:none!important;overflow:hidden;padding:calc(30px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;box-shadow:none;background:radial-gradient(ellipse at 100% 15%,#ce9c0a33,transparent 55%),radial-gradient(ellipse at 0 80%,#095ca83d,transparent 65%),#081423}
body.mobile-layout .entry-brand{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/1;filter:drop-shadow(0 5px 8px #0008);margin:0 0 24px}
body.mobile-layout .entry-brand>img{width:100%;height:100%;object-fit:contain}
body.mobile-layout :is(.entry-streaks,.entry-blue-band,.starter-brand,.starter-bottom,.returning-label,.new-racers-label,.helmet-new,.switch-return img,.turn-arrow){display:none!important}
body.mobile-layout .entry-stage[data-page=rides],body.mobile-layout .entry-stage[data-page=detail]{background:radial-gradient(ellipse at 65% 60%,#2f5a7477,transparent 70%),#091523}
body.mobile-layout .entry-stage[data-page=rides] .entry-brand,body.mobile-layout .entry-stage[data-page=detail] .entry-brand{display:block}
body.mobile-layout .entry-page{position:relative;inset:auto;display:flex;flex-direction:column;gap:16px;flex:1}
body.mobile-layout .gold-panel{position:relative;inset:auto;width:100%;height:auto;margin:0;padding:22px 20px;border:1px solid #e7c767;border-radius:20px;background:radial-gradient(ellipse at 5% 0,#f9d7754a,transparent 80%),linear-gradient(135deg,#b48a22,#957021 68%,#6e4e1b);filter:none;box-shadow:inset 0 1px #fff4ba55,0 16px 30px #0006;color:#fff5d5}
body.mobile-layout :is(.panel-metal,.panel-face){display:none}
body.mobile-layout .gold-panel h1{font:italic 900 20px/1.3 Arial;transform:none;margin:0 0 24px;letter-spacing:.6px;white-space:normal;gap:12px;text-shadow:0 2px #513b1566}
body.mobile-layout .gold-panel h1 img{width:32px;height:35px}
body.mobile-layout .gold-panel label{font:bold 10px/1.5 Arial;letter-spacing:1px;margin-bottom:17px;color:#fff1ba}
body.mobile-layout .gold-panel input:not([type=radio]),body.mobile-layout .gold-panel select{width:100%;height:48px;border:1px solid #e9e9d9;border-radius:9px;padding:10px 12px;margin-top:6px;box-shadow:inset 0 3px 6px #28425130;font:16px Arial}
body.mobile-layout .login-fields{position:static;width:100%;margin:0}
body.mobile-layout .login-actions{position:static;width:100%;gap:10px;margin-top:22px}
body.mobile-layout .entry-metal{min-height:46px;border:1px solid #d7eaf1;border-radius:10px;font:bold 12px Arial!important;letter-spacing:.8px;background:linear-gradient(#f2f7fb,#c2d4dd 50%,#a3b9c6);padding:12px;color:#172e40}
body.mobile-layout .login-actions button:first-child{margin-left:0}
body.mobile-layout .helmet-returning{position:relative;inset:auto;width:126px;height:126px;align-self:center;order:2;transform:rotate(-8deg);margin-top:-4px}
body.mobile-layout .entry-switch{position:relative;inset:auto;width:100%;padding:14px 16px;border:1px solid #365a75;border-radius:12px;background:linear-gradient(135deg,#203e54,#10273b);display:flex;align-items:center;justify-content:center;gap:12px;order:1;text-align:left;font:bold 13px/1.5 Arial;color:#dcefff}
body.mobile-layout .entry-switch span br{display:none}
body.mobile-layout .switch-new img{width:42px;height:42px;margin:0;order:-1}
body.mobile-layout .entry-back{position:relative;inset:auto;padding:12px;margin:0;min-height:44px;text-align:left;font:bold 11px Arial!important}
body.mobile-layout .entry-preview-note{position:relative;inset:auto;margin:18px 0 0;font:8px/1.6 Arial;letter-spacing:.8px;width:100%}
body.mobile-layout .register-fields{position:static;display:grid;grid-template-columns:1fr;gap:0;margin:0}
body.mobile-layout .register-fields fieldset{font:bold 11px Arial;letter-spacing:.5px}
body.mobile-layout .register-fields fieldset label{display:inline-flex;min-height:44px;margin:0 18px 0 0;align-items:center;gap:10px}
body.mobile-layout .register-fields input[type=radio]{width:22px;height:22px}
body.mobile-layout .panel-submit{position:static;width:100%;margin-top:22px}
body.mobile-layout .terms-paper{position:relative;inset:auto;width:100%;height:235px;padding:15px;border:1px solid #d8e2e4;border-radius:10px;font:14px/1.6 Arial}
body.mobile-layout .terms-paper h2{font:bold 14px Arial;background:none;color:#182933}
body.mobile-layout .terms-paper p{max-width:none}
body.mobile-layout .terms-instruction{position:static;width:auto;font:13px/1.6 Arial;margin:18px 0 0;color:#fff2ce}
body.mobile-layout .recover-panel label{margin:0;width:100%}
body.mobile-layout .recover-panel p{margin:15px 0;max-width:none;font:14px/1.6 Arial}
body.mobile-layout .rides-page h1{position:static;transform:none;margin:0;font:italic 900 25px Arial;letter-spacing:.3px}
body.mobile-layout .ride-intro{position:static;margin:0;font:13px/1.6 Arial;color:#a8c1d5}
body.mobile-layout .ride-intro br{display:none}
body.mobile-layout .ride-window{position:relative;inset:auto;height:330px;width:100%;border:1px solid #395a72;border-radius:18px;background:radial-gradient(ellipse at 65% 70%,#43677c,#142a3d 70%);touch-action:pan-y}
body.mobile-layout .starter-car{flex:0 0 100%;width:100%;height:330px}
body.mobile-layout .starter-car h2{top:26px;font:bold 18px Arial;letter-spacing:.2px;padding:0 10px}
body.mobile-layout .starter-car h2 i{font-size:24px;letter-spacing:-1px}
body.mobile-layout .starter-model{top:69px;height:214px}
body.mobile-layout .ride-detail{bottom:16px;left:16px;right:16px;min-height:46px}
body.mobile-layout .ride-navigation{position:relative;inset:auto;transform:none;justify-content:center;gap:25px;font:12px Arial}
body.mobile-layout .ride-navigation button{width:46px;height:46px;border-radius:50%;font-size:18px}
body.mobile-layout .ride-lock{inset:80px 15px 40px}
body.mobile-layout .ride-lock strong{width:100%;max-width:260px;font-size:24px}
body.mobile-layout .no-entry{width:175px;height:175px;border-width:16px}
body.mobile-layout .no-entry:after{left:59px;height:160px;width:19px}
body.mobile-layout .locked-caption{bottom:13px;font:8px Arial}
body.mobile-layout .detail-page h2{position:static;order:-3;font:bold 20px Arial;text-align:center;padding:8px}
body.mobile-layout .detail-page h2 i{font-size:25px;letter-spacing:-1px}
body.mobile-layout .detail-model{position:relative;inset:auto;width:100%;height:220px;order:-2}
body.mobile-layout .starter-specs{position:relative;inset:auto;width:100%;border:1px solid #36556c;background:var(--phone-panel);border-radius:16px;padding:20px}
body.mobile-layout .starter-specs h3{width:100%;font:bold 12px Arial;padding-bottom:10px;margin-bottom:12px}
body.mobile-layout .starter-specs p{font:14px/1.7 Arial;margin:0 0 24px}
body.mobile-layout .starter-specs .starter-copy{width:100%;font:13px/1.6 Arial}
body.mobile-layout .starter-colors{width:auto;margin:15px 0 26px}

body.mobile-layout .starter-specs .entry-aqua{float:none;width:100%;margin:0;min-height:48px}
/* Home leaderboards. The featured phone hero never appears on desktop. */
body.mobile-layout .main-original-feature{position:relative;inset:auto;height:330px;background:radial-gradient(ellipse at 70% 75%,#43718b77,transparent 60%),linear-gradient(135deg,#122c44,#091824);overflow:hidden;border-bottom:1px solid #3c6276}
body.mobile-layout .mobile-home-hero{position:relative;height:100%;padding:24px 22px}
body.mobile-layout .mobile-home-hero>span{font:bold 9px Arial;letter-spacing:2px;color:#8fb8d1}
body.mobile-layout .mobile-home-hero h1{margin:12px 0;font:italic 900 30px/1.05 Arial;letter-spacing:-.6px;position:relative;z-index:2}
body.mobile-layout .mobile-home-hero h1 em{color:#f7d268}
body.mobile-layout .mobile-home-hero>img{position:absolute;right:-20px;bottom:19px;width:min(108%,450px);height:226px;object-fit:contain;pointer-events:none}
body.mobile-layout .mobile-home-hero>button{position:absolute;bottom:16px;left:22px;font:bold 11px Arial;z-index:3}
body.mobile-layout .main-leaderboard-bar{position:relative;inset:auto;width:100%;height:auto;min-height:68px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:12px;border:0;background:#142a3b;box-shadow:none}
body.mobile-layout .main-leaderboard-bar button{width:100%;height:44px;font:bold 10px Arial;border-radius:9px;padding:8px 3px}
body.mobile-layout .main-leaderboard-description{position:relative;inset:auto;width:100%;padding:16px;background:transparent;box-shadow:none}
body.mobile-layout .main-leaderboard-description p{margin:0 0 7px;font:13px/1.6 Arial;color:#a8c1d5}
body.mobile-layout .main-leaderboard-description small{position:static;font:9px Arial}
body.mobile-layout .main-leaderboard-table{position:relative;inset:auto;width:100%;padding-bottom:14px}
body.mobile-layout .leaderboard-table-head{font:bold 10px Arial;letter-spacing:.4px;padding:15px 20px;height:44px;grid-template-columns:1fr 1fr;background:#091823}
body.mobile-layout .leaderboard-rows{height:auto;overflow:visible}
body.mobile-layout .leaderboard-row{height:auto;min-height:63px;padding:12px 15px;border:0;border-bottom:1px solid #29465a;background:#152d40;font:12px/1.5 Arial;grid-template-columns:24px 1fr 1.4fr}
body.mobile-layout .leaderboard-row:nth-child(even){background:#122637}
body.mobile-layout .leaderboard-row b{color:#f2d16d;font:bold 13px Arial}
/* Race destinations and league selection. */
body.mobile-layout .track-toolbar{min-height:0}
body.mobile-layout .track-toolbar:has(#trackLandingBack[hidden]){display:none}
body.mobile-layout .track-toolbar #trackToolbarHelmet{position:static;width:44px;height:44px}
body.mobile-layout #trackLandingBack{position:static;width:auto;margin-left:auto}
body.mobile-layout #raceTrackChoices{padding:20px 16px;display:grid;gap:18px}
body.mobile-layout .track-choice{position:relative;inset:auto;width:auto;border:1px solid #3d718b;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 0 0,#2f719345,transparent 75%),var(--phone-panel);padding:18px}
body.mobile-layout .challenge-tile{width:100%;height:150px;display:flex;flex-direction:row;align-items:center;gap:14px;padding:12px 20px;border:1px solid #72c3e3;border-radius:13px;background:linear-gradient(135deg,#278cabaa,#0d4b6d);box-shadow:inset 0 1px #c3f0fc33}
body.mobile-layout .challenge-tile strong{font:italic 900 23px/1.2 Arial;text-align:left;letter-spacing:-.5px;text-shadow:0 2px #071d33}
body.mobile-layout .challenge-tile img{width:104px;height:112px;filter:drop-shadow(0 6px 6px #0006)}
body.mobile-layout .track-choice p{margin:17px 0 0;font:13px/1.6 Arial;color:#c1d6e5;text-shadow:none}
body.mobile-layout #computerLeagues{position:relative;inset:auto;min-height:600px;padding:16px;display:flex;flex-direction:column;gap:18px;isolation:isolate}
body.mobile-layout .league-atmosphere{z-index:-1;border-radius:18px;opacity:.6}
body.mobile-layout .league-selector{position:static;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px;order:-4}
body.mobile-layout .league-selector button{height:52px;padding:8px;font:bold 11px/1.4 Arial;white-space:normal}
body.mobile-layout #computerLeagues .league-heading{position:static;font:italic 900 29px/1.1 Arial;letter-spacing:.5px;white-space:normal;margin:12px 0 0;order:-3}
body.mobile-layout .league-heading span{display:inline-block;margin:6px 0 0;font-size:24px;letter-spacing:4px;padding:4px 12px}
body.mobile-layout #leagueDescription{position:static;width:auto;margin:0;font:14px/1.6 Arial;order:-2;color:#d5e7f2;text-shadow:0 1px #061e34}
body.mobile-layout .league-award{position:relative;inset:auto;width:220px;height:195px;margin:12px auto 0;order:-1}
body.mobile-layout .league-race-actions{position:static;display:flex;flex-direction:column;gap:10px;width:100%}
body.mobile-layout .league-race-actions button{width:100%;height:48px;font:bold 13px Arial}
body.mobile-layout #leaguePreviewNotice{position:static;width:auto;margin:0;font:12px/1.6 Arial;text-align:center}
/* Opponent selection keeps every action visible without scaling the page. */
body.mobile-layout .classic-lobby{display:grid;grid-template-columns:1fr 1fr;padding:0 16px 20px;gap:15px;background:radial-gradient(ellipse at 100% 20%,#248cab55,transparent 70%),#10283d}
body.mobile-layout .league-toolbar{grid-column:1/-1;margin:0 -16px;width:calc(100% + 32px);padding:12px 16px;flex-wrap:nowrap}
body.mobile-layout .helmet-icon{display:none}
body.mobile-layout .lobby-back{position:static;width:90px;height:44px}
body.mobile-layout .league-badge{position:static;gap:8px;margin-left:auto}
body.mobile-layout .league-badge span{font-size:12px;letter-spacing:.8px}
body.mobile-layout .bracket-mark{position:relative;inset:auto;width:65px;align-self:center;font-size:14px}
body.mobile-layout .driver-class{position:relative;inset:auto;justify-self:end;font:10px Arial;padding-right:30px}
body.mobile-layout .driver-class b{left:auto;right:0;top:0}
body.mobile-layout .racer-portrait{position:relative;inset:auto;width:110px;height:110px;justify-self:center}
body.mobile-layout .racer-copy{position:relative;inset:auto;width:auto;align-self:center}
body.mobile-layout .racer-copy h2{font:italic 900 20px Arial;white-space:normal;transform:none}
body.mobile-layout .racer-copy p{width:auto;margin:10px 0;font:13px/1.6 Arial}
body.mobile-layout .racer-car{position:relative;inset:auto;width:100%;height:145px;grid-column:1/-1;transform:none;border-radius:16px}
body.mobile-layout .racer-car img{transform:none}
body.mobile-layout .lobby-challenge{position:relative;inset:auto;width:100%;min-height:50px;grid-column:1/-1;order:2;font:bold 14px Arial}
body.mobile-layout .prize-money{position:relative;inset:auto;width:auto;grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:12px}
body.mobile-layout .prize-money i{margin:0}
body.mobile-layout .prize-money span{margin:0;font-size:10px}
body.mobile-layout .lobby-opponents{position:relative;inset:auto;width:100%;height:118px;grid-column:1/-1;gap:12px;order:3;touch-action:pan-x pan-y}
body.mobile-layout .opponent-card{flex-basis:242px;border:1px solid #487086;border-radius:14px;background:#19354c;overflow:hidden}
body.mobile-layout .card-portrait{border-radius:12px 0 0 12px;border:0;top:0;height:100%}
/* Bracket modal is a real phone dialog, not a scaled desktop card. */
body.mobile-layout #bracketShade{position:fixed;inset:0;z-index:200;background:#031321b8;backdrop-filter:blur(5px);padding:16px;display:grid;place-items:center}
body.mobile-layout #bracketDialog{position:relative;inset:auto;width:min(100%,430px);height:auto;transform:none!important;padding:24px;border:1px solid #f5da7f;border-radius:20px;background:linear-gradient(130deg,#d4ad39,#98691c);box-shadow:0 15px 40px #0009;color:#fff;display:flex;flex-direction:column;gap:18px}
body.mobile-layout :is(.bracket-metal,.bracket-gold,.bracket-popup-mark){display:none}
body.mobile-layout #bracketTitle{position:static;margin:0;font:bold 26px Arial;letter-spacing:1px}
body.mobile-layout #bracketForm{position:relative;inset:auto;width:100%;height:auto;display:grid;gap:14px}
body.mobile-layout #bracketForm label{position:static;font:bold 13px Arial;display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%}
body.mobile-layout #bracketET{width:120px;height:52px;border-radius:9px;text-align:center;font:bold 24px Arial!important;box-shadow:inset 0 3px 5px #273e4d40}
body.mobile-layout :is(#bracketInstructions,#bracketError){position:static;margin:0;width:auto;font:14px/1.6 Arial;text-align:left}
body.mobile-layout .bracket-silver{position:static;width:100%;min-height:46px;font:bold 12px Arial;border-radius:9px}
body.mobile-layout .bracket-ok{background:linear-gradient(#effaff,#b6d3e2)}
/* Player search keeps the modern Community panel. */
body.mobile-layout #onlineChallengePreview{position:relative;inset:auto;padding:14px 0}
body.mobile-layout .racer-search-panel{position:relative;inset:auto;width:auto;height:auto;margin:0 14px 16px;border-radius:16px;padding:8px 0 0}
body.mobile-layout .racer-search-tabs{position:static;width:100%;display:grid;grid-template-columns:repeat(4,1fr);padding:0 8px;gap:6px;height:auto}
body.mobile-layout .racer-search-tabs button{min-height:44px;border-radius:8px;font:bold 10px Arial}
body.mobile-layout #playerSearchForm{position:static;inset:auto;margin:14px;padding:0}
body.mobile-layout #playerSearchForm label{font:bold 11px Arial;margin-bottom:8px;display:block}
body.mobile-layout #playerSearchForm>div{gap:8px}
body.mobile-layout #playerSearchInput{height:46px;border-radius:8px;min-width:0;width:100%;flex:1;padding:10px}
body.mobile-layout #playerSearchForm button{min-height:46px;border-radius:8px;font:bold 11px Arial;padding:10px}
body.mobile-layout .racer-search-results{height:190px;margin:0 8px;overflow:auto}
body.mobile-layout .racer-search-results button{height:48px;padding:7px 10px;gap:12px;font:14px Arial}
body.mobile-layout .player-list-avatar{width:32px;height:32px}
body.mobile-layout .racer-search-results .player-list-avatar img{width:29px;height:29px}
body.mobile-layout .racer-results-caption{font:10px Arial;height:auto;padding:13px 0;margin:8px 14px 0}
body.mobile-layout .online-player-profile{position:relative;inset:auto;width:auto;height:auto;margin:14px;padding:18px 66px 18px 66px;border:1px solid #365b72;border-radius:16px;background:var(--phone-panel)}
body.mobile-layout .player-profile-avatar{left:14px;top:20px;width:38px;height:38px}
body.mobile-layout .player-profile-avatar img{width:100%;height:100%}
body.mobile-layout #onlinePlayerName{position:static;margin:0 0 8px;font:italic bold 19px Arial}
body.mobile-layout .online-player-profile p{position:static;font:11px/1.7 Arial;margin:0}
body.mobile-layout .online-driver-class{right:14px;top:26px;font:8px/1.4 Arial}
body.mobile-layout .online-driver-class b{width:32px;height:32px;font:16px/28px Arial}
body.mobile-layout .online-select-heading{position:static;width:auto;padding:10px 14px;margin:0;text-align:center;font:bold 11px Arial;letter-spacing:1px;background:#17689255}
body.mobile-layout .online-car-specs{position:static;font:12px/1.6 Arial;color:#b4ccdc}
body.mobile-layout .online-garage-car>img{position:absolute;inset:100px 0 auto;width:100%;height:220px;object-fit:contain}
body.mobile-layout .online-garage-car .classic-aqua{position:absolute;inset:auto 14px 16px;width:calc(100% - 28px);min-height:48px}
body.mobile-layout #onlineRaceNotice{position:static;font:12px/1.6 Arial;text-align:center;padding:10px 16px;margin:0;width:auto}
/* Community: full-width chat{overflow:hidden;height:calc(var(--phone-visible-height,100dvh) - var(--phone-head) - var(--phone-foot) - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
body.mobile-layout .community-help-panel{inset:14px 14px auto;padding:24px;font:14px/1.7 Arial;border-radius:14px}
body.mobile-layout .community-help-panel>button{width:44px;height:44px}
/* Racing fills landscape; controls float over the scene instead of taking its space. */
body.mobile-layout.phone-racing{--phone-head:42px;--phone-foot:0px}
body.mobile-layout.phone-racing .mobile-dock,body.mobile-layout.phone-racing .mobile-page-title{display:none}
body.mobile-layout.phone-racing .mobile-topbar{background:linear-gradient(#081420c9,#09182670);border-bottom:1px solid #8bc9ea33;box-shadow:none}
body.mobile-layout.phone-racing .mobile-top-gear{display:block;margin-left:auto;font:10px Arial;color:#b5d4e7}
body.mobile-layout.phone-racing .mobile-top-gear strong{font:bold 20px Arial;color:#fff}
body.mobile-layout.phone-racing .mobile-brand{width:110px}
body.mobile-layout.phone-racing .mobile-supplied-logo{width:110px;height:37px}
body.mobile-layout.phone-racing .mobile-menu-button{width:36px;height:34px;font-size:22px;background:#142b3e80}
body.mobile-layout.phone-racing .scene{inset:0!important;width:100%;height:100%;overflow:hidden}
body.mobile-layout.phone-racing .track-wrap{inset:0;width:100%;height:100%}
body.mobile-layout.phone-racing .meter-strip{display:none}
body.mobile-layout.phone-racing .tree{top:calc(48px + env(safe-area-inset-top));right:50%;margin-right:-54px;transform:scale(.6);transform-origin:top center;pointer-events:none}
body.mobile-layout.phone-racing .mobile-race-hud{inset:calc(50px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) auto max(18px,env(safe-area-inset-left));height:66px;display:flex;justify-content:flex-end;gap:7px;pointer-events:none}
body.mobile-layout.phone-racing :is(.mobile-stage-card,.mobile-rpm-card,.mobile-speed-card,.mobile-gear-card,.mobile-time-card){position:relative;inset:auto;transform:none;flex:none;border:1px solid #7bb3d83b;border-radius:9px;background:#0a1d3080;box-shadow:none;height:56px}
body.mobile-layout.phone-racing .mobile-stage-card{margin-right:auto;width:110px;display:flex;gap:9px;padding:8px}
body.mobile-layout.phone-racing .mobile-stage-message{position:absolute;bottom:7px;left:8px;font:8px Arial;color:#bae7fa}
body.mobile-layout.phone-racing .mobile-rpm-card{width:120px;padding:8px}
body.mobile-layout.phone-racing .mobile-rpm-top{font:9px Arial}
body.mobile-layout.phone-racing .mobile-rpm-top strong{font:bold 16px Arial}
body.mobile-layout.phone-racing .mobile-rpm-track{height:5px;margin-top:6px}
body.mobile-layout.phone-racing .mobile-shift-lamps{margin-top:4px;gap:5px}
body.mobile-layout.phone-racing .mobile-shift-lamps i{width:7px;height:5px}
body.mobile-layout.phone-racing .mobile-speed-card{width:60px;text-align:center;padding:5px}
body.mobile-layout.phone-racing .mobile-speed-card strong{font:bold 23px Arial}
body.mobile-layout.phone-racing .mobile-speed-card span{font:8px Arial}
body.mobile-layout.phone-racing .mobile-gear-card{display:none}
body.mobile-layout.phone-racing .mobile-time-card{width:84px;padding:9px 6px;display:flex;flex-direction:column;gap:5px;font:8px Arial}
body.mobile-layout.phone-racing .mobile-control-deck{position:absolute;inset:0!important;height:100%!important;background:none!important;border:0;box-shadow:none;padding:0;pointer-events:none;display:block;z-index:30;user-select:none;-webkit-user-select:none}
body.mobile-layout.phone-racing .mobile-control-head{position:absolute;inset:auto 160px calc(12px + env(safe-area-inset-bottom)) 180px;height:auto;background:none;border:0;display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none}
body.mobile-layout.phone-racing #mobileInstruction{font:bold 9px/1.6 Arial;text-align:center;color:#d9efff;text-shadow:0 2px 4px #000;letter-spacing:.4px}
body.mobile-layout.phone-racing #mobileThrottleReadout{display:none}
body.mobile-layout.phone-racing .mobile-reset{position:absolute;left:-5px;bottom:25px;padding:6px 10px;min-height:32px;border:1px solid #a9d2ea44;border-radius:8px;color:#d6efff;background:#122b4255;font:9px Arial;pointer-events:auto}
body.mobile-layout.phone-racing .mobile-shift-stack{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));width:74px;height:auto;display:flex;flex-direction:column;gap:10px;pointer-events:auto}
body.mobile-layout.phone-racing .mobile-shift{width:74px;height:63px;border:1px solid #bddff155;border-radius:16px;background:linear-gradient(140deg,#325a7260,#0c263c60);box-shadow:inset 0 1px #e6f6ff1f,0 4px 12px #0003;color:#eaf8ff;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;opacity:.72}
body.mobile-layout.phone-racing .mobile-shift span{font:bold 8px Arial;letter-spacing:1px}
body.mobile-layout.phone-racing .mobile-shift b{font:32px/1 Arial}
body.mobile-layout.phone-racing .mobile-shift:active{background:#268bbbad;opacity:1}
body.mobile-layout.phone-racing .mobile-shift-gear{display:none}
body.mobile-layout.phone-racing .mobile-brake-pad{position:absolute;left:calc(max(18px,env(safe-area-inset-left)) + 86px);bottom:calc(20px + env(safe-area-inset-bottom));width:62px;height:63px;border:1px solid #e8bab14d;border-radius:16px;background:#4a282e66;color:#fce7de;box-shadow:none;pointer-events:auto;opacity:.7;touch-action:none}
body.mobile-layout.phone-racing .mobile-brake-pad span{font:bold 9px Arial}
body.mobile-layout.phone-racing .mobile-brake-pad small{font:8px Arial;display:block;margin-top:6px}
body.mobile-layout.phone-racing .mobile-brake-pad.braking{background:#cc4734aa;opacity:1}
body.mobile-layout.phone-racing .mobile-gas-wrap{display:none}
body.mobile-layout.phone-racing .mobile-gas-button{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:105px;height:105px;border:1px solid #c2e9e45c;border-radius:27px;background:linear-gradient(135deg,#30878b66,#103b3866);box-shadow:inset 0 1px #e2fff526,0 6px 15px #0004;color:#e6fff4;pointer-events:auto;touch-action:none;opacity:.72;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}
body.mobile-layout.phone-racing .mobile-gas-button b{font:25px/1 Arial;transform:rotate(-90deg)}
body.mobile-layout.phone-racing .mobile-gas-button span{font:bold 14px Arial;letter-spacing:1px}
body.mobile-layout.phone-racing .mobile-gas-button small{font:8px Arial;letter-spacing:2px;color:#bee0d7}
body.mobile-layout.phone-racing .mobile-gas-button.pressed{background:linear-gradient(135deg,#2baf989c,#185643b0);border-color:#8fefd3;opacity:1;box-shadow:0 0 18px #23cf9155}
body.mobile-layout.phone-racing .mobile-rotate{position:absolute;inset:0;z-index:125;background:radial-gradient(ellipse at 50% 45%,#214861,#071522 72%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(70px + env(safe-area-inset-top)) 26px calc(30px + env(safe-area-inset-bottom));text-align:center;color:#e4f6ff}
body.mobile-layout.phone-racing .rotate-phone{width:110px;height:65px;border:3px solid #82cef5;border-radius:18px;box-shadow:0 0 30px #1d98d236;font:55px/60px Arial;color:#f5d275;transform:rotate(-10deg);margin-bottom:30px}
body.mobile-layout.phone-racing .mobile-rotate h1{font:italic 900 26px Arial;margin:0 0 12px}
body.mobile-layout.phone-racing .mobile-rotate p{font:14px/1.7 Arial;color:#a6c5db;margin:0 0 24px}
body.mobile-layout.phone-racing .mobile-rotate button{width:100%;max-width:310px;min-height:48px;margin:5px 0;padding:12px;border-radius:12px;border:1px solid #5ca9d1;background:linear-gradient(#2885aa,#16537b);color:white;font:bold 12px Arial;letter-spacing:.6px}
body.mobile-layout.phone-racing #mobileRotateBack{background:#152d42;border-color:#385d77}
body.mobile-layout.phone-racing #mobileOrientationNote{font:12px/1.6 Arial;max-width:310px;margin-top:24px}
body.mobile-layout.phone-racing #graphicsPanel{position:fixed;inset:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));width:auto;height:auto;overflow:auto;z-index:160;max-width:480px;margin:auto;font:14px Arial;border-radius:16px;padding:20px;background:linear-gradient(135deg,#294659,#122536);border:1px solid #6698b7;color:#d5eafa}
body.mobile-layout.phone-racing #graphicsPanel h3{font:bold 17px Arial;color:#f7d477}
body.mobile-layout.phone-racing #graphicsPanel label{min-height:50px;font:13px Arial;gap:10px}
body.mobile-layout.phone-racing #graphicsPanel p{font:13px/1.6 Arial}
body.mobile-layout.phone-racing #closeGraphics{min-width:44px;min-height:44px}
body.mobile-layout.phone-result .mobile-control-deck,body.mobile-layout.phone-result .mobile-race-hud{display:none}
@media(max-width:360px){body.mobile-layout .challenge-tile{padding:12px}body.mobile-layout .challenge-tile strong{font-size:20px}body.mobile-layout .challenge-tile img{width:88px}body.mobile-layout .mobile-selected strong{font-size:9px}}
@media(max-height:440px){body.mobile-layout{--phone-head:48px;--phone-foot:70px}body.mobile-layout .mobile-selected{height:22px}body.mobile-layout .mobile-dock-links{height:48px}body.mobile-layout .mobile-dock-links button b{font-size:20px}body.mobile-layout .mobile-race-hud{top:calc(44px + env(safe-area-inset-top));height:50px}body.mobile-layout .mobile-rpm-card{width:103px}body.mobile-layout .mobile-home-hero{padding-top:16px}body.mobile-layout .mobile-reset{bottom:20px}body.mobile-layout .mobile-rotate{padding:40px 20px}body.mobile-layout .rotate-phone{display:none}}
@media(prefers-reduced-motion:reduce){body.mobile-layout *,body.mobile-layout *:before,body.mobile-layout *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.mobile-layout #mobileRaceSettings{display:none}
body.mobile-layout.phone-racing #mobileRaceSettings{display:block;flex:none;width:36px;height:34px;border:1px solid #50738b70;border-radius:9px;background:#142b3e80;color:#c9e6fa;font:20px Arial}
body.mobile-layout .paint-nav{scrollbar-width:none}
body.mobile-layout .paint-nav::-webkit-scrollbar{display:none}
body.mobile-layout .online-car-stats{position:static;font:11px/1.6 Arial;display:flex;gap:10px;color:#b4ccdc}
body.mobile-layout .online-driver-class b{position:relative;inset:auto;margin:4px auto 0}
body.mobile-layout :is(#mainScreen,#carSelection,#customGarage,#carShowroomScreen,#partsShopScreen,#raceTrackScreen,#showroomOverlay){overflow-x:hidden}
body.mobile-layout:not(.phone-racing) .scene{visibility:hidden}
body.mobile-layout .challenge-tile{position:relative;inset:auto;margin:0;transform:none}
body.mobile-layout .league-atmosphere{overflow:hidden}
body.mobile-layout .league-heading span{display:block;width:max-content;max-width:100%;margin:8px auto 0}
body.mobile-layout.phone-racing .mobile-shift-stack{right:auto;top:auto;transform:none}
body.mobile-layout.phone-racing .mobile-shift{height:63px;position:relative;inset:auto;transform:none}
body.mobile-layout.phone-racing .mobile-brake-pad{right:auto;top:auto;transform:none}
body.mobile-layout.phone-racing .mobile-stage-card,body.mobile-layout.phone-racing .mobile-rpm-card,body.mobile-layout.phone-racing .mobile-speed-card,body.mobile-layout.phone-racing .mobile-time-card{inset:auto!important;transform:none!important}
body.mobile-layout.mobile-portrait .showroom-head,body.mobile-layout.mobile-landscape .showroom-head{inset:auto;position:relative;width:100%;margin:0;transform:none}
body.mobile-layout.phone-racing .mobile-control-head{transform:none;width:auto;pointer-events:none}
body.mobile-layout #phoneTeamScreen{position:absolute;inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 calc(var(--phone-foot) + env(safe-area-inset-bottom));z-index:81;overflow:auto;padding:35px 24px;background:radial-gradient(ellipse at 90% 10%,#94702b3b,transparent 65%),linear-gradient(135deg,#193447,#0b1c2c);text-align:center;color:#d9edfc}
body.mobile-layout #phoneTeamScreen>img{width:135px;height:135px;object-fit:contain;margin:0 auto 24px;display:block;filter:drop-shadow(0 7px 10px #0006)}
body.mobile-layout #phoneTeamScreen>span{font:bold 10px Arial;letter-spacing:2px;color:#f4d77b}
body.mobile-layout #phoneTeamScreen h1{font:italic 900 32px/1.1 Arial;letter-spacing:-.7px;margin:18px 0}
body.mobile-layout #phoneTeamScreen p{font:14px/1.8 Arial;color:#a7c6db;max-width:430px;margin:20px auto}
body.mobile-layout #phoneTeamScreen button{width:100%;max-width:350px}
body.mobile-layout #phoneRaceNavNote{font:13px/1.6 Arial;border:1px solid #806832;color:#f9d99a;padding:13px;border-radius:10px;background:#86672425}

/* Graphite Speedshop toolbar matches desktop while allowing narrow-phone wrapping. */
body.mobile-layout .speedshop-header{padding:12px 14px;gap:8px;min-height:66px;border-bottom:1px solid #030405;background:linear-gradient(116deg,transparent 45%,#c4c9ce12 45.2%,transparent 78%),linear-gradient(#101317,#030405 72%)}
body.mobile-layout :is(#partsInventory,#partsBack){min-height:34px;padding:8px 10px;font-size:10px}
body.mobile-layout .speedshop-header:after{display:block}
@media(max-width:360px){
 body.mobile-layout #speedshopTitle{flex-basis:100%}
 body.mobile-layout #partsBack{margin-left:auto}
 body.mobile-layout #partsInventory{margin-left:0}
}

/* Taller phone cards leave space for long part names, artwork and prices. */
body.mobile-layout .parts-card{height:222px}
body.mobile-layout .parts-art h2{top:14px;font:700 12px/16px Arial;left:10px;right:10px}
body.mobile-layout .parts-art .part-product-image{top:67px;left:12px;width:calc(100% - 24px);height:104px}
body.mobile-layout .parts-detail-art h2{font:700 16px/20px Arial;top:14px}
body.mobile-layout .parts-detail-art .part-product-image{top:61px;left:16px;width:calc(100% - 32px);height:104px}

/* Keep the workshop visible through the mobile paint preview too. */
body.mobile-layout .classic-paint-stage .garage-view{background:transparent}
body.mobile-layout #customGarage .paint-intro{color:#e4ecf1;text-shadow:0 1px 3px #000c,0 0 8px #0008}

/* ==== styles/classic-gauges.css ==== */
/* Classic instruments: one vector face per dial, plus live telemetry needles. */
.classic-gauge-face{display:none}
body:not(.mobile-layout) .dash{left:54px;right:34px;bottom:0;height:180px}
body:not(.mobile-layout) .dash .dash-shell{inset:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
body:not(.mobile-layout) .dash .dash-shell:before,body:not(.mobile-layout) .dash .dash-shell:after{display:none}
body:not(.mobile-layout) .dash .gauge{top:auto;transform:none;background:none;border:0;box-shadow:0 3px 5px #0009;border-radius:50%;overflow:visible;opacity:1}
body:not(.mobile-layout) .dash .gauge.nos{left:46px;bottom:8px;width:92px;height:92px;z-index:6}
body:not(.mobile-layout) .dash .gauge.boost{left:122px;bottom:11px;width:126px;height:126px}
body:not(.mobile-layout) .dash .gauge.rpm{left:229px;bottom:10px;width:172px;height:172px}
body:not(.mobile-layout) .dash .gauge.mph{left:400px;bottom:10px;width:172px;height:172px}
body:not(.mobile-layout) .dash .gauge:before,body:not(.mobile-layout) .dash .gauge:after,
body:not(.mobile-layout) .dash :is(.rim-shine,.rim-cool,.glass,.tick,.rpm-numbers,.mph-numbers,.boost-numbers,.g-readout,.g-title,.g-sub,.shift-lights){display:none}
body:not(.mobile-layout) .dash .classic-gauge-face{display:block;position:absolute;inset:0;background:center/contain no-repeat;pointer-events:none;z-index:1}
body:not(.mobile-layout) .nos .classic-gauge-face{background-image:url('../assets/gauges/nos-classic.svg?v=86883f5788b3')}
body:not(.mobile-layout) .boost .classic-gauge-face{background-image:url('../assets/gauges/boost-classic.svg')}
body:not(.mobile-layout) .rpm .classic-gauge-face{background-image:url('../assets/gauges/rpm-classic.svg?v=41d25aac4f80')}
body:not(.mobile-layout) .mph .classic-gauge-face{background-image:url('../assets/gauges/mph-classic.svg?v=3f12db9b3042')}
body:not(.mobile-layout).gauges-white .nos .classic-gauge-face{background-image:url('../assets/gauges/nos-white.svg?v=90d82fc43f80')}
body:not(.mobile-layout).gauges-white .boost .classic-gauge-face{background-image:url('../assets/gauges/boost-white.svg')}
body:not(.mobile-layout).gauges-white .rpm .classic-gauge-face{background-image:url('../assets/gauges/rpm-white.svg?v=dad2598a87dc')}
body:not(.mobile-layout).gauges-white .mph .classic-gauge-face{background-image:url('../assets/gauges/mph-white.svg?v=72149fe143cb')}
body:not(.mobile-layout) .dash .gauge .needle{display:block;position:absolute;left:50%;top:calc(50% - 2px);width:38%;height:4px;transform-origin:0 50%;background:none;border:0;border-radius:0;clip-path:none;filter:drop-shadow(0 1px 1px #0009);box-shadow:none;z-index:5;transition:transform .065s linear}
body:not(.mobile-layout) .dash .gauge .needle:before{content:'';display:block;position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(#ff6031,#e83212 50%,#b8210b);border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,94% 34%,100% 50%,94% 66%,0 100%)}
body:not(.mobile-layout) .dash .gauge .needle:after{content:'';display:block;position:absolute;left:-12px;top:-1px;width:16px;height:6px;border-radius:2px;background:#e83e19;box-shadow:none}
body:not(.mobile-layout) .dash .gauge .hub{display:block;left:45%;top:45%;width:10%;height:10%;border:0;background:radial-gradient(circle at 38% 30%,#f4572a,#e43a13 55%,#ad230a);box-shadow:0 1px 2px #0007;border-radius:50%;z-index:6}
body:not(.mobile-layout) .dash .gauge .hub:after{display:none}
body:not(.mobile-layout) .dash .gauge.boost .hub{left:45.5%;top:45.5%;width:9%;height:9%}
body:not(.mobile-layout) .dash .gauge.rpm.shift-ready .classic-gauge-face{filter:drop-shadow(0 0 3px #e9b94799)}
/* A real catalog preview for the white-face accessory; other part artwork stays blank. */








/* Compact phone telemetry adopts the installed faces without changing its layout. */
body.mobile-layout.gauges-white.phone-racing :is(.mobile-rpm-card,.mobile-speed-card){background:linear-gradient(135deg,#fffef4f2,#dce0d3e6);border-color:#e7e8de;color:#242724}
body.mobile-layout.gauges-white.phone-racing :is(.mobile-rpm-card,.mobile-speed-card) :is(strong,span){color:#242724;text-shadow:none}

body:not(.mobile-layout) .dash .gauge.nos .needle{height:3px;top:calc(50% - 1.5px)}
body:not(.mobile-layout) .dash .gauge.nos .needle:after{left:-7px;width:11px;height:4px;top:-.5px}
body:not(.mobile-layout) .dash .gauge.nos .hub{left:45%;top:45%;width:10%;height:10%}

/* Red LED telemetry sits in the old maker-label area of the two main dials. */
body:not(.mobile-layout) .dash .gauge:is(.rpm,.mph) .g-readout{
 display:block;position:absolute;z-index:3;left:50%;top:auto;bottom:14%;width:43px;height:14px;
 transform:translateX(-50%);padding:1px 2px;border:1px solid #3b1714;border-radius:2px;
 background:linear-gradient(#090404,#1b0907);box-shadow:inset 0 1px 3px #000b;
 font:700 11px/12px 'Courier New',monospace;font-variant-numeric:tabular-nums;letter-spacing:1px;
 color:#ff5949;text-align:center;text-shadow:0 0 2px #ff281b,0 0 5px #ff281b88;
 pointer-events:none;
}
body:not(.mobile-layout).gauges-white .dash .gauge:is(.rpm,.mph) .g-readout{border-color:#807b74;box-shadow:inset 0 1px 3px #000b,0 1px 0 #fff9}
/* v37 perfect shift window (7850–8050): a warm glow behind the tach. "shift-ready" is the softer cue just before it. */
.dash .gauge.rpm{transition:box-shadow .08s linear}
body:not(.mobile-layout) .dash .gauge.rpm.shift-ready{box-shadow:0 0 0 3px #070b10,0 0 16px #eabe5466,0 0 30px #eabe5422}
body:not(.mobile-layout) .dash .gauge.rpm.shift-perfect{border-color:#ffd56a;box-shadow:0 0 0 3px #070b10,0 0 18px #ffd56acc,0 0 42px #ffc13a77,0 0 70px #ffb11f33}
body:not(.mobile-layout) .dash .gauge.rpm.shift-perfect .classic-gauge-face{filter:drop-shadow(0 0 6px #ffd56acc)}
.gauge.rpm.shift-perfect{box-shadow:0 0 0 2px #242a2f,0 0 0 4px #c9ced1,0 0 0 6px #525a60,0 0 0 8px #171b1f,0 0 26px rgba(255,205,90,.75),0 0 48px rgba(255,180,40,.35),0 9px 18px rgba(0,0,0,.92),inset 0 0 22px rgba(0,0,0,.95)}
.mobile-rpm-card.shift-perfect{box-shadow:0 0 18px #ffd56acc,0 0 36px #ffc13a55;border-color:#ffd56a}

/* ==== styles/teams.css ==== */
/* Team headquarters (v44 redesign). Panels use the shared black-glass look from styles/glass.css
   (.ui-glass / .ui-row / .ui-btn / .ui-kicker). Layout: header band → tab row → section body → notice.
   The Find-a-Crew directory is a slide-out drawer; dialogs and chat sit on top. */
#teamsScreen{position:absolute;inset:102px 0 49px;z-index:80;color:var(--glass-text);font:12px Arial,sans-serif;overflow:hidden;--team-accent:#e6b444;
  background:radial-gradient(ellipse at 80% 110%,#c9a23c14,transparent 55%),radial-gradient(ellipse at 15% -10%,#5d7e9a33,transparent 55%),linear-gradient(160deg,#151c22,#07090b 70%)}
#teamsScreen[hidden],#teamsScreen [hidden]{display:none!important}
#teamsScreen button{font-family:Arial,sans-serif}
#teamsScreen button:focus-visible,#teamsScreen select:focus-visible,#teamsScreen input:focus-visible,#teamsScreen textarea:focus-visible{outline:2px solid #f4d377;outline-offset:2px}
.tm-stage{position:absolute;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:7px;padding:10px 14px 6px}
.tm-panel-head{display:flex;align-items:center;gap:10px;padding:0 0 7px;margin-bottom:7px;border-bottom:1px solid #ffffff10}
.tm-panel-head>div:first-child{flex:1;min-width:0}
.tm-panel-head h3{margin:2px 0 0;font:italic 900 14px Arial;letter-spacing:.4px;color:#f2f5f7}
.tm-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.tm-list>.ui-row{flex:none;animation:ui-row-in .26s ease-out both;animation-delay:calc(var(--i,0)*35ms)}

/* ---------- header band ---------- */
.tm-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:14px;padding:10px 14px;overflow:hidden}
.tm-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 50%,color-mix(in srgb,var(--team-accent) 22%,transparent),transparent 45%)}
img.tm-emblem{position:relative;z-index:1;width:60px;height:60px;border-width:1.5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--team-accent) 35%,transparent),0 0 18px color-mix(in srgb,var(--team-accent) 30%,transparent),0 4px 10px #000a}
img.tm-emblem-sm{flex:none;width:38px;height:38px;border-width:1px;box-shadow:0 2px 6px #000a}
.tm-identity{position:relative;z-index:1;min-width:0}
.tm-identity h2{margin:2px 0 1px;font:italic 900 21px/1.05 Arial;letter-spacing:.3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 3px #0008}
.tm-identity p{margin:0 0 5px;font:italic 9.5px Arial;color:var(--glass-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font:700 8px Arial;letter-spacing:.8px;color:#9aa8b1}
.tm-meta b{color:#f1d58a}
.tm-live{display:inline-flex;align-items:center;gap:4px;color:var(--glass-green)}
.tm-live i{width:6px;height:6px;border-radius:50%;background:var(--glass-green);box-shadow:0 0 6px var(--glass-green);animation:tm-pulse 1.8s ease-in-out infinite}
.tm-stats{position:relative;z-index:1;display:flex;gap:6px}
.tm-stat{min-width:76px;padding:6px 9px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0d;display:flex;flex-direction:column;gap:2px}
.tm-stat .ui-kicker{font-size:7px;letter-spacing:1.5px}
.tm-stat strong{font:italic 900 17px Arial;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.tm-record strong{display:flex;align-items:baseline;gap:3px}.tm-record strong b{font:inherit;color:var(--glass-green)}.tm-record strong i{font-style:normal;color:#5c6870;font-size:12px}.tm-record strong .tm-loss{color:var(--glass-red)}
.tm-winbar{height:3px;border-radius:2px;background:#ff6b6240;overflow:hidden}
.tm-winbar i{display:block;height:100%;background:linear-gradient(90deg,#43d22f,var(--glass-green));box-shadow:0 0 6px #7dff6a88;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.tm-record small{font:700 7px Arial;letter-spacing:1px;color:var(--glass-dim)}
#teamRank{color:#ffd56a}
.tm-money{color:var(--glass-green)!important}
.tm-hero-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px}
.tm-hero-actions .ui-btn{min-width:122px;white-space:nowrap}
.tm-hero.tm-arrive>*{animation:tm-arrive .32s cubic-bezier(.2,.8,.2,1) both}
.tm-hero.tm-arrive>.tm-identity{animation-delay:40ms}.tm-hero.tm-arrive>.tm-stats{animation-delay:80ms}.tm-hero.tm-arrive>.tm-hero-actions{animation-delay:120ms}

/* ---------- tab row ---------- */
.tm-tabs{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tm-tab-group,.tm-tab-tools,.tm-subtabs{display:flex;gap:4px;align-items:center}
.tm-tab-group .ui-btn{padding:7px 16px;font-size:9.5px;position:relative}
.tm-badge{display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:5px;padding:0 3px;border-radius:8px;font:900 8.5px Arial;color:#241605;text-shadow:none;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b33a 60%,#8a6410);box-shadow:0 0 6px #e2b33a88;vertical-align:1px}
.tm-tab-tools .ui-btn{padding:7px 14px;font-size:9px}
.tm-find{color:#ffe59a}
.tm-find:hover{color:#fff1c4}
.tm-more{position:relative}
#teamMoreToggle{width:34px;padding:7px 0;font-size:13px;line-height:12px}
.tm-more-menu{position:absolute;right:0;top:calc(100% + 5px);z-index:6;padding:6px;border-radius:8px;animation:ui-pop .16s ease-out both}
.tm-more-menu .ui-btn{white-space:nowrap}

/* ---------- headquarters: roster + activity ---------- */
.tm-hq{display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:8px;min-height:0}
.tm-roster,.tm-activity,.tm-race-list,.tm-race-detail,.tm-apps{min-height:0;padding:9px 11px;display:flex;flex-direction:column}
.tm-sort{display:flex;align-items:center;gap:6px;font:700 7.5px Arial;letter-spacing:1px;color:var(--glass-dim)}
.tm-sort select{font:700 9px Arial;color:var(--glass-text);background:#0b0f12;border:1px solid var(--glass-border);border-radius:5px;padding:4px 6px;box-shadow:inset 0 1px 3px #000a}
.tm-pager{display:flex;align-items:center;gap:5px;font:700 8.5px Arial;color:var(--glass-dim);font-variant-numeric:tabular-nums}
.tm-pager .ui-btn{width:24px;padding:3px 0;font-size:14px;line-height:14px}
.tm-roster-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}
.tm-member{position:relative;overflow:hidden;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:7px 8px;border-radius:8px;cursor:pointer;text-align:left;color:var(--glass-text);
  border:1px solid #ffffff10;background:linear-gradient(115deg,transparent 42%,#ffffff0a 42.5%,transparent 75%),radial-gradient(ellipse at 75% 115%,#ffffff12,transparent 60%),#0b1014;box-shadow:inset 0 1px #ffffff12,0 3px 8px #0007;
  animation:ui-pop .28s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*40ms);transition:border-color .14s,transform .14s,box-shadow .14s}
.tm-member:hover{border-color:#c9a23c99;transform:translateY(-2px);box-shadow:inset 0 1px #ffffff1c,0 6px 14px #000a,0 0 0 1px #c9a23c33}
.tm-member.you{border-color:#67addb88;background:linear-gradient(115deg,transparent 42%,#ffffff0a 42.5%,transparent 75%),radial-gradient(ellipse at 75% 115%,#2a7db744,transparent 60%),#0b1014}
.tm-member-car{position:absolute;right:-6%;bottom:2px;width:70%;height:64%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 6px 4px #000b);pointer-events:none;transition:transform .2s}
.tm-member:hover .tm-member-car{transform:translateX(-4px) scale(1.04)}
.tm-member-head{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.tm-member-head>div{min-width:0}
.tm-member-head b{display:block;font:bold 11px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-role{display:block;margin-top:1px;font:900 7px Arial;letter-spacing:1px;color:#9aa8b1}
.tm-role-leader{color:#ffd56a}.tm-role-officer{color:#8fd0ff}
.tm-member-foot{position:relative;display:flex;flex-direction:column;gap:1px;max-width:52%;font:700 8px Arial;color:#cfd8de;text-shadow:0 1px 2px #000}
.tm-member-foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-member-foot span+span{font-weight:400;color:var(--glass-dim);font-variant-numeric:tabular-nums}
.tm-member-view{position:absolute;right:7px;top:7px;font:900 7px Arial;letter-spacing:.8px;color:#f4d377;opacity:0;transform:translateX(4px);transition:opacity .14s,transform .14s}
.tm-member:hover .tm-member-view,.tm-member:focus-visible .tm-member-view{opacity:1;transform:none}
.team-member-avatar{position:relative;flex:none;width:28px;height:28px}
.team-member-avatar:after{content:'';position:absolute;right:-3px;bottom:-2px;width:7px;height:7px;border-radius:50%;border:1.5px solid #0b1014;background:#5b656c}
.tm-member.online .team-member-avatar:after{background:var(--glass-green);box-shadow:0 0 4px var(--glass-green)}
.tm-activity h4{margin:0 0 6px}
.tm-activity .tm-list{flex:1}
.tm-activity .ui-row{grid-template-columns:20px minmax(0,1fr) auto;gap:7px;padding:5px 6px}
.tm-activity .ui-ico{width:20px;height:20px;font-size:10px}
.tm-activity .ui-row b{font-size:10px}.tm-activity .ui-row small{font-size:8.5px}.tm-activity .ui-row em{font-size:10px}
.tm-next{flex:none;margin-top:7px;padding:7px 8px;border-radius:7px;border:1px solid #c9a23c55;background:linear-gradient(115deg,transparent 45%,#ffffff0a 45.5%,transparent 80%),#c9a23c12;display:flex;flex-direction:column;gap:3px}
.tm-next b{font:italic 900 12px Arial;color:#fff}
.tm-next small{font:9px/1.35 Arial;color:#b3bfc6}
.tm-next .ui-btn{margin-top:4px;align-self:flex-start;padding:5px 10px;font-size:8.5px}

/* ---------- race center ---------- */
.tm-races{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:8px;min-height:0}
.tm-summary{font:900 8px Arial;letter-spacing:1.2px;color:#f4d377;padding:4px 8px;border-radius:10px;background:#c9a23c1c;border:1px solid #c9a23c44;white-space:nowrap}
.tm-races .tm-subtabs{align-self:flex-start;margin-bottom:7px}
.tm-subtabs .ui-btn{padding:6px 14px;font-size:8.5px}
.tm-race-list .tm-list{flex:1}
.tm-race-list .ui-row>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}
.tm-race-list .ui-row>div small{grid-column:1}
.tm-race-list .ui-row>div .tm-status{grid-column:2;grid-row:1/3}
.tm-status{font:900 7px Arial;letter-spacing:1px;padding:3px 6px;border-radius:9px;border:1px solid #ffffff22;color:#cfd8de;background:#ffffff0a;white-space:nowrap}
.tm-status-pending{color:#ffd56a;border-color:#ffd56a55;background:#ffd56a14}
.tm-status-win,.tm-status-accepted{color:var(--glass-green);border-color:#7dff6a55;background:#7dff6a12}
.tm-status-loss,.tm-status-declined{color:var(--glass-red);border-color:#ff6b6255;background:#ff6b6212}
.tm-status-sent,.tm-status-awaiting-reply{color:#8fd0ff;border-color:#8fd0ff55;background:#8fd0ff12}
#teamRaceHelp{margin:6px 0 0;font:8px Arial;color:#6f7d86}
.tm-race-detail{gap:8px}
.tm-race-detail.tm-anim{animation:tm-slide .24s cubic-bezier(.2,.8,.2,1) both}
.tm-detail-head{display:flex;align-items:center;gap:9px}
.tm-detail-title{display:block;font:italic 900 15px Arial;color:#fff;margin-top:2px}
.tm-race-detail p{margin:0;font:10px/1.5 Arial;color:#b3bfc6}
.tm-facts{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0;padding:8px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0a}
.tm-facts dt{font:900 7px/14px Arial;letter-spacing:1.2px;color:var(--glass-gold)}
.tm-facts dd{margin:0;font:bold 10px/14px Arial;color:#eef3f6;text-align:right}
.tm-detail-actions{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.tm-detail-actions small{font:9px/1.4 Arial;color:#6f7d86}

/* ---------- applications ---------- */
.tm-apps .tm-list{flex:1}
.ui-row.tm-app-row{grid-template-columns:24px minmax(0,1fr) auto auto}
.tm-app-row .ui-btn{padding:5px 10px;font-size:8.5px}
.ui-row em.tm-pending{font:900 7.5px Arial;letter-spacing:1px;color:#ffd56a;padding:3px 7px;border-radius:9px;border:1px solid #ffd56a55;background:#ffd56a14}
.tm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1;min-height:90px;padding:14px;text-align:center;border:1px dashed #ffffff18;border-radius:8px;color:var(--glass-dim)}
.tm-empty b{font:italic 900 13px Arial;color:#e6edf1}
.tm-empty small{font:10px/1.45 Arial;max-width:340px}
.tm-empty .ui-btn{margin-top:5px}
.tm-notice{margin:0;font:8px Arial;letter-spacing:.3px;color:#66737c;text-align:center}
.tm-hq.tm-anim,.tm-races.tm-anim,.tm-apps.tm-anim{animation:tm-section .26s ease-out both}

/* ---------- Find a Crew drawer ---------- */
.tm-shade{position:absolute;inset:0;z-index:8;background:#000a;backdrop-filter:blur(2px);animation:tm-fade .2s ease-out both}
.tm-drawer{position:absolute;z-index:9;left:8px;top:8px;bottom:8px;width:286px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;border-radius:12px}
.tm-drawer.tm-anim{animation:tm-drawer .34s cubic-bezier(.18,1.25,.4,1) both}
.tm-drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tm-drawer h3{margin:2px 0 0;font:italic 900 17px Arial;color:#fff}
.tm-x{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0c;color:#cfd8de;font:13px Arial;cursor:pointer;transition:background .12s,color .12s}
.tm-x:hover{background:#ffffff1c;color:#fff}
.tm-search{display:flex;gap:5px}
.tm-search input,.team-chat-drawer form input,.team-dialog textarea{flex:1;min-width:0;padding:7px 9px;border-radius:6px;border:1px solid var(--glass-border);background:#05080a;color:#f2f5f7;font:11px Arial;box-shadow:inset 0 2px 4px #000c;outline:none}
.tm-search input:focus,.team-chat-drawer form input:focus,.team-dialog textarea:focus{border-color:#c9a23caa}
.tm-search input::placeholder,.team-chat-drawer form input::placeholder,.team-dialog textarea::placeholder{color:#5f6b73}
.tm-drawer .tm-subtabs{align-self:stretch}.tm-drawer .tm-subtabs .ui-btn{flex:1;padding:5px 4px;font-size:8px}
.tm-drawer .tm-list{flex:1}
#teamSearchEmpty{margin:4px 0;font:10px/1.45 Arial;color:var(--glass-dim);text-align:center}
.tm-caption{margin:0;font:8px Arial;color:#66737c;text-align:center}

/* ---------- dialog + chat ---------- */
.team-dialog-shade,.team-chat-shade{position:absolute;inset:0;z-index:12;background:#000b;backdrop-filter:blur(3px);animation:tm-fade .2s ease-out both}
.team-dialog{position:absolute;z-index:13;left:50%;top:50%;transform:translate(-50%,-50%);width:350px;max-width:calc(100% - 24px);box-sizing:border-box;padding:16px 18px;animation:tm-dialog .26s cubic-bezier(.2,.9,.3,1.15) both}
.team-dialog-close{position:absolute;right:10px;top:10px}
.team-dialog h2{margin:5px 0 7px;font:italic 900 19px/1.15 Arial;color:#fff}
.team-dialog>p{margin:0 0 12px;font:10.5px/1.55 Arial;color:#b3bfc6}
.team-dialog label{display:block;margin:0 0 5px;font:900 7.5px Arial;letter-spacing:1.2px;color:var(--glass-gold)}
.team-dialog textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;max-height:170px;line-height:1.5}
#teamDialogDetails:empty{display:none}
#teamDialogDetails{margin:8px 0 0;font:10px/1.5 Arial;color:#b3bfc6}
.team-dialog-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
.team-dialog-actions .ui-btn{padding:7px 13px}
.team-chat-shade{z-index:10}
.team-chat-drawer{position:absolute;z-index:11;right:8px;top:8px;bottom:8px;width:320px;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;animation:tm-chat .3s cubic-bezier(.18,1.2,.4,1) both}
.team-chat-drawer>header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:11px 12px 9px;border-bottom:1px solid #ffffff10}
.team-chat-drawer h2{margin:2px 0 0;font:italic 900 15px Arial;color:#fff}
.team-chat-messages{flex:1;min-height:0;padding:10px 12px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.team-chat-row{display:flex;gap:8px;margin:0 0 7px;padding:6px 8px;border-radius:8px;background:var(--row-bg);border:1px solid #ffffff0a;animation:ui-row-in .22s ease-out both}
.team-chat-row .team-member-avatar{width:26px;height:26px}.team-chat-row .team-member-avatar:after{display:none}
.team-chat-row strong{font:bold 10px Arial;color:#f1d58a}
.team-chat-row time{font:8px Arial;color:#6f7d86;margin-left:7px}
.team-chat-row p{margin:3px 0 0;font:10.5px/1.45 Arial;color:#e6edf1;overflow-wrap:anywhere;white-space:pre-wrap}
.team-chat-drawer form{display:flex;gap:5px;margin:0 10px;padding:6px;border-radius:8px;border:1px solid #ffffff10;background:#00000055}
.team-chat-drawer>p{margin:6px 12px 8px;font:8px Arial;color:#66737c}

@keyframes tm-pulse{50%{opacity:.35}}
@keyframes tm-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes tm-section{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes tm-slide{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes tm-fade{from{opacity:0}to{opacity:1}}
@keyframes tm-drawer{from{opacity:.4;transform:translateX(-105%)}to{opacity:1;transform:none}}
@keyframes tm-chat{from{opacity:.4;transform:translateX(105%)}to{opacity:1;transform:none}}
@keyframes tm-dialog{from{opacity:0;transform:translate(-50%,-46%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){#teamsScreen *,#teamsScreen *:before,#teamsScreen *:after{animation:none!important;transition:none!important}}

/* ---------- phone ---------- */
body.mobile-layout #teamsScreen{inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 calc(var(--phone-foot) + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
body.mobile-layout .tm-stage{position:static;display:flex;flex-direction:column;gap:10px;padding:12px 12px 16px;min-height:100%;box-sizing:border-box}
body.mobile-layout .tm-hero{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:12px}
body.mobile-layout .tm-identity h2{font-size:22px;white-space:normal}
body.mobile-layout .tm-identity p{font-size:12px;white-space:normal}
body.mobile-layout .tm-meta{font-size:10px}
body.mobile-layout .tm-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
body.mobile-layout .tm-stat{min-width:0}
body.mobile-layout .tm-stat .ui-kicker{font-size:8px}
body.mobile-layout .tm-stat strong{font-size:17px}
body.mobile-layout .tm-hero-actions{grid-column:1/-1;flex-direction:row}
body.mobile-layout .tm-hero-actions .ui-btn{flex:1;min-width:0;min-height:42px;font-size:11px}
body.mobile-layout .tm-tabs{flex-direction:column;align-items:stretch}
body.mobile-layout .tm-tab-group .ui-btn{flex:1;min-height:40px;padding:6px 4px;font-size:10px}
body.mobile-layout .tm-tab-tools{justify-content:flex-end}
body.mobile-layout .tm-tab-tools .ui-btn{min-height:38px;font-size:10px}
body.mobile-layout .tm-tab-tools .tm-find{flex:1}
body.mobile-layout .tm-hq,body.mobile-layout .tm-races{display:flex;flex-direction:column;gap:10px}
body.mobile-layout .tm-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:132px}
body.mobile-layout .tm-member-head b{font-size:13px}
body.mobile-layout .tm-role{font-size:8.5px}
body.mobile-layout .tm-member-foot{font-size:10px}
body.mobile-layout .tm-member-view{display:none}
body.mobile-layout .tm-panel-head{flex-wrap:wrap}
body.mobile-layout .tm-panel-head h3{font-size:17px}
body.mobile-layout .tm-sort select{font-size:13px;min-height:34px}
body.mobile-layout #teamsScreen .ui-row b{font-size:13px}
body.mobile-layout #teamsScreen .ui-row small{font-size:11px}
body.mobile-layout .tm-stage .tm-list{overflow:visible}
body.mobile-layout .tm-subtabs .ui-btn{flex:1;min-height:36px;font-size:10px}
body.mobile-layout .tm-races .tm-subtabs{align-self:stretch}
body.mobile-layout .tm-race-detail p,body.mobile-layout .tm-facts dd{font-size:12px}
body.mobile-layout .tm-notice{font-size:10px}
body.mobile-layout .tm-shade,body.mobile-layout .team-dialog-shade,body.mobile-layout .team-chat-shade{position:fixed;inset:0}
body.mobile-layout .tm-drawer{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--phone-head) + env(safe-area-inset-top) + 8px);bottom:calc(var(--phone-foot) + env(safe-area-inset-bottom) + 8px)}
body.mobile-layout .tm-drawer .tm-list{overflow:auto}
body.mobile-layout .tm-search input,body.mobile-layout .team-chat-drawer form input,body.mobile-layout .team-dialog textarea{font-size:16px;min-height:42px}
body.mobile-layout .tm-drawer .tm-subtabs .ui-btn{font-size:10px;min-height:36px}
body.mobile-layout .tm-x{width:34px;height:34px;font-size:16px}
body.mobile-layout .team-chat-drawer{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--phone-head) + env(safe-area-inset-top) + 8px);bottom:calc(var(--phone-foot) + env(safe-area-inset-bottom) + 8px)}
body.mobile-layout .team-chat-row strong{font-size:13px}
body.mobile-layout .team-chat-row p{font-size:14px}
body.mobile-layout .team-dialog{position:fixed;width:360px;max-height:calc(var(--phone-visible-height,100dvh) - var(--phone-head) - var(--phone-foot) - 32px);overflow:auto;padding:20px}
body.mobile-layout .team-dialog h2{font-size:23px}
body.mobile-layout .team-dialog>p{font-size:14px}
body.mobile-layout .team-dialog-actions .ui-btn{min-height:44px;font-size:11px}
body.mobile-layout .tm-stats{grid-template-columns:1.45fr .8fr 1fr}
body.mobile-layout .tm-record strong{font-size:14px}
body.mobile-layout .tm-roster-grid{grid-auto-rows:146px}
body.mobile-layout .tm-member-car{top:36px;bottom:34px;height:auto;width:86%;right:-6%;object-position:center}
body.mobile-layout .tm-member-foot{max-width:100%}
.ui-ico.tm-av{background:none;border-radius:0;overflow:visible}.ui-ico.tm-av>.nitto-avatar{width:100%;height:100%}
.tm-activity .ui-ico.tm-av{width:20px;height:20px}
body.mobile-layout .tm-emblem{width:56px;height:56px}
body.mobile-layout .team-member-avatar{width:34px;height:34px}
/* v48 rank badges: team rank beside the team name, racer rank top-right of each roster card */
.tm-team-rank{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;margin:-4px 4px -4px -4px}
.tm-team-rank .ui-kicker{font-size:6.5px;letter-spacing:1.4px}
.tm-member-rank{position:absolute!important;right:6px;top:6px;z-index:0}
.tm-member-car{z-index:1}
.tm-member-head{padding-right:40px}
.tm-member-car{height:56%}
.tm-member-view{top:auto;bottom:7px;right:8px}
.tm-member:hover .tm-member-car{transform:translateX(-4px) scale(1.04)}
body.mobile-layout .tm-hero{grid-template-columns:auto minmax(0,1fr) auto}
body.mobile-layout .tm-team-rank{margin:0}
body.mobile-layout .tm-member-head{padding-right:42px}
body.mobile-layout .tm-member-car{top:46px}
.tm-identity>.ui-kicker{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-stat{min-width:68px}
.tm-member-head,.tm-member-foot,.tm-member-view{z-index:2}

/* ==== styles/team-pages.css ==== */
/* Team pages (v54): landing, create, treasury, applications, your team race, results, settings.
   Same black-glass kit as the team page (glass.css + teams.css). */
#teamsScreen :is(.tp-panel,.tp-page,.tp-landing,.tm-treasury,.tm-manage) :is(input,select,textarea){box-sizing:border-box;min-width:0;padding:6px 9px;border-radius:7px;border:1px solid var(--glass-border);background:#05080a;color:#f2f5f7;font:10.5px Arial;box-shadow:inset 0 2px 4px #000c;outline:none}
#teamsScreen :is(.tp-panel,.tp-page,.tp-landing,.tm-treasury,.tm-manage) :is(input,select,textarea):focus{border-color:#c9a23caa}
#teamsScreen :is(.tp-panel,.tp-page,.tp-landing,.tm-treasury,.tm-manage) ::placeholder{color:#5f6b73}
#teamsScreen select option{background:#0b1014;color:#e6edf1}
.tp-panel{display:flex;flex-direction:column;gap:7px;min-height:0;padding:9px 11px}
.tp-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px solid #ffffff10}
.tp-panel-head h3,.tp-panel>h3{margin:2px 0 0;font:italic 900 13px Arial;color:#fff;letter-spacing:.3px}
.tp-label{font:900 7px Arial;letter-spacing:1.4px;color:var(--glass-gold);margin-top:2px}
.tp-field{display:flex;flex-direction:column;gap:3px}
.tp-field>span{font:900 7px Arial;letter-spacing:1.4px;color:var(--glass-gold)}
.tp-field>small{font:8px Arial;color:#6f7d86}
.tp-inline{display:flex;gap:5px}.tp-inline>input{flex:1}
.tp-error{margin:0;min-height:0;font:700 9px Arial;color:var(--glass-red)}.tp-error:empty{display:none}
.tp-muted{margin:0;font:9.5px/1.45 Arial;color:var(--glass-dim)}
.tp-warn{font:700 8.5px Arial;color:#ffd56a}
.tp-note{font:9px/1.4 Arial;color:#6f7d86}
.tp-big{padding:9px 22px!important;font-size:10.5px!important}
.tp-swatches{display:flex;gap:6px;flex-wrap:wrap}
.tp-swatch{width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;border:2px solid #0b1014;background:radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--c);box-shadow:0 0 0 1px #ffffff30}
.tp-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 10px var(--c)}
.tp-seg{align-self:flex-start}
#teamNotice.tp-flash{animation:tp-flash 1.6s ease-out}
@keyframes tp-flash{0%{color:#fff;text-shadow:0 0 10px #f4d377}100%{color:#66737c;text-shadow:none}}

/* ---------- landing ---------- */
.tp-landing{position:absolute;inset:0;z-index:4;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px 14px 8px;background:radial-gradient(ellipse at 80% 110%,#c9a23c14,transparent 55%),radial-gradient(ellipse at 15% -10%,#5d7e9a33,transparent 55%),linear-gradient(160deg,#151c22,#07090b 70%)}
.tp-landing.tm-anim{animation:tm-section .3s ease-out both}
.tp-land-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;overflow:hidden}
.tp-land-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 0 50%,#c9a23c2e,transparent 45%)}
.tp-land-copy,.tp-land-tools{position:relative;z-index:1}
.tp-land-copy h2{margin:3px 0 2px;font:italic 900 24px/1 Arial;color:#fff;letter-spacing:.4px;text-shadow:0 2px 3px #0008}
.tp-land-copy p{margin:0;font:italic 10px Arial;color:var(--glass-dim)}
.tp-land-tools{display:flex;gap:6px;align-items:center}
.tp-land-tools input{width:210px;border-radius:999px!important}
.tp-land-body{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:7px;padding-right:2px;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.tp-land-apps{display:flex;align-items:center;gap:10px}
.tp-land-app-row{display:flex;gap:6px;flex-wrap:wrap}
.tp-app-chip{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 3px;border-radius:999px;border:1px solid #ffd56a44;background:#ffd56a10;color:#fff;cursor:pointer;font:bold 9.5px Arial}
.tp-app-chip img{width:20px;height:20px;border-radius:24%}
.tp-land-head{display:flex;align-items:baseline;gap:10px}.tp-land-head small{font:8.5px Arial;color:#6f7d86}
.tp-crew-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp-crew{display:flex;flex-direction:column;gap:6px;padding:10px 11px;border-top:2px solid var(--team-accent);animation:ui-pop .3s ease-out both;animation-delay:calc(var(--i,0)*45ms)}
.tp-crew-top{display:flex;align-items:center;gap:8px}
.tp-crew-top>div{flex:1;min-width:0}
.tp-crew-top b:not(.rb-num){display:block;font:italic 900 13px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-crew-top small{font:700 8px Arial;color:var(--glass-dim);letter-spacing:.4px}
.tp-crew-av{width:38px;height:38px;flex:none}
.tp-crew-stats{display:flex;align-items:center;gap:8px;font:700 8.5px Arial;color:#cfd8de}
.tp-recruit{margin-left:auto;padding:2px 6px;border-radius:8px;font:900 7px Arial;letter-spacing:.8px}
.tp-recruit.open{color:var(--glass-green);background:#7dff6a14;border:1px solid #7dff6a44}
.tp-recruit.closed{color:#cfd8de;background:#ffffff0a;border:1px solid #ffffff22}
.tp-crew-motto{margin:0;font:italic 9px/1.35 Arial;color:var(--glass-dim);min-height:24px}
.tp-crew-req{font:700 8px Arial;color:#ffd56a}
.tp-crew-actions{display:flex;gap:5px;margin-top:auto}.tp-crew-actions .ui-btn{flex:1;padding:6px 8px;font-size:8.5px}

/* ---------- full-page views ---------- */
.tp-page{position:absolute;inset:0;z-index:6;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px 14px 8px;background:radial-gradient(ellipse at 80% 110%,#c9a23c14,transparent 55%),radial-gradient(ellipse at 15% -10%,#5d7e9a33,transparent 55%),linear-gradient(160deg,#151c22,#07090b 70%)}
.tp-page.tm-anim{animation:tp-page-in .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes tp-page-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tp-page-head{display:flex;align-items:center;gap:12px;padding:8px 12px}
.tp-page-title{flex:1;min-width:0}
.tp-page-title h2{margin:2px 0 0;font:italic 900 17px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-back{flex:none}

.tp-page-body{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.tp-page-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:auto}
.tp-page-foot>.tp-error{margin-right:auto}
.tp-page-foot>small.tp-muted{margin-right:auto;max-width:440px}
.tp-banner{margin:0;padding:7px 12px;border-radius:8px;font:900 10px Arial;letter-spacing:.5px;text-align:center;animation:ui-pop .3s ease-out both}
.tp-banner.win{color:var(--glass-green);background:#7dff6a14;border:1px solid #7dff6a55}
.tp-banner.loss{color:var(--glass-red);background:#ff6b6214;border:1px solid #ff6b6255}

/* create */
.tp-page[data-kind=create] .tp-page-body{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:start}
.tp-create-form h3{margin:0;font:italic 900 13px Arial;color:#fff}
.tp-create-form{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
.tp-create-form>h3,.tp-create-form>.tp-swatches,.tp-create-form>.tp-seg,.tp-create-form>.tp-fee,.tp-create-form>.tp-error,.tp-create-form>button{grid-column:1/-1}
.tp-create-form>.tp-label{grid-column:1/-1}
.tp-fee{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:8px;background:var(--row-bg);border:1px solid #ffffff10}
.tp-fee span{font:900 7px Arial;letter-spacing:1.4px;color:var(--glass-gold)}.tp-fee b:not(.rb-num){font:italic 900 14px Arial;color:#fff}.tp-fee small{margin-left:auto;font:8.5px Arial;color:var(--glass-dim)}
.tp-create-form>button{justify-self:end}
.tp-create-preview{position:sticky;top:0;border-top:2px solid var(--team-accent)}
.tp-pv{display:flex;align-items:center;gap:9px}
.tp-pv .tm-emblem{width:50px;height:50px;box-shadow:0 0 0 3px color-mix(in srgb,var(--team-accent) 40%,transparent)}
.tp-pv h3{margin:2px 0;font:italic 900 16px Arial;color:#fff;overflow-wrap:anywhere}
.tp-pv p{margin:0;font:italic 9px Arial;color:var(--glass-dim)}
.tp-pv-rank{display:flex;align-items:center;justify-content:space-between}

/* race center: matchup preview for incoming challenges (lineup set by the challenging crew) */
.tp-mini-pairs{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:3px}
.tp-mini-pairs li{display:grid;grid-template-columns:16px minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:5px;padding:4px 7px;border-radius:7px;background:var(--row-bg);border:1px solid #ffffff0a;font:bold 9.5px Arial;color:#fff}
.tp-mini-pairs li.you{border-color:#64cced66;background:#64cced14}
.tp-mini-pairs i{font:900 8px Arial;font-style:normal;color:#ffd56a}
.tp-mini-pairs b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tp-mini-pairs b:last-child{text-align:right;color:#cfd8de}
.tp-mini-pairs span{font:italic 900 8px Arial;color:#c9a23c;text-align:center}
body.mobile-layout .tp-mini-pairs li{font-size:12px;padding:7px 9px}
.tp-pair-no{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:900 9px Arial;font-style:normal;color:#241605;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b33a 60%,#8a6410)}
.tp-vs{font:italic 900 10px Arial;color:#c9a23c;text-align:center}

/* your team race */


.tp-score-side.theirs{flex-direction:row-reverse;text-align:right}



.tp-score-side b:not(.rb-num){display:block;font:italic 900 12px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tp-score-side.theirs strong{margin:0 auto 0 0}
.tp-score-mid b:not(.rb-num){display:block;font:italic 900 14px Arial;color:var(--glass-green)}




.tp-driver.rival header{text-align:right}
.tp-driver header img.nitto-avatar{width:34px;height:34px;flex:none}



.tp-driver.you .tp-driver-car{transform:scaleX(-1)}


.tp-run{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:1px 8px;margin:0;padding:6px 9px;border-radius:8px;background:var(--row-bg);border:1px solid #ffffff0d}
.tp-run .tp-run-label{grid-column:1/-1;font:900 7px Arial;letter-spacing:1.3px;color:var(--glass-gold)}
.tp-run.empty .tp-run-label{color:#6f7d86}
.tp-run .tp-run-empty{grid-row:2;grid-column:1/-1;font:italic 700 11px Arial;color:#8b98a1}
.tp-run dt:not(.tp-run-label){align-self:end}
.tp-run dt:not(.tp-run-label){font:900 6.5px Arial;letter-spacing:1px;color:#6f7d86;grid-row:2}
.tp-run dd{margin:0;font:italic 900 12px Arial;color:#fff;grid-row:3;font-variant-numeric:tabular-nums}
.tp-run .tp-flag{grid-row:4;grid-column:1/-1;font:900 8px Arial;color:var(--glass-red);font-style:normal}
.tp-strip-row{display:flex;gap:5px;flex-wrap:wrap}
.tp-strip-pair{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:999px;background:var(--row-bg);border:1px solid #ffffff10;font:bold 9px Arial;color:#e6edf1}
.tp-strip-pair i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font:900 8px Arial;font-style:normal;color:#241605;background:#c9a23c}
.tp-strip-pair.turn{border-color:#ffd56a88;box-shadow:0 0 10px #ffd56a33}
.tp-strip-pair .tp-vs{font-size:8px}

/* results */
.tp-page[data-kind=results] .tp-page-body.won{--res:#7dff6a}.tp-page[data-kind=results] .tp-page-body.lost{--res:#ff6b62}
.tp-result-top{display:grid;grid-template-columns:1fr minmax(0,240px) 1fr;align-items:center;gap:12px}
.tp-result-team{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.tp-result-team>b:not(.rb-num){font:italic 900 13px Arial;color:#fff}
.tp-result-team .tm-emblem{width:46px;height:46px}
.tp-result-art{position:relative;text-align:center}
.tp-result-art img{width:100%;max-height:96px;object-fit:contain;filter:drop-shadow(0 6px 6px #000a);animation:ui-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
.tp-result-score{display:block;font:italic 900 26px Arial;color:#fff;text-shadow:0 0 14px var(--res)}
.tp-result-table{gap:5px}
.tp-result-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:5px 7px;border-radius:9px;background:var(--row-bg);border:1px solid #ffffff0a;animation:ui-row-in .3s ease-out both;animation-delay:calc(var(--i,0)*90ms + .3s)}
.tp-result-row.win{box-shadow:inset 3px 0 var(--glass-green)}.tp-result-row.loss{box-shadow:inset 3px 0 var(--glass-red)}
.tp-result-cell{display:flex;align-items:center;gap:8px;min-width:0}
.tp-result-cell.theirs{flex-direction:row-reverse}
.tp-result-who{display:flex;align-items:center;gap:6px;min-width:96px}
.tp-result-cell.theirs .tp-result-who{flex-direction:row-reverse}
.tp-result-who img{width:24px;height:24px;flex:none}.tp-result-who b:not(.rb-num){font:bold 10px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-result-cell .tp-run{flex:1;padding:4px 7px}.tp-result-cell .tp-run .tp-run-label{display:none}
.tp-result-cell .tp-run dt:not(.tp-run-label){grid-row:1}.tp-result-cell .tp-run dd{grid-row:2;font-size:10.5px}.tp-result-cell .tp-run .tp-flag{grid-row:3}
.tp-mvp{padding:1px 5px;border-radius:6px;font:900 7px Arial;color:#241605;background:#ffd56a}
.tp-result-money{display:flex;align-items:center;gap:8px;padding:6px 12px;margin-right:auto;border-radius:10px}
.tp-result-money img{width:30px;height:30px;object-fit:contain}
.tp-result-money strong{display:block;font:italic 900 17px Arial;color:#fff}.tp-result-money.in strong{color:var(--glass-green)}.tp-result-money.out strong{color:var(--glass-red)}
.tp-result-money small{font:8.5px Arial;color:var(--glass-dim)}
.tp-coin-pop{animation:tp-coin 1s .9s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes tp-coin{0%{transform:scale(.4) rotate(-40deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:none}}

/* settings */
.tp-page[data-kind=settings] .tp-page-body{display:grid;grid-template-columns:280px minmax(0,1fr);grid-auto-rows:min-content;align-items:start}
.tp-page[data-kind=settings] .tp-page-body>*{min-height:auto}
.tp-settings-profile{grid-column:1;grid-row:1}.tp-settings-members{grid-column:2;grid-row:1/span 2}
.tp-danger{grid-column:1;grid-row:2;border-color:#ff6b6255!important}
.tp-danger .tp-panel-head .ui-kicker{color:var(--glass-red)}
.tp-danger input{max-width:100%}
.tp-member-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 7px;border-radius:8px;background:var(--row-bg);border:1px solid #ffffff0a;flex:none;animation:ui-row-in .25s ease-out both;animation-delay:calc(var(--i,0)*30ms)}
.tp-member-who{display:flex;align-items:center;gap:7px;min-width:0}.tp-member-who img{width:26px;height:26px;flex:none}.tp-member-who b:not(.rb-num){display:block;font:bold 10.5px Arial;color:#fff}
.tp-member-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.tp-member-actions .ui-btn{padding:5px 9px;font-size:8px}
.tp-confirm-text{font:700 9px Arial;color:#ffd56a}

/* ---------- treasury ---------- */
.tm-treasury{display:grid;grid-template-columns:225px 265px minmax(0,1fr);gap:8px;min-height:0}
.tp-treasury-left{display:flex;flex-direction:column;gap:7px;min-height:0;overflow:auto;scrollbar-width:none}
.tp-treasury-left>*{flex:none}
.tp-balance{gap:3px}
.tp-bal-hero{display:flex;align-items:center;gap:8px}
.tp-bal-hero img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 3px #000a)}
.tp-bal-hero strong{font:italic 900 25px Arial;color:var(--glass-green);text-shadow:0 0 12px #7dff6a44;font-variant-numeric:tabular-nums}
.tp-bal-sub{display:flex;justify-content:space-between;gap:6px;font:700 8.5px Arial;color:var(--glass-dim)}
.tp-bal-sub .up{color:var(--glass-green)}.tp-bal-sub .down{color:var(--glass-red)}
.tp-action{gap:5px}
.tp-wallet{font:8.5px Arial;color:var(--glass-dim)}
.tp-quick{display:flex;gap:4px}.tp-quick .ui-btn{flex:1;padding:4px 0;font-size:8px}
.tp-action .ui-btn{padding:6px 12px;font-size:9px}
.tp-locked{opacity:.85}
.tp-confirm{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font:700 9px Arial;color:#ffd56a}.tp-confirm span{flex:1 1 100%}
.tp-ledger .tm-subtabs{align-self:flex-start}
.tp-ledger-list{flex:1}
.tp-top{gap:5px}
.tp-top-row{display:flex;flex-direction:column;gap:4px}
.tp-top-chip{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:8px;background:var(--row-bg);border:1px solid #ffffff0a;min-width:0}
.tp-top-chip i{font:900 8px Arial;font-style:normal;color:#ffd56a}
.tp-top-chip img{width:20px;height:20px;flex:none}
.tp-top-chip b:not(.rb-num){font:bold 9px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.tp-top-chip small{font:italic 900 8.5px Arial;color:var(--glass-green)}

/* ---------- applications (leader / officers) ---------- */
.tm-manage{display:flex;flex-direction:column;gap:7px;min-height:0;padding:9px 11px}
.tm-manage .tm-panel-head{margin-bottom:0}
.tm-manage .tm-subtabs{align-self:flex-start}
.tp-recruit-toggle{padding:5px 11px!important;font-size:8.5px!important}
.tp-apps-list{flex:1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:7px!important;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
.tp-apps-list>.tm-empty,.tp-apps-list>.tp-invite-form,.tp-apps-list>.tp-error,.tp-apps-list>.ui-row{grid-column:1/-1}
.tp-applicant{display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;gap:10px;padding:9px 10px;overflow:hidden;border-radius:10px;background:var(--row-bg);border:1px solid #ffffff10;animation:ui-pop .28s ease-out both;animation-delay:calc(var(--i,0)*50ms)}
.tp-app-who{display:flex;align-items:center;gap:8px}
.tp-app-who img.nitto-avatar{width:34px;height:34px;flex:none}
.tp-app-who>div{flex:1;min-width:0}.tp-app-who b:not(.rb-num){display:block;font:bold 12px Arial;color:#fff}.tp-app-who small{font:8.5px Arial;color:var(--glass-dim)}
.tp-app-note{margin:0;font:italic 10px/1.45 Arial;color:#cfd8de}
.tp-app-actions{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.tp-app-actions input{flex:1}
.tp-app-actions .ui-btn{padding:6px 14px;font-size:9px}
.tp-invite-form{display:flex;gap:6px}.tp-invite-form input{flex:1}

/* ---------- phone ---------- */
body.mobile-layout .tp-landing,body.mobile-layout .tp-page{position:fixed;z-index:30;top:calc(var(--phone-head) + env(safe-area-inset-top));bottom:calc(var(--phone-foot) + env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;overflow:auto;padding:10px 10px 16px}
body.mobile-layout .tp-land-body,body.mobile-layout .tp-page-body{overflow:visible;flex:none}
body.mobile-layout .tp-land-hero{flex-direction:column;align-items:stretch}
body.mobile-layout .tp-land-tools{flex-direction:column;align-items:stretch}
body.mobile-layout .tp-land-tools input{width:auto;font-size:16px;min-height:40px}
body.mobile-layout .tp-crew-grid{grid-template-columns:1fr}
body.mobile-layout .tp-crew-actions .ui-btn,body.mobile-layout .tp-page .ui-btn,body.mobile-layout .tm-treasury .ui-btn,body.mobile-layout .tm-manage .ui-btn{min-height:40px;font-size:11px}
body.mobile-layout #teamsScreen :is(.tp-panel,.tp-page,.tp-landing,.tm-treasury,.tm-manage) :is(input,select,textarea){font-size:16px;min-height:40px}
body.mobile-layout .tp-page-head{flex-wrap:wrap}
body.mobile-layout .tp-page[data-kind=create] .tp-page-body,body.mobile-layout .tp-page[data-kind=settings] .tp-page-body{display:flex;flex-direction:column}
body.mobile-layout .tp-create-form{grid-template-columns:1fr}
body.mobile-layout .tp-create-preview{position:static}
body.mobile-layout .tp-match{grid-template-columns:1fr}
body.mobile-layout .tp-match-mid img{max-height:60px;width:auto}
body.mobile-layout .tp-result-top{grid-template-columns:1fr 1fr}
body.mobile-layout .tp-result-art{grid-column:1/-1;grid-row:1}
body.mobile-layout .tp-result-row{grid-template-columns:20px minmax(0,1fr)}
body.mobile-layout .tp-result-row>.tm-status{grid-column:2;justify-self:start}
body.mobile-layout .tp-result-row>.tp-result-cell.theirs{grid-column:2;flex-direction:row}
body.mobile-layout .tp-result-row>.tp-result-cell.theirs .tp-result-who{flex-direction:row}
body.mobile-layout .tp-page-foot{flex-wrap:wrap}
body.mobile-layout .tm-treasury{display:flex;flex-direction:column}
body.mobile-layout .tm-treasury .tp-treasury-left{display:contents}
body.mobile-layout .tm-treasury .tp-balance{order:0}body.mobile-layout .tm-treasury .tp-action{order:1}body.mobile-layout .tm-treasury .tp-ledger{order:2}body.mobile-layout .tm-treasury .tp-top{order:3}
body.mobile-layout .tp-top-row{display:grid;grid-template-columns:1fr 1fr}
body.mobile-layout .tp-apps-list{grid-template-columns:1fr}
body.mobile-layout .tm-tab-group{flex-wrap:wrap}
/* v54 fit pass: everything on the staging page fits the desktop frame without scrolling */
.tp-page-body>*{flex:none}
#teamRaceDetail{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#4a555d transparent}
#teamRaceDetail>*{flex:none}
body:not(.mobile-layout) #teamRaceDetail .tm-facts{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:5px 8px}
body:not(.mobile-layout) #teamRaceDetail .tm-facts dd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-detail-btns{display:grid;grid-template-columns:1fr 1.6fr;gap:5px}
/* ---------- your team race: the 1v1 challenge matchup look, in a scrolling column ---------- */
.tp-page[data-kind=stage]{display:block;padding:0;background:#0b1118}
.tp-stage{position:absolute;inset:0;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 16px 18px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;isolation:isolate}
.tp-stage>*{position:relative!important;inset:auto!important;flex:none}
.tp-stage>.challenge-match-toolbar{position:sticky!important;top:0!important;z-index:8;margin:0 -16px;min-height:44px;height:44px;padding:0 16px}
.tp-stage>.challenge-match-toolbar>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-stage-heading{margin:0;text-align:center;font:italic 900 21px/29px Arial;letter-spacing:2px;color:#f3f6f8;text-shadow:0 2px 3px #0008;outline:none}
.tp-stage>.challenge-versus{height:222px;margin:-4px 0 0}
.tp-stage>.challenge-terms{margin:0 6px}
.tp-stage>.challenge-match-actions{margin:0 6px}
.tp-stage .tp-banner{margin:0 auto;max-width:520px;text-align:center}
.tp-stage-compose{margin:0 6px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.tp-stage-compose:not(:has(#tpDialIn)){grid-template-columns:minmax(0,1fr)!important}
.tp-locked-car{display:flex;flex-direction:column;justify-content:center;min-width:0}
.tp-locked-car span{font:700 7px/11px Arial;letter-spacing:.5px;color:#f0f5f9}
.tp-locked-car b{display:flex;align-items:center;height:28px;margin-top:2px;padding:0 8px;border-radius:3px;background:#00000038;border:1px dashed #ffffff40;font:700 11px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mobile-layout .tp-locked-car span{font-size:8px;line-height:14px}body.mobile-layout .tp-locked-car b{height:42px;font-size:13px}
.tp-stage-more{display:flex;flex-direction:column;gap:7px;margin:6px 6px 0;padding-top:12px;border-top:1px solid #ffffff1a}
.tp-stage-more>h4{margin:0;font:700 7px/11px Arial;letter-spacing:1.4px;color:#b3c6d7}
.tp-stage-runs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-stage-runs .tp-run{margin:0;padding:9px 12px;border:1px solid #000;border-radius:4px;background:var(--social-header);box-shadow:inset 0 1px #c3d2dd2b,0 4px 0 #000,0 8px 10px #03091188}
.tp-stage .tp-lineup-strip{padding:0;background:none;border:0;box-shadow:none}
.tp-stage .tp-strip-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.tp-stage .tp-strip-pair{cursor:pointer;border-radius:4px;padding:7px 9px;background:var(--social-header);border:1px solid #000;box-shadow:inset 0 1px #c3d2dd2b,0 3px 0 #000;font:bold 9.5px Arial;color:#eef3f6;text-align:left}
.tp-stage .tp-strip-pair .tm-status{margin-left:auto}
.tp-stage .tp-strip-pair.focus{border-color:#67addb;box-shadow:inset 0 1px #c5ecff55,0 3px 0 #000,0 0 12px #67addb55}
.tp-stage .tp-strip-pair:hover{filter:brightness(1.15)}
body.mobile-layout .tp-page[data-kind=stage]{padding:0;display:block}
body.mobile-layout .tp-stage{position:static;overflow:visible;padding:0 12px 20px;min-height:100%}
body.mobile-layout .tp-stage>.challenge-match-toolbar{margin:0 -12px;height:auto;min-height:58px;padding:9px 12px;flex-wrap:wrap}
body.mobile-layout .tp-stage-heading{font-size:18px;letter-spacing:1px}
body.mobile-layout .tp-stage>.challenge-versus{height:218px;margin:0}
body.mobile-layout .tp-stage-runs{grid-template-columns:1fr}
body.mobile-layout .tp-stage-more>h4{font-size:9px}
body.mobile-layout .tp-stage .tp-strip-pair{font-size:12px;min-height:44px}
body.mobile-layout .tp-stage-compose{grid-template-columns:1fr 1fr!important}
body.mobile-layout .tp-stage>.challenge-match-actions{flex-direction:column;align-items:stretch}
body.mobile-layout .tp-landing>*,body.mobile-layout .tp-page>*{flex:none}
body.mobile-layout .tp-page[data-kind=settings] .tp-page-body{align-items:stretch}
body.mobile-layout .tp-member-row{flex-direction:column;align-items:stretch}
body.mobile-layout .tp-member-actions{display:grid;grid-template-columns:1fr auto auto;justify-content:stretch}
body.mobile-layout .tm-manage .tm-panel-head{flex-wrap:wrap;row-gap:8px}
body.mobile-layout .tm-manage .tm-subtabs .ui-btn{white-space:nowrap}
body.mobile-layout .tp-land-tools .ui-btn{min-height:42px;font-size:12px}
/* applicant card: racer + the team car they'd race (v56) */
.tp-app-car{position:relative;display:grid;place-items:center;min-height:118px;border-radius:8px;background:radial-gradient(ellipse at 50% 78%,#64cced2e,transparent 62%),linear-gradient(180deg,#0f1a24,#070b10);border:1px solid #ffffff0d;overflow:hidden}
.tp-app-car:after{content:'';position:absolute;left:12%;right:12%;bottom:16%;height:10px;border-radius:50%;background:radial-gradient(ellipse,#000c,transparent 70%);filter:blur(2px)}
.tp-app-car img{position:relative;z-index:1;width:112%;max-width:none;height:auto;object-fit:contain;filter:drop-shadow(0 6px 5px #000a);transform:scaleX(-1)}
.tp-app-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.tp-app-info .tp-app-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:9.5px}
.tp-app-info .tp-app-who img.nitto-avatar{width:28px;height:28px}
body:not(.mobile-layout) .tp-apps-list .tp-applicant{padding:7px 9px}
body:not(.mobile-layout) .tp-apps-list .tp-app-car{min-height:96px}
.tp-app-carname{display:flex;align-items:baseline;gap:6px;min-width:0}
.tp-app-carname small{font:900 6.5px Arial;letter-spacing:1.3px;color:var(--glass-gold);flex:none}
.tp-app-carname b{font:italic 900 11px Arial;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-app-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0}
.tp-app-specs>div{padding:3px 6px;border-radius:6px;background:#00000040;border:1px solid #ffffff0a}
.tp-app-specs dt{font:900 6px Arial;letter-spacing:1px;color:#6f7d86}
.tp-app-specs dd{margin:0;font:italic 900 11px Arial;color:#fff;font-variant-numeric:tabular-nums}
.tp-app-info .tp-app-actions{margin-top:auto}
/* apply page */
.tp-page[data-kind=apply] .tp-page-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.tp-apply-pick textarea{min-height:58px;resize:vertical}
.tp-car-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:7px}
.tp-car-pick{display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px;border-radius:9px;cursor:pointer;text-align:left;color:#fff;background:linear-gradient(180deg,#121b24,#080c11);border:1px solid #ffffff14;box-shadow:inset 0 1px #ffffff12}
.tp-car-pick img{width:100%;height:72px;object-fit:contain;filter:drop-shadow(0 5px 4px #000a)}
.tp-car-pick b{display:block;font:italic 900 10.5px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-car-pick small{font:700 8px Arial;color:var(--glass-dim)}
.tp-car-pick:hover{filter:brightness(1.12)}
.tp-car-pick[aria-pressed=true]{border-color:#67addb;background:linear-gradient(112deg,#71c8ff22,transparent 72%),linear-gradient(180deg,#173a58,#0b1724);box-shadow:inset 0 1px #c5ecff55,0 0 14px #67addb44}
.tp-apply-side{display:flex;flex-direction:column;gap:8px}
.tp-apply-preview .tp-applicant{grid-template-columns:1fr;background:var(--glass-bg);border-color:#c9a23c55;animation:none}
.tp-apply-preview .tp-app-car{min-height:120px}
.tp-apply-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.tp-apply-checks li{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;background:var(--row-bg);font:700 9.5px Arial;color:#dfe7ec}
.tp-apply-checks i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font:900 9px Arial;font-style:normal;color:#06110a;background:var(--glass-green)}
.tp-apply-checks li.no i{background:var(--glass-red);color:#1a0505}.tp-apply-checks li.no{color:#ffb4ae}
body.mobile-layout .tp-applicant{grid-template-columns:1fr}
body.mobile-layout .tp-page[data-kind=apply] .tp-page-body{display:flex;flex-direction:column}
body.mobile-layout .tp-car-grid{grid-template-columns:1fr 1fr}
body.mobile-layout .tp-app-specs dd{font-size:13px}
body.mobile-layout .tp-app-carname b{font-size:13px}
body.mobile-layout .tp-car-pick b{font-size:12px}
body.mobile-layout .tp-apply-checks li{font-size:12px}
/* team settings: avatar upload (v57) */
.tp-avatar-edit{display:flex;align-items:center;gap:12px;padding:8px;border-radius:9px;background:var(--row-bg);border:1px solid #ffffff0d}
.tp-avatar-edit img.tp-avatar-big{width:66px;height:66px;flex:none;object-fit:cover}
.tp-avatar-edit>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tp-avatar-edit b{font:900 7px Arial;letter-spacing:1.3px;color:var(--glass-gold)}
.tp-avatar-edit small{font:8.5px/1.35 Arial;color:var(--glass-dim)}
.tp-avatar-btns{display:flex;gap:5px;flex-wrap:wrap}.tp-avatar-btns .ui-btn{padding:5px 11px;font-size:8.5px}
.tp-avatar-edit .tp-error:empty{display:none}
body.mobile-layout .tp-avatar-edit img.tp-avatar-big{width:76px;height:76px}
body.mobile-layout .tp-avatar-edit b{font-size:9px}body.mobile-layout .tp-avatar-edit small{font-size:11px}
/* team colour tint (v58): the page glows in the crew's colour and section labels use it.
   --team-accent is set per team (teamProfile accent); --team-ink is a lighter mix so labels stay readable. */
#teamsScreen{--team-ink:color-mix(in srgb,var(--team-accent) 80%,#fff);
  background:radial-gradient(ellipse at 100% 108%,color-mix(in srgb,var(--team-accent) 32%,transparent),transparent 60%),radial-gradient(ellipse at -6% -12%,color-mix(in srgb,var(--team-accent) 22%,transparent),transparent 54%),radial-gradient(ellipse at 15% -10%,#5d7e9a26,transparent 55%),linear-gradient(160deg,#151c22,#07090b 70%)}
.tp-page:not([data-kind=create]):not([data-kind=stage]){background:radial-gradient(ellipse at 100% 108%,color-mix(in srgb,var(--team-accent) 32%,transparent),transparent 60%),radial-gradient(ellipse at -6% -12%,color-mix(in srgb,var(--team-accent) 22%,transparent),transparent 54%),linear-gradient(160deg,#151c22,#07090b 70%)}
#teamsScreen .tm-stage .ui-kicker,#teamsScreen .tp-page:not([data-kind=create]) .ui-kicker{color:var(--team-ink)}
/* ---------- team colour picker (v59) ---------- */
.tp-create-form>.tp-cpick{grid-column:1/-1}
.tp-cpick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:9px;align-items:stretch}
.tp-cp-sv{position:relative;min-height:96px;border-radius:8px;cursor:crosshair;touch-action:none;outline:none;border:1px solid #ffffff26;
  background:linear-gradient(to top,#000 0%,#0000 100%),linear-gradient(to right,#fff,var(--hue,red));box-shadow:inset 0 0 0 1px #0006}
.tp-cp-sv:after{content:'';position:absolute;inset:auto 0 0;height:0;pointer-events:none}
.tp-cp-sv:focus-visible{outline:2px solid var(--tc-bright,#f4d377);outline-offset:2px}
.tp-cp-thumb{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000a,0 2px 5px #000a;pointer-events:none}
.tp-cp-side{display:flex;flex-direction:column;justify-content:space-between;gap:7px;min-width:0}
#teamsScreen input.tp-cp-hue{-webkit-appearance:none;appearance:none;width:100%;height:14px;padding:0;border-radius:999px;border:1px solid #ffffff26;box-shadow:inset 0 0 0 1px #0006;
  background:linear-gradient(90deg,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00);cursor:pointer}
.tp-cp-hue::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0b1014;box-shadow:0 1px 4px #000a}
.tp-cp-hue::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #0b1014}
.tp-cp-row{display:flex;align-items:center;gap:7px}
.tp-cp-chip{width:28px;height:28px;flex:none;border-radius:7px;border:1px solid #ffffff40;box-shadow:inset 0 1px #ffffff40,0 0 12px #0008}
#teamsScreen input.tp-cp-hex{flex:1;font:700 11px/1 'Courier New',monospace;letter-spacing:1px;text-transform:uppercase}
.tp-cp-presets{gap:5px}.tp-cp-presets .tp-swatch{width:18px;height:18px}
body.mobile-layout .tp-cpick{grid-template-columns:1fr}
body.mobile-layout .tp-cp-sv{min-height:150px}
body.mobile-layout #teamsScreen input.tp-cp-hue{height:22px}
body.mobile-layout .tp-cp-hue::-webkit-slider-thumb{width:24px;height:24px}
body.mobile-layout .tp-cp-presets .tp-swatch{width:28px;height:28px}

/* ---------- everything that was gold follows the team colour (v59) ----------
   Palette built from --team-accent (set with setTeamAccent, which also sets --team-on for text on solid chips). */
#teamsScreen,#teamsScreen .tp-crew,#teamsScreen .tp-create-preview{--tc:var(--team-accent);--tc-ink:color-mix(in srgb,var(--team-accent) 80%,#fff);--tc-bright:color-mix(in srgb,var(--team-accent) 62%,#fff);
  --tc-light:color-mix(in srgb,var(--team-accent) 28%,#fff);--tc-deep:color-mix(in srgb,var(--team-accent) 55%,#000);--team-on:#1a1206;--glass-gold:var(--tc-ink)}
#teamsScreen .tp-landing{--team-accent:#e6b444;--team-on:#1a1206;--tc:#e6b444;--tc-ink:#c9a23c;--tc-bright:#ffd56a;--tc-light:#fff3c4;--tc-deep:#8a6410;--glass-gold:#c9a23c}
#teamsScreen button:focus-visible,#teamsScreen select:focus-visible,#teamsScreen input:focus-visible,#teamsScreen textarea:focus-visible,#teamsScreen .ui-btn:focus-visible,#teamsScreen button.ui-row:focus-visible{outline-color:var(--tc-bright)}
#teamsScreen :is(input,select,textarea):focus,#teamsScreen .tm-search input:focus,#teamsScreen .team-chat-drawer form input:focus,#teamsScreen .team-dialog textarea:focus{border-color:color-mix(in srgb,var(--tc) 70%,transparent)}
#teamsScreen .tm-meta b,#teamsScreen #teamRank,#teamsScreen .tm-role-leader,#teamsScreen .tm-member-view,#teamsScreen .team-chat-row strong,#teamsScreen .tp-warn,#teamsScreen .tp-crew-req,
#teamsScreen .tp-mini-pairs i,#teamsScreen .tp-confirm-text,#teamsScreen .tp-confirm,#teamsScreen .tp-top-chip i{color:var(--tc-bright)}
#teamsScreen .tm-find{color:var(--tc-bright)}#teamsScreen .tm-find:hover{color:var(--tc-light)}
#teamsScreen :is(.tm-badge,.tp-pair-no,.ui-ico.gold){color:var(--team-on);background:radial-gradient(circle at 35% 30%,var(--tc-light),var(--tc) 60%,var(--tc-deep))}
#teamsScreen :is(.tp-strip-pair i,.tp-mvp){color:var(--team-on);background:var(--tc)}
#teamsScreen .tm-member:hover{border-color:color-mix(in srgb,var(--tc) 60%,transparent);box-shadow:inset 0 1px #ffffff1c,0 6px 14px #000a,0 0 0 1px color-mix(in srgb,var(--tc) 20%,transparent)}
#teamsScreen .tm-next{border-color:color-mix(in srgb,var(--tc) 33%,transparent);background:linear-gradient(115deg,transparent 45%,#ffffff0a 45.5%,transparent 80%),color-mix(in srgb,var(--tc) 7%,transparent)}
#teamsScreen :is(.tm-summary,.tm-status-pending,.ui-row em.tm-pending,.tp-deadline,.tp-app-chip){color:var(--tc-bright);border-color:color-mix(in srgb,var(--tc) 35%,transparent);background:color-mix(in srgb,var(--tc) 9%,transparent)}
#teamsScreen :is(button.ui-row:hover,.ui-row.selected){border-color:color-mix(in srgb,var(--tc) 55%,transparent);background:linear-gradient(115deg,transparent 45%,#ffffff0c 45.5%,transparent 80%),color-mix(in srgb,var(--tc) 8%,transparent)}
#teamsScreen .tp-strip-pair.turn{border-color:color-mix(in srgb,var(--tc) 55%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--tc) 22%,transparent)}
#teamsScreen :is(.tp-vs,.tp-mini-pairs span){color:var(--tc)}
#teamsScreen .tp-apply-preview .tp-applicant{border-color:color-mix(in srgb,var(--tc) 35%,transparent)}
#teamsScreen #teamNotice.tp-flash{animation:tp-flash-team 1.6s ease-out}
@keyframes tp-flash-team{0%{color:#fff;text-shadow:0 0 10px var(--tc-bright)}100%{color:#66737c;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.tp-page,.tp-landing,.tp-crew,.tp-applicant,.tp-result-row,.tp-coin-pop{animation:none!important}}

/* ===== BLUE BACKGROUND TEST (v69) — the car showroom's blue gradient replaces the dark base colour.
   The team-colour glows stay on top. Delete this whole block to switch back. ===== */
#teamsScreen{background:radial-gradient(ellipse at 100% 108%,color-mix(in srgb,var(--team-accent) 32%,transparent),transparent 60%),radial-gradient(ellipse at -6% -12%,color-mix(in srgb,var(--team-accent) 22%,transparent),transparent 54%),radial-gradient(ellipse at 15% -10%,#5d7e9a26,transparent 55%),radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
.tp-landing,.tp-page{background:radial-gradient(ellipse at 80% 110%,#c9a23c14,transparent 55%),radial-gradient(ellipse at 15% -10%,#5d7e9a33,transparent 55%),radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
.tp-page:not([data-kind=create]):not([data-kind=stage]){background:radial-gradient(ellipse at 100% 108%,color-mix(in srgb,var(--team-accent) 32%,transparent),transparent 60%),radial-gradient(ellipse at -6% -12%,color-mix(in srgb,var(--team-accent) 22%,transparent),transparent 54%),radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
.tp-page[data-kind=stage]{background:#0b1118}
/* ===== end BLUE BACKGROUND TEST ===== */

/* ==== styles/social-theme.css ==== */
/* Shared graphite chrome for Teams and Community. Layout stays in each screen stylesheet. */
:root{
 --social-black:#030405;
 --social-header:linear-gradient(82deg,transparent 55%,#c3cbd51c 55.3%,transparent 100%),var(--social-black);
 --social-highlight:linear-gradient(90deg,transparent,#c3d2dd66 45%,transparent);
 --social-backdrop:radial-gradient(ellipse at 62% 46%,#96969655 0,#63636333 36%,#33333318 68%,transparent 90%),#101113;
 --social-controls:linear-gradient(#999fa4 0,#747b81 14%,#5a6167 70%,#787f85);
 --social-control-shadow:inset 0 1px 2px #fff5,inset 0 -1px 2px #0008,0 0 0 1px #b3b9bd55,0 2px 3px #0006;
 --social-input:linear-gradient(#c5c9cc,#f9fafb 30%,#fff 72%,#e2e5e7);
 --social-input-shadow:inset 0 2px 5px #0006,0 1px #ffffff3b;
}
.community-help-panel{padding-top:63px;border-color:#000;border-radius:8px;background:linear-gradient(116deg,#626c75,#959ea6 51%,#67747e);color:#f3f5f7;box-shadow:0 16px 45px #000b;isolation:isolate}
.community-help-panel:before{content:'';position:absolute;inset:0 0 auto;height:51px;border-radius:7px 7px 0 0;background:var(--social-header);z-index:-1}.community-help-panel h2{position:absolute;left:65px;top:18px;margin:0}.community-help-panel>img{position:absolute;left:18px;top:9px;float:none;margin:0}.community-help-panel>button{color:#eff4f7}
body.mobile-layout .community-help-panel{padding-top:67px;border-radius:8px}
/* Discord-like message rhythm: avatar aligned with sender{grid-template-columns:26px minmax(0,1fr);gap:10px;margin:8px 0 0;align-items:start}

/* ==== styles/amateur-lobby.css ==== */
/* Amateur racers use supplied portraits and transparent car cutouts. */
.classic-lobby .lobby-computer-helmet{position:absolute;left:16px;top:-5px;width:75px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
.classic-lobby .racer-portrait{position:absolute;left:286px;top:22px;width:207px;height:245px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;pointer-events:none}
.classic-lobby .racer-portrait img,.classic-lobby .racer-car img{width:100%;height:100%;object-fit:contain;transform:none}
.classic-lobby .racer-car{position:absolute;left:395px;top:178px;width:323px;height:164px;border:0;border-radius:0;background:none;transform:none;pointer-events:none;overflow:visible}
.classic-lobby .lobby-opponents{left:24px;top:300px;width:806px;height:119px;gap:10px;overflow:hidden}
.classic-lobby .opponent-card{width:258px;flex:0 0 258px;height:116px;border:0;border-radius:0;background:none;overflow:visible}
.classic-lobby .card-portrait{width:95px;height:113px;border:0;border-radius:0;background:none;overflow:visible;filter:drop-shadow(0 2px 2px #00192399)}
.classic-lobby .card-title{left:86px;top:8px;width:167px}
.classic-lobby .card-title strong{padding:3px 6px;background:linear-gradient(100deg,#050a10 70%,#050a1000);clip-path:polygon(0 0,100% 0,95% 100%,0 100%)}
.classic-lobby .card-car{left:82px;top:39px;width:173px;height:70px;border:0;background:none;border-radius:0}
.classic-lobby .opponent-card[aria-pressed="true"] .card-portrait{border:0;box-shadow:none;filter:drop-shadow(0 0 4px #9edaff99)}
.classic-lobby .opponent-card[aria-pressed="true"] .card-title strong{background:linear-gradient(100deg,#075c96 65%,#053e6900);text-shadow:0 1px 2px #000}
.classic-lobby .opponent-card:focus-visible{outline:2px solid #eaf8ff;outline-offset:1px}
@media(max-width:760px) and (pointer:coarse),(max-width:600px){
 body.mobile-layout .classic-lobby .lobby-computer-helmet{position:static;width:40px;height:44px;flex:none}
 body.mobile-layout .classic-lobby .racer-portrait{position:relative;inset:auto;width:135px;height:155px;justify-self:center}
 body.mobile-layout .classic-lobby .racer-car{position:relative;inset:auto;width:100%;height:180px;transform:none}
 body.mobile-layout .classic-lobby .lobby-opponents{position:static;width:100%;height:126px;gap:12px;overflow-x:auto;overflow-y:hidden}
 body.mobile-layout .classic-lobby .opponent-card{height:116px;flex:0 0 258px}
}

.classic-lobby .opponent-card:nth-child(n) .card-portrait{background:none}
.classic-lobby .card-car img,.classic-lobby .card-portrait img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:contain}
@media(max-width:760px) and (pointer:coarse),(max-width:600px){body.mobile-layout .classic-lobby .lobby-back{white-space:nowrap;flex:0 0 80px;width:80px;padding:8px 7px}}
/* Sport Division keeps the established layout with a crimson tournament atmosphere. */
#showroomOverlay:has(.classic-lobby[data-league="sport"]){background:#472029}
.classic-lobby[data-league="sport"]{background:linear-gradient(180deg,transparent 43%,#df756333 44%,transparent 45%,transparent 48%,#832935 49%,transparent 50%,transparent 70%,#f3b2a326 71%,transparent 73%),radial-gradient(ellipse at 100% 80%,#f2b5a580,transparent 55%),radial-gradient(ellipse at 73% 52%,#db2210,transparent 70%),linear-gradient(120deg,#102333 12%,#44202b 44%,#8b211e 80%,#301c27)}
.classic-lobby[data-league="sport"] .league-badge span{font-style:italic}
@media(max-width:760px) and (pointer:coarse),(max-width:600px){body.mobile-layout .classic-lobby[data-league="sport"]{background:radial-gradient(ellipse at 100% 55%,#99293477,transparent 75%),linear-gradient(145deg,#172331,#441d28)}}
/* Pro Class shares the racer layout with a dark violet championship backdrop. */
#showroomOverlay:has(.classic-lobby[data-league="pro"]){background:#282034}
.classic-lobby[data-league="pro"]{background:linear-gradient(180deg,transparent 43%,#b7a5ef33 44%,transparent 45%,transparent 48%,#4e3b76 49%,transparent 50%,transparent 70%,#ddd6f526 71%,transparent 73%),radial-gradient(ellipse at 100% 80%,#c5b0ef80,transparent 55%),radial-gradient(ellipse at 73% 52%,#7533b8,transparent 70%),linear-gradient(120deg,#101c29 12%,#292135 44%,#432963 80%,#201c2c)}
.classic-lobby[data-league="pro"] .league-badge span{font-style:italic}
@media(max-width:760px) and (pointer:coarse),(max-width:600px){body.mobile-layout .classic-lobby[data-league="pro"]{background:radial-gradient(ellipse at 100% 55%,#71459377,transparent 75%),linear-gradient(145deg,#17212e,#30213e)}}

/* All three computer classes share the supplied bracket emblem. */
.classic-lobby .bracket-mark{left:80px;top:118px;width:94px;text-shadow:none}
.classic-lobby .bracket-mark img{display:block;width:94px;height:60px;object-fit:cover;filter:drop-shadow(0 3px 2px #0008)}
body.mobile-layout .classic-lobby .bracket-mark{position:relative;inset:auto;width:94px}

/* ==== styles/challenges.css ==== */
/* Gold Challenge Info sweep with graphite mail and a full-width matchup. */
#challengesScreen{position:absolute;inset:102px 0 49px;z-index:82;background:#11151a;color:#f0f4f7;font:12px Arial,sans-serif;overflow:hidden}
#challengesScreen[hidden],#challengesScreen [hidden]{display:none!important}
.challenges-stage{position:absolute;width:854px;height:421px;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--challenge-scale,1));transform-origin:center;background:radial-gradient(ellipse at 65% 85%,#73819244,transparent 70%),linear-gradient(#111820,#29333e);overflow:hidden}
.challenge-inbox{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:230px minmax(0,1fr)}
.challenge-intro{position:relative;isolation:isolate;padding:55px 22px 20px;background:linear-gradient(130deg,#795307,#b1800f 35%,#d6a927 73%,#f6dfa1);overflow:hidden}
.challenge-intro:before{content:'';position:absolute;inset:-80px -58px -100px auto;width:92px;border-radius:50%;background:#171f29;z-index:-1;box-shadow:-3px 0 1px #ffe6a499,-8px 0 20px #49320144}
.challenge-intro:after{content:'';position:absolute;left:-92px;bottom:-163px;width:380px;height:360px;border:2px solid #eed9a977;border-radius:50%;background:radial-gradient(ellipse at 65% 30%,#41535f,#172c33 55%,#060e15);z-index:-1}
.challenge-intro h1{position:relative;margin:0;color:#fff;font:italic 900 29px/.95 Arial,sans-serif;letter-spacing:.8px;text-shadow:0 2px #443206,2px 3px 3px #0008;z-index:1}
.challenge-intro h1 span{display:block;font-size:21px;letter-spacing:1.5px;margin-top:4px}
.challenge-direction{position:absolute;right:48px;top:9px;width:104px;height:57px;fill:#43d9f4;filter:drop-shadow(0 3px 2px #34240099)}
.challenge-inbox[data-direction=outgoing] .challenge-direction{fill:#fb544b}
.challenge-inbox[data-direction=outgoing] .challenge-intro:after{background:radial-gradient(ellipse at 65% 30%,#763c32,#351b1f 55%,#100c10)}
.challenge-count{display:flex;align-items:center;gap:10px;margin-top:23px;padding-right:24px}
.challenge-count>strong{font:italic 900 43px/1 Arial;color:#fff0c4;text-shadow:0 2px #65470b}
.challenge-count>span{font:700 9px/1.5 Arial;letter-spacing:1px;color:#fff7dd}
.challenge-intro>p{position:relative;margin:11px 27px 15px 0;font:11px/17px Arial;color:#fff5d5;z-index:1;max-width:202px}
.challenge-pistons{position:absolute;left:17px;bottom:-36px;width:184px;height:175px;color:#d9eef0;opacity:.48;pointer-events:none}
.challenge-button,.challenge-tabs button{cursor:pointer;color:#edf7ff;border:1px solid #56626d;border-radius:5px;background:linear-gradient(#424d57,#242c34 60%,#181e25);box-shadow:inset 0 1px #e4edf533,0 2px 4px #0005;font:700 10px/14px Arial;letter-spacing:.5px;padding:8px 13px;text-shadow:0 1px #0008}
.challenge-intro .challenge-button{position:relative;z-index:2;background:linear-gradient(#4c3c20,#2c2317);border-color:#dcc39177;font-size:9px}
.challenge-button:hover,.challenge-tabs button:hover{filter:brightness(1.16)}
#challengesScreen button:focus-visible,#challengesScreen select:focus-visible,#challengesScreen input:focus-visible{outline:2px solid #f4d377;outline-offset:3px}
.challenge-button:disabled{cursor:default;opacity:.5;filter:none}
.challenge-mailbox>.challenge-toolbar{margin:0 -12px}
.challenge-mailbox{position:relative;min-width:0;min-height:0;height:100%;display:grid;grid-template-rows:57px 34px minmax(0,1fr) 25px;padding:0 12px;background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
.challenge-toolbar{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--social-header);border-bottom:1px solid #000;isolation:isolate}
.challenge-toolbar:before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--social-highlight);pointer-events:none}
.challenge-tabs{display:flex;gap:9px}.challenge-tabs button{padding:8px 14px;font-size:11px;min-width:142px}
.challenge-tabs button b{display:inline-block;margin-left:6px;padding:1px 5px;background:#0003;border-radius:3px;font-size:9px;color:#bcd7e9}
.challenge-tabs button[aria-pressed=true],.challenge-primary{border-color:#67addb;background:linear-gradient(112deg,#71c8ff22,transparent 72%),linear-gradient(#2a7db7,#195989 54%,#133e63);box-shadow:inset 0 1px #c5ecff66,inset 0 -1px #04263b99,0 2px 4px #0007}
.challenge-list-head{display:grid;grid-template-columns:minmax(0,1fr) 112px 70px;gap:12px;align-items:center;padding:0 13px;color:#8195a6;font:700 7px "Segoe UI",Arial,sans-serif;letter-spacing:1.2px}
.challenge-list-head>span:last-child{text-align:center}
.challenge-list{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#4e5f6e #10161d;padding:6px 3px 22px 25px}
.challenge-row{position:relative;width:100%;display:grid;grid-template-columns:100px minmax(0,1fr) 112px 70px;align-items:center;gap:12px;padding:7px 10px;text-align:left;color:#dbe5ed;background:var(--social-header);border:1px solid #000;border-radius:7px;margin-bottom:19px;cursor:pointer;box-shadow:inset 0 -1px #ffffff05,0 3px 7px #0007;font:10px "Segoe UI",Arial,sans-serif;transition:background .18s,border-color .18s,box-shadow .18s}
.challenge-row:before{content:'';position:absolute;left:10px;right:10px;top:0;height:1px;background:var(--social-highlight);pointer-events:none}
.challenge-row:hover{background:linear-gradient(82deg,transparent 55%,#b4d7ec26 55.3%,transparent 100%),#070b0f;border-color:#376987;box-shadow:0 3px 9px #0008}.challenge-row:active{transform:translateY(1px)}
/* The ride sits directly on the black card and breaks its left edge. */
.challenge-row-car{position:static;display:block;height:60px;overflow:visible;pointer-events:none;z-index:1}
.challenge-row-car img{position:absolute;left:-25px;top:auto;bottom:-12px;display:block;width:136px;max-width:none;height:86px;object-fit:contain;filter:drop-shadow(0 7px 4px #000b);transition:transform .2s}
.challenge-row:hover .challenge-row-car img{transform:translateY(-2px)}
.challenge-row-person{min-width:0;display:flex;flex-direction:column;gap:3px}
.challenge-racer-identity{display:flex;align-items:center;gap:6px;min-width:0}.challenge-racer-identity>img{width:18px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 2px #0008);flex:none}.challenge-racer-identity>strong{font:700 14px/19px "Segoe UI",Arial,sans-serif;letter-spacing:.1px;color:#f2f6fa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.challenge-racer-meta{display:flex;align-items:center;gap:7px;min-width:0;font:8px/12px "Segoe UI",Arial,sans-serif;color:#8498a9}.challenge-racer-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.challenge-racer-meta>b{font:700 6px/10px "Segoe UI",Arial,sans-serif;letter-spacing:.4px;color:#84b3d4;background:#3c80ad1f;padding:0 4px;border-radius:2px;white-space:nowrap}
.challenge-row-car-name{font:600 9px/13px "Segoe UI",Arial,sans-serif;color:#c1cfda;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.challenge-row-time{font:7px/10px "Segoe UI",Arial,sans-serif;color:#738798;letter-spacing:.4px}
.challenge-row-terms{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}.challenge-row-type{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid #648ead33;border-radius:4px;background:linear-gradient(#3a5a702b,#182b3c55);color:#aacde6;font:600 9px/12px "Segoe UI",Arial,sans-serif;white-space:nowrap}.challenge-row-type:before{content:'';width:7px;height:7px;border:1px solid currentColor;border-radius:50%;opacity:.65}.challenge-row-type[data-type=heads-up]:before{border-radius:1px;transform:rotate(-12deg)}
.challenge-row-wager{display:block;padding-left:1px;color:#f4d493}.challenge-row-wager small{display:block;font:700 6px/9px "Segoe UI",Arial,sans-serif;letter-spacing:.9px;color:#8498a9}.challenge-row-wager strong{display:block;font:700 14px/18px "Segoe UI",Arial,sans-serif;letter-spacing:.2px;font-variant-numeric:tabular-nums}.challenge-row-wager[data-wager=pink]{color:#ecabc7}.challenge-row-wager[data-wager=fun]{color:#abd4c7}
.challenge-row-state{height:58px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:5px 0 3px;border-left:1px solid #c3d5e012}
.challenge-row-state .challenge-status{border:0;background:none!important;padding:3px 0;font:600 8px/12px "Segoe UI",Arial,sans-serif;letter-spacing:.1px}.challenge-row-state .challenge-status:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:5px;box-shadow:0 0 5px currentColor;opacity:.8}
.challenge-row-open{font:700 6px/12px "Segoe UI",Arial,sans-serif;letter-spacing:.8px;color:#86a8c1;white-space:nowrap}.challenge-row:hover .challenge-row-open{color:#c9e9ff}
.challenge-status{display:inline-block;font:700 8px/12px Arial;letter-spacing:.3px;color:#afc4d6;background:#35475955;border:1px solid #526b8044;border-radius:4px;padding:4px 5px;text-align:center}
.challenge-status[data-status=ready]{color:#a4ebc1;border-color:#70bc8a55;background:#2a6b4338}.challenge-status[data-status=pending]{color:#ebd190;border-color:#bba05855;background:#7c62252b}.challenge-status[data-status=declined]{color:#e4a0a0;border-color:#a1606044;background:#6323232b}.challenge-status[data-status=completed]{color:#b7c8d6;background:#48576444}
.challenge-preview-note{align-self:center;margin:0;text-align:center;font:6px Arial;letter-spacing:.4px;color:#8897a5}
.challenge-empty{position:absolute;left:20px;right:20px;top:140px;text-align:center;padding:15px}
.challenge-empty>span{display:block;width:35px;height:35px;border-radius:50%;margin:auto;background:#d3ac4c;color:#171b20;font:900 26px/35px Arial;box-shadow:0 3px 5px #0008}
.challenge-empty h2{font:700 18px Arial;color:#e8eef3;margin:18px 0 10px}.challenge-empty p{font:12px/19px Arial;color:#b0becb;max-width:320px;margin:auto}
/* Sport Division atmosphere: the cars sit on the floor, with no cards around them. */
.challenge-matchup{position:relative;height:100%;padding:0 16px;background:linear-gradient(180deg,transparent 43%,#df756333 44%,transparent 45%,transparent 48%,#832935 49%,transparent 50%,transparent 70%,#f3b2a326 71%,transparent 73%),radial-gradient(ellipse at 100% 80%,#f2b5a580,transparent 55%),radial-gradient(ellipse at 73% 52%,#db2210,transparent 70%),linear-gradient(120deg,#102333 12%,#44202b 44%,#8b211e 80%,#301c27);isolation:isolate}
.challenge-matchup:before{content:'';position:absolute;inset:44px 0 0;background:linear-gradient(180deg,#070c1466,transparent 42%,#07111c33 68%,#0b101bcc);pointer-events:none;z-index:-1}
.challenge-matchup:after{content:'';position:absolute;left:6%;right:6%;top:287px;height:1px;background:linear-gradient(90deg,transparent,#ffd9c64d,transparent);pointer-events:none;z-index:-1}
.challenge-match-toolbar{position:absolute;inset:0 0 auto;height:44px;padding:0 16px;justify-content:flex-start}
.challenge-match-toolbar>.challenge-button{font-size:9px;padding:5px 12px}.challenge-match-toolbar>span:nth-child(2){flex:1;font:700 9px Arial;letter-spacing:1px;color:#aebfcd}
#challengeMatchHeading{position:absolute;top:52px;left:0;right:0;text-align:center;font:italic 900 21px/29px Arial;letter-spacing:2px;margin:0;color:#f3f6f8;outline:none;text-shadow:0 2px 3px #0008}
.challenge-versus{position:absolute;top:88px;left:16px;right:16px;height:222px;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.challenge-driver{--facing:1;--arrival:52px;height:100%;position:relative;min-width:0;padding:0 7px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.challenge-driver.you{--facing:-1;--arrival:-52px}
.challenge-driver:after{content:'';position:absolute;width:85%;height:23px;left:7.5%;bottom:31px;background:radial-gradient(ellipse,#000b,transparent 70%);filter:blur(3px);pointer-events:none;z-index:-1}
.challenge-driver>header{display:flex;align-items:center;gap:8px;position:relative;z-index:2;padding:0 7px}.challenge-driver>header>img{width:29px;height:31px;object-fit:contain;filter:drop-shadow(0 2px 2px #0008)}.challenge-driver>header>div{flex:1;min-width:0}.challenge-driver h2{font:italic 900 20px/23px Arial;letter-spacing:.5px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 3px #0008}.challenge-driver small{display:block;font:700 6px/10px Arial;letter-spacing:1px;color:#c2ceda}.challenge-driver.rival small{color:#ffd5c4}
.challenge-lane{font:italic 900 27px Arial;color:#d7dce633}
.challenge-hero-car{position:absolute;z-index:1;width:112%;max-width:none;height:174px;left:-6%;top:27px;object-fit:contain;filter:drop-shadow(0 10px 5px #0009);display:block;transform:scaleX(var(--facing));animation:challenge-car-arrive .75s cubic-bezier(.16,1,.3,1) both}
.challenge-driver.rival .challenge-hero-car{animation-delay:.08s}
.challenge-driver h3{position:absolute;z-index:2;bottom:13px;left:0;right:0;margin:0;font:700 10px/14px Arial;color:#fff;text-align:center;text-shadow:0 2px 3px #000a}.challenge-driver>p{position:absolute;bottom:0;left:0;right:0;margin:0;font:7px/11px Arial;color:#c7c9cf;text-align:center;text-shadow:0 1px 2px #000a}
.challenge-vs{position:relative;z-index:3;text-align:center;margin-top:7px;animation:challenge-vs-arrive .6s .12s cubic-bezier(.16,1,.3,1) both;filter:drop-shadow(0 5px 4px #0008)}.challenge-vs>img{display:block;width:110px;height:68px;max-width:none;object-fit:cover;margin-left:-27px}.challenge-vs>small{display:block;margin-top:7px;font:700 6px Arial;letter-spacing:1.5px;color:#f0b9a7}
.challenge-terms{position:absolute;top:319px;left:22px;right:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0;border:0;background:none;perspective:800px}
.challenge-terms>div{position:relative;min-height:51px;padding:9px 12px 7px;border:1px solid #000;border-radius:4px;background:var(--social-header);box-shadow:inset 0 1px #c3d2dd2b,inset 0 -1px #55697d22,0 4px 0 #000,0 8px 10px #03091188;transform:rotateX(5deg);animation:challenge-info-arrive .55s .25s both}
.challenge-terms>div:nth-child(2){animation-delay:.31s}.challenge-terms>div:nth-child(3){animation-delay:.37s}.challenge-terms>div:nth-child(4){animation-delay:.43s}
.challenge-terms span{display:block;font:700 7px/11px Arial;letter-spacing:.7px;color:#b3c6d7}.challenge-terms strong{display:block;font:700 13px/18px Arial;color:#f2f6fb;text-shadow:0 2px #0008}.challenge-terms>div:nth-child(2) strong{color:#ffe3a5}
.challenge-match-actions{position:absolute;top:381px;left:22px;right:22px;display:flex;align-items:center;gap:15px}.challenge-match-actions>div{flex:1;min-width:0}.challenge-match-actions p{margin:0 0 3px;font:8px/11px Arial;color:#e1d4d0}.challenge-match-actions small{display:block;font:6px/9px Arial;color:#bfb6ba}.challenge-primary{font:italic 900 15px/19px Arial;min-width:166px;padding:8px 16px;white-space:nowrap;box-shadow:inset 0 1px #c5ecff66,inset 0 -1px #04263b99,0 3px 0 #081626,0 5px 8px #0006}
#challengeFeedback{position:absolute;right:204px;bottom:2px;margin:0;color:#ffe0a6;font:7px/10px Arial}
@keyframes challenge-car-arrive{from{opacity:0;transform:translateX(var(--arrival)) scaleX(var(--facing))}to{opacity:1;transform:translateX(0) scaleX(var(--facing))}}
@keyframes challenge-vs-arrive{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}
@keyframes challenge-info-arrive{from{opacity:0;transform:translateY(9px) rotateX(5deg)}to{opacity:1;transform:translateY(0) rotateX(5deg)}}
.challenge-compose{position:absolute;top:318px;left:22px;right:22px;display:grid;grid-template-columns:1.35fr 1fr 1fr .8fr;gap:9px;padding:7px 10px;background:linear-gradient(120deg,#777f87,#444d56);border-radius:5px;border:1px solid #000}
.challenge-compose label{display:block;font:700 7px/11px Arial;letter-spacing:.5px;color:#f0f5f9;min-width:0}.challenge-compose select,.challenge-compose input{display:block;width:100%;height:28px;font:10px Arial;border:1px solid #4f5a64;border-radius:3px;padding:4px 5px;margin-top:2px;background:var(--social-input);box-shadow:var(--social-input-shadow);color:#222a30}
body.mobile-layout #challengesScreen{inset:calc(var(--phone-head) + env(safe-area-inset-top)) 0 calc(var(--phone-foot) + env(safe-area-inset-bottom));overflow:auto;background:#11171d;scrollbar-width:thin}
body.mobile-layout .challenges-stage{position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:100%;overflow:visible}
body.mobile-layout .challenge-inbox{display:block;height:auto}
body.mobile-layout .challenge-intro{padding:23px 18px 19px;min-height:151px;background:linear-gradient(120deg,#76500c,#b38a23 70%,#dbba65)}
body.mobile-layout .challenge-intro:before{display:none}body.mobile-layout .challenge-intro:after{left:auto;right:-125px;bottom:-220px;opacity:.7}
body.mobile-layout .challenge-intro h1{font-size:26px;padding-right:78px}body.mobile-layout .challenge-intro h1 span{font-size:18px}body.mobile-layout .challenge-direction{width:72px;height:39px;right:18px;top:14px}
body.mobile-layout .challenge-count{position:absolute;right:18px;top:67px;margin:0;padding:0;display:block;text-align:right;width:90px}body.mobile-layout .challenge-count strong{font-size:35px}body.mobile-layout .challenge-count span{display:block;font-size:6px;line-height:11px;letter-spacing:.5px;margin-top:3px}
body.mobile-layout .challenge-intro>p{max-width:calc(100% - 90px);font:11px/16px Arial;margin:13px 0 0}body.mobile-layout .challenge-intro .challenge-button{display:none}body.mobile-layout .challenge-pistons{right:4px;left:auto;bottom:-17px;width:86px;height:86px;opacity:.16}
body.mobile-layout .challenge-mailbox{display:block;height:auto;padding:0 12px 20px}body.mobile-layout .challenge-mailbox .challenge-toolbar{margin:0 -12px 13px;height:64px;padding:10px 12px}body.mobile-layout .challenge-tabs{width:100%}body.mobile-layout .challenge-tabs button{flex:1;min-width:0;min-height:43px;font-size:11px;padding:8px 9px}
body.mobile-layout .challenge-list-head{display:flex;justify-content:space-between;margin:0 2px 11px;padding:0;font-size:8px;letter-spacing:.7px}body.mobile-layout .challenge-list-head>span:not(:first-child){display:none}
body.mobile-layout .challenge-list{padding:5px 2px 2px 8px;max-height:none;overflow:visible}body.mobile-layout .challenge-row{grid-template-columns:95px minmax(0,1fr);gap:12px;padding:12px;margin-bottom:12px;border-radius:8px}
body.mobile-layout .challenge-row-car{position:relative;height:86px}body.mobile-layout .challenge-row-car img{width:122px;height:82px;left:-27px;top:-1px;bottom:auto}
body.mobile-layout .challenge-racer-identity>strong{font-size:15px;line-height:21px}body.mobile-layout .challenge-racer-identity>img{width:20px;height:22px}body.mobile-layout .challenge-row-person{gap:4px}body.mobile-layout .challenge-racer-meta{font-size:9px;line-height:13px;gap:5px}body.mobile-layout .challenge-racer-meta>b{font-size:6px;letter-spacing:0}body.mobile-layout .challenge-row-car-name{font-size:11px;line-height:15px;white-space:normal}body.mobile-layout .challenge-row-time{font-size:8px;line-height:12px;letter-spacing:.2px}
body.mobile-layout .challenge-row-terms{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding-top:11px;border-top:1px solid #b9cbdb17}body.mobile-layout .challenge-row-type{font-size:11px;line-height:16px;padding:5px 7px;justify-self:start}body.mobile-layout .challenge-row-wager{padding-left:0;text-align:right}body.mobile-layout .challenge-row-wager small{font-size:6px;line-height:10px}body.mobile-layout .challenge-row-wager strong{font-size:15px;line-height:20px}
body.mobile-layout .challenge-row-state{grid-column:1/-1;height:auto;flex-direction:row;padding:0;border:0;margin-top:-3px}body.mobile-layout .challenge-row-state .challenge-status{font-size:9px;line-height:14px;padding:0}body.mobile-layout .challenge-row-open{font-size:8px;letter-spacing:.7px;line-height:16px}body.mobile-layout .challenge-preview-note{font-size:7px;line-height:13px;margin:18px 8px 0}
body.mobile-layout .challenge-empty{position:relative;inset:auto;padding:32px 12px}body.mobile-layout .challenge-empty h2{font-size:18px}body.mobile-layout .challenge-empty p{font-size:13px}
body.mobile-layout .challenge-matchup{display:flex;flex-direction:column;height:auto;min-height:100%;gap:13px;padding:0 12px 20px;background:radial-gradient(ellipse at 100% 43%,#cf381fcc,transparent 65%),radial-gradient(ellipse at 4% 24%,#27495c88,transparent 55%),linear-gradient(145deg,#172331,#441d28 58%,#131c27)}
body.mobile-layout .challenge-matchup:before{inset:58px 0 0}body.mobile-layout .challenge-matchup:after{top:290px}
body.mobile-layout .challenge-match-toolbar{position:relative;inset:auto;min-height:58px;margin:0 -12px;padding:9px 12px;gap:9px}body.mobile-layout .challenge-match-toolbar>.challenge-button{min-height:38px;padding:8px;font-size:10px}body.mobile-layout .challenge-match-toolbar>span:nth-child(2){font-size:8px;letter-spacing:.4px}
body.mobile-layout #challengeMatchHeading{position:relative;inset:auto;font-size:18px;letter-spacing:1px;line-height:26px}
body.mobile-layout .challenge-versus{position:relative;inset:auto;grid-template-columns:minmax(0,1fr) 31px minmax(0,1fr);height:218px;flex:none;overflow:clip}body.mobile-layout .challenge-driver{padding:0;height:100%;min-height:0}.challenge-driver>header{min-width:0}body.mobile-layout .challenge-driver>header{gap:5px;padding:0}body.mobile-layout .challenge-driver>header>img{width:23px;height:27px}body.mobile-layout .challenge-driver h2{font-size:15px;line-height:19px;white-space:normal}body.mobile-layout .challenge-driver small{font-size:6px;line-height:10px;letter-spacing:.3px}body.mobile-layout .challenge-lane{display:none}
body.mobile-layout .challenge-hero-car{height:145px;top:40px;width:110%;left:-5%;margin:0}body.mobile-layout .challenge-driver:after{bottom:38px;height:18px}body.mobile-layout .challenge-driver h3{font-size:11px;line-height:15px;bottom:19px;margin:0 3px}body.mobile-layout .challenge-driver>p{font-size:7px;line-height:11px;bottom:0;margin:0 3px}body.mobile-layout .challenge-vs>img{width:64px;height:40px;margin-left:-16.5px}body.mobile-layout .challenge-vs>small{font-size:5px;letter-spacing:.5px;margin-top:6px}
body.mobile-layout .challenge-terms{position:relative;inset:auto;grid-template-columns:1fr 1fr;gap:13px 10px;padding:0;margin:0 2px 5px}body.mobile-layout .challenge-terms>div{padding:12px 10px;min-height:69px}body.mobile-layout .challenge-terms span{font-size:8px;line-height:13px}body.mobile-layout .challenge-terms strong{font-size:14px;line-height:21px}body.mobile-layout .challenge-match-actions{position:relative;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:15px;padding:3px}body.mobile-layout .challenge-match-actions p{font-size:12px;line-height:19px}body.mobile-layout .challenge-match-actions small{font-size:10px;line-height:16px}body.mobile-layout .challenge-primary{min-height:48px;font-size:18px}body.mobile-layout #challengeFeedback{position:static;font-size:11px;line-height:17px;text-align:center}
body.mobile-layout .challenge-compose{position:relative;inset:auto;grid-template-columns:1fr 1fr;gap:11px;padding:13px}body.mobile-layout .challenge-compose label{font-size:8px;line-height:14px}body.mobile-layout .challenge-compose select,body.mobile-layout .challenge-compose input{font-size:14px;height:42px}
@media(prefers-reduced-motion:reduce){.challenge-hero-car,.challenge-vs,.challenge-terms>div{animation:none}}
.status .challenge[role=button]{cursor:pointer}.status .challenge[role=button]:focus-visible{outline:2px solid #f2d17c;outline-offset:2px}

.challenge-matchup[data-direction=incoming]{background:linear-gradient(0deg,#5e92a340,transparent 30%),linear-gradient(180deg,transparent 43%,#3995ae55 44%,transparent 45%,transparent 48%,#206c8d 49%,transparent 50%,transparent 70%,#9bb8bd35 71%,transparent 73%),radial-gradient(ellipse at 9% 80%,#4f9ab1,transparent 42%),linear-gradient(120deg,#0d2132 8%,#007fa7 42%,#18334e 78%,#113e5b)}
.challenge-matchup[data-direction=incoming]:after{background:linear-gradient(90deg,transparent,#bde8f44d,transparent)}
.challenge-matchup[data-direction=incoming] .challenge-driver.rival small{color:#bed8e8}.challenge-matchup[data-direction=incoming] .challenge-vs>small{color:#b3dbef}.challenge-matchup[data-direction=incoming] .challenge-match-actions p{color:#c9deeb}.challenge-matchup[data-direction=incoming] .challenge-match-actions small{color:#a5bfce}
body.mobile-layout .challenge-matchup[data-direction=incoming]{background:radial-gradient(ellipse at 15% 45%,#188dadb0,transparent 65%),radial-gradient(ellipse at 100% 40%,#274f7088,transparent 55%),linear-gradient(145deg,#142738,#12455e 58%,#131c27)}

.challenge-scroll-hint{display:block;font:700 6px/12px "Segoe UI",Arial,sans-serif;letter-spacing:.8px;color:#c4d8e8}.challenge-list:focus-visible{outline:1px solid #8db9d9;outline-offset:2px}.challenge-list{overscroll-behavior:contain}
body.mobile-layout .challenge-mailbox{background:radial-gradient(ellipse at 75% 65%,#2a577269,transparent 70%),linear-gradient(150deg,#111f2e,#10202e 55%,#1e354a)}body.mobile-layout .challenge-scroll-hint{display:none}

/* Finished invites stay readable and clickable, with an unmistakable W/L tab. */
.challenge-row[data-status=completed]{background:linear-gradient(82deg,transparent 55%,#b7c3cc0c 55.3%,transparent 100%),#101215;border-color:#25292e}
.challenge-row[data-status=completed]>:not(.challenge-outcome){filter:saturate(.2);opacity:.78}
.challenge-row[data-status=completed]:hover{border-color:#52616e;background:linear-gradient(82deg,transparent 55%,#b7c3cc18 55.3%,transparent 100%),#151a1f}
.challenge-row[data-status=completed]:hover>:not(.challenge-outcome){opacity:1}
.challenge-row[data-status=completed] .challenge-row-state{padding-top:17px}
.challenge-outcome{position:absolute;right:0;top:0;display:grid;place-items:center;width:25px;height:23px;border-radius:0 6px 0 7px;background:linear-gradient(#3a6250,#213a2e);box-shadow:inset 0 1px #d6ffe02b,0 2px 4px #0006;color:#c4f3d0;font:italic 900 13px/1 Arial}
.challenge-row[data-outcome=lose] .challenge-outcome{background:linear-gradient(#744b4e,#43282e);color:#ffd0d0}
.challenge-vs[data-outcome=win]>img,.challenge-vs[data-outcome=lose]>img{width:160px;height:112px;object-fit:contain;margin-left:-52px}
.challenge-vs[data-outcome=win]>small{color:#b4f3c7}.challenge-vs[data-outcome=lose]>small{color:#ffc0c0}
#challengeStatusValue[data-outcome=win]{color:#b4f3c7}#challengeStatusValue[data-outcome=lose]{color:#ffc0c0}
body.mobile-layout .challenge-row[data-status=completed] .challenge-row-state{padding-top:0}
body.mobile-layout .challenge-row[data-status=completed] .challenge-row-person{padding-right:14px}
body.mobile-layout .challenge-outcome{width:28px;height:26px;font-size:15px}
body.mobile-layout .challenge-vs[data-outcome=win]>img,body.mobile-layout .challenge-vs[data-outcome=lose]>img{width:90px;height:70px;margin-left:-29.5px}

/* Supplied racing badges replace the generic race-type chips. */
.challenge-row-type{display:block;padding:0;border:0;background:none;line-height:0}
.challenge-row-type:before{display:none}
.challenge-row-type img{display:block;width:44px;height:28px;max-width:none;object-fit:cover;filter:drop-shadow(0 3px 2px #0008)}
.challenge-row-terms{gap:5px}
.challenge-terms>.challenge-race-type{padding-right:51px}
.challenge-race-type>img{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:37px;height:24px;object-fit:cover;filter:drop-shadow(0 3px 2px #0009)}
body.mobile-layout .challenge-row-type{padding:0;border:0;background:none;line-height:0}
body.mobile-layout .challenge-row-type img{width:47px;height:30px}
body.mobile-layout .challenge-terms>.challenge-race-type{padding-right:39px}
body.mobile-layout .challenge-race-type>img{right:7px;width:29px;height:19px}

/* Wager artwork belongs to the detail cards; list wagers retain their text. */
.challenge-terms>.challenge-wager-type{padding-right:58px}
.challenge-wager-type>img{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}
#challengeWagerValue[data-wager=pink]{color:#ecabc7}#challengeWagerValue[data-wager=fun]{color:#abd4c7}
body.mobile-layout .challenge-terms>.challenge-wager-type{padding-right:47px}
body.mobile-layout .challenge-wager-type>img{right:7px;width:36px;height:36px}

@media(prefers-reduced-motion:reduce){.challenge-row-car img{transition:none}.challenge-row:hover .challenge-row-car img{transform:none}}

/* ==== styles/online-challenge.css ==== */
/* The existing red matchup leads into three deliberate, spacious choices. */
.challenge-compose[hidden],.challenge-compose [hidden]{display:none!important}
.challenge-compose{grid-template-columns:1.35fr 1.15fr auto;align-items:center}
.challenge-flow-preview{padding:0 8px;display:grid;gap:4px;font:8px Arial;color:#d0e2ed}.challenge-flow-preview strong{font-size:8px;color:#fff;letter-spacing:.6px}
.challenge-compose .challenge-button{font:700 9px Arial;padding:9px}
#onlineChallengeWizard{position:fixed;inset:0;margin:auto;width:min(930px,calc(100vw - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #000;border-top:2px solid #c8a637;border-bottom:3px solid #c8a637;border-radius:10px 10px 3px 3px;overflow:auto;color:white;background:#142736;box-shadow:0 22px 80px #000a;font:14px Arial;animation:wizard-enter .35s cubic-bezier(.16,1,.3,1) both}
#onlineChallengeWizard::backdrop{background:linear-gradient(130deg,#00b7ee55,#007cc96b);animation:wizard-blue-in .35s both}
.online-wizard-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 26px;gap:20px;background:var(--social-header);border-bottom:1px solid #59677766}
.online-wizard-head h1{margin:0;font:italic 900 24px Arial;letter-spacing:1.2px;text-shadow:0 2px #000}
.online-wizard-body{position:relative;min-height:390px;padding:16px 35px 30px;background:radial-gradient(ellipse at 100% 80%,#f2b5a550,transparent 55%),radial-gradient(ellipse at 73% 52%,#b42213,transparent 70%),linear-gradient(120deg,#102333 12%,#44202b 44%,#8b211e 80%,#301c27);isolation:isolate}
.online-wizard-body:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#070c1455,transparent 40%,#0b101b99);pointer-events:none}
.online-wizard-progress{display:flex;justify-content:center;gap:25px;padding:0 0 12px;color:#b6bac3;font:700 9px Arial;letter-spacing:1px}.online-wizard-progress [aria-current]{color:#fff5c4;text-shadow:0 0 8px #edbd2a66}
.wizard-step h2{margin:12px 0 22px;text-align:center;font:italic 900 25px Arial;letter-spacing:1.4px;text-shadow:0 2px 3px #0007}
.wizard-step h3{font:italic 900 15px Arial;letter-spacing:.6px;margin:14px 0 9px;color:#fff0cc}
.wizard-step p{font:14px/1.5 Arial;color:#e1e7ee;text-shadow:0 1px 2px #0008;margin:12px 0}
.wizard-silver{border:1px solid #77868f;color:#17232c;background:linear-gradient(#eff5f8,#9eabb2 52%,#cfd9df);border-radius:3px;padding:8px 17px;font:900 10px Arial;cursor:pointer;box-shadow:inset 0 1px #fff,0 2px 3px #0007}
.wizard-aqua{border:1px solid #b5e5ef;border-radius:5px;background:linear-gradient(#219abc,#12627f);color:#fff;font:italic 900 13px Arial;padding:11px 22px;cursor:pointer;box-shadow:inset 0 1px #f1feff55,0 3px 8px #0007;white-space:nowrap}
.wizard-aqua:hover{background:linear-gradient(#39c7e9,#1683a3)}
#onlineWizardBack{position:absolute;left:20px;top:47px;font-size:10px;padding:7px 13px;z-index:3}
.wizard-actions{display:flex;gap:12px;justify-content:center;margin-top:25px}
.wizard-type-layout{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);gap:20px;padding:0 35px}
.wizard-type-layout article,.wizard-wager-layout article{text-align:center;min-width:0}.wizard-type-layout p,.wizard-wager-layout p{text-align:left}
.wizard-or{align-self:start;padding-top:50px;font:italic 900 24px Arial;color:#f1f7fc}
.wizard-icon-choice{position:relative;display:block;margin:0 auto;padding:0;width:125px;height:85px;border:0;background:none;cursor:pointer;border-radius:8px;transition:filter .18s,transform .18s;filter:drop-shadow(0 4px 4px #0008)}
.wizard-icon-choice img{display:block;width:100%;height:100%;object-fit:cover}
.wizard-icon-choice:hover,.wizard-icon-choice:focus-visible{filter:drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px #fff7);transform:translateY(-3px);outline:0}
.wizard-icon-choice:disabled{opacity:.3;filter:grayscale(1);cursor:not-allowed;transform:none}
.wizard-step label{font:900 13px Arial;color:#fff}.wizard-step input,.wizard-step select,.wizard-step textarea{background:var(--social-input);box-shadow:var(--social-input-shadow);border:1px solid #8a9ca5;border-radius:4px;padding:7px;color:#16232a;font:700 16px Arial}
.wizard-step input{width:88px;margin:14px 0 0;text-align:center}.wizard-step small{color:#bac4cf;font:10px/1.5 Arial}
.wizard-wager-layout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding:0 15px}
.wizard-wager-layout .wizard-icon-choice{width:94px;height:94px}.wizard-wager-layout .wizard-icon-choice img{object-fit:contain}
.wizard-message-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px;padding:5px 15px 20px}.wizard-message-layout label>span{display:block;margin-bottom:10px}.wizard-message-layout textarea{width:100%;height:155px;resize:vertical;max-height:230px;font:14px/1.6 Arial}.wizard-message-layout .wizard-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:20px}.wizard-message-layout h3{margin-top:0;font-size:20px}.wizard-summary{font:700 12px/1.6 Arial;color:#ffdda0;padding:9px 12px;border-left:2px solid #e1b744;background:#0004}
#wizardError{color:#ffdfaa;font:700 12px Arial;margin:8px 0 0;min-height:16px;text-align:center}
.wizard-preview-note{display:block;font:7px/1.5 Arial;letter-spacing:.5px;color:#b9c4d3;text-align:center;padding-top:5px}
#wizardBracketCheck{position:absolute;inset:0;margin:auto;width:min(435px,calc(100% - 30px));height:205px;padding:25px 25px 15px 115px;background:linear-gradient(120deg,#e5b315,#8b6412);border:2px solid #efce6b;border-radius:7px;box-shadow:0 0 0 100vmax #037bbb8c,0 16px 30px #0009;z-index:10;color:#fff}
#wizardBracketCheck[hidden]{display:none}#wizardBracketCheck>img{position:absolute;left:16px;top:24px;width:83px;height:55px;object-fit:cover}#wizardBracketCheck h2{font:900 21px Arial;margin:0 0 12px}#wizardBracketCheck p{font:14px/1.5 Arial;margin:0 0 14px}#wizardBracketCheck>div{display:flex;gap:10px;justify-content:flex-end}
.challenge-message-bubble{position:absolute;right:4px;bottom:50px;z-index:4;display:flex;align-items:center;gap:6px;max-width:180px;border:1px solid #bdd8e580;border-radius:16px 16px 2px 16px;background:linear-gradient(#233b4fea,#0c202eed);padding:6px 9px;color:#e5f4ff;font:700 6px Arial;letter-spacing:.5px;box-shadow:0 5px 12px #0009;cursor:pointer;animation:challenge-note-arrive .6s .5s both,challenge-note-float 3s 1.1s ease-in-out infinite}
.challenge-message-bubble[hidden]{display:none}.challenge-message-bubble svg{width:19px;height:18px;flex:none}.challenge-message-bubble:hover{border-color:#fff;background:#205175}
#challengeMessageDialog{position:fixed;inset:0;margin:auto;width:min(420px,calc(100vw - 32px));max-height:80dvh;overflow:auto;animation:wizard-enter .25s both}
#challengeMessageDialog:not([open]){display:none}#challengeMessageDialog::backdrop{background:#050c1c80}#challengeMessageDialog #challengeMessageAuthor{font:bold 10px Arial;color:#eef3f7;letter-spacing:.8px;margin:0 0 12px}
#challengeMessageDialog blockquote{margin:0;border:1px solid #69757e;border-radius:5px;padding:15px;background:var(--social-input);box-shadow:var(--social-input-shadow);color:#283039;font:14px/1.6 Arial;white-space:pre-wrap;overflow-wrap:anywhere}
#challengeMessageDialog>button:focus-visible,.wizard-silver:focus-visible,.wizard-aqua:focus-visible{outline:2px solid #fff4b1;outline-offset:3px}
@keyframes wizard-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}@keyframes wizard-blue-in{from{opacity:0}to{opacity:1}}@keyframes challenge-note-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes challenge-note-float{50%{translate:0 -3px}}
body.mobile-layout .challenge-compose{grid-template-columns:1fr}.mobile-layout .challenge-flow-preview{font-size:11px;padding:4px 0}.mobile-layout .challenge-flow-preview strong{font-size:10px}
body.mobile-layout .challenge-message-bubble{bottom:62px;right:0;font-size:7px;width:100%;max-width:150px;padding:5px}.mobile-layout #challengeMessageDialog{inset:0;padding:65px 18px 18px;font:14px Arial;border-radius:8px}
@media(max-width:650px){#onlineChallengeWizard{width:calc(100vw - 20px);max-height:calc(100dvh - 20px)}.online-wizard-head{padding:17px 14px}.online-wizard-head h1{font-size:17px}.online-wizard-head .wizard-silver{padding:8px;font-size:9px}.online-wizard-body{padding:12px 16px 20px;min-height:0}.online-wizard-progress{gap:10px;font-size:7px;letter-spacing:0}.wizard-step h2{font-size:19px;margin:47px 0 20px}#onlineWizardBack{top:36px;left:16px}.wizard-type-layout{grid-template-columns:1fr 1fr;gap:20px;padding:0}.wizard-or{display:none}.wizard-type-layout p,.wizard-wager-layout p{font-size:12px;line-height:1.5}.wizard-icon-choice{width:105px;height:68px}.wizard-step label{font-size:11px}.wizard-step input{width:65px;font-size:15px}.wizard-wager-layout{grid-template-columns:1fr;padding:0;gap:15px}.wizard-wager-layout article{display:grid;grid-template-columns:90px 1fr;gap:5px 14px;text-align:left;border-bottom:1px solid #ffffff20;padding-bottom:14px}.wizard-wager-layout .wizard-icon-choice{grid-row:1/4;width:85px;height:85px;align-self:center}.wizard-wager-layout h3,.wizard-wager-layout p,.wizard-wager-layout input{margin:0}.wizard-wager-layout h3{font-size:13px}.wizard-wager-layout small{grid-column:2}.wizard-message-layout{grid-template-columns:1fr;padding:0;gap:22px}.wizard-message-layout textarea{height:130px}.wizard-message-layout .wizard-actions{justify-content:space-between;gap:8px}.wizard-aqua{font-size:11px;padding:11px 15px}.wizard-preview-note{font-size:6px}#wizardBracketCheck{height:auto;min-height:205px;padding:20px 18px 18px 91px}#wizardBracketCheck>img{left:12px;width:67px;height:44px}#wizardBracketCheck h2{font-size:18px}#wizardBracketCheck p{font-size:12px}#wizardBracketCheck .wizard-silver{padding:8px 12px;font-size:9px}}
@media(prefers-reduced-motion:reduce){#onlineChallengeWizard,#onlineChallengeWizard::backdrop,#challengeMessageDialog,.challenge-message-bubble{animation:none}.wizard-icon-choice{transition:none}}

.wizard-step input[type=number]{appearance:textfield}.wizard-step input[type=number]::-webkit-inner-spin-button,.wizard-step input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:650px){.wizard-step input{width:78px}}
/* Async challenge runs have one occupied lane and no invented winner. */
.solo-challenge #opponentMapDot,.solo-challenge .racer-panel.right{visibility:hidden!important}
.solo-challenge #preRight,.solo-challenge #stageRight{opacity:.2}.solo-challenge #treeR{opacity:.2}
.challenge-status[data-status=running],.challenge-status[data-status=awaiting]{color:#bdd9f2;background:#2b4c653d;border-color:#608ba669}
.challenge-row[data-status=awaiting] .challenge-row-open{color:#a8c9e4}
.challenge-run-results{position:absolute;top:347px;left:22px;right:22px;display:grid;grid-template-columns:1.25fr 1fr;gap:10px;min-height:33px}
.challenge-run-results[hidden]{display:none}.challenge-recorded-stats,.challenge-waiting{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid #000;border-radius:4px;background:var(--social-header);box-shadow:inset 0 1px #c3d2dd2b,0 3px 8px #0007}
.challenge-recorded-stats>span{font:700 5px/8px Arial;max-width:45px;color:#a7becb;letter-spacing:.5px}.challenge-recorded-stats>strong{font:700 10px monospace;color:#e7f4fc;white-space:nowrap}.challenge-recorded-stats>b{font:700 5px Arial;color:#ffd98b}.challenge-waiting{justify-content:center}.challenge-waiting strong{font:700 8px Arial;color:#badbea;letter-spacing:.4px}.challenge-waiting i{width:11px;height:11px;border:2px solid #76a2bc44;border-top-color:#d1efff;border-radius:50%;animation:challenge-wait-spin 1.5s linear infinite}
.challenge-matchup[data-recorded-run=true] .challenge-versus{height:190px}.challenge-matchup[data-recorded-run=true] .challenge-hero-car{height:144px}.challenge-matchup[data-recorded-run=true] .challenge-terms{top:286px}.challenge-matchup[data-recorded-run=true] .challenge-match-actions{top:389px}.challenge-matchup[data-recorded-run=true] .challenge-primary{padding-top:6px;padding-bottom:6px}.challenge-matchup[data-recorded-run=true] #challengeFeedback{display:none}
body.mobile-layout .challenge-matchup[data-recorded-run=true] .challenge-versus{height:210px}body.mobile-layout .challenge-matchup[data-recorded-run=true] .challenge-hero-car{height:134px}body.mobile-layout .challenge-matchup[data-recorded-run=true] .challenge-terms,body.mobile-layout .challenge-run-results,body.mobile-layout .challenge-matchup[data-recorded-run=true] .challenge-match-actions{position:relative;inset:auto}body.mobile-layout .challenge-run-results{grid-template-columns:1fr;gap:10px}.mobile-layout .challenge-recorded-stats{flex-wrap:wrap;justify-content:center;padding:12px}.mobile-layout .challenge-recorded-stats>span{font-size:8px;max-width:none;width:100%;text-align:center}.mobile-layout .challenge-recorded-stats>strong{font-size:12px}.mobile-layout .challenge-recorded-stats>b{font-size:7px}.mobile-layout .challenge-waiting{min-height:48px}.mobile-layout .challenge-waiting strong{font-size:9px}
@keyframes challenge-wait-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.challenge-waiting i{animation:none}}

.solo-challenge .tree .light:nth-child(even){opacity:.2}

/* ==== styles/used-car-lot.css ==== */
.showroom-head #showroomBrowseHint{position:absolute;left:auto;font:14px Impact,Arial;top:10px;right:24px;padding:6px 12px;color:white;letter-spacing:.4px;cursor:pointer}
#usedCarLot{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;color:#e7eef4;background:radial-gradient(ellipse at 70% 80%,#98a9b264,transparent 63%),linear-gradient(120deg,#17212c,#3f505e 60%,#273542);font:10px Arial}
.used-lot-head{position:relative;display:flex;align-items:center;flex:none;gap:13px;min-height:65px;padding:10px 20px 10px 136px;background:var(--social-header);border-bottom:1px solid #75869455;box-shadow:0 5px 12px #0005;z-index:3}
.used-lot-head>img{position:absolute;width:107px;height:105px;object-fit:contain;left:17px;top:-12px;filter:drop-shadow(2px 5px 4px #0009);pointer-events:none}.used-lot-head>div{flex:1}.used-lot-head h1{font:italic 900 20px Arial;letter-spacing:.6px;margin:0 0 4px}.used-lot-head p{font:8px Arial;color:#aebdc9;margin:0}
.used-lot-head nav{display:flex;gap:5px}.used-lot-head nav button,.used-secondary{padding:8px 11px;background:linear-gradient(#536371,#253441);color:#dae5ed;border:1px solid #8395a04d;border-radius:4px;box-shadow:inset 0 1px #a0b8c844;font:700 8px Arial;cursor:pointer}.used-lot-head nav [aria-pressed=true]{background:linear-gradient(#2194c8,#174b78);border-color:#76b9d5;color:white;box-shadow:inset 0 1px #ceefff77,0 0 8px #129dd535}
.used-lot-layout{display:grid;grid-template-columns:minmax(0,1fr) 253px;gap:25px;min-height:0;flex:1;padding:24px 25px 53px 125px}
.used-browser{min-height:0;min-width:0;display:flex;flex-direction:column;background:linear-gradient(120deg,#53626d,#26343f);border:1px solid #0a1117;border-radius:5px;box-shadow:0 8px 16px #0005;overflow:hidden}
#usedBrowseView{display:flex;flex-direction:column;min-height:0;flex:1}.used-filters{display:grid;grid-template-columns:1.4fr 1fr .85fr;gap:8px;padding:10px;background:linear-gradient(#a7afb5,#7b8791);box-shadow:inset 0 1px #dce6ed55}.used-filters label,#usedSellView label{font:700 7px Arial;color:#f9fbfc;letter-spacing:.5px;min-width:0}.used-filters input,.used-filters select,#usedSellView input,#usedSellView select,#usedSellView textarea{display:block;width:100%;font:10px Arial;color:#25323b;border:1px solid #56636c;border-radius:3px;margin-top:4px;padding:5px;background:var(--social-input);box-shadow:var(--social-input-shadow)}
.used-list-head,#usedListingList>button{display:grid;grid-template-columns:70px minmax(0,1.7fr) minmax(0,1fr) 45px;align-items:center;gap:8px;text-align:left}.used-list-head{background:var(--social-header);padding:9px 10px;font:700 6px Arial;letter-spacing:.6px;color:#abbecb}
#usedListingList{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#78919f #24333f}#usedListingList>button{width:100%;min-height:36px;border:0;border-bottom:1px solid #ffffff0c;padding:6px 10px;background:transparent;color:#d5e1e8;font:8px Arial;cursor:pointer}#usedListingList>button:nth-child(even){background:#050e1722}#usedListingList>button:hover{background:#42657e}#usedListingList>button[aria-pressed=true]{background:linear-gradient(100deg,#096f9d,#264c69);box-shadow:inset 3px 0 #74d9ff,inset 0 1px #77c8e855;color:white}.used-row-price{font:bold 10px Arial;color:#fff1ba}.used-row-car{font-weight:bold;line-height:12px}.used-row-seller{color:#b4d7ea;overflow-wrap:anywhere}.used-row-status{font:700 6px Arial;color:#a6cba2;letter-spacing:.4px}.used-browser footer{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font:6px Arial;color:#a0b7c6;background:#162530;border-top:1px solid #7c9ba233}.used-browser footer span:first-child{color:#dfe8ec;font-weight:bold}#usedEmpty{padding:20px;color:#c8d7df;font:11px/1.6 Arial}
.used-car-detail{position:relative;min-height:274px;align-self:start;border:1px solid #101820;border-radius:5px;background:linear-gradient(125deg,#263443 10%,#5a6c7d 52%,#98a6b2 88%);box-shadow:inset 0 1px #afc0d144,4px 8px 17px #0007;padding:13px 16px 85px;isolation:isolate}.used-car-detail:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,#ffffff0d,transparent 45%);border-radius:4px}.used-car-detail header{position:relative}.used-car-detail header>span:first-child{font:900 8px Arial;color:#d4e6f0;letter-spacing:1px}.used-car-detail h2{margin:5px 32px 8px 0;font:italic 900 16px/19px Arial;letter-spacing:.3px;color:white;text-shadow:0 2px 2px #0007}.used-car-detail>strong{display:block;font:900 24px Arial;color:#fff;text-shadow:0 2px 2px #0007;margin:7px 0 12px}.used-car-detail dl{display:grid;gap:7px;grid-template-columns:1fr 1fr;margin:0 0 12px}.used-car-detail dt{color:#cad5df;font:7px Arial;margin-bottom:3px}.used-car-detail dd{color:#f1f7fc;margin:0;font:700 8px/11px Arial;overflow-wrap:anywhere}.used-car-detail dl>div:first-child dd{color:#fff3a9}.used-detail-actions{position:relative;display:flex;align-items:center;justify-content:space-between;gap:9px;z-index:2}.used-secondary{font-size:7px;padding:6px 9px}.used-buy{background:linear-gradient(#81ae46,#3b601f);border:1px solid #c4d8a26b;border-radius:4px;color:white;font:900 10px Arial;padding:6px 15px;cursor:pointer;box-shadow:inset 0 1px #e9f9d866,0 2px 4px #0005}.used-buy:disabled{background:#394b59;color:#acbdc7;cursor:default}.used-car-detail #usedLotFeedback{position:relative;z-index:2;margin:9px 0 0;font:8px/11px Arial;color:#ffe7a8;min-height:11px}.used-car-detail>img{position:absolute;left:-33px;bottom:-48px;width:315px;height:176px;max-width:none;object-fit:contain;filter:drop-shadow(0 9px 5px #0009);pointer-events:none;animation:used-car-arrive .45s both}.used-car-detail #usedCarPlate{position:absolute;bottom:35px;left:-12px;background:#f0ecdd;border:1px solid #b5b5a9;padding:3px 6px;font:700 9px monospace;color:#273443;rotate:-7deg;box-shadow:0 2px 3px #0008;z-index:2}
.used-lot-note{font:6px/10px Arial;color:#a3b9c8;margin:0;padding:5px 20px 6px;text-align:right;flex:none}#usedSellView{padding:16px;overflow:auto;min-height:0}#usedSellView h2{font:italic 900 18px Arial;margin:0 0 9px}#usedSellView>p{font:10px/1.6 Arial;color:#c0d2e0;margin:0 0 14px}#usedSellView label{display:block;margin-bottom:12px;font-size:8px}#usedSellView textarea{height:60px;resize:vertical}#usedSellView .challenge-button{font-size:10px;margin-bottom:10px}#usedSellView>small{display:block;color:#b4c8d6;font:7px Arial}
#usedBuildDialog{position:fixed;inset:0;margin:auto;width:min(430px,calc(100vw - 32px));max-height:80dvh;overflow:auto}#usedBuildDialog:not([open]){display:none}#usedBuildDialog::backdrop{background:#06122288}#usedBuildCopy{white-space:pre-wrap;font:13px/1.7 Arial;color:#fff}.used-lot-head button:focus-visible,#usedCarLot input:focus-visible,#usedCarLot select:focus-visible,#usedListingList:focus-visible,#usedCarLot textarea:focus-visible,#usedCarLot button:focus-visible{outline:2px solid #f6d871;outline-offset:2px}
@keyframes used-car-arrive{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.used-car-detail>img{animation:none}}
body.mobile-layout .showroom-head #showroomBrowseHint{display:block;position:static;font:bold 11px Arial;padding:8px 10px;min-height:40px;flex:none}
body.mobile-layout #usedCarLot{position:relative;inset:auto;min-height:100%;overflow:visible}.mobile-layout .used-lot-head{padding:16px 12px 15px 82px;min-height:104px;flex-wrap:wrap;gap:8px}.mobile-layout .used-lot-head>img{width:72px;height:84px;left:6px;top:2px}.mobile-layout .used-lot-head h1{font-size:17px}.mobile-layout .used-lot-head p{font-size:10px;line-height:1.5}.mobile-layout .used-lot-head nav{width:100%;margin-top:6px}.mobile-layout .used-lot-head nav button{font-size:9px;padding:10px}.mobile-layout .used-lot-layout{display:flex;flex-direction:column-reverse;padding:20px 16px 10px;gap:66px;flex:none;overflow:visible}.mobile-layout .used-car-detail{width:100%;min-height:290px;padding:16px 18px 93px}.mobile-layout .used-car-detail>img{left:50%;transform:translateX(-50%);width:calc(100% + 35px);height:166px;bottom:-47px;animation:none}.mobile-layout .used-car-detail h2{font-size:19px}.mobile-layout .used-car-detail dl{gap:10px}.mobile-layout .used-car-detail dt{font-size:10px}.mobile-layout .used-car-detail dd{font-size:12px;line-height:16px}.mobile-layout .used-car-detail #usedLotFeedback{font-size:10px}.mobile-layout .used-detail-actions button{min-height:38px;font-size:10px}.mobile-layout .used-browser{min-height:300px}.mobile-layout .used-filters{grid-template-columns:1fr 1fr;gap:10px;padding:12px}.mobile-layout .used-filters label{font-size:9px}.mobile-layout .used-filters label:first-child{grid-column:1/-1}.mobile-layout .used-filters input,.mobile-layout .used-filters select{font-size:12px;min-height:38px}.mobile-layout .used-list-head,.mobile-layout #usedListingList>button{grid-template-columns:64px minmax(0,1.3fr) minmax(0,1fr);gap:6px}.mobile-layout .used-list-head span:last-child,.mobile-layout .used-row-status{display:none}.mobile-layout .used-list-head{font-size:8px}.mobile-layout #usedListingList{max-height:460px}.mobile-layout #usedListingList>button{font-size:10px;min-height:54px}.mobile-layout .used-row-car{line-height:14px}.mobile-layout .used-row-price{font-size:11px}.mobile-layout .used-browser footer{font-size:8px}.mobile-layout .used-lot-note{font-size:8px;padding:14px;line-height:1.6;text-align:left}.mobile-layout #usedSellView{padding:18px}.mobile-layout #usedSellView label{font-size:11px}.mobile-layout #usedSellView input,.mobile-layout #usedSellView select,.mobile-layout #usedSellView textarea{font-size:14px;min-height:40px}.mobile-layout #usedSellView textarea{height:90px}.mobile-layout #usedSellView>small{font-size:10px}.mobile-layout #usedBuildDialog{inset:0;padding:65px 18px 18px}

#usedCarLot{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6b8595 #182a37}
body:not(.mobile-layout) .used-lot-layout{padding-top:18px;padding-bottom:40px}
body:not(.mobile-layout) .used-car-detail{padding-bottom:28px;min-height:260px}
body:not(.mobile-layout) .used-car-detail>img{width:290px;height:148px;left:-22px;bottom:-36px}

body:not(.mobile-layout) .used-car-detail dl>div:last-child{display:none}
body:not(.mobile-layout) .used-car-detail>img{bottom:-68px}
body:not(.mobile-layout) .used-car-detail #usedCarPlate{bottom:17px}

.used-car-detail header #usedBuy{position:absolute;right:-3px;top:-2px;z-index:3;padding:5px 9px;font-size:9px}
.used-car-detail header>span:first-child{display:block;min-height:20px;padding-right:67px}
.used-car-detail h2{margin-right:0}
body.mobile-layout .showroom-head #showroomBrowseHint{margin-left:auto}
body.mobile-layout .used-car-detail header #usedBuy{min-height:34px;font-size:11px;padding:6px 12px;top:-5px}
body.mobile-layout .used-car-detail header>span:first-child{min-height:31px;padding-right:90px}
.owned-copy-count{position:absolute;left:110px;top:64px;font:700 10px Arial;color:#ffe49f;letter-spacing:.5px}
body.mobile-layout .owned-copy-count{position:static;display:block;font-size:11px;margin:0 0 8px}

/* ==== styles/lot-social.css ==== */
/* Teams and Community share the Used Car Lot's backdrop, directory chrome and build panels. */
:root{--lot-backdrop:radial-gradient(ellipse at 70% 80%,#98a9b264,transparent 63%),linear-gradient(120deg,#17212c,#3f505e 60%,#273542);--lot-browser:linear-gradient(120deg,#53626d,#26343f);--lot-filter:linear-gradient(#a7afb5,#7b8791);--lot-build:linear-gradient(125deg,#263443 10%,#5a6c7d 52%,#98a6b2 88%)}
.lot-directory-label{display:flex;justify-content:space-between;padding:9px 12px;background:var(--social-header);font:700 8px Arial;letter-spacing:.6px;color:#abbecb;flex:none}

/* ==== styles/team-challenge.css ==== */
#teamChallengeFlow{position:fixed;inset:0;margin:auto;width:min(1040px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid #0b1118;border-top:2px solid #c2a545;border-bottom:3px solid #c2a545;border-radius:9px 9px 4px 4px;overflow:auto;color:#f0f5fa;background:#172938;box-shadow:0 20px 65px #0009;font:14px Arial;scrollbar-width:thin;scrollbar-color:#8da4b6 #172938}
#teamChallengeFlow:not([open]),#teamChallengeFlow [hidden]{display:none!important}
#teamChallengeFlow::backdrop{background:linear-gradient(130deg,#00b7ee55,#007cc96b);backdrop-filter:blur(3px)}
#teamChallengeFlow button:focus-visible{outline:2px solid #ffdc73;outline-offset:3px}
.team-flow-kicker{display:block;color:#aabecf;font:700 9px Arial;letter-spacing:1.6px;margin-bottom:7px}
#teamChallengeFlow .online-wizard-head{position:sticky;top:0;z-index:4;padding:17px 25px}#teamChallengeFlow .online-wizard-head h1{font-size:23px}
.team-flow-body{padding:16px 30px 18px;background:radial-gradient(ellipse at 24% 30%,#7898b747,transparent 55%),radial-gradient(ellipse at 95% 75%,#8a647133,transparent 50%),var(--lot-backdrop)}
.team-flow-progress{display:flex;justify-content:center;flex-wrap:wrap;gap:26px;padding:0 0 12px;color:#9eafbe;font:700 9px Arial;letter-spacing:.9px}.team-flow-progress [aria-current]{color:#ffdf82}
.team-flow-versus{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:15px;max-width:650px;margin:0 auto 20px;text-align:center}.team-flow-versus span{font:700 8px Arial;letter-spacing:1.3px;color:#b3c7d7;display:block;margin-bottom:5px}.team-flow-versus strong{font:italic 900 24px Arial;overflow-wrap:anywhere}.team-flow-versus>img{width:64px;height:50px;object-fit:contain;filter:drop-shadow(0 4px 3px #0008)}
#teamChallengeFlow h2{font:italic 900 24px Arial;letter-spacing:.7px;text-shadow:0 2px 2px #0006;margin:15px 0 23px}#teamChallengeFlow h2:focus{outline:0}
#teamChallengeFlow .wizard-type-layout{padding:0 50px;gap:30px}#teamChallengeFlow .wizard-icon-choice img{object-fit:contain}#teamChallengeFlow .wizard-step p{font-size:13px;line-height:1.6}#teamChallengeFlow .wizard-step small{color:#b6c9d8}
#teamChallengeFlow .team-flow-stakes{grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;padding:0 90px 20px}#teamFlowCash{width:132px}
.team-flow-lineup-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.team-flow-lineup-head h2{margin:5px 0 7px!important}.team-flow-lineup-head p{color:#bfcedc;font:12px/1.5 Arial;margin:0 0 15px}
.team-flow-size-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:15px;padding:10px 13px;background:var(--social-header);border:1px solid #0e1821;border-radius:4px}.team-flow-size-bar>span{font:700 9px Arial;letter-spacing:1px;color:#b6c5d2}.team-flow-size-bar>strong{margin-left:auto;font:700 10px Arial;color:#ffdc83}#teamFlowSizes{display:flex;gap:5px;flex-wrap:wrap}#teamFlowSizes button{font:900 11px Arial;border:1px solid #718898;border-radius:4px;padding:7px 11px;color:#e4eff6;background:linear-gradient(#526674,#263b4a);cursor:pointer}#teamFlowSizes button[aria-pressed=true]{background:linear-gradient(#2aabc6,#116489);border-color:#a1e5f4;color:#fff}
.team-flow-rosters{display:grid;grid-template-columns:1fr 1fr;gap:28px}.team-flow-rosters>section{min-width:0}.team-flow-rosters header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:var(--social-header);border:1px solid #0c151d;border-radius:5px 5px 0 0}.team-flow-rosters h3{font:italic 900 17px Arial;margin:0}.team-flow-rosters header>span{color:#a8bac9;font:700 9px Arial;white-space:nowrap}.team-flow-roster{max-height:257px;overflow-y:auto;background:var(--lot-browser);border:1px solid #0c151d;border-top:0;border-radius:0 0 5px 5px;padding:7px 8px;scrollbar-width:thin;scrollbar-color:#8da4b6 #263b4a}
.team-flow-racer{position:relative;display:grid;grid-template-columns:90px 1fr 25px;align-items:center;gap:8px;width:100%;min-height:65px;border:1px solid #ffffff19;border-radius:4px;margin:0 0 5px;padding:6px 9px 6px 2px;text-align:left;color:#edf6fd;background:linear-gradient(115deg,#070e15d9,#223342);box-shadow:inset 0 1px #ffffff0c;cursor:pointer}.team-flow-racer>img{width:96px;height:55px;object-fit:contain;filter:drop-shadow(0 6px 3px #0009);transform:translate(-4px,5px);pointer-events:none}.team-flow-racer strong{display:block;font:900 13px Arial;margin-bottom:5px;overflow-wrap:anywhere}.team-flow-racer small{display:block;font:9px/1.4 Arial;color:#b7c9d8}.team-flow-racer b{display:grid;place-items:center;width:24px;height:24px;color:#9bb2c4;font:700 11px Arial;border:1px solid #60788966;border-radius:50%;background:#13202c}.team-flow-racer:hover{border-color:#b8d2e7}.team-flow-racer.assigned{background:linear-gradient(110deg,#123b51,#244d67);border-color:#5f9dbb}.team-flow-racer[aria-pressed=true]{border-color:#ffdc83;box-shadow:0 0 0 1px #ffdc83,inset 0 1px #fff3}.team-flow-racer.assigned b{background:#dfb759;border-color:#f7dba1;color:#19252e}
.team-flow-matches-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 0 9px}.team-flow-matches-head h3{font:700 10px Arial;letter-spacing:1px;margin:0}.team-flow-matches-head>span{color:#afc3d4;font:10px Arial}.team-flow-matches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.team-flow-match{position:relative;border:1px solid #64798a;border-radius:5px;background:#112435b5;min-width:0}.team-flow-match.active{border-color:#ffdc83;box-shadow:0 0 0 1px #ffdc8380}.team-flow-match>button:first-child{width:100%;display:block;padding:10px 27px 10px 12px;text-align:left;background:none;color:#edf6fd;border:0;cursor:pointer}.team-flow-match>button:first-child>span{display:block;font:700 8px Arial;letter-spacing:1px;color:#ecc571;margin-bottom:7px}.team-flow-match strong{display:block;font:700 11px/1.5 Arial;overflow-wrap:anywhere}.team-flow-match .team-flow-clear{position:absolute;top:5px;right:5px;padding:0;width:20px;height:23px;border:0;background:none;color:#b4c9d9;font:20px Arial;cursor:pointer}
.team-flow-lineup-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:17px}.team-flow-lineup-actions p{color:#b9cdde;font:11px/1.5 Arial;margin:0;max-width:530px}#teamFlowReview:disabled{opacity:.42;cursor:not-allowed}
.team-flow-confirm h2{text-align:center;margin-bottom:10px!important}.team-flow-confirm-status{text-align:center;font:12px/1.5 Arial;color:#b6cbdc;margin:0 0 20px}.team-flow-terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:17px}.team-flow-terms article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px;background:var(--lot-build);border:1px solid #16232d;border-radius:5px;box-shadow:0 4px 8px #0004}.team-flow-terms span{display:block;font:700 8px Arial;letter-spacing:1px;margin-bottom:7px;color:#d2e1ea}.team-flow-terms strong{font:900 16px Arial}.team-flow-terms img{width:63px;height:47px;object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}.team-flow-size-icon{font:900 38px Arial;color:#dae7ef}
.team-flow-review-pairs{display:grid;gap:9px}.team-flow-review-row{display:grid;grid-template-columns:1fr 58px 1fr;align-items:center;gap:10px;padding:12px 15px;background:#0b1828b3;border:1px solid #556d7f;border-radius:5px}.team-flow-review-racer{display:flex;gap:12px;align-items:center;min-width:0}.team-flow-review-racer:last-child{flex-direction:row-reverse;text-align:right}.team-flow-review-racer>img{width:105px;height:65px;object-fit:contain;filter:drop-shadow(0 5px 3px #0008)}.team-flow-review-racer strong{font:900 14px Arial;display:block;margin-bottom:5px;overflow-wrap:anywhere}.team-flow-review-racer small{display:block;font:10px/1.5 Arial;color:#b3c9da}.team-flow-review-racer b{display:block;color:#ffe29a;font:700 10px Arial;margin-top:5px}.team-flow-review-row>span{text-align:center;font:700 8px/1.8 Arial;color:#9ebbd0}.team-flow-review-row>span>img{display:block;width:48px;height:30px;object-fit:contain;margin:auto}
#teamFlowMessageLabel{display:block;margin:20px 0 8px;font:700 10px Arial;letter-spacing:.5px}#teamFlowMessageLabel small{color:#9fb6c8;font:8px Arial;margin-left:7px}#teamFlowMessage{width:100%;background:var(--social-input);color:#192735;border:1px solid #8da1af;box-shadow:var(--social-input-shadow);border-radius:4px;resize:vertical;min-height:75px;max-height:200px;padding:10px 12px;font:14px/1.5 Arial}#teamFlowSavedMessage{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;background:#0b192799;border-left:2px solid #c9aa55;color:#dae7f0;font:13px/1.6 Arial}.team-flow-footer{display:flex;align-items:center;gap:15px;margin-top:22px;border-top:1px solid #a8bfd52b;padding-top:13px}.team-flow-footer>span{margin-left:auto;text-align:right;font:8px/1.5 Arial;color:#a7bbcd}#teamFlowError{color:#ffdfa2;font:700 11px/1.5 Arial;margin:0;flex:1}
@media(prefers-reduced-motion:no-preference){#teamChallengeFlow[open]{animation:wizard-enter .3s cubic-bezier(.16,1,.3,1) both}#teamChallengeFlow::backdrop{animation:wizard-blue-in .3s both}}
@media(max-width:650px){#teamChallengeFlow{width:calc(100vw - 16px);max-height:calc(100dvh - 24px)}#teamChallengeFlow .online-wizard-head{padding:13px 15px;gap:10px}#teamChallengeFlow .online-wizard-head h1{font-size:16px}.team-flow-body{padding:13px 13px 16px}.team-flow-progress{gap:12px;font-size:7px}.team-flow-versus{grid-template-columns:1fr 45px 1fr;gap:7px;margin-bottom:15px}.team-flow-versus strong{font-size:18px}.team-flow-versus span{font-size:7px}.team-flow-versus>img{width:45px;height:38px}#teamChallengeFlow h2{font-size:20px}#teamChallengeFlow .wizard-type-layout{padding:0;gap:9px;grid-template-columns:1fr 26px 1fr}#teamChallengeFlow .wizard-type-layout p,#teamChallengeFlow .wizard-wager-layout p{font-size:11px}#teamChallengeFlow .wizard-or{font-size:14px}.team-flow-stakes{padding:0!important;gap:22px!important}.team-flow-lineup-head{align-items:start}.team-flow-lineup-head h2{font-size:18px!important}.team-flow-lineup-head p{font-size:10px}.team-flow-lineup-head button{font-size:8px;padding:8px}.team-flow-size-bar{padding:9px;gap:9px}.team-flow-size-bar>strong{width:100%;margin:0}#teamFlowSizes button{padding:7px 9px;font-size:10px}.team-flow-rosters{gap:10px}.team-flow-rosters header{padding:10px;flex-direction:column;align-items:start;gap:4px}.team-flow-rosters h3{font-size:14px}.team-flow-rosters header>span{font-size:8px}.team-flow-roster{padding:5px;max-height:278px}.team-flow-racer{grid-template-columns:1fr 21px;gap:2px;padding:7px;min-height:99px}.team-flow-racer>img{position:absolute;width:63px;height:39px;bottom:3px;left:1px;transform:none;opacity:.95}.team-flow-racer>span{align-self:start;padding-bottom:33px}.team-flow-racer strong{font-size:10px}.team-flow-racer small{font-size:8px}.team-flow-racer>b{width:20px;height:20px;font-size:9px;align-self:start}.team-flow-matches-head{align-items:start}.team-flow-matches-head>span{font-size:8px;text-align:right}.team-flow-matches{grid-template-columns:repeat(2,minmax(0,1fr))}.team-flow-match strong{font-size:10px}.team-flow-lineup-actions{flex-direction:column;align-items:stretch;gap:10px}.team-flow-terms{gap:7px}.team-flow-terms article{padding:10px 8px;position:relative;min-height:84px;align-items:start}.team-flow-terms strong{font-size:12px}.team-flow-terms img{position:absolute;right:6px;bottom:2px;width:43px;height:30px}.team-flow-size-icon{font-size:25px}.team-flow-review-row{grid-template-columns:1fr 30px 1fr;padding:9px;gap:3px}.team-flow-review-racer,.team-flow-review-racer:last-child{display:block}.team-flow-review-racer>img{width:95px;height:50px;max-width:100%}.team-flow-review-racer strong{font-size:11px}.team-flow-review-racer small{font-size:9px}.team-flow-review-row>span>img{width:28px}.team-flow-footer{gap:8px;flex-wrap:wrap}.team-flow-footer>span{width:100%;text-align:center}.team-flow-footer .wizard-silver{font-size:9px}#teamFlowError{font-size:10px}}

.team-flow-terms small{display:block;margin-top:6px;font:700 9px Arial;color:#ffdf97}

/* ==== styles/header-metal.css ==== */
/* Shared header finish. Screen styles continue to own placement and sizing. */
:root {
 --header-graphite:
  linear-gradient(113deg,transparent 0 48%,#dce5ec2e 48.2%,#b0c1cf14 73%,transparent 100%),
  linear-gradient(180deg,#171c20 0,#090c0f 46%,#030507 100%);
 /* Translucent glazing lets the bar's reflection run continuously through
    each control. The button has no opaque silver plate of its own. */
 --header-metal-face:linear-gradient(180deg,#ffffff05,#ffffff00 44%,#00000010 53%,#ffffff03);
 --header-metal-selected:linear-gradient(180deg,#ffffff09,#ffffff0d 48%,#ffffff05);
 --header-metal-rim:
  inset 0 0 0 1px #e5f0f326,inset 0 1px 1px #f5fcff25,
  inset 0 -1px 2px #00000050,0 1px 0 #ffffff15,0 -1px 2px #0009;
 --header-metal-inset:
  inset 0 0 0 1px #e3f1f44d,inset 0 2px 4px #00000080,
  inset 0 -1px 1px #e5f4fb25,0 1px 0 #ffffff1b;
}

/* Keep the diagonal reflection on bars, without changing car cards or portraits.
   Main keeps its original blue toolbar and aqua buttons on desktop. */
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.lot-directory-label,.used-list-head,
 .team-flow-size-bar,.team-flow-rosters header,:where(body.mobile-layout) .leaderboard-table-head,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) {
 background:var(--header-graphite) !important;
 box-shadow:inset 0 1px #c7d6e226,inset 0 -1px #0009;
 border-color:#04070a;
}
body :is(.community-help-panel)::before {
 background:var(--header-graphite);
}

/* Visual-only overrides unify legacy aqua, silver and tab controls. Their
   existing dimensions and responsive layout rules still apply. */
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button,
body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]) {
 appearance:none;
 --header-button-glaze:var(--header-metal-face);
 background:var(--header-metal-face) !important;
 border:1px solid #03080d !important;
 border-radius:999px !important;
 box-shadow:var(--header-metal-rim) !important;
 color:#f1f5f8 !important;
 text-shadow:0 1px 1px #000b !important;
 font-family:Arial,sans-serif !important;
 font-size:9px !important;
 font-weight:900 !important;
 font-style:normal !important;
 letter-spacing:.1px;
 filter:none !important;
 cursor:pointer;
 transition:box-shadow .18s ease,background .18s ease,color .18s ease;
}

body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button:is([aria-pressed=true],.current) {
 --header-button-glaze:var(--header-metal-selected);
 background:var(--header-metal-selected) !important;
 box-shadow:var(--header-metal-inset) !important;
 color:#f2f8fc !important;
 text-shadow:0 1px 1px #000b !important;
}

/* The reference's icy halo is outside the dark rim, leaving the metal visible. */
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button:not(:disabled):hover,
body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]):hover {
 background:var(--header-button-glaze,var(--header-metal-face)) !important;
 box-shadow:var(--header-metal-rim),0 1px 0 1px #cdfaff40,
  0 3px 6px #a6ecff60,0 6px 12px #61ddff3b !important;
}
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button:not(:disabled):active,
body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]):not(:disabled):active {
 box-shadow:var(--header-metal-inset),0 0 9px #9beeff80 !important;
}
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button:focus-visible,
body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]):focus-visible {
 outline:2px solid #c9f6ff;
 outline-offset:3px;
}
body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
 :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar,
 .garage-custom-head,.selection-head,.extras-head,
 :where(body.mobile-layout) .main-leaderboard-bar) button:disabled,
body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]):disabled {
 opacity:.45;
 cursor:default;
}

/* Broad toolbar buttons get quieter lettering; compact tabs keep their sizes. */
body .speedshop-header button,
body :is(.garage-custom-head) button {
 font-size:9px !important;
 min-height:29px;
 padding:7px 15px;
 letter-spacing:.25px;
}
body .challenge-tabs button b {color:inherit;background:#07121e24;border-radius:999px}
body :where(#teamChallengeFlow) .online-wizard-head .wizard-silver {padding:9px 18px;font-size:10px!important}
body :is(#closeAppearanceExtras,#usedBuildClose) {
 width:28px;height:28px;padding:0;font:20px/24px Arial;font-size:20px!important;
}
/* Override the original aqua :hover rules, including their !important fill. */
body :is(#partsShopScreen,#customGarage)
 :is(.speedshop-header,.garage-custom-head) button:not(:disabled):hover {
 background:var(--header-button-glaze,var(--header-metal-face)) !important;
}

@media(max-width:650px) {
 body.mobile-layout :is(.used-lot-head,.challenge-toolbar) button {font-size:10px!important}
 body :where(#teamChallengeFlow) .online-wizard-head .wizard-silver {padding:8px 12px}
 body.mobile-layout :is(.garage-custom-head) button {
  font-size:10px!important;min-height:38px;padding:8px 11px;
 }
 body.mobile-layout .speedshop-header button {font-size:11px!important;min-height:38px;padding:8px 13px}
}
@media(prefers-reduced-motion:reduce) {
 body :is(#usedBuy,#usedBuildClose,:where(#usedSellView) button[type=submit]) {transition:none}
 body :is(.used-lot-head,.speedshop-header,.challenge-toolbar,
  :where(#teamChallengeFlow) .online-wizard-head,.team-flow-size-bar) button {transition:none}
}

/* ==== styles/mobile-login.css ==== */
/* Phone login only. The desktop and every other entry page retain their styles. */
@media (max-width:600px) {
 body.mobile-layout #entryScreen:has(#entryStage[data-page="login"]) {
  background:#040911;overflow-x:hidden;overflow-y:auto;scroll-padding-block:18px;
 }
 body.mobile-layout #entryStage[data-page="login"] {
  --login-gutter:18px;
  min-height:100svh;min-height:100dvh;width:100%;height:auto;
  padding:calc(20px + env(safe-area-inset-top)) max(var(--login-gutter),env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--login-gutter),env(safe-area-inset-left));
  background:radial-gradient(ellipse at 90% 88%,#09649826,transparent 44%),radial-gradient(ellipse at 9% 36%,#bd870b20,transparent 44%),linear-gradient(125deg,#04070c,#0a1420 50%,#040a12);
  isolation:isolate;
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-streaks {
  display:block!important;pointer-events:none;z-index:-1;
  background:repeating-linear-gradient(0deg,transparent 0 31px,#8ba5b908 32px,transparent 33px 55px),radial-gradient(ellipse at 50% 45%,transparent 34%,#0008 100%);
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-streaks:after {
  background:linear-gradient(0deg,transparent 24%,#a9c2d515 24.1%,transparent 24.5%,transparent 73%,#7f929f19 73.1%,transparent 73.5%);filter:none;
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-blue-band {
  display:block!important;z-index:-1;top:225px;left:-10%;width:120%;height:108px;border:0;
  background:repeating-linear-gradient(0deg,transparent 0 19px,#81cced0b 20px,transparent 21px 33px),linear-gradient(100deg,#07385512,#19739738 40%,#09364c1a);
  box-shadow:0 1px #77cfff0a,0 -1px #77cfff09;
  transform:skewY(-3deg);pointer-events:none;
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-blue-band:before {display:none}
 body.mobile-layout #entryStage[data-page="login"] .entry-brand {
  width:96%;max-width:400px;align-self:center;margin:0 0 12px;flex:none;aspect-ratio:3/1;
  filter:drop-shadow(0 4px 5px #000b);animation:phone-login-brand .45s ease-out both;
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-brand:before {
  content:'';position:absolute;left:38%;right:7%;bottom:15%;height:20%;background:#e9a92717;filter:blur(16px);z-index:-1;pointer-events:none;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-page {
  flex:1;gap:0;min-height:558px;animation:none;isolation:isolate;
 }
 body.mobile-layout #entryStage[data-page="login"] #entryLoginForm {
  order:0;z-index:2;max-width:420px;align-self:center;width:100%;padding:17px 18px 9px;
  border:1px solid #d8b65b;border-top-color:#f9e7a0;border-bottom-color:#69460e;border-radius:14px 4px 14px 14px;
  background:linear-gradient(113deg,#fff8c01a,transparent 44%),repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(155deg,#d8b85b 0,#bb942c 25%,#b08821 63%,#75501c 100%);
  box-shadow:inset 0 1px #fff5bf99,inset 0 -2px #3b270566,0 14px 26px #0009,0 0 20px #d4a52d0b;
  animation:phone-login-panel .45s .06s ease-out both;
 }
 body.mobile-layout #entryStage[data-page="login"] #entryLoginForm .panel-metal {
  display:block;inset:0 0 auto auto;width:84px;height:56px;border:0;border-radius:0 3px 0 0;
  background:linear-gradient(115deg,#aab9c225,transparent 65%),var(--nitto-banner-texture);
  clip-path:polygon(28% 0,100% 0,100% 100%,70% 100%);pointer-events:none;opacity:.85;
 }
 body.mobile-layout #entryStage[data-page="login"] #entryLoginForm h1 {
  position:relative;gap:10px;margin:0 0 15px;padding:0 0 12px;min-height:51px;
  border-bottom:1px solid #33250f66;box-shadow:0 1px #ffeda52e;
  font:italic 900 clamp(25px,6.7vw,29px)/1.1 Arial,sans-serif;letter-spacing:1px;color:#faf6e9;
  text-shadow:0 2px 2px #38250699;
 }
 body.mobile-layout #entryStage[data-page="login"] #entryLoginForm h1 img {
  width:38px;height:40px;flex:none;transform:rotate(-8deg);filter:drop-shadow(0 3px 2px #33200e80);
 }
 body.mobile-layout #entryStage[data-page="login"] .login-fields label {
  margin:0 0 16px;font:900 12px/1.2 Arial,sans-serif;letter-spacing:1px;color:#211b12;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-fields label:last-child {margin-bottom:0}
 body.mobile-layout #entryStage[data-page="login"] .login-fields input {
  height:50px;padding:0 13px;margin-top:6px;border:1px solid #6d6248;border-radius:10px;
  font:16px/1.3 Arial,sans-serif;letter-spacing:0;color:#101c25;
  background:linear-gradient(#d5dce0,#f9fbfc 24%,#eef2f4 83%,#d6dfe5);
  box-shadow:inset 0 2px 4px #14222f2b,0 1px #ffeaaa66;
  transition:border-color .16s,box-shadow .16s;scroll-margin-block:24px;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-fields input:focus {
  outline:none;border-color:#fff3aa;background:#fbfcfd;
  box-shadow:0 0 0 2px #ffdb7099,0 0 12px #ffd55435,inset 0 1px 3px #14222f22;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-actions {margin-top:19px;gap:2px}
 body.mobile-layout #entryStage[data-page="login"] .login-actions button:first-child {
  height:51px;min-height:51px;width:100%;padding:0 12px;border:1px solid #263842;border-top-color:#effaff;border-bottom-color:#354450;border-radius:10px;
  background:linear-gradient(180deg,#f7fbff 0,#d7e2e9 12%,#bbc9d3 47%,#a1b1be 51%,#d0dce3 78%,#899aa7 100%);
  box-shadow:inset 0 1px #fff,inset 1px 0 #f2faff66,inset 0 -2px #52667666,0 4px 7px #34260966;
  font:italic 900 17px/1 Arial,sans-serif!important;letter-spacing:1.5px;color:#14222f;text-shadow:0 1px #ffffff99;
  transition:transform .12s,filter .12s,box-shadow .12s;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-actions button[data-entry-go="recover"] {
  min-height:44px;height:44px;padding:6px;border:0;border-radius:4px;background:none;box-shadow:none;
  color:#f7ecd0;font:700 12px/1.3 Arial,sans-serif!important;letter-spacing:.8px;text-shadow:0 1px #39260088;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-actions button[data-entry-go="recover"]:active {color:white;background:#25190522;filter:none}
 body.mobile-layout #entryStage[data-page="login"] .switch-new {
  z-index:2;order:1;align-self:flex-start;width:calc(100% - 16px);max-width:404px;height:66px;min-height:66px;margin:14px 0 0;padding:10px 14px;
  justify-content:flex-start;gap:12px;border:1px solid #4b697a;border-top-color:#8a9ca64d;border-radius:6px;
  background:linear-gradient(112deg,#c7dce91a 0,transparent 46%),linear-gradient(165deg,#243541,#0e1b28 58%,#102337);
  box-shadow:inset 0 1px #b5d9e81c,inset 0 -1px #0008,0 7px 14px #0008;
  animation:phone-login-panel .45s .14s ease-out both;transition:transform .12s,box-shadow .16s;
 }
 body.mobile-layout #entryStage[data-page="login"] .switch-new>span:not(.turn-arrow) {
  font-size:0;line-height:0;text-shadow:none;
 }
 body.mobile-layout #entryStage[data-page="login"] .switch-new>span:not(.turn-arrow):before {
  content:'NEW RACER?';display:block;font:700 10px/1.4 Arial,sans-serif;letter-spacing:1.6px;color:#92b3c8;margin-bottom:3px;
 }
 body.mobile-layout #entryStage[data-page="login"] .switch-new>span:not(.turn-arrow):after {
  content:'CREATE AN ACCOUNT';display:block;font:900 15px/1.2 Arial,sans-serif;letter-spacing:.3px;color:#f2f6fa;
 }
 body.mobile-layout #entryStage[data-page="login"] .switch-new img {width:39px;height:42px;object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}
 body.mobile-layout #entryStage[data-page="login"] .switch-new:after {
  content:'›';margin-left:auto;font:400 32px/1 Arial,sans-serif;color:#b9d2e2;text-shadow:0 1px #000;pointer-events:none;
 }
 body.mobile-layout #entryStage[data-page="login"] .helmet-returning {
  position:absolute;inset:auto -56px -22px auto;order:initial;margin:0;width:clamp(200px,56vw,240px);height:auto;aspect-ratio:1;z-index:0;
  transform:rotate(-3deg);pointer-events:none;filter:drop-shadow(-6px 12px 10px #000a) drop-shadow(0 0 13px #388fd220);
  animation:phone-login-helmet .55s .12s ease-out both;
 }
 body.mobile-layout #entryStage[data-page="login"] .entry-preview-note {
  z-index:3;flex:none;width:100%;margin:18px 0 0;font:9px/1.6 Arial,sans-serif;letter-spacing:1.2px;color:#a7b3bf;opacity:.7;
 }
 body.mobile-layout #entryStage[data-page="login"] .login-actions button:focus-visible,
 body.mobile-layout #entryStage[data-page="login"] .switch-new:focus-visible {outline:2px solid #fff0aa;outline-offset:3px}
 body.mobile-layout #entryStage[data-page="login"] .login-actions button:first-child:active {
  transform:translateY(1px);filter:brightness(.95);box-shadow:inset 0 2px 4px #182f4555,0 1px 3px #34260955;
 }
 body.mobile-layout #entryStage[data-page="login"] .switch-new:active {
  transform:translateY(1px);box-shadow:inset 0 2px 5px #0008,0 0 10px #54bbd425;
 }
 @media(hover:hover) {
  body.mobile-layout #entryStage[data-page="login"] .login-actions button:first-child:hover {filter:brightness(1.06)}
  body.mobile-layout #entryStage[data-page="login"] .switch-new:hover {box-shadow:inset 0 1px #c3e8f033,0 7px 14px #0008,0 0 12px #58c4ec25}
  body.mobile-layout #entryStage[data-page="login"] .switch-new:hover img {transform:none}
 }
 @media(max-height:740px) {
  body.mobile-layout #entryStage[data-page="login"] {padding-top:calc(14px + env(safe-area-inset-top))}
  body.mobile-layout #entryStage[data-page="login"] .entry-brand {width:88%;margin-bottom:8px}
  body.mobile-layout #entryStage[data-page="login"] .login-page {min-height:495px}
  body.mobile-layout #entryStage[data-page="login"] #entryLoginForm {padding-top:13px}
  body.mobile-layout #entryStage[data-page="login"] #entryLoginForm h1 {margin-bottom:12px;padding-bottom:9px}
  body.mobile-layout #entryStage[data-page="login"] .login-fields label {margin-bottom:13px}
  body.mobile-layout #entryStage[data-page="login"] .login-actions {margin-top:15px}
  body.mobile-layout #entryStage[data-page="login"] .helmet-returning {width:180px;right:-39px;bottom:-14px}
 }
 /* Keyboard-sized viewports keep the form in normal scroll flow. */
 @media(max-height:560px) {
  body.mobile-layout #entryStage[data-page="login"]:focus-within .helmet-returning {opacity:0;animation:none}
 }
 @media(prefers-reduced-motion:reduce) {
  body.mobile-layout #entryStage[data-page="login"] :is(.entry-brand,#entryLoginForm,.switch-new,.helmet-returning) {animation:none;transition:none}
  body.mobile-layout #entryStage[data-page="login"] .login-actions button,
  body.mobile-layout #entryStage[data-page="login"] .login-fields input {transition:none}
 }
}
@keyframes phone-login-brand {from{opacity:0;translate:0 -9px}to{opacity:1;translate:0 0}}
@keyframes phone-login-panel {from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes phone-login-helmet {from{opacity:0;translate:14px 10px}to{opacity:1;translate:0 0}}

/* ==== styles/mobile-home.css ==== */
/* The logged-in phone home screen has its own graphite finish. */
@media(max-width:600px) {
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) {
  --phone-foot:108px;background:#080b0f;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-topbar {
  background:linear-gradient(113deg,transparent 47%,#b7c3cb12 47.5%,transparent 80%),var(--nitto-banner-texture);
  border-bottom:1px solid #b79a47;box-shadow:inset 0 1px #b2c0ca26,0 3px 8px #0009;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-page-title {color:#c3cbd0;letter-spacing:1.4px}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-menu-button {
  border:1px solid #5c666d;border-bottom-color:#12181d;border-radius:5px;
  background:linear-gradient(#30383e,#13181d);box-shadow:inset 0 1px #cad6df20,0 2px 3px #0005;color:#e8edf1;
 }
 body.mobile-layout #mainScreen {background:#0d1116;scrollbar-width:thin;scrollbar-color:#424c55 #0e1216}
 body.mobile-layout #mainScreen .main-stage {background:#0d1116}
 body.mobile-layout #mainScreen .main-original-feature {
  height:326px;isolation:isolate;border-bottom:1px solid #727e8738;
  background:radial-gradient(ellipse at 68% 65%,#346f802e,transparent 48%),linear-gradient(170deg,#090c11 5%,#1a2026 55%,#151b22 85%,#080d11);
 }
 body.mobile-layout #mainScreen .main-original-feature:before {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:repeating-linear-gradient(0deg,transparent 0 35px,#d3e2eb06 36px,transparent 37px 53px),linear-gradient(0deg,#0005,transparent 48%);
 }
 body.mobile-layout #mainScreen .mobile-home-hero {padding:24px 22px}
 body.mobile-layout #mainScreen .mobile-home-hero>span {font:700 9px/1.2 Arial;letter-spacing:1.9px;color:#a1acb5}
 body.mobile-layout #mainScreen .mobile-home-hero h1 {font:italic 900 29px/1.06 Arial;margin:11px 0;letter-spacing:-.8px;color:#eff2f5;text-shadow:0 2px 3px #0008}
 body.mobile-layout #mainScreen .mobile-home-hero h1 em {color:#edc75b}
 body.mobile-layout #mainScreen .mobile-home-hero:before {
  content:'';position:absolute;left:16%;right:3%;bottom:56px;height:28px;border-radius:50%;
  background:radial-gradient(ellipse,#000c,transparent 72%);filter:blur(8px);pointer-events:none;
 }
 body.mobile-layout #mainScreen .mobile-home-hero>img {
  bottom:26px;filter:drop-shadow(0 9px 5px #000b);z-index:1;
 }
 body.mobile-layout #mainScreen #mobileHomeRace {
  z-index:3;min-height:44px;height:44px;padding:0 15px;border:1px solid #6195ab;border-top-color:#99d1e0;border-bottom-color:#041623;border-radius:4px;
  background:linear-gradient(180deg,#255d73,#174157 46%,#0b2e41 50%,#194b60);
  box-shadow:inset 0 1px #c9f7ff33,inset 0 -2px #05111e88,0 4px 7px #0008,0 0 10px #38aed518;
  font:italic 900 12px/1 Arial;letter-spacing:.5px;color:#edf8ff;
  transition:transform .12s,filter .12s,box-shadow .12s;
 }
 body.mobile-layout #mainScreen #mobileHomeRace:active {
  transform:translateY(1px);filter:brightness(.88);box-shadow:inset 0 2px 4px #0008,0 1px 3px #0006;
 }
 body.mobile-layout #mainScreen .main-leaderboard-bar {
  min-height:62px;padding:9px 12px;gap:5px;border-top:1px solid #d2dce317;border-bottom:1px solid #000;
  background:linear-gradient(114deg,transparent 48%,#c9d9e519 48.5%,transparent 90%),linear-gradient(#242b31,#0a0e12)!important;
  box-shadow:inset 0 1px #eef6fc0c,0 3px 5px #0006;
 }
 body.mobile-layout #mainScreen .main-leaderboard-bar button {
  position:relative;height:43px;min-height:43px;border:1px solid #020406!important;border-radius:3px!important;
  background:linear-gradient(114deg,#ffffff08 0,transparent 65%),linear-gradient(#30383e,#151a20)!important;
  box-shadow:inset 0 1px #d8e2e22e,inset 0 -1px #000a,0 1px #7c89951a!important;
  font:900 10px/1.2 Arial!important;letter-spacing:.25px;color:#b5c0c9!important;padding:5px 2px;text-shadow:0 1px #000;
 }
 body.mobile-layout #mainScreen .main-leaderboard-bar button[aria-pressed="true"] {
  background:linear-gradient(114deg,#9ccfdf18,transparent 78%),linear-gradient(#36434d,#1b262f)!important;
  color:#f1f5f7!important;border-bottom-color:#74cee2!important;
  box-shadow:inset 0 1px #d8edf838,inset 0 -2px #54c1d7,0 2px 8px #39b4d21b!important;
 }
 body.mobile-layout #mainScreen .main-leaderboard-bar button:active {filter:brightness(.85)!important;transform:translateY(1px)}
 body.mobile-layout #mainScreen .main-leaderboard-description {
  padding:14px 18px;border-block:1px solid #717e881f;
  background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at 0 50%,#249bbb0d,transparent 65%),linear-gradient(#171c22,#10151a);
 }
 body.mobile-layout #mainScreen .main-leaderboard-description p {font:12px/1.5 Arial;color:#c0c7ce;margin:0 0 6px}
 body.mobile-layout #mainScreen .main-leaderboard-description small {font:9px/1.3 Arial;color:#788791}
 body.mobile-layout #mainScreen .main-leaderboard-table {padding-bottom:8px;background:#0b0f13}
 body.mobile-layout #mainScreen .leaderboard-table-head {
  height:42px;padding:14px 16px 12px 47px;grid-template-columns:1fr 1.4fr;
  background:linear-gradient(113deg,transparent 50%,#bdcedc1a 50.5%,transparent 90%),linear-gradient(#191f25,#05080b)!important;
  border-bottom:1px solid #54616d66;font:900 10px/1.2 Arial;letter-spacing:.8px;color:#d1dbe1;
 }
 body.mobile-layout #mainScreen .leaderboard-row {
  min-height:60px;padding:12px 16px;gap:8px;grid-template-columns:22px minmax(0,1fr) minmax(0,1.4fr);
  background:linear-gradient(110deg,#181e24,#12171c);border-bottom:1px solid #56697738;color:#e0e5e9;font:12px/1.45 Arial;
 }
 body.mobile-layout #mainScreen .leaderboard-row:nth-child(even) {background:linear-gradient(110deg,#22282e,#1a2026)}
 body.mobile-layout #mainScreen .leaderboard-row span {min-width:0;overflow-wrap:anywhere}
 body.mobile-layout #mainScreen .leaderboard-row span:first-child {font:900 12px Arial;color:#81b7c6}
 body.mobile-layout #mainScreen .leaderboard-row span:nth-child(2) {font-weight:700;color:#eef2f5}
 body.mobile-layout #mainScreen .leaderboard-row span:last-child {font-size:11px;color:#b0bdc6}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock {
  background:linear-gradient(#171c21,#060a0f);border-top:1px solid #536572;box-shadow:0 -5px 14px #0008;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-selected {
  height:52px;padding:4px 16px;justify-content:flex-start;gap:12px;border-top:1px solid #76b9cd59;border-bottom:1px solid #000;
  background:linear-gradient(110deg,#afc4d710,transparent 60%),var(--nitto-banner-texture);
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-selected img {width:66px;height:42px;filter:drop-shadow(0 2px 2px #0008);flex:none}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-selected span {font:700 8px/1.4 Arial;letter-spacing:1px;color:#e4bf52;min-width:0}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-selected strong {display:block;margin:3px 0 0;font:900 11px/1.2 Arial;color:#e5ebef;letter-spacing:.2px}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links {height:56px}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button {
  position:relative;border-top:2px solid transparent;border-radius:0;color:#84939e;font:700 9px/1.2 Arial;letter-spacing:.8px;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button b {color:#a8b5bf;font-size:23px}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button[aria-current="page"] {
  background:radial-gradient(ellipse at 50% 0,#2886a326,transparent 85%);border-top:2px solid transparent;color:#82d7ea;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button[aria-current="page"]:before {
  content:'';position:absolute;top:-2px;left:23%;right:23%;height:2px;background:#74cfe6;box-shadow:0 0 6px #50bada55;
 }
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button[aria-current="page"] b {color:#7cd9ef}
 body.mobile-layout:has(:is(#mainScreen,#challengesScreen):not([hidden])) .mobile-dock-links button:active {background:#c5d8e110;transform:translateY(1px)}
 @media(hover:hover) {
  body.mobile-layout #mainScreen .leaderboard-row:hover {background:#29333b}
  body.mobile-layout #mainScreen .main-leaderboard-bar button:hover {filter:brightness(1.12)!important}
  body.mobile-layout #mainScreen #mobileHomeRace:hover {filter:brightness(1.12)}
 }
 @media(prefers-reduced-motion:reduce) {body.mobile-layout #mainScreen #mobileHomeRace {transition:none}}
}

/* ==== styles/mobile-challenges.css ==== */
/* Compact phone inbox. Matchup pages and all desktop rules remain intact. */
@media(max-width:600px) {
 body.mobile-layout #challengesScreen {background:#10151a;overflow-x:hidden;scrollbar-color:#424e58 #11161a}
 body.mobile-layout #challengesScreen .challenges-stage {background:#10151a}
 body.mobile-layout #challengeInbox .challenge-intro {
  min-height:194px;height:194px;padding:24px 18px 17px;border-top:1px solid #ecce7e66;border-bottom:1px solid #1c160c;
  background:linear-gradient(115deg,#ffebac0d,transparent 55%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 5px),linear-gradient(140deg,#a07b2e 0,#7e5c21 42%,#4b3519 100%);
  box-shadow:inset 0 1px #ffe5a92b,0 4px 10px #0006;
 }
 body.mobile-layout #challengeInbox .challenge-intro:before {
  display:block;inset:0 0 0 auto;width:39%;border-radius:0;box-shadow:inset 1px 0 #c7a76422;
  clip-path:polygon(23% 0,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#2e2922,#16191b 90%);
 }
 body.mobile-layout #challengeInbox .challenge-intro:after {display:none}
 body.mobile-layout #challengeInbox .challenge-intro h1 {font:italic 900 clamp(25px,6.5vw,28px)/1 Arial;padding:0;width:66%;letter-spacing:.3px;text-shadow:0 2px 3px #0007}
 body.mobile-layout #challengeInbox .challenge-intro h1 span {font-size:18px;letter-spacing:.8px;margin-top:5px}
 body.mobile-layout #challengeInbox .challenge-intro>p {width:62%;max-width:230px;margin:15px 0 0;font:11px/1.5 Arial;color:#e1d6bb}
 body.mobile-layout #challengeInbox .challenge-direction {width:68px;height:38px;right:18px;top:130px;filter:drop-shadow(0 2px 2px #0006)}
 body.mobile-layout #challengeInbox .challenge-count {right:16px;top:24px;width:92px;text-align:right}
 body.mobile-layout #challengeInbox .challenge-count strong {font:italic 900 46px/1 Arial;color:#f2db9c;text-shadow:0 2px 3px #0008;font-variant-numeric:tabular-nums}
 body.mobile-layout #challengeInbox .challenge-count span {font:700 8px/1.4 Arial;letter-spacing:.65px;margin-top:7px;color:#d9d0ba}
 body.mobile-layout #challengeInbox .challenge-pistons {width:102px;height:99px;right:-9px;bottom:-27px;color:#d9c79d;opacity:.08}
 body.mobile-layout #challengeInbox .challenge-mailbox {
  padding:0 14px 24px;
  background:repeating-linear-gradient(0deg,transparent 0 47px,#dae9f204 48px,transparent 49px 78px),radial-gradient(ellipse at 90% 10%,#28556916,transparent 48%),linear-gradient(#171e25,#0a0e13 54%,#141a20);
 }
 body.mobile-layout #challengeInbox .challenge-mailbox>.challenge-toolbar {margin:0 -14px 0;min-height:62px;height:62px;padding:8px 12px;border-bottom:1px solid #3f4d5833}
 body.mobile-layout #challengeInbox .challenge-tabs {gap:5px}
 body.mobile-layout #challengeInbox .challenge-tabs button {
  min-height:46px;height:46px;border:1px solid #040608!important;border-radius:3px!important;
  background:linear-gradient(113deg,#d6e0e80b,transparent 75%),linear-gradient(#2b333b,#10171d)!important;
  box-shadow:inset 0 1px #ecf5fb2e,inset 0 -1px #0009,0 1px #afb8bf14!important;
  font:900 11px/1.2 Arial!important;letter-spacing:.6px;color:#aab7c1!important;
 }
 body.mobile-layout #challengeInbox .challenge-tabs button b {font:900 10px/1 Arial;padding:3px 5px;margin-left:5px;border:1px solid #d1dde412;background:#0004;color:#c8d2d9}
 body.mobile-layout #challengeInbox .challenge-tabs button[aria-pressed="true"] {
  background:linear-gradient(113deg,#d6e0e818,transparent 75%),linear-gradient(#353b3d,#1c2225)!important;
  border-bottom-color:#d3ad55!important;color:#fff1cc!important;
  box-shadow:inset 0 1px #f9edd340,inset 0 -2px #c6a354,0 2px 8px #d5a83a14!important;
 }
 body.mobile-layout #challengeInbox .challenge-list-head {height:38px;margin:0 2px;padding:0;gap:10px;color:#9baab6;font:700 9px/1 Arial;letter-spacing:1.3px}
 body.mobile-layout #challengeInbox .challenge-list-head:after {content:'';height:1px;flex:1;background:linear-gradient(90deg,#79929e42,transparent)}
 body.mobile-layout #challengeInbox .challenge-list {padding:0 1px 0 9px;overflow:visible}
 body.mobile-layout #challengeInbox .challenge-row {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:108px 56px 22px;gap:5px 10px;align-items:center;
  min-height:224px;padding:13px 13px 12px;margin-bottom:14px;border:1px solid #52616d55;border-radius:11px;
  background:linear-gradient(113deg,transparent 52%,#ffffff08 52.3%,transparent 96%),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(155deg,#11151a,#030609 67%,#0c1116);
  box-shadow:inset 0 1px #d3e6f312,inset 0 -1px #000,0 5px 10px #0008,0 0 8px #2f7c9d09;
 }
 body.mobile-layout #challengeInbox .challenge-row:before {left:13px;right:13px;background:linear-gradient(90deg,#c5d4de22,transparent)}
 body.mobile-layout #challengeInbox .challenge-row-car {grid-column:1;grid-row:1;width:100%;height:102px;align-self:center}
 body.mobile-layout #challengeInbox .challenge-row-car img {width:calc(100% + 36px);height:107px;left:-25px;top:4px;bottom:auto;object-fit:contain;filter:drop-shadow(0 8px 4px #000b)}
 body.mobile-layout #challengeInbox .challenge-row-person {grid-column:2;grid-row:1;gap:5px}
 body.mobile-layout #challengeInbox .challenge-racer-identity {gap:5px}
 body.mobile-layout #challengeInbox .challenge-racer-identity>strong {font:900 15px/1.2 Arial;color:#f2f4f6;letter-spacing:-.3px}
 body.mobile-layout #challengeInbox .challenge-racer-identity>img {width:20px;height:22px}
 body.mobile-layout #challengeInbox .challenge-racer-meta {font:10px/1.3 Arial;color:#8f9faa;gap:5px;flex-wrap:wrap}
 body.mobile-layout #challengeInbox .challenge-racer-meta>b {font:900 7px/1.3 Arial;letter-spacing:.4px;padding:2px 4px;background:#384b552f;color:#9fbfce;border:1px solid #8db4c216}
 body.mobile-layout #challengeInbox .challenge-row-car-name {font:700 11px/1.4 Arial;color:#cbd5dd;white-space:normal;margin-top:1px}
 body.mobile-layout #challengeInbox .challenge-row-time {font:8px/1.3 Arial;letter-spacing:.35px;color:#8497a5}
 body.mobile-layout #challengeInbox .challenge-row-terms {grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;gap:10px;align-self:stretch;padding-top:10px;border-top:1px solid #748c9b2b;box-shadow:0 -1px #0008}
 body.mobile-layout #challengeInbox .challenge-row-type {justify-self:start;align-self:center}
 body.mobile-layout #challengeInbox .challenge-row-type img {width:62px;height:39px;object-fit:cover}
 body.mobile-layout #challengeInbox .challenge-row-wager {text-align:right;align-self:center}
 body.mobile-layout #challengeInbox .challenge-row-wager small {font:700 8px/1.4 Arial;letter-spacing:1px;color:#879eaa}
 body.mobile-layout #challengeInbox .challenge-row-wager strong {font:900 16px/1.4 Arial;letter-spacing:.2px}
 /* Flatten the existing status wrapper into the card grid; handlers stay on the card. */
 body.mobile-layout #challengeInbox .challenge-row-state {display:contents}
 body.mobile-layout #challengeInbox .challenge-row-state .challenge-status {grid-column:1;grid-row:3;justify-self:start;font:700 10px/1.4 Arial;text-align:left;padding:0;color:#c1d3df;white-space:nowrap}
 body.mobile-layout #challengeInbox .challenge-status[data-status="running"] {color:#c5e2ef}
 body.mobile-layout #challengeInbox .challenge-status[data-status="pending"] {color:#e6c679}
 body.mobile-layout #challengeInbox .challenge-status[data-status="ready"] {color:#a4ebc1}
 body.mobile-layout #challengeInbox .challenge-status[data-status="declined"] {color:#e4a0a0}
 body.mobile-layout #challengeInbox .challenge-status[data-status="completed"] {color:#b7c8d6}
 body.mobile-layout #challengeInbox .challenge-row-open {grid-column:2;grid-row:3;justify-self:end;font:900 9px/1.4 Arial;letter-spacing:.8px;color:#adcadb}
 body.mobile-layout #challengeInbox .challenge-row[data-status="completed"] {background:linear-gradient(113deg,transparent 52%,#c6d4df08 52.3%,transparent 96%),linear-gradient(#15191e,#0d1115);border-color:#5d666c40}
 body.mobile-layout #challengeInbox .challenge-row:active {transform:translateY(1px);border-color:#9baebc88;box-shadow:inset 0 2px 5px #000a,0 2px 4px #0006}
 body.mobile-layout #challengeInbox .challenge-row:active .challenge-row-open {color:#f0faff}
 body.mobile-layout #challengeInbox .challenge-preview-note {font:7px/1.5 Arial;color:#697f8e;letter-spacing:.5px;margin:17px 10px 0}
 @media(hover:hover) {
  body.mobile-layout #challengeInbox .challenge-row:hover {border-color:#7898a766}
  body.mobile-layout #challengeInbox .challenge-row:hover .challenge-row-car img {transform:none}
 }
}

/* ==== styles/mobile-race.css ==== */
/* Phone racing overlay, including rotated phones. Desktop dashboard is untouched. */
@media(max-width:600px), (max-width:1000px) and (max-height:600px) {
 body.mobile-layout.phone-racing .mobile-topbar {
  height:44px;background:linear-gradient(115deg,transparent 40%,#ffffff0b 40.5%,transparent 73%),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(#20272b,#080c0f);
  border-bottom:1px solid #bca36770;box-shadow:inset 0 1px #d7e6ef22,0 3px 12px #0005;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));
 }
 body.mobile-layout.phone-racing .mobile-brand img {width:110px;height:35px;object-fit:contain}
 body.mobile-layout.phone-racing .mobile-top-gear {display:flex;align-items:center;gap:8px;font:900 9px Arial;letter-spacing:1px;color:#8f9fa9}
 body.mobile-layout.phone-racing .mobile-top-gear strong {font:italic 900 28px/1 Arial;color:#fff0bd;min-width:30px;text-align:center;text-shadow:0 0 9px #efc45420}
 body.mobile-layout.phone-racing :is(#mobileRaceSettings,#mobileMenuButton) {height:34px;width:38px;border:1px solid #020609;border-radius:4px;background:linear-gradient(#343e44,#11191e);box-shadow:inset 0 1px #e0efff30,inset 0 -1px #000a;color:#cad7e0}
 body.mobile-layout.phone-racing .mobile-race-hud {top:calc(56px + env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));height:76px;gap:0;align-items:flex-start;justify-content:flex-end}
 body.mobile-layout.phone-racing #mobileRaceHud :is(.mobile-rpm-card,.mobile-speed-card,.mobile-time-card) {
  position:relative;height:65px;border:0;border-top:1px solid #b2c6d966;border-bottom:1px solid #081016;border-radius:0;background:linear-gradient(115deg,#e4f1ff0b,transparent 65%),linear-gradient(#182127eb,#070d12e6);box-shadow:inset 0 1px #edf6ff10,0 4px 8px #0004;color:#eaf0f4;
 }
 body.mobile-layout.phone-racing #mobileRaceHud .mobile-rpm-card {width:154px;padding:8px 12px;border-left:1px solid #697d8d70;border-radius:5px 0 0 5px}
 body.mobile-layout.phone-racing .mobile-rpm-top {font:900 9px Arial;letter-spacing:.6px;color:#a5b6c3}
 body.mobile-layout.phone-racing .mobile-rpm-top strong {font:italic 900 18px/1 Arial;color:#f1f4f7;font-variant-numeric:tabular-nums}
 body.mobile-layout.phone-racing .mobile-rpm-track {height:7px;margin-top:7px;background:#000a;border:1px solid #6f85933b;border-radius:1px;overflow:hidden}
 body.mobile-layout.phone-racing #mobileRpmBar {background:linear-gradient(90deg,#61a8bc,#d7ddac 70%,#e6aa44 84%,#f35d46);box-shadow:0 0 6px #5cacbd55}
 body.mobile-layout.phone-racing .mobile-shift-lamps {margin-top:6px;gap:4px;display:flex}
 body.mobile-layout.phone-racing .mobile-shift-lamps i {height:4px;width:22px;border-radius:1px;background:#293039;box-shadow:inset 0 1px #fff1}
 body.mobile-layout.phone-racing .mobile-rpm-card.shift-ready {border-top-color:#ffd26c!important}
 body.mobile-layout.phone-racing #mobileRaceHud .mobile-speed-card {width:74px;padding:6px 8px;border-left:1px solid #c4d7e522;box-shadow:inset 1px 0 #0009,0 4px 8px #0004}
 body.mobile-layout.phone-racing .mobile-speed-card strong {display:block;font:italic 900 31px/1.15 Arial;font-variant-numeric:tabular-nums}
 body.mobile-layout.phone-racing .mobile-speed-card span {font:900 8px Arial;letter-spacing:1.5px;color:#9dacb7}
 body.mobile-layout.phone-racing #mobileRaceHud .mobile-time-card {width:95px;border-left:1px solid #c4d7e522;border-right:1px solid #697d8d70;border-radius:0 5px 5px 0;padding:13px 9px;gap:9px;font:900 9px Arial;letter-spacing:.2px;color:#99acb9}
 body.mobile-layout.phone-racing .mobile-time-card b {color:#e3edf4;font-variant-numeric:tabular-nums}
 body.mobile-layout.phone-racing #mobileRaceHud .mobile-stage-card {position:absolute;left:0!important;top:0!important;width:166px;height:73px;padding:8px 10px 31px;border:1px solid #d4bb7338;border-radius:4px;background:linear-gradient(120deg,#191e22d9,#080b0fbb);box-shadow:inset 0 1px #f1dc9925,0 4px 10px #0004;display:flex;justify-content:flex-start;gap:18px}
 body.mobile-layout.phone-racing .mobile-stage-item {display:flex;flex-direction:row;align-items:center;gap:5px;font:900 8px Arial;letter-spacing:.6px;color:#b0b8b9}
 body.mobile-layout.phone-racing .mobile-stage-item i {width:9px;height:9px;background:#403b22;border:1px solid #b2a06566;box-shadow:inset 0 1px #fff2}
 body.mobile-layout.phone-racing .mobile-stage-item i.on {background:#f3d577;box-shadow:0 0 9px #e9c15788}
 body.mobile-layout.phone-racing .mobile-stage-message {position:absolute;bottom:9px;left:10px;right:8px;font:italic 900 17px/1 Arial;color:#f5d77f;letter-spacing:.4px;text-align:left;display:flex;align-items:center;gap:8px}
 body.mobile-layout.phone-racing .mobile-stage-card[data-guidance="up"] .mobile-stage-message:before {content:'↑';font:900 24px/1 Arial;animation:phoneStageUp .8s ease-in-out infinite}
 body.mobile-layout.phone-racing .mobile-stage-card[data-guidance="back"] .mobile-stage-message:before {content:'↓';font:900 24px/1 Arial;animation:phoneStageBack .8s ease-in-out infinite}
 body.mobile-layout.phone-racing .mobile-stage-card[data-guidance="hold"] .mobile-stage-message {color:#b5ead1;font-size:16px}
 body.mobile-layout.phone-racing .mobile-stage-card[data-guidance="hold"] .mobile-stage-message:before {content:'■';font:900 12px Arial;color:#77c9a8}
 body.mobile-layout.phone-racing .tree {top:calc(52px + env(safe-area-inset-top));transform:scale(.63)}
 body.mobile-layout.phone-racing :is(#stageArrow,#msg) {display:none!important}
 body.mobile-layout.phone-racing .mobile-shift-stack {left:max(16px,env(safe-area-inset-left));bottom:calc(34px + env(safe-area-inset-bottom));width:82px;gap:7px}
 body.mobile-layout.phone-racing .mobile-shift {width:82px;height:58px!important;border-radius:6px;border:1px solid #75899788;background:linear-gradient(135deg,#dbe7ef1a,transparent 65%),linear-gradient(#29363de8,#091117e8);box-shadow:inset 0 1px #eaf6ff40,inset 0 -3px #0008,0 4px 9px #0007;opacity:1;color:#e8f0f6}
 body.mobile-layout.phone-racing .mobile-shift span {font:900 10px Arial;letter-spacing:1.3px}
 body.mobile-layout.phone-racing .mobile-shift b {font:900 29px/1 Arial;color:#bed8e8}
 body.mobile-layout.phone-racing .mobile-shift:active {background:linear-gradient(#325567,#142d3b);box-shadow:inset 0 2px 5px #0009,0 0 10px #75bbd333}
 body.mobile-layout.phone-racing .mobile-brake-pad {left:calc(max(16px,env(safe-area-inset-left)) + 94px);bottom:calc(34px + env(safe-area-inset-bottom));height:58px;width:65px;border:1px solid #ae80745f;border-radius:6px;background:linear-gradient(#342e2ee6,#171014e6);box-shadow:inset 0 1px #f2c4b426,inset 0 -3px #0008,0 4px 9px #0005;opacity:1}
 body.mobile-layout.phone-racing .mobile-brake-pad span {font:900 10px Arial;letter-spacing:.6px}
 body.mobile-layout.phone-racing .mobile-brake-pad.braking {background:linear-gradient(#764238,#351b18);border-color:#e5b5a8;box-shadow:inset 0 2px 5px #0008,0 0 12px #e5947444}
 body.mobile-layout.phone-racing .mobile-gas-button {right:max(18px,env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));width:112px;height:112px;border-radius:12px;border:1px solid #96afb98c;background:linear-gradient(135deg,#e5f5ff18,transparent 65%),linear-gradient(#25363ee8,#0a141be8);box-shadow:inset 0 1px #f0faff55,inset 0 -4px #0008,0 6px 16px #0008;opacity:1;color:#ecf5f6}
 body.mobile-layout.phone-racing .mobile-gas-button span {font:italic 900 19px Arial;letter-spacing:1.2px}
 body.mobile-layout.phone-racing .mobile-gas-button b {color:#bdd9e0}
 body.mobile-layout.phone-racing .mobile-gas-button.pressed {background:linear-gradient(#295c61ee,#153339ee);box-shadow:inset 0 3px 8px #000a,0 0 16px #55c0c63a;border-color:#9ededa}
 body.mobile-layout.phone-racing .mobile-control-head {inset:auto max(16px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px,env(safe-area-inset-left));height:25px;padding:0 80px;border-top:1px solid #d1e6f329;background:linear-gradient(90deg,#05090b44,#081015d9,#05090b44)}
 body.mobile-layout.phone-racing #mobileInstruction {font:900 10px/1.2 Arial;color:#d2dce4;letter-spacing:.4px}
 body.mobile-layout.phone-racing .mobile-reset {left:0;bottom:0;min-height:25px;padding:3px 8px;font:900 9px Arial;border:0;border-right:1px solid #a3bed52b;border-radius:0;background:#0c141ab3;box-shadow:none;color:#8fa5b6}
 body.mobile-layout.phone-racing .mobile-rotate {background:radial-gradient(ellipse at 50% 45%,#1c303b,#080d12 75%)}
 body.mobile-layout.phone-racing .mobile-rotate button {border-radius:4px;border:1px solid #7f97a870;background:linear-gradient(#354650,#15222b);box-shadow:inset 0 1px #dcedf833;color:#f2f5f7;font-weight:900}
 body.mobile-layout.phone-racing #mobileRotateBack {background:linear-gradient(#242c32,#11191e)}
 body.mobile-layout.phone-racing #graphicsPanel {background:linear-gradient(125deg,#343b40,#10171d);border:1px solid #8193a266;border-radius:6px}
 @keyframes phoneStageUp {0%,100%{transform:translateY(3px);opacity:.65}50%{transform:translateY(-3px);opacity:1}}
 @keyframes phoneStageBack {0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(3px);opacity:1}}
}

/* Phone race results now live in styles/race-result.css (v41). */


/* ==== styles/mobile-menu.css ==== */
/* Existing mobile shell decides phone/rotated-phone mode. No desktop nav selectors. */
body.mobile-layout .mobile-nav-scrim {position:fixed;inset:0;z-index:129;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#0009;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s ease}
body.mobile-layout:has(#mobileNavDrawer.open) .mobile-nav-scrim {opacity:1;pointer-events:auto}
body.mobile-layout #mobileNavDrawer {
 inset:0 0 0 auto;width:86vw;max-width:354px;height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
 padding:calc(18px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) 16px;
 border-left:1px solid #8eafc34d;border-radius:8px 0 0 8px;
 background:linear-gradient(112deg,transparent 35%,#e4f1ff06 35.5%,transparent 76%),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 4px),radial-gradient(ellipse at 0 15%,#35697b27,transparent 60%),linear-gradient(165deg,#20282e,#0b1015 65%,#131b21);
 box-shadow:-16px 0 36px #0007,inset 3px 0 12px #549ecb0a;transition:transform .26s cubic-bezier(.2,.7,.25,1);scrollbar-width:none;
}
body.mobile-layout #mobileNavDrawer::-webkit-scrollbar {display:none}
body.mobile-layout #mobileNavDrawer .mobile-nav-head {position:relative;height:auto;min-height:78px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid #d6b65a72;box-shadow:0 1px #0007}
body.mobile-layout #mobileNavDrawer .mobile-nav-brand {display:flex;flex-direction:column;align-items:flex-start;gap:7px}
body.mobile-layout #mobileNavDrawer .mobile-nav-brand img {width:146px;height:46px;object-fit:contain;object-position:left}
body.mobile-layout #mobileNavDrawer .mobile-nav-head b {font:900 9px/1 Arial;letter-spacing:2.5px;color:#94a5b2}
body.mobile-layout #mobileNavDrawer #mobileMenuClose {width:44px;height:44px;flex:none;padding:0;border:1px solid #080c10;border-radius:5px;background:linear-gradient(135deg,#b0c7d222,transparent 65%),linear-gradient(#38444c,#141d24);box-shadow:inset 0 1px #e8f5ff55,inset 0 -2px #000a,0 3px 7px #0006;color:#e7d9b3;font:400 30px/1 Arial;letter-spacing:0}
body.mobile-layout #mobileNavDrawer>button {
 position:relative;display:flex;align-items:center;gap:14px;width:100%;height:62px;min-height:62px;margin:0 0 9px;padding:10px 31px 10px 13px;
 border:1px solid #7995a63d;border-radius:7px;background:linear-gradient(114deg,transparent 51%,#ddeaf708 51.5%,transparent 95%),linear-gradient(150deg,#27323b,#111920 75%);
 box-shadow:inset 0 1px #cfdeeb20,inset 0 -2px #0007,0 3px 7px #0005;color:#bfccd6;text-align:left;font:900 12px/1.2 Arial;letter-spacing:1.1px;
 transition:background .15s,box-shadow .15s,color .15s,transform .15s;
}
body.mobile-layout #mobileNavDrawer>button:after {content:'›';position:absolute;right:13px;top:21px;font:22px/1 Arial;color:#738997}
body.mobile-layout #mobileNavDrawer .mobile-nav-icon {width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;color:#9cabb7;filter:drop-shadow(0 2px 1px #0009)}
body.mobile-layout #mobileNavDrawer>button[aria-current="page"] {border-color:#77bdd184;background:linear-gradient(114deg,transparent 51%,#e2f7ff0d 51.5%,transparent 95%),linear-gradient(150deg,#344853,#19272e 75%);box-shadow:inset -3px 0 #76c5db,inset 0 1px #d0f1fb36,inset 0 -2px #0006,0 0 12px #5fbbdc14;color:#f1f6f9}
body.mobile-layout #mobileNavDrawer>button[aria-current="page"] .mobile-nav-icon,body.mobile-layout #mobileNavDrawer>button[aria-current="page"]:after {color:#a5dae7}
body.mobile-layout #mobileNavDrawer>button:is(:hover,:focus-visible) {border-color:#a2c7dc77;color:#f2f7fb}
body.mobile-layout #mobileNavDrawer>button:active,body.mobile-layout #mobileNavDrawer #mobileMenuClose:active {transform:translateX(2px);background:linear-gradient(#15212a,#0a131a);box-shadow:inset 0 2px 5px #000b;color:#dce9f2}
body.mobile-layout #mobileNavDrawer.open>button {animation:phoneMenuTile .26s both;animation-delay:calc(var(--menu-order)*18ms)}
body.mobile-layout #mobileNavDrawer #phoneRaceNavNote {font:11px/1.5 Arial;color:#d4c699;background:#cda9430a;border:1px solid #c7aa5933;padding:12px;margin:0 0 15px;border-radius:4px}
@keyframes phoneMenuTile {from{opacity:.1;transform:translateX(15px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce) {body.mobile-layout :is(#mobileNavDrawer,.mobile-nav-scrim,#mobileNavDrawer>button) {transition:none;animation:none!important}}

/* Account tile stays below the navigation; short screens scroll to it naturally. */
body.mobile-layout #mobileNavDrawer .mobile-nav-head {flex-shrink:0}
body.mobile-layout .mobile-menu-wallet {position:relative;flex-shrink:0;margin-top:auto;min-height:150px;padding:17px 19px 14px;border:1px solid #79bd9666;border-radius:10px;overflow:hidden;background:linear-gradient(117deg,transparent 48%,#baf4c810 48.5%,transparent 95%),radial-gradient(ellipse at 100% 0,#51d17a30,transparent 72%),linear-gradient(140deg,#204c38,#0c271e 80%);box-shadow:inset 0 1px #b6ebc64a,inset 0 -1px #0008,0 6px 18px #0006;color:#dbf9e5}
body.mobile-layout .mobile-menu-wallet:before {content:'';position:absolute;width:155px;height:155px;right:-66px;top:40px;border:1px solid #b1e6c412;border-radius:50%;box-shadow:0 0 0 20px #b1e6c408,0 0 0 40px #b1e6c405;pointer-events:none}
body.mobile-layout .mobile-wallet-heading {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#a7d7b8;font:900 9px/1 Arial;letter-spacing:1.8px}
body.mobile-layout .mobile-wallet-heading svg {width:23px;height:23px;fill:none;stroke:#bbf1ce;stroke-width:1.3;stroke-linejoin:round}
body.mobile-layout .mobile-wallet-label {display:block;color:#88bb9b;font:700 8px/1 Arial;letter-spacing:1.2px}
body.mobile-layout #mobileAccountBalance {display:block;margin:6px 0 15px;font:900 33px/1.1 Arial;letter-spacing:-1px;color:#e6ffee;text-shadow:0 2px 3px #00190e99;font-variant-numeric:tabular-nums}
body.mobile-layout #mobileAccountBalance>span {margin-left:5px}
body.mobile-layout .mobile-wallet-footer {position:relative;display:flex;align-items:center;gap:6px;border-top:1px solid #7aba9340;padding-top:11px;font:10px/1.3 Arial;color:#91b9a0}
body.mobile-layout .mobile-wallet-footer i {width:5px;height:5px;border-radius:50%;background:#749884}
body.mobile-layout .mobile-wallet-footer b {margin-left:auto;font:900 8px Arial;letter-spacing:1px;color:#b9ddc5}

/* ==== styles/mobile-pages.css ==== */
/* Phone pages share the graphite shell. Desktop pages and Parts Shop content retain their finish. */
@media(max-width:600px), (max-width:1000px) and (max-height:600px) {
 body.mobile-layout:not(.phone-racing) {--phone-foot:108px;background:#080b0f}
 body.mobile-layout:not(.phone-racing) .mobile-topbar {background:linear-gradient(113deg,transparent 47%,#b7c3cb12 47.5%,transparent 80%),var(--nitto-banner-texture);border-bottom:1px solid #b79a47;box-shadow:inset 0 1px #b2c0ca26,0 3px 8px #0009}
 body.mobile-layout:not(.phone-racing) .mobile-page-title {color:#c3cbd0;letter-spacing:1.4px}
 body.mobile-layout:not(.phone-racing) .mobile-menu-button {border:1px solid #5c666d;border-bottom-color:#12181d;border-radius:5px;background:linear-gradient(#30383e,#13181d);box-shadow:inset 0 1px #cad6df20,0 2px 3px #0005;color:#e8edf1}
 body.mobile-layout:not(.phone-racing) .mobile-dock {background:linear-gradient(#171c21,#060a0f);border-top:1px solid #536572;box-shadow:0 -5px 14px #0008}
 body.mobile-layout:not(.phone-racing) .mobile-selected {height:52px;padding:4px 16px;justify-content:flex-start;gap:12px;border-top:1px solid #76b9cd59;border-bottom:1px solid #000;background:linear-gradient(110deg,#afc4d710,transparent 60%),var(--nitto-banner-texture)}
 body.mobile-layout:not(.phone-racing) .mobile-selected img {width:66px;height:42px;filter:drop-shadow(0 2px 2px #0008);flex:none}
 body.mobile-layout:not(.phone-racing) .mobile-selected span {font:700 8px/1.4 Arial;letter-spacing:1px;color:#e4bf52;min-width:0}
 body.mobile-layout:not(.phone-racing) .mobile-selected strong {display:block;margin:3px 0 0;font:900 11px/1.2 Arial;color:#e5ebef;letter-spacing:.2px}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links {height:56px}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button {position:relative;border-top:2px solid transparent;border-radius:0;color:#84939e;font:700 9px/1.2 Arial;letter-spacing:.8px}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button b {color:#a8b5bf;font-size:23px}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button[aria-current=page] {background:radial-gradient(ellipse at 50% 0,#2886a326,transparent 85%);border-top:2px solid transparent;color:#82d7ea}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button[aria-current=page]:before {content:'';position:absolute;top:-2px;left:23%;right:23%;height:2px;background:#74cfe6;box-shadow:0 0 6px #50bada55}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button[aria-current=page] b {color:#7cd9ef}
 body.mobile-layout:not(.phone-racing) .mobile-dock-links button:active {background:#c5d8e110;transform:translateY(1px)}
 body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen,#raceTrackScreen,#showroomOverlay,#phoneTeamScreen) {--phone-panel:linear-gradient(145deg,#2b333a,#0b1117 75%);background:repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 5px),radial-gradient(ellipse at 55% 28%,#6ca5bb22,transparent 55%),linear-gradient(#192129,#090d12 65%,#141b21);scrollbar-color:#46525c #10151a}
 body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen) .classic-garage-bar {background:linear-gradient(113deg,transparent 45%,#d9e6f014 45.5%,transparent 90%),linear-gradient(#262d33,#0a1015);border-bottom:1px solid #778b9950;box-shadow:inset 0 1px #cedfea1a;padding:10px 16px}
 body.mobile-layout #garageBrowseHint {font:900 9px/1.5 Arial;color:#92a5b2;letter-spacing:1px}
 /* Transparent inset controls echo the shared desktop metal finish. */
 body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen,#raceTrackScreen,#showroomOverlay,#phoneTeamScreen)
 :is(.classic-aqua,.vehicle-setup-tile,.setup-tiles button,.setup-selected,.league-button,.league-selector button,.racer-search-tabs button,#playerSearchForm button,.mobile-showroom-tabs button,.used-secondary,.used-buy,.garage-views button) {
  appearance:none;background:var(--header-metal-face)!important;border:1px solid #020608!important;border-radius:5px!important;box-shadow:var(--header-metal-rim)!important;color:#e7edf2!important;font:900 11px/1.3 Arial!important;letter-spacing:.6px;text-shadow:0 1px #000!important;transition:box-shadow .18s,filter .18s;
 }
 body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen,#raceTrackScreen,#showroomOverlay,#phoneTeamScreen)
 :is(.classic-aqua,.vehicle-setup-tile,.setup-tiles button,.league-button,.league-selector button,.mobile-showroom-tabs button)[aria-pressed=true] {background:var(--header-metal-selected)!important;box-shadow:var(--header-metal-inset),inset 0 -2px #72bed3!important;color:#e9f6fb!important}
 body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen,#raceTrackScreen,#showroomOverlay,#phoneTeamScreen)
 :is(.classic-aqua,.vehicle-setup-tile,.setup-tiles button,.league-button,.mobile-showroom-tabs button,.used-buy,.used-secondary,.garage-views button):active {box-shadow:var(--header-metal-inset)!important;filter:brightness(.85)}
 body.mobile-layout :is(#ownedCollectionView,#showroomCollection) {position:relative}
 body.mobile-layout :is(#ownedViewport,#showroomViewport) {padding:22px 13vw 14px;scroll-padding:13vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
 body.mobile-layout :is(.owned-car,.showroom-car) {width:74vw;flex:0 0 74vw;height:350px;padding:16px 12px;border:1px solid #7188964d;border-radius:10px;overflow:visible;scroll-snap-align:center;scroll-snap-stop:normal;background:linear-gradient(113deg,transparent 51%,#eff7ff07 51.5%,transparent 95%),radial-gradient(ellipse at 50% 40%,#a6cee327,transparent 60%),repeating-linear-gradient(90deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(#222b32,#070d12 77%);box-shadow:inset 0 1px #daeaf626,0 8px 20px #0008}
 body.mobile-layout :is(.owned-car,.showroom-car) h2 {position:relative;inset:auto;margin:1px -1px 0;font:900 17px/1.25 Arial;letter-spacing:.5px;color:#edf1f5;text-shadow:0 2px 2px #000;z-index:3}
 body.mobile-layout :is(.owned-car,.showroom-car) h2 i {font-size:21px}
 body.mobile-layout :is(.owned-car .owned-render,.showroom-car>img) {left:-21%;top:40px;width:142%;height:230px;object-fit:contain;z-index:2;filter:drop-shadow(0 10px 6px #0007)}
 body.mobile-layout :is(.owned-car .owned-shadow,.showroom-car .showroom-shadow) {display:block;left:7%;right:7%;top:220px;width:auto;height:25px;background:radial-gradient(ellipse,#0009,transparent 70%);filter:blur(7px);z-index:1}
 body.mobile-layout .owned-car .vehicle-setup-tile {inset:auto 14px 67px;height:44px;min-height:44px;padding:8px}
 body.mobile-layout .owned-car .choose-owned {inset:auto 14px 14px;min-height:44px}
 body.mobile-layout .owned-car .choose-owned .car-selected {font:900 11px Arial;letter-spacing:.4px}
 body.mobile-layout .owned-car .owned-copy-count {position:absolute;top:47px;left:0;right:0;text-align:center;font:900 8px Arial;letter-spacing:1px;color:#9baab5;z-index:3}
 body.mobile-layout .owned-car.is-owned-active {z-index:3}
 body.mobile-layout .owned-car:not(.is-owned-active) .owned-render {opacity:.55}
 body.mobile-layout #carSelection .classic-credit {color:#8093a3;margin-top:22px}
 body.mobile-layout :is(#carSelection,#carShowroomScreen) .owned-nav {height:40px;margin:0 0 18px;gap:26px;color:#c5d3dd;font:900 11px Arial;letter-spacing:1.4px}
 body.mobile-layout :is(#carSelection,#carShowroomScreen) .owned-nav button {border:1px solid #b6d2e264;min-width:46px;min-height:46px;border-radius:50%;background:linear-gradient(135deg,#e4f5ff17,transparent 65%),linear-gradient(#293b47a8,#0b16209c);box-shadow:inset 0 1px #e4f5ff33,inset 0 -2px #0008,0 4px 10px #0007;color:#d3e2ed;font:20px Arial}
 body.mobile-layout :is(#carSelection,#carShowroomScreen) .owned-nav button:disabled {opacity:.3;cursor:default}
 /* New/used inventory is a phone-only selector; original desktop header stays put. */
 body.mobile-layout #carShowroomScreen .mobile-showroom-tabs {position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:6px;padding:9px 14px;height:58px;background:linear-gradient(113deg,transparent 47%,#d7e5ef18 47.5%,transparent 95%),linear-gradient(#252e35,#080f14);border-bottom:1px solid #8092a341;box-shadow:0 3px 9px #0007}
 body.mobile-layout #carShowroomScreen .mobile-showroom-tabs button {flex:1;height:40px;min-height:40px;font-size:11px!important}
 body.mobile-layout #carShowroomScreen .classic-owned-stage {min-height:calc(100% - 58px);display:flex;flex-direction:column}
 body.mobile-layout #carShowroomScreen .showroom-head:not(:has(#showroomBack:not([hidden]))) {display:none}
 body.mobile-layout #carShowroomScreen .showroom-head:has(#showroomBack:not([hidden])) {min-height:54px;flex-wrap:nowrap}
 body.mobile-layout #carShowroomScreen #showroomDetailTitle {font:900 11px/1.3 Arial;flex:1;text-align:right}
 body.mobile-layout #carShowroomScreen #showroomBack {min-height:36px;font-size:10px!important;padding:8px 10px}
 body.mobile-layout #carShowroomScreen .showroom-quick-specs {position:absolute;bottom:72px;left:8px;right:8px;height:22px;display:flex;align-items:center;justify-content:center;font:900 8px Arial;letter-spacing:.5px;color:#a6bbc9;z-index:3;border-top:1px solid #d2e8f21a;padding-top:5px}
 body.mobile-layout #carShowroomScreen .showroom-price {inset:auto auto 14px 12px;min-width:105px;height:45px;padding:14px 8px 5px;font:italic 900 20px/1 Arial;color:#f3d791;border:1px solid #c7a9604d;border-radius:4px;background:linear-gradient(125deg,#f8d68615,transparent 80%),linear-gradient(#3d3421,#1b1915);box-shadow:inset 0 1px #ffedb22b,0 2px 5px #0005;z-index:3;text-align:left;letter-spacing:-.5px}
 body.mobile-layout #carShowroomScreen .showroom-price:before {content:'SHOWROOM PRICE';position:absolute;top:5px;left:8px;font:900 6px Arial;letter-spacing:.8px;color:#b6a77d}
 body.mobile-layout #carShowroomScreen .showroom-actions {inset:auto 12px 14px auto;gap:5px}
 body.mobile-layout #carShowroomScreen .showroom-actions button {height:45px;min-height:45px;min-width:52px;padding:6px 8px;font-size:10px!important;flex:none}
 body.mobile-layout #carShowroomScreen .showroom-actions [data-buy-car] {border-bottom-color:#cfb262!important;color:#f6dfa5!important;box-shadow:var(--header-metal-rim),inset 0 -2px #b79852!important}
 body.mobile-layout #carShowroomScreen .showroom-desktop-buy {display:none}
 body.mobile-layout #carShowroomScreen .showroom-car[data-showroom-car="p1"] .showroom-price {font-size:16px}
 body.mobile-layout #carShowroomScreen .showroom-car.is-showroom-active {z-index:3}
 body.mobile-layout #carShowroomScreen .showroom-car:not(.is-showroom-active)>img {opacity:.55}
 body.mobile-layout #showroomCollection .owned-nav {position:static;display:flex;flex-direction:column;gap:8px;height:37px;margin:0 0 16px}
 body.mobile-layout #showroomCollection .owned-nav button {position:absolute;top:159px;z-index:5;width:46px;height:46px;backdrop-filter:blur(3px)}
 body.mobile-layout #showroomPrev {left:8px}
 body.mobile-layout #showroomNext {right:8px}
 body.mobile-layout #showroomCollection .showroom-progress {display:block;width:86px;height:3px;background:linear-gradient(90deg,#79c5d6 var(--showroom-progress,8.3%),#536b793b var(--showroom-progress,8.3%));box-shadow:0 1px #0008}
 body.mobile-layout #carShowroomScreen .showroom-browse-tools {display:flex;align-items:center;justify-content:center;gap:14px;margin:0 16px 8px;padding:12px;text-align:center;border:1px solid #8195a52b;border-radius:5px;background:linear-gradient(113deg,transparent 45%,#ffffff07 45.5%,transparent 95%),linear-gradient(#222c33,#0b131a)}
 body.mobile-layout .showroom-browse-tools>div {display:flex;flex-direction:column;gap:6px}
 body.mobile-layout #showroomAvailableCount {font:900 10px/1.3 Arial;letter-spacing:.5px;color:#d1dce4}
 body.mobile-layout .showroom-browse-tools span {font:700 7px Arial;letter-spacing:1.2px;color:#8094a4}
 body.mobile-layout #carShowroomScreen .showroom-demo-note {margin:12px 20px 16px;font:8px/1.5 Arial;color:#708796}
 /* Purchase detail has the same hero, spotlight, metal buttons and gold price. */
 body.mobile-layout #carShowroomScreen #showroomDetail {padding:16px 16px 10px;gap:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 17%,#b1d9f12b,transparent 40%)}
 body.mobile-layout #carShowroomScreen #showroomDetailRender {position:relative;inset:auto;align-self:center;max-width:none;width:calc(100% + 62px);height:246px;margin:-12px -31px 0;order:-2;filter:drop-shadow(0 12px 6px #0009)}
 body.mobile-layout #carShowroomScreen .showroom-detail-spec-strip {order:-1;font:900 9px/1.3 Arial;letter-spacing:1px;text-align:center;color:#a5c5d5;padding:3px 8px 13px;border-bottom:1px solid #82a4bb38}
 body.mobile-layout #carShowroomScreen .showroom-specs {display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:7px;border:1px solid #718c9d4d;background:linear-gradient(113deg,transparent 51%,#ffffff06 51.5%,transparent 95%),linear-gradient(#202a31,#090f15);box-shadow:inset 0 1px #d8e6f218,0 6px 16px #0005}
 body.mobile-layout #carShowroomScreen .showroom-specs h3 {font:900 10px Arial;letter-spacing:1.4px;color:#9eafb9;border-bottom:1px solid #819ca644;padding-bottom:10px}
 body.mobile-layout #carShowroomScreen .showroom-specs ul {font:12px/1.8 Arial;color:#e2e9ee}
 body.mobile-layout #carShowroomScreen .showroom-specs>p {font:12px/1.6 Arial;color:#9bb0bf}
 body.mobile-layout #carShowroomScreen #showroomDetailPrice {order:-3;align-self:flex-start;margin:0;display:inline-block;padding:10px 14px;border:1px solid #c9ad684d;border-radius:4px;background:linear-gradient(125deg,#f4cf7614,transparent 80%),linear-gradient(#3b3220,#191813);color:#f0d794;font:italic 900 25px Arial}
 body.mobile-layout #carShowroomScreen :is(#showroomBuy,#showroomGarage) {min-height:44px}
 body.mobile-layout #carShowroomScreen #showroomBuy {order:-2;margin:0;color:#f5df9f!important;box-shadow:var(--header-metal-rim),inset 0 -2px #ad8e45!important}
 body.mobile-layout #carShowroomScreen #showroomPurchaseStatus {order:-1;margin:0;font:11px/1.5 Arial;color:#dfcd97}
 body.mobile-layout #carShowroomScreen #showroomPurchaseStatus:empty {display:none}
 /* Garage setup/paint get darker housings without disturbing the live car renderer. */
 body.mobile-layout #carSelection #vehicleSetupView {background:radial-gradient(ellipse at 55% 18%,#789fb51f,transparent 45%);gap:12px}
 body.mobile-layout #carSelection #setupCarRender {width:calc(100% + 32px);max-width:none;align-self:center;height:235px;filter:drop-shadow(0 10px 6px #0009)}
 body.mobile-layout #carSelection .setup-power {font:italic 900 21px Arial;color:#e5c777}
 body.mobile-layout #carSelection .setup-tiles {gap:9px}
 body.mobile-layout #carSelection .setup-tiles button {height:82px;background:linear-gradient(115deg,transparent 45%,#dae9f014 45.5%,transparent 95%),linear-gradient(#2e3a43,#101a22)!important;box-shadow:var(--header-metal-rim)!important;font-size:12px!important;letter-spacing:1px}
 body.mobile-layout #customGarage .classic-paint-stage .garage-body {background:none;padding:14px;gap:14px}
 body.mobile-layout #customGarage .classic-paint-stage .garage-view {height:210px;border-radius:7px;border:1px solid #7f98a55e;background:linear-gradient(#0009,transparent 65%),url('../assets/paint-shop-workshop.png') center/cover;box-shadow:inset 0 1px #dfecf21a,0 6px 20px #0006}
 body.mobile-layout #customGarage .paint-intro {font:12px/1.6 Arial;color:#a6b8c5;padding:0 3px}
 body.mobile-layout #customGarage .classic-color-panel {border:1px solid #917b484d;border-radius:7px;background:linear-gradient(115deg,transparent 48%,#fff0c608 48.5%,transparent 100%),linear-gradient(#343127,#171b1e);box-shadow:inset 0 1px #f0d89b30,0 6px 14px #0006;color:#e2d1a0}
 body.mobile-layout #customGarage .classic-color-panel h3 {font:900 12px Arial;letter-spacing:1.5px;color:#e2c783}
 body.mobile-layout #customGarage :is(#garageFeedback,.paint-balance) {color:#95a9b9}
 /* Other destinations retain their content and imagery with graphite surfaces. */
 body.mobile-layout #raceTrackScreen .track-choice {border-color:#8195a54d;border-radius:9px;background:linear-gradient(114deg,transparent 51%,#e1f1fb0a 51.5%,transparent 95%),linear-gradient(#29333c,#0d161e)}
 body.mobile-layout #raceTrackScreen .challenge-tile {background:linear-gradient(135deg,#789aaa15,transparent 65%),linear-gradient(#293b47,#111d26);border-color:#9aadb95e;border-radius:6px;box-shadow:inset 0 1px #dbedff33,0 5px 14px #0006}
 body.mobile-layout #showroomOverlay .classic-lobby {background:radial-gradient(ellipse at 70% 40%,#437c9427,transparent 70%),#111a22}
 body.mobile-layout #raceTrackScreen :is(.racer-search-panel,.online-player-profile,.online-garage-car,.opponent-card) {background:linear-gradient(140deg,#2a343d,#0b151e 75%);border-color:#6e86995c;border-radius:8px}
 body.mobile-layout #raceTrackScreen .online-select-heading {background:#050d144d;color:#bacbd8}
 body.mobile-layout #phoneTeamScreen {background:radial-gradient(ellipse at 60% 20%,#6d95ac22,transparent 60%),linear-gradient(#222b33,#090e14)}
 body.mobile-layout #carShowroomScreen #usedCarLot {background:transparent}
 @media(hover:hover) {
  body.mobile-layout :is(#carSelection,#customGarage,#carShowroomScreen,#raceTrackScreen,#showroomOverlay,#phoneTeamScreen) :is(.classic-aqua,.vehicle-setup-tile,.setup-tiles button,.mobile-showroom-tabs button,.used-buy,.used-secondary):hover {background:var(--header-metal-face)!important;box-shadow:var(--header-metal-rim),0 3px 7px #a6ecff39,0 6px 12px #61ddff20!important}
 }
}

/* ==== styles/avatars.css ==== */
/* Default racer / team avatar (assets/avatar-default.jpg): rounded corners and a thin white border.
   Loaded last so the older round helmet frames (online search, team page) give way to it; their online
   dots (::after) are kept. Community keeps the gold helmet next to names — its racer card shows the
   avatar (styles/community.css). */
.nitto-avatar{display:block;box-sizing:border-box;object-fit:cover;border:1px solid #fff;border-radius:24%;background:#33435a;box-shadow:0 1px 4px #000a;filter:none!important;-webkit-user-drag:none}
:is(.player-list-avatar,.team-member-avatar,.player-profile-avatar){border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
:is(.player-list-avatar,.team-member-avatar,.player-profile-avatar)>img.nitto-avatar{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important}
:is(.player-list-avatar,.team-member-avatar)::after{z-index:1}

/* online race search: bigger avatar beside the racer's name */
.player-profile-avatar{position:absolute!important;left:0!important;top:8px!important;width:62px!important;height:62px!important}
.player-profile-avatar>img.nitto-avatar{border-width:1.5px}
.online-player-profile h1,.online-player-profile p{left:78px!important}
body.mobile-layout .player-profile-avatar{left:14px!important;top:16px!important;width:50px!important;height:50px!important}
body.mobile-layout .online-player-profile{padding-left:76px!important}


/* challenge rows */
.challenge-racer-identity>img.nitto-avatar{object-fit:cover!important;filter:none!important}

/* challenges list + challenge details (match view) + racer message */
.challenge-racer-identity>img.nitto-avatar{width:22px!important;height:22px!important;border-radius:26%}
.challenge-driver>header>img.nitto-avatar{width:36px!important;height:36px!important;flex:none}
#challengeMessageDialog>img.nitto-avatar{width:36px;height:36px;object-fit:cover}
body.mobile-layout .challenge-racer-identity>img.nitto-avatar{width:26px!important;height:26px!important}
body.mobile-layout .challenge-driver>header>img.nitto-avatar{width:32px!important;height:32px!important}

/* ==== styles/rank-badge.css ==== */
/* Rank badge (source/scripts/00b-rank-badge.js). Every length is a multiple of --u = size ÷ 330,
   the size the badge was designed at, so it scales from a 34px chip to a 120px hero badge. */
.rank-badge{--rb-size:64px;--u:calc(var(--rb-size) / 330);--rb-accent:#ff8a16;--rb-rgb:255,138,22;
  position:relative;display:inline-grid;place-items:center;flex:none;width:var(--rb-size);height:var(--rb-size);border-radius:50%;line-height:1;vertical-align:middle;
  filter:drop-shadow(0 calc(var(--u) * 16) calc(var(--u) * 16) rgba(0,0,0,.55));transform-origin:center}
.rank-badge::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 23%,rgba(255,255,255,.9) 0 2.5%,rgba(255,255,255,.22) 3.5%,transparent 8%),radial-gradient(circle at 67% 74%,rgba(255,255,255,.16) 0 3%,transparent 10%),
  conic-gradient(from 210deg,#0a0d10 0deg,#3f464c 12deg,#9ea5aa 22deg,#f8fbfd 31deg,#bfc5ca 40deg,#4a5157 52deg,#151a1e 67deg,#596066 82deg,#d8dde1 96deg,#fff 108deg,#9ea5ab 120deg,#343a40 136deg,#0a0d10 152deg,#535a60 170deg,#c6ccd0 184deg,#f8fafb 196deg,#a0a7ac 210deg,#353b40 227deg,#0c0f12 244deg,#5a6166 261deg,#d2d8dc 276deg,#fff 288deg,#bcc3c8 300deg,#4c5358 316deg,#111519 332deg,#626a6f 348deg,#c8cfd4 360deg);
  box-shadow:0 0 0 max(1px,calc(var(--u) * 2)) rgba(255,255,255,.2),0 0 0 calc(var(--u) * 7) rgba(0,0,0,.48),0 0 calc(var(--u) * 18) rgba(210,225,235,.16),inset 0 0 0 max(.5px,var(--u)) rgba(255,255,255,.36),inset 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(255,255,255,.3),inset 0 calc(var(--u) * -14) calc(var(--u) * 24) rgba(0,0,0,.72)}
.rank-badge::after{content:'';position:absolute;inset:calc(var(--u) * 20);border-radius:50%;background:radial-gradient(circle at 48% 42%,#242a2f 0 12%,#171d21 44%,#0b0f12 70%,#22282c 100%);
  box-shadow:inset 0 0 0 calc(var(--u) * 4) #7b8389,inset 0 0 0 calc(var(--u) * 8) #1d2226,inset 0 0 0 calc(var(--u) * 11) #4b5257,inset 0 max(.5px,var(--u)) 0 rgba(255,255,255,.22),inset 0 calc(var(--u) * 17) calc(var(--u) * 20) rgba(255,255,255,.09),inset 0 calc(var(--u) * -22) calc(var(--u) * 28) rgba(0,0,0,.78),0 0 0 max(1px,calc(var(--u) * 2)) rgba(0,0,0,.82),0 0 calc(var(--u) * 10) rgba(220,235,245,.12)}
.rb-face{position:absolute;inset:calc(var(--u) * 43);z-index:2;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 48%,#040706 0 54%,#060909 65%,#010202 100%);box-shadow:inset 0 0 calc(var(--u) * 28) rgba(0,0,0,.95),0 0 0 max(.5px,calc(var(--u) * 2)) rgba(255,255,255,.035)}
.rb-face::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 28%,transparent 72%,rgba(255,255,255,.025));pointer-events:none}
.rb-face::after{content:'';position:absolute;inset:calc(var(--u) * -16);border-radius:50%;pointer-events:none;border:max(.5px,calc(var(--u) * 2)) solid rgba(255,255,255,.16);box-shadow:inset calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 9) rgba(255,255,255,.16),inset calc(var(--u) * -8) calc(var(--u) * -9) calc(var(--u) * 12) rgba(0,0,0,.7);opacity:.8}
.rb-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rb-track{fill:none;stroke:#20292a;stroke-width:7;stroke-linecap:round;opacity:.78}
.rb-arc{fill:none;stroke:var(--rb-accent);stroke-width:7;stroke-linecap:round;opacity:.08;transition:opacity .18s ease,stroke .2s ease}
.rb-arc.on{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--rb-rgb),.95)) drop-shadow(0 0 8px rgba(var(--rb-rgb),.8)) drop-shadow(0 0 15px rgba(var(--rb-rgb),.48))}
.rb-arc.flash{animation:rb-ignite .34s ease-out}
.rb-num{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;font-style:italic;font-weight:500;letter-spacing:-.07em;
  font-size:calc(var(--u) * 66);color:var(--rb-accent);transform:translateX(calc(var(--u) * -3));transition:color .2s ease;
  text-shadow:0 0 max(.5px,calc(var(--u) * 2)) rgba(255,255,255,.7),0 0 calc(var(--u) * 5) rgba(var(--rb-rgb),1),0 0 calc(var(--u) * 12) rgba(var(--rb-rgb),.9),0 0 calc(var(--u) * 26) rgba(var(--rb-rgb),.55)}
.rb-num::after{content:attr(data-value);position:absolute;color:#fff;opacity:.14;filter:blur(calc(var(--u) * 1.2));transform:translateY(calc(var(--u) * -1));pointer-events:none}
.rb-num.land{animation:rb-land .42s cubic-bezier(.16,.9,.25,1)}
/* small badges (team cards, lists): a bolder, larger number so it stays readable */
.rank-badge.rb-sm .rb-num{font-size:calc(var(--u) * 56);font-weight:700;letter-spacing:-.06em}
.rank-badge.rb-sm .rb-num::after{display:none}
.rank-badge.rb-boot{animation:rb-boot .8s cubic-bezier(.18,.82,.2,1) both}
/* floating +3 / −2 that rises and fades */
.rb-delta{position:absolute;z-index:5;right:-6%;top:-4%;padding:.15em .45em;border-radius:999px;font:italic 900 calc(var(--rb-size) * .17)/1 Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;pointer-events:none;animation:rb-delta 2.6s ease-out both}
.rb-delta.up{color:#7dff6a;background:#0b2a0bcc;border:1px solid #7dff6a77;text-shadow:0 0 8px #7dff6a}
.rb-delta.down{color:#ff6b62;background:#2a0b0bcc;border:1px solid #ff6b6277;text-shadow:0 0 8px #ff6b62}
@keyframes rb-ignite{0%{opacity:.18;filter:none}45%{opacity:1;filter:drop-shadow(0 0 6px rgba(var(--rb-rgb),1)) drop-shadow(0 0 17px rgba(var(--rb-rgb),1)) drop-shadow(0 0 28px rgba(var(--rb-rgb),.72))}100%{opacity:1;filter:drop-shadow(0 0 3px rgba(var(--rb-rgb),.95)) drop-shadow(0 0 8px rgba(var(--rb-rgb),.8)) drop-shadow(0 0 15px rgba(var(--rb-rgb),.48))}}
@keyframes rb-land{0%{transform:translateX(calc(var(--u) * -3)) scale(.9);filter:brightness(1)}45%{transform:translateX(calc(var(--u) * -3)) scale(1.09);filter:brightness(1.8)}100%{transform:translateX(calc(var(--u) * -3)) scale(1);filter:brightness(1)}}
@keyframes rb-boot{0%{opacity:0;transform:scale(.84) rotate(-3deg)}55%{opacity:1;transform:scale(1.035) rotate(.7deg)}100%{opacity:1;transform:none}}
@keyframes rb-delta{0%{opacity:0;transform:translateY(40%) scale(.7)}12%{opacity:1;transform:translateY(0) scale(1.08)}22%{transform:translateY(0) scale(1)}70%{opacity:1;transform:translateY(-35%)}100%{opacity:0;transform:translateY(-120%)}}
@media(prefers-reduced-motion:reduce){.rank-badge,.rank-badge *{animation:none!important;transition:none!important}.rb-delta{opacity:1}}

/* ---- placements ---- */
/* online race search: rank replaces the old DRIVER CLASS circle */
.online-rank{position:absolute;right:34px;top:2px;display:flex;flex-direction:column;align-items:center;gap:3px}
.online-rank>span{font:900 7px Arial;letter-spacing:2px;color:#cfe3ee;text-shadow:0 1px 2px #000a}
body.mobile-layout .online-rank{right:12px;top:12px}
body.mobile-layout .online-rank .rank-badge{--rb-size:58px!important}

/* completed challenge ("RACE COMPLETE."): a big rank badge in front of each car, counting to the new rank */
.challenge-rank{position:absolute;z-index:6;left:calc(100% - 46px);bottom:0;transform:translateX(-50%)}
.challenge-rank>.rank-badge{animation:rb-boot .6s .45s cubic-bezier(.18,.82,.2,1) both}
.challenge-rank .rank-badge{filter:drop-shadow(0 6px 10px #000c)}
body.mobile-layout .challenge-rank{bottom:44px;left:calc(100% - 30px)}
body.mobile-layout .challenge-driver.rival .challenge-rank{left:30px}
body.mobile-layout .challenge-rank .rank-badge{--rb-size:50px!important}
.challenge-driver.rival .challenge-rank{left:46px}
/* phone, completed race: the opponent-message bubble shrinks to its icon so it doesn't sit under the rank badge */
body.mobile-layout .challenge-driver.rival:has(.challenge-rank:not([hidden])) .challenge-message-bubble{width:auto;max-width:none;padding:6px 8px}
body.mobile-layout .challenge-driver.rival:has(.challenge-rank:not([hidden])) .challenge-message-bubble>span{display:none}

/* ==== styles/tournament.css ==== */
/* Tournament page (v71) — car-showroom blue backdrop, scrolls. Bracket world is laid out in px by 08s-tournament.js. */
#tournamentScreen{position:absolute;inset:102px 0 49px;z-index:82;overflow-x:hidden;overflow-y:auto;color:#eef3f6;font:12px Arial,sans-serif;--tn-accent:#3fb4ff;
  background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%);border-top:1px solid #59727d;scrollbar-width:thin;scrollbar-color:#5b7286 #121a24}
#tournamentScreen[hidden]{display:none!important}
body.mobile-layout #tournamentScreen{top:58px;bottom:0}
.tn-page{padding:9px 10px 16px;box-sizing:border-box}
/* hero */
.tn-hero{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr) 142px;gap:11px;align-items:center;padding:8px 10px 7px 8px;border-radius:7px;
  border:1px solid color-mix(in srgb,var(--tn-accent) 55%,transparent);background:linear-gradient(110deg,#0c1724f2,#0a131ddd 60%,#0c1724f2);box-shadow:0 0 0 1px #02060a,0 0 18px color-mix(in srgb,var(--tn-accent) 30%,transparent),inset 0 0 22px color-mix(in srgb,var(--tn-accent) 14%,transparent)}
.tn-back{position:absolute;right:8px;top:6px;z-index:2;padding:2px 8px;border-radius:999px;border:1px solid #8fb6d0;background:linear-gradient(#2a4458,#121f2b);color:#e9f2f8;font:bold 7px Arial;letter-spacing:1px;cursor:pointer}
.tn-back:hover{filter:brightness(1.2)}
.tn-hero-art{height:68px}
.tn-hero-art .mp-art{height:100%;border-radius:6px;box-shadow:0 4px 12px #000a}
.tn-hero-art .mp-art-title{font-size:15px;bottom:6px}.tn-hero-art .mp-art-title em{font-size:16px}
.tn-hero-art .mp-art-turbo .mp-art-title{font-size:18px}.tn-hero-art .mp-art-turbo em{font-size:14px}
.tn-hero-art .mp-turbo{width:74px;left:-8px;top:-7px}.tn-hero-art .mp-moon{width:12px;height:12px;right:16px;top:6px}.tn-hero-art .mp-flare{right:22px;top:12px;width:7px;height:7px}
.tn-kicker{font:bold 6.5px Arial;letter-spacing:1.8px;color:var(--tn-accent)}
.tn-hero h1{margin:2px 0 1px;font:italic 900 21px/1 Impact,'Arial Black',sans-serif;letter-spacing:.6px;color:#fff;text-shadow:0 2px 0 #000,0 0 16px color-mix(in srgb,var(--tn-accent) 45%,transparent)}
.tn-sub{margin:0 0 5px;color:#b9c9d4;font:7.5px Arial}
.tn-stats{display:flex;flex-wrap:wrap;gap:5px}
.tn-stat{min-width:54px;padding:2px 7px;border-radius:4px;border:1px solid #ffffff1c;background:#050b12aa}
.tn-stat small{display:block;font:bold 5.5px Arial;letter-spacing:1px;color:#93a9b8}
.tn-stat b{font:12.5px/1.15 Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:.4px;color:#fff}
.tn-stat.gold b{color:#f2c94c}.tn-stat.green b{color:#7dff6a}.tn-stat.accent b{color:var(--tn-accent)}
.tn-hero-cta{display:grid;gap:4px;margin-top:10px;justify-items:stretch;text-align:center}
.tn-countdown{padding:2px 6px;border-radius:4px;background:#03070bcc;border:1px solid #ffffff18}
.tn-countdown small{display:block;font:bold 5.5px Arial;letter-spacing:1.6px;color:#93a9b8}
.tn-countdown strong{font:14px/1.1 'Courier New',monospace;font-weight:700;color:#fff;letter-spacing:1px;text-shadow:0 0 8px color-mix(in srgb,var(--tn-accent) 70%,transparent)}
.tn-claim{height:25px;border-radius:4px;border:1px solid #fff0b0;cursor:pointer;background:linear-gradient(#ffe68a,#f2bd34 45%,#c8870f 55%,#e4a826);color:#1b1204;
  font:italic 900 13px/1 Impact,'Arial Black',sans-serif;letter-spacing:.6px;box-shadow:0 0 0 1px #3a2504,0 4px 10px #000a,0 0 16px #f2c23f66,inset 0 1px #fffbe0;animation:tnClaimGlow 1.8s ease-in-out infinite}
.tn-claim:hover{filter:brightness(1.08)}.tn-claim:active{transform:translateY(1px)}
.tn-claim.mine{background:linear-gradient(#9cff78,#3fbf34 50%,#2a8f25);border-color:#d9ffcc;color:#08240a;animation:none}
.tn-claim:disabled{filter:grayscale(1) brightness(.7);cursor:default;animation:none}
.tn-claim.small{height:18px;padding:0 10px;font-size:10px;animation:none}
@keyframes tnClaimGlow{50%{box-shadow:0 0 0 1px #3a2504,0 4px 10px #000a,0 0 26px #ffd75acc,inset 0 1px #fffbe0}}
.tn-cta-note{margin:0;font:6.5px/1.35 Arial;color:#b9c9d4}
.tn-link{padding:0;border:0;background:none;color:#ff8a80;font:bold 6.5px Arial;text-decoration:underline;cursor:pointer}
/* prize car (v80, 08sp-tournament-prize-car.js): sun-ray burst behind a 3D car that hangs off the bottom of the card */
.tn-hero{z-index:3}
.tn-hero-art,.tn-hero-info,.tn-hero-cta{position:relative;z-index:1}
.tn-prize{position:absolute;top:0;bottom:0;right:170px;width:272px;pointer-events:none}
.tn-prize[hidden]{display:none}
.tn-prize-glow{position:absolute;inset:0 -86px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent);mask-image:linear-gradient(90deg,transparent,#000 26%,#000 74%,transparent)}
.tn-prize-glow::before{content:'';position:absolute;inset:0;   /* the shine: bright silver core, accent-tinted halo */
  background:radial-gradient(ellipse 34% 62% at 50% 60%,#ffffffd0,#dfe7f2a0 20%,color-mix(in srgb,var(--tn-accent) 34%,#9fb0c4 30%) 44%,transparent 76%)}
.tn-prize-glow i,.tn-prize-glow::after{position:absolute;left:50%;top:60%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;will-change:transform;
  -webkit-mask-image:radial-gradient(circle,#000 4%,#0009 24%,transparent 56%);mask-image:radial-gradient(circle,#000 4%,#0009 24%,transparent 56%)}
.tn-prize-glow i{background:repeating-conic-gradient(from 0deg,#fff0 0deg,#ffffff4a 2.6deg,#fff0 6deg,#fff0 11.25deg);filter:blur(.6px);animation:tnRays 120s linear infinite}
.tn-prize-glow::after{content:'';background:repeating-conic-gradient(from 4deg,#fff0 0deg,#ffffff30 5deg,#fff0 10deg,#fff0 22.5deg);filter:blur(2.4px);animation:tnRays 190s linear infinite reverse}
@keyframes tnRays{to{transform:rotate(360deg)}}
.tn-prize-car{position:absolute;left:-26px;right:-26px;top:14px;bottom:-60px;margin:0}
.tn-prize-car img,.tn-prize-3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s}
.tn-prize-car img{filter:drop-shadow(0 6px 8px #000a)}
.tn-prize-3d{opacity:0;filter:drop-shadow(0 7px 9px #0009)}
.tn-prize.is-3d img{opacity:0}
.tn-prize.is-3d .tn-prize-3d{opacity:1;animation:tnPrizeIn .8s cubic-bezier(.2,.9,.25,1.12) both}
@keyframes tnPrizeIn{from{opacity:0;transform:translateX(26px) scale(.9)}}
.tn-prize-car figcaption{position:absolute;left:0;right:0;top:-12px;text-align:center;font:italic bold 5.5px Arial;letter-spacing:1.4px;color:#f2c94c;text-shadow:0 1px 2px #000,0 0 6px #000}
body.mobile-layout .tn-prize{position:relative;inset:auto;width:auto;height:128px}
body.mobile-layout .tn-prize-glow{inset:0}
body.mobile-layout .tn-prize-car{left:0;right:0;bottom:0}
@media(prefers-reduced-motion:reduce){.tn-prize-glow i,.tn-prize-glow::after{animation:none}.tn-prize.is-3d .tn-prize-3d{animation:none}}
/* bracket */
.tn-bracket-wrap{margin-top:7px}
.tn-bracket-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.tn-bracket-bar h2{margin:0;font:14px/1 Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:1px;color:#fff;text-shadow:0 2px 0 #000}
.tn-bracket-bar h2 span{font:bold 7px Arial;letter-spacing:1.2px;color:var(--tn-accent);vertical-align:middle}
.tn-tools{display:flex;gap:3px}
.tn-tools button{min-width:20px;height:17px;padding:0 6px;border-radius:4px;border:1px solid #6f93ab;background:linear-gradient(#2a4458,#101c27);color:#e9f2f8;font:bold 7.5px Arial;letter-spacing:.6px;cursor:pointer}
.tn-tools button:hover{border-color:var(--tn-accent);color:#fff}
.tn-viewport{position:relative;height:280px;overflow:hidden;border-radius:7px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;
  border:1px solid color-mix(in srgb,var(--tn-accent) 50%,#000);background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--tn-accent) 16%,transparent),transparent 55%),radial-gradient(ellipse at 50% 120%,#203a55,transparent 60%),linear-gradient(#070d15,#0a1420);
  box-shadow:0 0 0 1px #02060a,inset 0 0 40px #000c,0 10px 24px #0008}
.tn-viewport.dragging{cursor:grabbing}
.tn-viewport:focus-visible{box-shadow:0 0 0 2px var(--tn-accent)}
.tn-viewport:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff05 1px,transparent 1px),linear-gradient(#ffffff05 1px,transparent 1px);background-size:40px 40px;z-index:0}
.tn-rays{position:absolute;left:50%;top:50%;width:1600px;height:1600px;margin:-800px 0 0 -800px;pointer-events:none;opacity:0;z-index:0;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tn-accent) 30%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 60%);mask-image:radial-gradient(circle,#000 0,transparent 60%);transition:opacity .8s}
.tn-viewport.tn-intro .tn-rays{opacity:1;animation:tnSpin 6s linear infinite}
@keyframes tnSpin{to{transform:rotate(360deg)}}
.tn-shake{position:absolute;inset:0;transform-origin:50% 50%;z-index:1}
.tn-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.tn-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.tn-hint{margin:3px 2px 0;font:6.5px Arial;color:#9fb3c2;text-align:right}
/* world pieces */
.tn-lines{position:absolute;left:0;top:0;overflow:visible}
.tn-line{fill:none;stroke:#4f6f88;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.tn-line.route{stroke:#ffd75a;stroke-width:2.4;filter:drop-shadow(0 0 4px #ffd75a)}
.tn-line.route-in{animation:tnDraw .45s ease-out both}
.tn-round{position:absolute;text-align:center;font:bold 9px Arial;letter-spacing:1.6px;color:#9fc0d6;white-space:nowrap}
.tn-slot{position:absolute;box-sizing:border-box;width:112px;height:18px;display:flex;align-items:center;gap:5px;padding:0 6px 0 0;border-radius:3px;overflow:hidden;
  border:1px solid #33516a;background:linear-gradient(#152a3d,#0d1a28);color:#eaf2f8;font:8px Arial;text-align:left}
.tn-seed{flex:none;display:grid;place-items:center;width:18px;height:100%;background:#00000055;border-right:1px solid #ffffff14;font:bold 7.5px Arial;color:#9fb6c6}
.tn-who{min-width:0;display:flex;flex-direction:column;line-height:1}
.tn-who b{font:bold 8px/1.05 Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-who small{font:6px/1.1 Arial;color:#8fa8ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-slot.open{cursor:pointer;border:1px dashed color-mix(in srgb,var(--tn-accent) 75%,#fff);background:color-mix(in srgb,var(--tn-accent) 12%,#07111b);animation:tnOpenPulse 1.6s ease-in-out infinite}
.tn-open-label{font:bold 7.5px Arial;letter-spacing:1px;color:var(--tn-accent)}
.tn-slot.open:hover,.tn-slot.open.picked{background:color-mix(in srgb,var(--tn-accent) 32%,#07111b);border-style:solid;animation:none;box-shadow:0 0 10px var(--tn-accent)}
.tn-viewport.has-claim .tn-slot.open{animation:none;cursor:default;opacity:.55}
@keyframes tnOpenPulse{50%{box-shadow:0 0 8px color-mix(in srgb,var(--tn-accent) 80%,transparent)}}
.tn-slot.spin{background:#ffd75a!important;border-color:#fff!important;box-shadow:0 0 16px #ffd75a,0 0 4px #fff!important;opacity:1!important}
.tn-slot.spin .tn-open-label,.tn-slot.landed .tn-open-label{color:#241605}
.tn-slot.landed{background:#ffd75a;border-color:#fff;animation:tnLand .26s ease-out}
@keyframes tnLand{50%{transform:scale(1.25)}}
.tn-slot.me{border:1px solid #ffe08a;background:linear-gradient(#5a4310,#2a1f07);box-shadow:0 0 10px #ffd75acc}
.tn-slot.me .tn-seed{background:#ffd75a;color:#241605}.tn-slot.me .tn-who b{color:#ffe9a6}
.tn-slot.stamp{animation:tnStamp .55s cubic-bezier(.2,1.6,.4,1) both;z-index:2}
@keyframes tnStamp{0%{transform:scale(2.6);opacity:0;filter:brightness(3)}60%{opacity:1;filter:brightness(1.4)}100%{transform:scale(1);opacity:1;filter:brightness(1)}}
.tn-slot.tbd{border-color:#24394c;background:#0a141e;color:#5f7890}
.tn-tbd{font:bold 7px Arial;letter-spacing:1.6px}
.tn-slot.tbd.route{border-color:#ffd75a;color:#ffd75a;box-shadow:0 0 8px #ffd75a88}
.tn-slot.route-in{animation:tnPop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes tnPop{0%{transform:scale(1.5);filter:brightness(2.5)}100%{transform:none}}
.tn-title{position:absolute;width:520px;text-align:center;pointer-events:none;transform:rotate(-4deg)}
.tn-title small{display:block;font:bold 11px Arial;letter-spacing:4px;color:#9fc0d6}
.tn-title b{display:block;font:italic 900 52px/.95 Impact,'Arial Black',sans-serif;color:#fff;text-shadow:0 3px 0 #000,0 0 18px #0009}
.tn-title em{display:block;font:italic 900 58px/.95 Impact,'Arial Black',sans-serif;color:var(--tn-accent);text-shadow:0 3px 0 #000,0 0 24px var(--tn-accent)}
.tn-trophy{position:absolute;width:116px;filter:drop-shadow(0 0 18px #f2c23f88) drop-shadow(0 6px 6px #000)}
.tn-trophy svg{display:block;width:100%}
.tn-champ{position:absolute;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;border:1.5px solid #ffe08a;
  background:linear-gradient(#3b2c0b,#140e04);box-shadow:0 0 0 1px #000,0 0 24px #f2c23f77,inset 0 0 14px #f2c23f33}
.tn-champ small{font:bold 9px Arial;letter-spacing:3px;color:#ffe08a}
.tn-champ b{font:26px/1 Impact,'Arial Black',sans-serif;font-weight:400;color:#f2c94c;text-shadow:0 2px 0 #000}
.tn-champ span{font:bold 7px Arial;letter-spacing:2px;color:#cfb26a}
/* intro: everything hidden, then the champion, then rounds flip in from the centre outward */
.tn-world.tn-pre .tn-slot,.tn-world.tn-pre .tn-round{opacity:0;transform:perspective(300px) rotateX(-95deg) scale(.6)}
.tn-world.tn-pre .tn-line{stroke-dashoffset:1}
.tn-world.tn-pre .tn-champ,.tn-world.tn-pre .tn-trophy,.tn-world.tn-pre .tn-title{opacity:0;transform:scale(.2)}
.tn-world.tn-champ-in .tn-trophy{animation:tnChampIn .7s cubic-bezier(.2,1.5,.4,1) both}
.tn-world.tn-champ-in .tn-champ{animation:tnChampIn .7s .12s cubic-bezier(.2,1.5,.4,1) both}
.tn-world.tn-reveal .tn-title{animation:tnTitleIn .6s 1.25s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tnChampIn{0%{opacity:0;transform:scale(.2) rotate(-25deg);filter:brightness(3)}100%{opacity:1;transform:none;filter:none}}
@keyframes tnTitleIn{0%{opacity:0;transform:rotate(-4deg) scale(2.2);filter:blur(6px)}100%{opacity:1;transform:rotate(-4deg);filter:none}}
.tn-world.tn-reveal .tn-slot,.tn-world.tn-reveal .tn-round{animation:tnFlipIn .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--d)*1ms + 150ms)}
.tn-world.tn-reveal .tn-line{animation:tnDraw .5s ease-out both;animation-delay:calc(var(--d)*1ms + 150ms)}
@keyframes tnFlipIn{0%{opacity:0;transform:perspective(300px) rotateX(-95deg) scale(.6);filter:brightness(2.4)}100%{opacity:1;transform:none;filter:none}}
@keyframes tnDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* big overlay text */
.tn-slam{position:absolute;left:0;right:0;top:50%;z-index:4;text-align:center;pointer-events:none;opacity:0;transform:translateY(-50%)}
.tn-slam b{display:block;font:italic 900 42px/.92 Impact,'Arial Black',sans-serif;color:#fff;text-shadow:0 4px 0 #000,0 0 30px #000}
.tn-slam em{display:block;font:italic 900 46px/.92 Impact,'Arial Black',sans-serif;color:var(--tn-accent);text-shadow:0 4px 0 #000,0 0 30px var(--tn-accent)}
.tn-slam small{display:block;font:bold 8px Arial;letter-spacing:4px;color:#cfe3f1;margin-bottom:4px}
.tn-slam.banner b{font-size:34px}.tn-slam.banner em{font-size:20px;color:#ffd75a;text-shadow:0 3px 0 #000,0 0 20px #ffd75a}
.tn-slam.claimed b{font-size:28px;color:#ffd75a}.tn-slam.claimed em{font-size:40px;color:#fff;text-shadow:0 4px 0 #000,0 0 26px #ffd75a}
.tn-slam.claimed{top:24%}
.tn-slam.go{animation:tnSlam 1.6s cubic-bezier(.2,1.2,.3,1) both}
.tn-slam.title.go{animation-duration:1.9s}
/* every keyframe sets the blur explicitly — otherwise the browser eases it in across the whole hold (v72 fix) */
@keyframes tnSlam{0%{opacity:0;transform:translateY(-50%) scale(2.6) skewX(-12deg);filter:blur(8px)}14%{opacity:1;transform:translateY(-50%) scale(.94) skewX(-8deg);filter:blur(0)}22%{opacity:1;transform:translateY(-50%) scale(1.03) skewX(-8deg);filter:blur(0)}84%{opacity:1;transform:translateY(-50%) scale(1) skewX(-8deg);filter:blur(0)}100%{opacity:0;transform:translateY(-50%) scale(1.2) skewX(-8deg);filter:blur(4px)}}
.tn-viewport.tn-spinning .tn-slot.open{animation:none}
/* claim popover */
.tn-confirm{position:absolute;z-index:5;display:grid;gap:3px;min-width:120px;padding:6px 8px;border-radius:6px;border:1px solid var(--tn-accent);background:#07111bf2;box-shadow:0 8px 20px #000c,0 0 14px color-mix(in srgb,var(--tn-accent) 50%,transparent);cursor:default}
.tn-confirm b{font:12px/1 Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:.6px;color:#fff}
.tn-confirm span{font:7px Arial;color:#b9c9d4}
.tn-confirm div{display:flex;gap:4px;margin-top:2px}
.tn-x{width:18px;border-radius:4px;font-size:8px;border:1px solid #ffffff30;background:#ffffff10;color:#fff;cursor:pointer}
/* details */
.tn-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.tn-card{padding:8px 9px;border-radius:7px;border:1px solid #ffffff1f;background:#08111bcc;box-shadow:0 6px 16px #0006}
.tn-card h3{margin:0 0 6px;font:12px/1 Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:1px;color:#fff}
.tn-prizes,.tn-schedule{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.tn-prizes li,.tn-schedule li{display:flex;align-items:baseline;gap:6px;padding:3px 7px;border-radius:4px;background:#ffffff08;border:1px solid #ffffff0d}
.tn-prizes span,.tn-schedule span{flex:1;font:bold 7px Arial;letter-spacing:1px;color:#cfdbe4}
.tn-prizes b{font:12px Impact,Arial;font-weight:400;color:#7dff6a}.tn-prizes small,.tn-schedule small{font:6.5px Arial;color:#8fa8ba}
.tn-prizes li.gold{border-color:#f2c94c66;background:#f2c94c12}.tn-prizes li.gold b{color:#f2c94c}
.tn-prizes li.silver b{color:#dfe8ee}.tn-prizes li.bronze b{color:#e0a36a}
.tn-schedule b{font:bold 8px Arial;color:#fff}
.tn-rules{margin:0;padding-left:12px;display:grid;gap:4px;font:7.5px/1.45 Arial;color:#d3dee6}
.tn-rules li::marker{color:var(--tn-accent)}
.tn-preview-note{margin:10px 0 0;text-align:center;font:6.5px Arial;letter-spacing:1px;color:#8fa8ba}
body.mobile-layout .tn-hero{grid-template-columns:1fr}body.mobile-layout .tn-details{grid-template-columns:1fr}
@media(prefers-reduced-motion:reduce){.tn-claim,.tn-slot.open{animation:none}}
.tn-tip{position:absolute;z-index:6;pointer-events:none;display:grid;min-width:80px;padding:4px 7px;border-radius:5px;border:1px solid var(--tn-accent);background:#050c14f2;box-shadow:0 4px 10px #000a}
.tn-tip small{font:bold 5.5px Arial;letter-spacing:1.4px;color:#93a9b8}.tn-tip b{font:bold 9px Arial;color:#fff}.tn-tip b.open{color:var(--tn-accent)}.tn-tip span{font:6.5px Arial;color:#b9c9d4}
.tn-tip[hidden]{display:none}
.tn-confirm[hidden]{display:none}
/* ==== v91: live & finished tournaments (08sr-tournament-bracket.js, 08su-tournament-match.js) ==== */
/* main page rows */
.mp-when.mp-live{color:#ffb3ab;font-weight:bold}
.mp-when.mp-live i{flex:none;width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;animation:tnLiveDot 1.2s ease-in-out infinite}
@keyframes tnLiveDot{50%{opacity:.35;box-shadow:0 0 1px #ff3b3b}}
.mp-view.live{background:linear-gradient(#ff6b5e,#c82a20 55%,#a3211a);border-color:#ffc0b8}
.mp-view.hot{animation:tnClaimGlow 1.6s ease-in-out infinite}
.mp-view.done{background:linear-gradient(#ffe68a,#d9a52a 55%,#b9861a);border-color:#fff0b0;color:#241605;text-shadow:none}
.mp-tourney[data-status=finished] .mp-prize b{color:#f2c94c}
/* hero */
.tn-claim.race{background:linear-gradient(#9cff78,#3fbf34 50%,#2a8f25);border-color:#d9ffcc;color:#08240a}
.tn-claim.watch{background:linear-gradient(#7fd6ff,#2a8fc8 50%,#1d6f9f);border-color:#cdeeff;color:#04131d;animation:none}
#tournamentScreen[data-status=live] .tn-countdown strong{color:#ffb3ab;text-shadow:0 0 8px #ff3b3b}
#tournamentScreen[data-status=live] .tn-countdown small::before{content:'● ';color:#ff3b3b;animation:tnLiveDot 1.2s ease-in-out infinite}
.tn-cta-note b{color:#fff}
.tn-link.quiet{color:#9fc0d6}
.tn-checked{color:#7dff6a;font-weight:bold}
.tn-checkin{display:grid;gap:3px;text-align:left}
.tn-checkin small{font:bold 5.5px Arial;letter-spacing:1px;color:#93a9b8}
.tn-checkin select,.tn-checkin input{box-sizing:border-box;width:100%;height:16px;padding:0 4px;border-radius:3px;border:1px solid #6f93ab;background:#050b12;color:#eef3f6;font:7px Arial}
.tn-checkin label{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px;font:bold 6px Arial;color:#93a9b8}
.tn-checkin .tn-claim.small{height:16px;font-size:9px}
.tn-checkin .tn-link{justify-self:start}
/* bracket results */
.tn-slot.res{cursor:pointer;padding-right:4px;font:inherit;color:#eaf2f8;text-align:left}
.tn-slot.res:hover,.tn-slot.res:focus-visible{border-color:var(--tn-accent);filter:brightness(1.18);outline:none}
.tn-et{margin-left:auto;flex:none;font:bold 7px 'Courier New',monospace;color:#9fe0ff}
.tn-et.bad{color:#ff8a80}.tn-et.live{color:#ff6b5e;font-family:Arial;letter-spacing:1px;animation:tnLiveDot 1.2s ease-in-out infinite}
.tn-et.go{color:#241605;background:#ffd75a;border-radius:2px;padding:1px 3px;font-family:Arial}
.tn-slot.win{border-color:#7dff6a99;background:linear-gradient(#173a2a,#0d2219)}
.tn-slot.win .tn-who b{color:#d9ffcc}
.tn-slot.lose{opacity:.5;filter:saturate(.6)}
.tn-slot.lose .tn-who b{text-decoration:line-through #ffffff55}
.tn-slot.live{border-color:#ff6b5e;box-shadow:0 0 6px #ff3b3b66}
.tn-slot.ready{border-color:#ffd75a;box-shadow:0 0 10px #ffd75acc;animation:tnOpenPulse 1.4s ease-in-out infinite}
.tn-slot.res.me{border-color:#ffe08a;background:linear-gradient(#5a4310,#2a1f07)}
.tn-slot.res.me.lose{opacity:.75}
.tn-champ{font:inherit;color:inherit;cursor:pointer;padding:0}
.tn-champ.crowned{background:linear-gradient(#5a4310,#1b1306);box-shadow:0 0 0 1px #000,0 0 36px #f2c23fcc,inset 0 0 18px #f2c23f55}
.tn-champ.crowned b{font-size:20px;color:#fff;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-champ.crowned span{color:#ffe08a}
.tn-champ.me b{color:#ffe08a}
.tn-champ.ready{animation:tnOpenPulse 1.4s ease-in-out infinite}
.tn-trophy.won{filter:drop-shadow(0 0 26px #f2c23f) drop-shadow(0 6px 6px #000)}
.tn-advance{animation:tnPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--n,0)*55ms)}
.tn-et-in{animation:tnEtIn .5s ease-out both}
@keyframes tnEtIn{0%{opacity:0;transform:translateX(6px)}}
/* schedule + payout */
.tn-schedule li.done b{color:#7dff6a}.tn-schedule li.live{border-color:#ff6b5e66;background:#ff3b3b14}.tn-schedule li.live b{color:#ff8a80}
.tn-prizes span em{display:block;font:normal 6.5px Arial;letter-spacing:0;color:#fff;margin-top:1px}
/* finished: podium · your result · stats */
.tn-results{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:10px}
.tn-results[hidden]{display:none}
.tn-podium-row{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:6px}
.tn-podium-thirds{display:grid;gap:5px}
.tn-podium-spot{position:relative;display:grid;justify-items:center;gap:1px;padding:6px 5px 5px;border-radius:6px;border:1px solid #ffffff1f;background:linear-gradient(#ffffff0d,#00000033);color:#eef3f6;font:inherit;cursor:pointer;text-align:center}
.tn-podium-spot:hover{border-color:var(--tn-accent);filter:brightness(1.12)}
.tn-podium-spot.p1{padding-top:10px;border-color:#f2c94c88;background:linear-gradient(#f2c94c22,#00000040);box-shadow:0 0 16px #f2c94c33}
.tn-podium-spot.me{box-shadow:0 0 0 1px #ffe08a,0 0 14px #ffd75a66}
.tn-podium-cup{width:26px}.tn-podium-spot.p1 .tn-podium-cup{width:36px}.tn-podium-thirds .tn-podium-cup{width:18px}
.tn-podium-cup svg,.tn-you-cup svg{display:block;width:100%;filter:drop-shadow(0 2px 3px #000a)}
.tn-podium-spot small{font:bold 6px Arial;letter-spacing:1.2px;color:#93a9b8}
.tn-podium-spot b{font:13px/1 Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:.4px;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-podium-spot.p1 b{font-size:17px;color:#f2c94c}
.tn-podium-spot img{width:100%;height:42px;object-fit:contain;filter:drop-shadow(0 4px 4px #000a)}
.tn-podium-thirds .tn-podium-spot{grid-template-columns:18px minmax(0,1fr);justify-items:start;text-align:left;column-gap:6px;row-gap:0;padding:4px 6px}
.tn-podium-thirds .tn-podium-spot .tn-podium-cup{grid-row:1/4;align-self:center}
.tn-podium-thirds .tn-podium-spot>:not(.tn-podium-cup){grid-column:2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-podium-thirds .tn-podium-spot img,.tn-podium-thirds .tn-podium-spot em{display:none}
.tn-podium-thirds .tn-podium-spot b{font-size:11px}
.tn-podium-spot span{font:6.5px Arial;color:#b9c9d4}
.tn-podium-spot em{font:bold 6.5px 'Courier New',monospace;font-style:normal;color:#9fe0ff}
.tn-you-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.tn-you-cup{width:30px;flex:none}
.tn-you-row b{display:block;font:20px/1 Impact,'Arial Black',sans-serif;font-weight:400;color:#f2c94c}
.tn-you-row small{font:7px Arial;color:#b9c9d4}
.tn-you-stats,.tn-event-stats ul{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:3px}
.tn-you-stats li,.tn-event-stats li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px;padding:3px 7px;border-radius:4px;background:#ffffff08;border:1px solid #ffffff0d}
.tn-you-stats small,.tn-event-stats small{font:bold 6px Arial;letter-spacing:1px;color:#93a9b8}
.tn-you-stats b,.tn-event-stats b{justify-self:end;font:bold 8px Arial;color:#fff;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-event-stats span{grid-column:1/-1;font:6.5px Arial;color:#8fa8ba}
.tn-you .tn-claim.small{width:100%}
body.mobile-layout .tn-results{grid-template-columns:1fr}
/* match screen: the challenge matchup over the tournament page */
#tournamentScreen.match-open{overflow:hidden}
#tournamentScreen.match-open .tn-page{visibility:hidden}
.tn-match-layer{position:absolute;inset:0;z-index:20}
.tn-match-layer[hidden]{display:none}
.tn-match-layer.tm-anim{animation:tp-page-in .3s cubic-bezier(.2,.8,.2,1) both}
.tn-match .challenge-driver.tn-winner h2{color:#d9ffcc;text-shadow:0 0 12px #7dff6a88}
.tn-roads h5{margin:0 0 4px;font:700 7px/11px Arial;letter-spacing:1.2px;color:#b3c6d7}
.tn-road{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.tn-road li{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;border:1px solid #000;background:var(--social-header);box-shadow:inset 0 1px #c3d2dd2b,0 2px 0 #000;font:bold 8.5px Arial;color:#eef3f6;cursor:pointer}
.tn-road li:hover,.tn-road li:focus-visible{filter:brightness(1.18);outline:none}
.tn-road li span{font-size:6.5px;letter-spacing:1px;color:#93a9b8}
.tn-road li small{font:bold 8px 'Courier New',monospace;color:#9fe0ff}
.tn-road li.win b{color:#a8f5a0}.tn-road li.lose b{color:#ff9a90}
.tn-road li.none{grid-template-columns:1fr;cursor:default;color:#8b98a1;font-style:italic}
body.mobile-layout .tn-match-layer{position:relative;inset:auto;min-height:100%}
body.mobile-layout #tournamentScreen.match-open .tn-page{display:none}
body.mobile-layout #tournamentScreen.match-open{overflow-y:auto}
body.mobile-layout .tn-road li{font-size:11px;min-height:40px}
@media(prefers-reduced-motion:reduce){.tn-slot.ready,.tn-champ.ready,.mp-view.hot,.tn-et.live,.mp-when.mp-live i{animation:none}}
/* phone: the bracket title sits above its tools so neither wraps */
body.mobile-layout .tn-bracket-bar{flex-wrap:wrap}
body.mobile-layout .tn-bracket-bar h2{flex:1 0 100%}
body.mobile-layout .tn-tools button{white-space:nowrap}
/* v92 trophy case (shared: account page, online racer profile) — gold = 1st, silver = 2nd, bronze = 3rd – 4th */
.trophy-case{display:inline-flex;align-items:center;gap:3px}
.trophy-pin{position:relative;width:30px;cursor:help;outline:none}
.trophy-pin svg{display:block;width:100%;filter:drop-shadow(0 2px 2px #0009);transition:transform .15s}
.trophy-pin.gold svg{filter:drop-shadow(0 0 5px #f2c23f) drop-shadow(0 2px 2px #0009)}
.trophy-pin:hover svg,.trophy-pin:focus-visible svg{transform:translateY(-2px) scale(1.12)}
.trophy-tip{position:absolute;left:50%;top:calc(100% + 6px);z-index:5;transform:translateX(-50%);display:grid;gap:1px;min-width:118px;padding:5px 8px;border-radius:5px;border:1px solid var(--tip-accent,#c9a23c);background:#07111bf2;box-shadow:0 6px 14px #000a;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.trophy-pin:hover .trophy-tip,.trophy-pin:focus-visible .trophy-tip{opacity:1;visibility:visible}
.trophy-tip small{font:bold 5.5px Arial;letter-spacing:1.4px;color:#93a9b8;font-style:normal}
.trophy-pin.gold .trophy-tip small{color:#f2c94c}.trophy-pin.silver .trophy-tip small{color:#e3eaef}.trophy-pin.bronze .trophy-tip small{color:#e0a36a}
.trophy-tip b{font:bold 8px Arial;color:#fff;font-style:normal;letter-spacing:.5px}
.trophy-tip span{font:6.5px Arial;color:#b9c9d4;font-style:normal;letter-spacing:0}
.trophy-empty{font:bold 5.5px Arial;letter-spacing:1px;color:#5a4a14;opacity:.7}

/* ==== styles/account.css ==== */
/* EDIT MY ACCOUNT — restyled v75 to match the CREATE AN ACCOUNT sign-up panels (gold face, metal backing,
   italic black labels, white fields, silver metal buttons) on the sign-up night-streak background.
   All sizes are 854-px design units (the whole game is scaled to the window). */
#accountScreen{position:absolute;inset:102px 0 49px;z-index:83;overflow-x:hidden;overflow-y:auto;color:#191607;font:12px Arial,sans-serif;
  background:repeating-linear-gradient(0deg,transparent 0 9px,#5293bc20 10px,transparent 12px 15px,#d9943620 16px,transparent 19px 24px),radial-gradient(ellipse at 96% 28%,#b57d08bb,transparent 32%),radial-gradient(ellipse at 7% 43%,#0424aab0,transparent 50%),linear-gradient(120deg,#02040d 15%,#090b28 48%,#43102a 66%,#070819 92%);
  border-top:1px solid #59727d;scrollbar-width:thin;scrollbar-color:#8a6a18 #0a0b1c}
#accountScreen[hidden]{display:none!important}
body.mobile-layout #accountScreen{top:58px;bottom:0}
footer.status .edit[role=button]{cursor:pointer}footer.status .edit[role=button]:hover,footer.status .edit[role=button]:focus-visible{color:#fff;text-decoration:underline;outline:none}
/* the sign-up page's blue band behind the header panel */
.ac-streaks{position:absolute;left:0;right:0;top:46px;height:112px;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 23px,#4bcefd20 24px 27px,transparent 29px 43px),linear-gradient(100deg,#0874b9,#1487c6 66%,#0a689a);border-top:3px solid #429edc80;box-shadow:0 7px 20px #040918}
.ac-page{position:relative;padding:14px 18px 18px 14px;box-sizing:border-box}
.ac-back{position:absolute;right:16px;top:12px;left:auto;bottom:auto;z-index:4}
/* gold panel = metal backing + gold face with the clipped top-right corner, like .gold-panel / .panel-face */
.ac-panel{position:relative;filter:drop-shadow(6px 6px 3px #0009);padding:6px 16px 12px 16px;isolation:isolate}
.ac-panel:before{content:'';position:absolute;inset:8px 0 0 22px;z-index:-2;background:var(--nitto-banner-texture,linear-gradient(90deg,#15181b,#2c3237 50%,#111417));border-top:3px solid #bfa559;border-bottom:3px solid #917530}
.ac-face{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,#c3990b,#d8aa0b 35%,#bf8f09 63%,#946512);
  clip-path:polygon(0 0,calc(100% - 60px) 0,calc(100% - 44px) 26px,100% 26px,100% 100%,0 100%);box-shadow:inset 2px 2px 2px #fff2aa,inset -2px -3px 3px #554200;border-radius:10px 0 0 0}
.ac-title{display:flex;gap:9px;align-items:center;margin:5px 0 6px;color:#fff;font:italic 900 17px/1 Arial;letter-spacing:1.1px;text-shadow:2px 2px 1px #705514;white-space:nowrap;transform:scaleY(.78);transform-origin:left}
.ac-title img{width:21px;height:24px;object-fit:contain;filter:drop-shadow(2px 2px 1px #3c2900);transform:rotate(-12deg)}
/* fields — same as the sign-up form */
.ac-panel label{position:relative;display:block;font:italic 900 9px/1.2 Arial;letter-spacing:.7px;margin-bottom:7px}
.ac-panel input:not([type=radio]):not([type=checkbox]),.ac-panel select{display:block;box-sizing:border-box;width:100%;height:20px;border:1px solid #bbbda2;border-radius:5px;background:#fff;color:#15191b;box-shadow:inset 1px 1px 1px #858574;padding:2px 7px;margin-top:2px;font:11px/1 Arial;letter-spacing:0;outline:none}
.ac-panel select{border-radius:0;padding:0 4px}
.ac-panel input:focus,.ac-panel select:focus{border-color:#4d3a05;box-shadow:inset 1px 1px 1px #858574,0 0 0 2px #fff6}
.ac-count{position:absolute;right:6px;bottom:4px;font:normal 7px Arial;color:#7a7a6a}
.ac-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ac-form{display:block}
.ac-split{margin-top:6px;padding-top:7px;border-top:1px solid #8a6a1866}
.ac-current{margin:0 0 7px;font:italic 900 8.5px/1.3 Arial;letter-spacing:.6px}.ac-current b{font-style:normal;font-weight:700;letter-spacing:0}
.ac-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.ac-metal{min-height:20px;padding:2px 11px;font-size:9.5px;cursor:pointer;white-space:nowrap}
.ac-link{padding:0;border:0;background:none;color:#2a1d02;font:italic 900 8px Arial;text-decoration:underline;cursor:pointer}
.ac-error{margin:0 0 6px;font:bold 8px Arial;color:#8a0f0f;text-shadow:0 1px #ffe9a8}.ac-error:empty{display:none}
.ac-check{display:flex!important;align-items:flex-start;gap:7px;margin:0!important;padding:5px 0;border-top:1px solid #8a6a1840;cursor:pointer}
.ac-check:first-child{border-top:0}
.ac-check input{flex:none;width:13px;height:13px;margin:1px 0 0;accent-color:#111}
.ac-check b{display:block;font:italic 900 9px/1.2 Arial;letter-spacing:.6px}.ac-check small{display:block;font:normal 7.5px/1.3 Arial;letter-spacing:0;color:#3d3209}
.ac-check.inline{border:0;padding:2px 0 6px}
.ac-radios{border:0;padding:0;margin:0 0 4px;font:italic 900 9px/1.2 Arial;letter-spacing:.7px}
.ac-radios legend{margin:0 0 4px;padding:0}
.ac-radios label{display:inline-flex!important;align-items:center;gap:5px;margin:0 12px 4px 0!important}
.ac-radios input{width:13px;height:13px;margin:0;accent-color:#111}
.ac-strength{display:flex;align-items:center;gap:7px;margin:-2px 0 4px}
.ac-meter{display:grid;grid-template-columns:repeat(4,16px);gap:2px}.ac-meter i{height:5px;background:#fff;border:1px solid #bbbda2;box-shadow:inset 1px 1px 1px #858574}
.ac-strength small{font:italic 900 6.5px Arial;letter-spacing:.5px;color:#3d3209}
.ac-strength[data-s="1"] i:nth-child(-n+1){background:#c62828;border-color:#7a0f0f}.ac-strength[data-s="2"] i:nth-child(-n+2){background:#e07b12;border-color:#7a3d05}
.ac-strength[data-s="3"] i:nth-child(-n+3){background:#7da823;border-color:#3e5a07}.ac-strength[data-s="4"] i{background:#2e9e2e;border-color:#135413}
/* header panel */
.ac-hero{margin-bottom:12px}
.ac-hero-body{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:0 8px 2px 4px}
.ac-avatar-col{display:grid;gap:4px;justify-items:stretch;width:92px}
.ac-avatar{display:block;width:92px;height:92px;object-fit:cover;border:2px solid #fff;border-radius:6px;background:#111;box-shadow:2px 3px 3px #3c2900;cursor:pointer}
.ac-avatar-col .ac-metal{padding:2px 4px;font-size:8.5px}
.ac-avatar-col .ac-error{margin:0;font-size:7px;line-height:1.2}
.ac-who h2{margin:0;color:#fff;font:italic 900 27px/1 Arial;letter-spacing:1px;text-shadow:2px 2px 1px #705514;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:scaleY(.86);transform-origin:left}
.ac-motto{margin:2px 0 5px;font:italic 700 9.5px Arial;color:#2a1d02}.ac-motto.empty{font-weight:400;color:#5c4a12}
.ac-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ac-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#191607;color:#f3d791;font:italic 900 7px Arial;letter-spacing:.8px;box-shadow:inset 0 1px #ffffff22}
.ac-chip i{width:5px;height:5px;border-radius:50%;background:#6b6b5c}.ac-chip.online i{background:#7dff6a;box-shadow:0 0 4px #7dff6a}
.ac-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ac-stat span{display:block;font:italic 900 7.5px/1.2 Arial;letter-spacing:.6px;margin-bottom:2px}
.ac-stat b{display:block;height:20px;padding:0 7px;border:1px solid #bbbda2;border-radius:5px;background:#fff;box-shadow:inset 1px 1px 1px #858574;font:bold 11px/20px Arial;color:#15191b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-rank{display:grid;place-items:center;padding-right:6px}
/* panels grid */
.ac-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.ac-car{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ac-car img{width:96px;height:52px;object-fit:contain;filter:drop-shadow(2px 4px 2px #3c2900)}
.ac-car span{display:block;font:italic 900 8px Arial;letter-spacing:.7px}.ac-car b{font:bold 11px Arial}
.ac-note{margin:14px 0 0;text-align:center;font:8px Arial;letter-spacing:1.6px;color:#8fa3b3}
.ac-toast{position:fixed;left:50%;bottom:58px;z-index:9;font-size:8px}
.ac-toast.bad{border-color:#ff6b62;color:#ffd2cf}
body.mobile-layout .ac-hero-body{grid-template-columns:auto 1fr}body.mobile-layout .ac-rank{display:none}body.mobile-layout .ac-grid,body.mobile-layout .ac-stats{grid-template-columns:1fr 1fr}
/* v91 trophy case beside the rank badge (cups + tips: .trophy-case in tournament.css) */
.ac-rank{gap:5px}
.ac-trophies{flex-wrap:wrap;justify-content:center;max-width:96px}
.ac-trophies .trophy-tip{left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}   /* tip opens to the left of the cup */
body.mobile-layout .ac-rank{display:flex;justify-content:flex-start;padding:0}
body.mobile-layout .ac-rank .rank-badge{display:none}
body.mobile-layout .ac-trophies{max-width:none;justify-content:flex-start}
body.mobile-layout .ac-trophies .trophy-tip{right:auto;left:0;top:auto;bottom:calc(100% + 6px);transform:none}

/* ==== styles/login-motion.css ==== */
/* Login presentation only. Kept separate from the gameplay/auth integration. */
#entryStage[data-page="login"] .login-page { animation:none; }
#entryStage[data-page="login"] .entry-brand {
  animation:login-logo-swipe .68s .08s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] .entry-blue-band {
  animation:login-band-swipe .72s .3s cubic-bezier(.15,.85,.18,1) both;
}
#entryStage[data-page="login"] .entry-blue-band::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,#bceeff66 49%,#e9faff99 50%,transparent 62%);
  animation:login-speed-light .65s .48s ease-out both;
}
#entryStage[data-page="login"] .helmet-returning {
  height:auto;aspect-ratio:1;
  animation:login-helmet-swipe .65s .68s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] .returning-label {
  animation:login-content-swipe .4s 1.03s ease-out both;
}
#entryStage[data-page="login"] .switch-new {
  animation:login-left-swipe .6s .85s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] #entryLoginForm {
  animation:login-panel-swipe .66s 1.12s cubic-bezier(.16,.85,.2,1) both;
}
#entryStage[data-page="login"] #entryLoginForm h1 {
  transform:none;
  animation:login-content-swipe .4s 1.67s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] #entryLoginForm h1 img {
  width:33px;height:auto;max-height:none;aspect-ratio:auto;flex:0 0 auto;
  object-fit:contain;transform:rotate(-8deg);
}
#entryStage[data-page="login"] .login-fields label {
  animation:login-content-swipe .38s 1.79s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] .login-fields label:nth-child(2) {animation-delay:1.88s;}
#entryStage[data-page="login"] .login-actions button {
  animation:login-content-swipe .38s 1.98s cubic-bezier(.16,.8,.2,1) both;
}
#entryStage[data-page="login"] .login-actions button:nth-child(2) {animation-delay:2.07s;}
#entryStage[data-page="login"] .switch-new img {
  height:auto;aspect-ratio:auto;transform:none;
  filter:drop-shadow(2px 5px 3px #0009) drop-shadow(0 0 0 #ffd46a00);
  transition:filter 1.1s ease;
}
#entryStage[data-page="login"] .switch-new:is(:hover,:focus-visible) img {
  transform:none;
  filter:drop-shadow(2px 5px 3px #0009) drop-shadow(0 0 6px #ffe9a9) drop-shadow(0 0 17px #efb52cd9) brightness(1.12);
}
/* Override the older phone entrance timings without changing its layout. */
@media(max-width:600px) {
  body.mobile-layout #entryStage[data-page="login"] .entry-brand {animation:login-logo-swipe .68s .08s cubic-bezier(.16,.8,.2,1) both;}
  body.mobile-layout #entryStage[data-page="login"] .entry-blue-band {animation:login-band-swipe .72s .3s cubic-bezier(.15,.85,.18,1) both;}
  body.mobile-layout #entryStage[data-page="login"] #entryLoginForm {animation:login-panel-swipe .66s 1.12s cubic-bezier(.16,.85,.2,1) both;}
  body.mobile-layout #entryStage[data-page="login"] #entryLoginForm h1 {transform:none;}
  body.mobile-layout #entryStage[data-page="login"] #entryLoginForm h1 img {width:38px;height:auto;aspect-ratio:auto;}
  body.mobile-layout #entryStage[data-page="login"] .helmet-returning {animation:login-helmet-swipe .65s .68s cubic-bezier(.16,.8,.2,1) both;}
  body.mobile-layout #entryStage[data-page="login"] .switch-new {
    animation:login-left-swipe .6s .85s cubic-bezier(.16,.8,.2,1) both;
    transform:none;transition:box-shadow 1.1s ease,border-color 1.1s ease;
  }
  body.mobile-layout #entryStage[data-page="login"] .switch-new:is(:hover,:focus-visible) {
    transform:none;border-color:#e4be64;box-shadow:inset 0 1px #fff0a944,0 7px 14px #0008,0 0 18px #e9b53945;
  }
  body.mobile-layout #entryStage[data-page="login"] .switch-new img {height:auto;transform:none;transition:filter 1.1s ease;}
  body.mobile-layout #entryStage[data-page="login"] .switch-new:is(:hover,:focus-visible) img {transform:none;filter:drop-shadow(0 0 5px #ffe9a9) drop-shadow(0 0 12px #efb52cd9) brightness(1.12);}
}
@keyframes login-logo-swipe {
  0% {opacity:0;translate:-110% 12px;transform:skewX(-12deg);}
  76% {opacity:1;translate:12px 0;transform:skewX(2deg);}
  100% {opacity:1;translate:0 0;transform:skewX(0);}
}
@keyframes login-band-swipe {
  0% {opacity:0;translate:110% 0;}
  70% {opacity:1;translate:-15px 0;}
  100% {opacity:1;translate:0 0;}
}
@keyframes login-panel-swipe {
  0% {opacity:0;translate:110vw 0;}
  78% {opacity:1;translate:-8px 0;}
  100% {opacity:1;translate:0 0;}
}
@keyframes login-left-swipe {from{opacity:0;translate:-240px 0;}to{opacity:1;translate:0 0;}}
@keyframes login-helmet-swipe {from{opacity:0;translate:290px 20px;}to{opacity:1;translate:0 0;}}
@keyframes login-content-swipe {from{opacity:0;translate:42px 0;}to{opacity:1;translate:0 0;}}
@keyframes login-speed-light {0%{opacity:0;translate:-100% 0;}30%{opacity:1;}100%{opacity:0;translate:100% 0;}}
@media(prefers-reduced-motion:reduce) {
  #entryStage[data-page="login"] :is(.entry-brand,.entry-blue-band,.helmet-returning,.returning-label,.switch-new,#entryLoginForm,#entryLoginForm h1,.login-fields label,.login-actions button),
  body.mobile-layout #entryStage[data-page="login"] :is(.entry-brand,.entry-blue-band,.helmet-returning,.switch-new,#entryLoginForm) {animation:none;}
  #entryStage[data-page="login"] .entry-blue-band::after {animation:none;opacity:0;}
  #entryStage[data-page="login"] .switch-new img,
  body.mobile-layout #entryStage[data-page="login"] .switch-new {transition:none;}
}

/* ==== styles/ambient-loading.css ==== */
/* Shared surround: warm light above, blue and burgundy below the game. */
html {
  background: #050711;
}
body, #entryScreen,
body.mobile-layout #entryScreen:has(#entryStage[data-page="login"]) {
  background:
    radial-gradient(ellipse at 96% 8%, rgba(172,96,23,.24), transparent 49%),
    radial-gradient(ellipse at 4% 108%, rgba(25,73,151,.29), transparent 51%),
    radial-gradient(ellipse at 20% 98%, rgba(129,34,66,.23), transparent 44%),
    #050711;
  background-attachment: fixed;
}
body.session-loading #entryScreen { display: none !important; }
body.session-loading #fit { visibility: hidden !important; }
body.session-loading #gameConnectionStatus { display: none !important; }
.session-loader {
  position: fixed; inset: 0; z-index: 100001;
  display: grid; place-items: center; color: #ebd3a1;
  font: 12px Arial, sans-serif;
}
.session-loader[hidden] { display: none; }
.session-loader__content { width: min(300px, 76vw); text-align: center; }
.session-loader__eyebrow {
  margin: 0 0 17px; color: #bba77f; font-size: 10px;
  font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
}
.session-loader__track {
  position: relative; height: 4px; overflow: hidden;
  background: #ffffff0d; border-radius: 8px;
  box-shadow: 0 0 0 1px #bda36720, 0 8px 32px #0005;
}
.session-loader__track::after {
  content: ''; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, #b7883c 25%, #ffe5a1 75%, transparent);
  filter: drop-shadow(0 0 8px #d3a85a);
  animation: session-racing-light 1.35s cubic-bezier(.45,0,.25,1) infinite;
}
.session-loader__label { margin: 17px 0 0; color: #c7cbd5; letter-spacing: .08em; line-height: 1.6; }
.session-loader__retry {
  margin-top: 18px; padding: 9px 19px; border: 1px solid #b28b49;
  background: #142033; color: #f4d18c; border-radius: 3px; cursor: pointer;
}
.session-loader__retry[hidden] { display: none; }
.session-loader[data-error] .session-loader__track::after { animation: none; width: 100%; opacity: .35; }
@keyframes session-racing-light {
  from { transform: translateX(-110%); }
  to { transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .session-loader__track::after { animation: none; width: 100%; opacity: .65; }
}

/* ==== styles/starter-showroom.css ==== */
/* Starter selection shares the showroom rail, images and captured ground shadows. */
#entryStage[data-page=rides] {background:radial-gradient(ellipse at 70% 110%,#8296b8,#3d5375 39%,#161f2b 76%)}
.starter-showroom-shell {display:none}
#entryStage[data-page=rides] .starter-showroom-shell {display:block}
#entryStage[data-page=rides] .starter-brand {display:none}
#entryStage[data-page=rides] .starter-bottom {height:49px;border-top:1px solid #bba264}
.starter-showroom-shell .menu button:disabled {color:#68737c;cursor:default;filter:grayscale(1);text-shadow:0 1px #ffffff70}
#entryStage .rides-page {inset:102px 0 49px}
#entryStage .rides-page h1 {left:28px;top:17px;font:italic 900 14px Arial;transform:none;letter-spacing:1px}
.starter-showroom-hint {position:absolute;right:22px;top:20px;margin:0;color:#b9cbd8;font:10px Arial}
#entryStage .ride-window {top:53px;left:0;right:auto;width:854px;height:351px}
#entryStage .ride-track {width:max-content;height:100%;transition:none}
#entryStage .starter-car {flex:0 0 390px;width:390px;height:351px}
#entryStage .starter-car h2 {top:45px;font:900 23px Arial;letter-spacing:1px}
#entryStage .starter-car h2 i {font:italic 1000 27px/.9 Arial;letter-spacing:-2px;-webkit-text-stroke:.6px #f5f9ff;margin-left:4px}
#entryStage .starter-car[data-starter-car=evo] h2 {font-size:17px;letter-spacing:.4px}
#entryStage .starter-car[data-starter-car=evo] h2 i {font-size:23px}
#entryStage .starter-car[data-starter-car=civic] {cursor:pointer}
#entryStage .starter-car .showroom-shadow {display:none}
#entryStage .rides-page .entry-back {bottom:-35px;left:25px;z-index:6}
@media(max-width:600px), (max-width:1000px) and (max-height:600px) {
 body.mobile-layout #entryStage .starter-showroom-shell {display:none}
 body.mobile-layout #entryStage .rides-page {inset:auto;gap:16px}
 body.mobile-layout .starter-showroom-stage {width:100%;height:auto;transform:none}
 body.mobile-layout #entryStage .rides-page .classic-garage-bar {position:relative;inset:auto;width:100%;height:auto;padding:16px;border:1px solid #6b859444;border-radius:7px}
 body.mobile-layout #entryStage .rides-page h1 {position:static;font:italic 900 20px Arial;margin:0 0 10px}
 body.mobile-layout .starter-showroom-hint {position:static;font:12px/1.5 Arial}
 body.mobile-layout #entryStage .ride-window {position:relative;inset:auto;width:100%;height:390px;border:0;border-radius:0;background:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:13vw;padding:22px 13vw 14px;touch-action:pan-x pan-y}
 body.mobile-layout #entryStage .ride-track {height:auto}
 body.mobile-layout #entryStage .starter-car {flex:0 0 74vw;width:74vw;height:350px}
 body.mobile-layout #entryStage .starter-car h2 {position:relative;inset:auto;font:900 17px/1.25 Arial;margin:1px -1px 0;padding:0}
 body.mobile-layout #entryStage .starter-car h2 i {font-size:21px}
 body.mobile-layout #entryStage .starter-car .showroom-price {bottom:16px;font-size:18px}
 body.mobile-layout #entryStage .starter-car .showroom-actions {bottom:12px}
 body.mobile-layout #entryStage .starter-car .showroom-actions button {min-height:44px}
 body.mobile-layout #entryStage .rides-page .entry-back {position:relative;inset:auto}
}

/* The live Civic now casts its own angled contact shadow. */
#starterDetailModel::before {display:none}