/* Main garage layout. Kept in normal grid flow inside a scrollable viewport. */
.vignette{background:linear-gradient(100deg,#111714f5,#111714dc 44%,#11171480)}
.topbar{top:16px;left:28px;right:28px;gap:14px}
.top-actions{margin-left:auto;gap:7px}
.top-actions button{width:34px;height:34px}
.top-actions #help-button{width:34px;display:block}
.top-actions #sound-button{width:54px;display:flex;align-items:center;justify-content:center;gap:4px}
.server-pill{position:static;top:auto;left:auto;font-size:9px;padding:9px 12px}
.play-only{display:none}
body:not(.playing) .wordmark{display:none}
body:not(.playing) .leaderboard,body:not(.playing) .minimap,#attract-caption{display:none}
#menu.garage-screen{
  position:absolute;inset:76px 28px 50px;transform:none;width:auto;max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(24px,5vw,64px);
  align-items:start;align-content:start;overflow-y:auto;overflow-x:hidden;padding:16px 12px;
  scrollbar-width:thin;scrollbar-color:#7c8c60 #152118;overscroll-behavior:contain;
}
#menu .garage-pitch{min-width:0;align-self:center}
#menu .garage-logo{font-size:0;line-height:1;letter-spacing:0;margin:0 0 24px}
.garage-main-logo{display:block;width:100%;max-width:360px;height:auto;max-height:180px;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 5px #0006)}
.driving-guide h2{font:700 20px/1.2 var(--display);letter-spacing:1px;color:#e2d8b8;margin:0 0 12px}
.driving-guide dl{margin:0 0 17px}
.driving-guide dl>div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid #a9ba7b18}
.driving-guide dt{width:65px;flex-shrink:0}
.driving-guide kbd{width:65px;height:29px;font-size:9px}
.driving-guide dd{margin:0;min-width:0;display:flex;flex-direction:column;gap:4px}
.driving-guide dd strong{font-size:11px;line-height:1.4;font-weight:600;color:#d5dfc4}
.driving-guide dd span{font-size:9px;line-height:1.5;color:#9aaf89}
#menu .garage-launch-column{display:flex;flex-direction:column;gap:10px;min-width:0}
#menu .garage-launch{position:relative;padding:18px;min-width:0}
.garage-launch-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.garage-launch h2{font:800 26px/1.15 var(--display);letter-spacing:.6px;margin:0;color:#f1ecd8}
.garage-badge{border:1px solid #8b9a653d;background:#1020155c;padding:5px 7px;font-size:7px;letter-spacing:.7px;color:#abb993;white-space:nowrap}
#menu .name-input{height:42px;margin:8px 0 12px}
.yard-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.yard-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;min-height:88px;padding:10px 8px;color:#b7c4a6;background:linear-gradient(145deg,#28382b,#18251d);border:1px solid #6e815257;border-bottom:3px solid #111b14;border-radius:3px;text-align:left;box-shadow:inset 0 1px #cfdeb019}
.yard-choice:hover{border-color:#b1bd8890}
.yard-choice[aria-checked=true]{color:#f3d679;border-color:#e0bd63;background:linear-gradient(145deg,#7361364d,#343824);box-shadow:inset 0 1px #ffe1a733,0 0 0 1px #e9bc5820}
.yard-icon{font-size:20px;line-height:20px;color:#8ea27a}
.yard-choice[aria-checked=true] .yard-icon{color:#f3cb69}
.yard-choice strong{font:700 13px/16px var(--display);letter-spacing:.4px}
.yard-choice small{font-size:8px;line-height:1.4;color:#9aad8c}
.yard-choice[aria-checked=true] small{color:#c9bd97}
.yard-selected{position:absolute;top:8px;right:8px;font-size:12px;color:#f2cd6e;visibility:hidden}
.yard-choice[aria-checked=true] .yard-selected{visibility:visible}
.lobby-code-row{display:flex;flex-direction:column;gap:6px;padding-top:12px}
.lobby-code-row input{width:100%;height:40px;background:#101d14;border:1px solid #c9b76980;color:#f4d780;font:700 18px var(--display);letter-spacing:3px;text-transform:uppercase;padding:0 12px;border-radius:2px}
.lobby-code-row>span{font-size:8px;line-height:1.5;color:#9bb18a}
#menu .lobby-hint{font-size:10px;line-height:16px;color:#aebc9e;margin:10px 0;min-height:0}
#menu .garage-launch .primary{height:46px;font-size:18px}
.launch-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;font-size:7px;line-height:10px;letter-spacing:.5px;margin-top:12px;color:#97a984}
.launch-foot span{color:#617453}
.registration-card{display:flex;align-items:center;gap:14px;min-width:0;border:1px solid #d6bc6749;border-left:3px solid #d6bc67;background:linear-gradient(110deg,#71603530,#18261ced);padding:12px 16px;border-radius:3px}
.registration-card>div{min-width:0}
.registration-icon{font-size:34px;color:#c8b467;text-shadow:0 3px #080f0a;flex-shrink:0}
.registration-card strong{font:700 20px/24px var(--display);letter-spacing:.6px;color:#ead8a4;overflow-wrap:anywhere}
.registration-card p{font-size:9px;line-height:15px;margin:4px 0 8px;color:#aebb9f}
.registration-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.register-cta{background:linear-gradient(#ebcc7f,#cba44a);color:#1f2a1d;border:1px solid #ffe6a0;border-bottom:2px solid #7d6330;border-radius:2px;font:800 11px/14px var(--display);letter-spacing:.6px;padding:7px 10px;white-space:nowrap}
.register-cta:hover{background:#f4d68a}
.signin-link{padding:0;background:none;border:0;font-size:9px;line-height:1.5;color:#b7c69f;text-decoration:underline;text-underline-offset:3px}
.signin-link:hover{color:#f1d374}
.garage-utility{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:0 2px}
#menu .garage-nav{position:static;display:flex;flex-wrap:wrap;gap:7px;min-width:0}
#menu .garage-nav button{padding:7px 10px;font-size:10px;line-height:12px}
#menu #account-button{flex-direction:row;align-items:center;gap:6px;min-width:0}
.garage-utility>span{font-size:6px;line-height:1.5;letter-spacing:.5px;color:#829575;max-width:90px;flex-shrink:0;text-align:right}
.account-driver-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:11px 12px;background:#18271b;border:1px solid #a1b17354;margin-bottom:12px}
.account-driver-row>span{grid-column:1/-1;font-size:8px;letter-spacing:1.4px;color:#a8bd93}
.account-driver-row strong{font:700 19px/1.2 var(--display);overflow-wrap:anywhere}
.account-driver-row small{font-size:7px;color:#97b77e;align-self:center}
#menu[data-yard-mode=join] .lobby-hint,#menu[data-yard-mode=join] .registration-card p{display:none}
#menu-footer{bottom:18px;padding-top:10px}
/* In-game chrome remains compact; account/shop controls live in the pit stop. */
body.playing .wordmark,body.playing #help-button,body.playing #fullscreen-button,body.playing #population,body.playing .server-pill .divider{display:none}
body.playing .play-only{display:block}
body.playing .topbar{top:14px;left:22px;right:22px}
body.playing .server-pill{padding:7px 10px;font-size:8px;border-radius:2px}
body.playing .top-actions button{height:30px;font-size:17px}
body.playing .top-actions #sound-button{width:50px}
body.playing .leaderboard{top:64px;right:22px;width:184px;padding:15px 13px 10px}
body.playing .leaderboard .panel-heading{font-size:12px}
body.playing .board-labels{margin-top:11px}
body.playing #board li{height:25px;font-size:9px}
body.playing .board-foot{display:none}
body.playing #feed{top:64px;left:22px}
body.playing #toast{top:58px}
body.playing .minimap{width:164px;padding:12px 11px;right:22px;bottom:22px}
body.playing .minimap #map{width:140px;height:112px;margin-bottom:0}
body.playing .minimap .panel-heading{font-size:9px}
body.playing .map-foot,body.playing #mobile-note{display:none}
.pit-stop-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.pit-shop{grid-column:1/-1;color:var(--yellow)}
#quit-yard-button{display:block;width:100%;margin:22px auto 0}
#play-menu .garage-intro{font-size:11px;padding:0;border:0;color:#99af88}
#play-menu{width:380px}
.health-track{height:11px;border:1px solid #060f08;border-radius:2px;box-shadow:inset 0 1px 3px #0009,0 1px 0 #d8e9b52b}
.health-track span{background-image:linear-gradient(#fff5,transparent 55%,#0002);box-shadow:inset 0 1px #efffbc70}
.health-numbers{font-size:8px;color:#bbc8a6;margin-top:6px}
/* Illustrated class field guide. */
#help{width:860px;max-height:86vh;overflow-y:auto}
#help>p{margin-bottom:22px}
.class-guide h3{font:700 22px var(--display);color:#e8d39c;letter-spacing:.6px}
.class-guide .class-guide-note{border:0;padding:0;font-size:10px;margin-bottom:18px}
.class-guide h4{font:700 19px var(--display);letter-spacing:.5px;color:#e7d8ad;margin:0 0 5px}
.class-guide p{border:0;padding:0;margin:0;font-size:10px;line-height:1.65;color:#acbe9c}
.starter-guide{display:flex;align-items:center;gap:20px;border:1px solid #a4b47435;background:#15231a99;padding:15px;margin-bottom:16px}
.starter-guide img{width:54px;height:73px;object-fit:contain;flex-shrink:0}
.class-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.class-branch{background:linear-gradient(140deg,#35422e,#1c2b20);border:1px solid #829d5647;padding:14px;border-radius:3px;min-width:0}
.intermediate-guide{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.intermediate-guide img{width:40px;height:55px;object-fit:contain}
.intermediate-guide small{font-size:7px;letter-spacing:1px;color:#91ad7b}
.intermediate-guide h4{margin-top:4px}
.class-branch-arrow{font-size:8px;letter-spacing:.4px;color:#d6b960;padding:13px 0;border-bottom:1px solid #a9b97c27;margin-bottom:14px}
.final-guide{display:flex;gap:11px;margin-top:15px}
.final-guide img{width:42px;height:58px;object-fit:contain;flex-shrink:0}
.final-guide h4{font-size:17px}
.final-guide p{font-size:9px}
@media(max-height:780px){
  #menu.garage-screen{top:64px;bottom:44px;padding-top:8px;padding-bottom:8px}
  .garage-main-logo{max-height:156px}
  #menu .garage-logo{margin-bottom:16px}
  .driving-guide dl>div{padding:7px 0}
  #menu .garage-launch{padding:16px}
  .yard-choice{min-height:80px;padding:9px 8px;gap:4px}
  #menu .garage-launch .primary{height:44px}
}
@media(max-width:960px){
  #menu.garage-screen{inset-inline:20px;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px}
  .driving-guide dt,.driving-guide kbd{width:56px}
  .driving-guide dl>div{gap:10px}
  .driving-guide dd strong{font-size:10px}
  .driving-guide dd span{font-size:8px}
  .garage-badge{display:none}
  .garage-utility>span{display:none}
}
@media(max-width:760px){
  #menu.garage-screen{inset:64px 12px 43px;display:flex;flex-direction:column;gap:22px;padding:12px 8px 24px}
  #menu .garage-pitch{width:100%;align-self:stretch}
  #menu .garage-launch-column{width:100%}
  .garage-main-logo{width:240px;max-height:120px;margin:auto;object-position:center}
  .driving-guide dl{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .driving-guide dl>div{gap:8px}
  .driving-guide dl>div:last-child{grid-column:1/-1}
  .driving-guide dd span{display:none}
  .driving-guide h2{font-size:17px}
  .yard-choice strong{font-size:12px}
  .yard-choice small{font-size:7px}
  .registration-card strong{font-size:18px}
  .topbar{left:20px;right:20px;top:12px;gap:10px}
  .server-pill{position:static;padding:7px 9px;font-size:7px}
  .server-pill #population,.server-pill .divider{display:none}
  .top-actions button{width:28px;height:28px}
  .top-actions #help-button{width:28px}
  .top-actions #sound-button{width:42px}
  .top-actions #fullscreen-button{display:none}
  body.playing .leaderboard{display:none}
  body.playing .minimap{right:12px;width:134px;padding:10px}
  body.playing .minimap #map{width:112px;height:88px}
  .class-guide-grid{grid-template-columns:1fr}
  .final-guide{align-items:center}
  .final-guide p{font-size:10px}
  .class-branch{padding:16px}
  .starter-guide{gap:12px}
  #help{padding:23px}
  #menu-footer{left:20px;right:20px;font-size:7px;gap:15px}
}