/* Garage only. Race HUD styles stay in style.css. */
#lobby{position:fixed;inset:0;overflow:hidden;background:linear-gradient(90deg,#17393118 0%,#17393108 34%,#eeeee5 43%,#eeeee5 100%);color:#263c32}
#lobby header{height:65px;margin:0;padding:0 30px;background:#f1f1e6;border-bottom:1px solid #263c3220;position:relative;z-index:2}
#lobby .brand{gap:10px;font-size:23px;color:#203e31;text-shadow:none;white-space:nowrap}
#lobby .brand svg{width:27px;height:27px}
#lobby .brand em{font-size:12px;letter-spacing:0;color:#496153;margin-left:12px;border-left:1px solid #69816c66;padding-left:18px}
#lobby header button{border:1px solid #a1b09b66;background:#f3f3e9e8;color:#314c3c;border-radius:7px;font-size:11px;padding:8px 12px;box-shadow:none}
#lobby button{transition:background .12s,border-color .12s,transform .12s}
#lobby button:focus-visible{outline:3px solid #e7b44c;outline-offset:3px}
#lobby button:active{transform:translateY(1px)}
#lobby .garage-preview{position:absolute;left:0;top:65px;bottom:44px;width:38%;pointer-events:none}
#lobby .preview-caption{position:absolute;top:30px;left:36px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#274b39}
.garage-dot{width:7px;height:7px;background:#d4ab57;border:1px solid #f4e3b9;border-radius:50%}
#lobby .showcase-label{position:absolute;bottom:9%;top:auto;left:0;right:0;text-align:center;text-shadow:0 1px 8px #102a29b0;color:#fff7df}
#lobby #model-name{font-size:28px;letter-spacing:2px;font-weight:700}
#lobby #vehicle-name{font-size:12px;font-weight:400;margin-top:9px;color:#f2edd7;display:block}
#lobby .showcase-label p{font-size:10px;color:#ecebd9c9;margin-top:12px}
#lobby .config{position:absolute;top:90px;bottom:65px;left:41%;right:30px;width:auto;max-width:920px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:none;overflow:visible;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(110px,1fr) minmax(120px,1.05fr) minmax(146px,1.25fr) 68px;gap:18px 22px}
#lobby .config section{min-width:0;min-height:0}
#lobby h2{font-size:14px;font-weight:700;margin:0;line-height:24px}
#lobby .section-heading,#lobby .player-row{height:30px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
#lobby .section-heading>small{font-size:10px;color:#7c8877}
#lobby #players{padding:2px;background:#dce2d4;border-radius:5px;gap:1px}
#lobby #players button{border-radius:4px;font-size:10px;padding:5px 9px;color:#6d7c65}
#lobby #players .active{background:#365d42;color:#fff9e7}
#lobby #dogs{height:calc(100% - 38px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
#lobby .dog{padding:7px 3px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #c4cbb9;background:#f4f3e8;border-radius:7px;position:relative;min-width:0}
#lobby .dog.active{border:2px solid #436644;background:#e3ebd5;padding:6px 2px 3px}
#lobby .dog img{width:clamp(32px,3.4vw,48px);height:clamp(32px,3.4vw,48px);border-radius:50%;object-fit:cover}
#lobby .dog b{font-size:11px;margin-top:5px}
#lobby .dog span{font-size:8px;margin:2px 0 0;height:10px;color:#6e875d}
#lobby .mode-panel>h2{height:30px;margin-bottom:8px}
#lobby .choices{height:calc(100% - 38px);display:grid;grid-template-columns:1fr 1fr;gap:7px}
#lobby .choices button{padding:6px;border:1px solid #c4cbb9;background:#f4f3e8;border-radius:7px;text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
#lobby .choices button.active{background:#e3ebd5;border:2px solid #436644;padding:5px}
#lobby .choices svg{width:42px;height:26px;fill:#6f8d68}
#lobby .choices b{font-size:12px}
#lobby .choices small{font-size:9px;color:#7b8773;margin-top:4px;line-height:1.4}
#lobby .vehicle-panel,#lobby .track-panel,#lobby .start-row{grid-column:1/-1}
#lobby #vehicles{height:calc(100% - 38px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#lobby .vehicle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:5px 4px;background:#f5f3e7;border:1px solid #c4cbb9;border-radius:7px;text-align:center;min-width:0;overflow:hidden}
#lobby .vehicle.active{border:2px solid #436644;background:#e3ebd5;padding:4px 3px;box-shadow:none}
#lobby .vehicle img{display:block;width:100%;height:clamp(35px,6vh,70px);object-fit:contain;min-height:0}
#lobby .vehicle b{font-size:11px;font-weight:600;line-height:1.3}
#lobby .vehicle small{font-size:8px;color:#7c8774;margin-top:4px;white-space:nowrap}
#lobby #tracks{height:calc(100% - 38px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
#lobby .track{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-content:start;align-items:start;gap:0;padding:0 0 9px;border:1px solid #c4cbb9;border-radius:7px;background:#f5f3e7;overflow:hidden;min-width:0;min-height:0;text-align:left}
#lobby .track.active{border:2px solid #436644;background:#e3ebd5;padding-bottom:8px}
#lobby .track img{width:100%;height:100%;min-height:0;object-fit:cover;display:block;border-bottom:1px solid #bbc5af55}
#lobby .track>div{padding:8px 9px 0;min-width:0}
#lobby .track b{font-size:12px;line-height:1.3;display:block}
#lobby .track small{font-size:9px;color:#78836f;margin-top:5px;line-height:1.4}
#lobby .track .difficulty{position:absolute;top:7px;left:7px;padding:3px 5px;border-radius:3px;background:#f6f4e6e8;color:#536c50;font-size:8px;margin:0}
#lobby .start-row{position:static;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0 0;margin:0;border-top:1px solid #b8c2ad;background:none;min-width:0}
#lobby #summary{font-size:12px;font-weight:600;line-height:1.4}
#lobby #race-format{font-size:10px;margin-top:5px;color:#7c8773}
#lobby #start{width:190px;flex-shrink:0;height:46px;border-radius:6px;background:#34593f;color:#fff8de;margin:0;padding:0 20px;box-shadow:0 3px 0 #223e2c;font-size:15px;display:flex;justify-content:space-between;align-items:center;letter-spacing:1px}
#lobby #start:hover{background:#456b4d}
#lobby #start span{font-size:22px;margin:0;color:#f1e4b4}
#lobby footer{position:absolute;bottom:17px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:0;color:#3a5445;text-shadow:0 1px 5px #faf8dc}
#lobby footer a{color:inherit;text-decoration:none}
#lobby kbd{font:inherit;padding:2px 5px;border:1px solid #a4b09a;background:#f0f1dfb3;border-radius:3px}
@media(min-width:900px) and (max-height:760px){
 #lobby header{height:54px}#lobby .config{top:72px;bottom:43px;gap:12px 16px;grid-template-rows:minmax(100px,1fr) minmax(110px,1fr) minmax(128px,1.2fr) 60px}
 #lobby .garage-preview{top:54px}#lobby .section-heading,#lobby .player-row,#lobby .mode-panel>h2{height:25px;margin-bottom:6px}
 #lobby #dogs,#lobby .choices,#lobby #vehicles,#lobby #tracks{height:calc(100% - 31px)}#lobby .dog img{width:34px;height:34px}#lobby .vehicle img{height:38px}#lobby footer{bottom:12px;font-size:9px}#lobby .track>div{padding-top:5px}#lobby .track small{margin-top:3px}
}
@media(max-width:1100px) and (min-width:900px){#lobby .config{left:35%;right:20px;gap:12px}#lobby .garage-preview{width:32%}#lobby .choices small{font-size:8px}#lobby .vehicle small{font-size:7px}#lobby .section-heading>small{font-size:9px}#lobby .track b{font-size:11px}}
@media(max-width:899px){
 #lobby{background:linear-gradient(180deg,transparent 0 175px,#edefe3 196px)}
 #lobby header{height:50px;margin:0;padding:0 14px;gap:8px}#lobby .brand{font-size:18px;gap:7px}#lobby .brand svg{width:22px;height:22px}#lobby .brand em{display:none}
 #lobby header div{gap:4px}#lobby header button{padding:7px 8px;font-size:9px}#lobby header #sound{display:none}
 #lobby .garage-preview{left:0;top:50px;bottom:auto;width:100%;height:145px}
 #lobby .preview-caption{top:10px;left:17px;font-size:10px;background:#f1f1e6db;padding:4px 6px;border-radius:3px}#lobby .showcase-label{left:auto;right:18px;bottom:18px;text-align:right;max-width:42%;color:#274b39;text-shadow:none;background:#f1f1e6e8;padding:7px 9px;border-radius:4px}
 #lobby #model-name{font-size:20px}#lobby #vehicle-name{font-size:10px;color:#405a42;margin-top:6px}#lobby .showcase-label p{font-size:8px;color:#718064;margin-top:7px}
 #lobby .config,#lobby .config:has(.track:nth-child(3)){position:absolute;left:14px;right:14px;top:201px;bottom:30px;width:auto;max-width:none;margin:0;padding:0;gap:12px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(96px,1fr) minmax(112px,1.05fr) minmax(132px,1.15fr) 59px}
 #lobby h2{font-size:13px}#lobby .section-heading,#lobby .player-row,#lobby .mode-panel>h2{height:24px;margin-bottom:6px}#lobby .section-heading>small{font-size:9px}
 #lobby #dogs,#lobby .choices,#lobby #vehicles,#lobby #tracks{height:calc(100% - 30px)}
 #lobby #players button{font-size:9px;padding:4px 7px}#lobby #dogs{gap:5px}#lobby .dog{padding:4px 2px}#lobby .dog.active{padding:3px 1px}#lobby .dog img{width:32px;height:32px}#lobby .dog b{font-size:10px;margin-top:4px}#lobby .dog span{font-size:7px}
 #lobby .choices{gap:5px}#lobby .choices button{padding:3px}#lobby .choices button.active{padding:2px}#lobby .choices b{font-size:11px}#lobby .choices small{font-size:8px}#lobby .choices svg{width:32px;height:22px}
 #lobby #vehicles{gap:5px}#lobby .vehicle{padding:4px 2px;gap:4px}#lobby .vehicle.active{padding:3px 1px}#lobby .vehicle img{height:38px}#lobby .vehicle b{font-size:10px}#lobby .vehicle small{display:none}
 #lobby #tracks{gap:6px}#lobby .track{padding-bottom:6px}#lobby .track.active{padding-bottom:5px}#lobby .track>div{padding:5px 6px 0}#lobby .track b{font-size:11px}#lobby .track small{font-size:8px;margin-top:3px}#lobby .track .difficulty{font-size:7px;left:4px;top:4px;padding:2px 4px}
 #lobby .start-row{padding-top:9px;gap:8px}#lobby #summary{font-size:10px}#lobby #race-format{font-size:8px;margin-top:4px}#lobby #start{width:130px;height:42px;font-size:13px;padding:0 13px}
 #lobby footer{bottom:8px;left:14px;right:14px;font-size:8px}#lobby footer kbd{padding:1px 2px}
}
@media(max-width:599px){#lobby .config,#lobby .config:has(.track:nth-child(3)){grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}#lobby .brand{font-size:16px}#lobby header button{padding:7px 6px;font-size:8px}#lobby .choices small{font-size:7px}#lobby #players button{padding:4px 5px;font-size:8px}#lobby .dog img{width:28px;height:28px}#lobby .track b{font-size:10px}#lobby .vehicle b{font-size:9px}#lobby .section-heading>small{font-size:8px}#lobby .track small{font-size:7px}}
@media(max-width:899px) and (max-height:740px){#lobby .garage-preview{height:105px}#lobby .config,#lobby .config:has(.track:nth-child(3)){top:160px;gap:9px;grid-template-rows:minmax(84px,1fr) minmax(98px,1fr) minmax(112px,1.1fr) 54px}#lobby .preview-caption{top:8px}#lobby .showcase-label{bottom:10px}#lobby .showcase-label p{display:none}#lobby .vehicle img{height:30px}#lobby .dog span{height:8px;margin-top:0}#lobby .choices svg{height:18px}#lobby .choices{gap:4px}}
@media(max-height:520px) and (min-width:600px){#lobby header{height:40px}#lobby .garage-preview{width:28%;height:auto;top:40px;bottom:25px}#lobby .config,#lobby .config:has(.track:nth-child(3)){left:30%;right:12px;top:50px;bottom:24px;gap:7px 10px;grid-template-rows:minmax(73px,1fr) minmax(82px,1fr) minmax(90px,1fr) 43px}#lobby .section-heading,#lobby .player-row,#lobby .mode-panel>h2{height:20px;margin-bottom:3px}#lobby #dogs,#lobby .choices,#lobby #vehicles,#lobby #tracks{height:calc(100% - 23px)}#lobby h2{font-size:11px}#lobby .dog img{width:23px;height:23px}#lobby .dog b{font-size:9px}#lobby .dog span{font-size:6px;height:7px}#lobby .vehicle img{height:24px}#lobby .vehicle b{font-size:9px}#lobby .vehicle small{display:none}#lobby .track small{display:none}#lobby .track b{font-size:10px}#lobby #start{height:33px;font-size:12px}#lobby #summary{font-size:9px}#lobby #race-format{font-size:8px}#lobby footer{bottom:5px;font-size:7px}#lobby .showcase-label{left:10px;right:10px;bottom:14px;text-align:center}#lobby .preview-caption{left:15px;top:10px}#lobby .choices svg{height:17px}#lobby .choices small{font-size:7px}}

@media(max-width:899px) and (max-height:740px){#lobby{background:linear-gradient(180deg,transparent 0 135px,#edefe3 157px)}}
@media(max-height:520px) and (min-width:600px){#lobby{background:linear-gradient(90deg,transparent 0 24%,#edefe3 30%)}#lobby .showcase-label{max-width:none}}

/* Locked stages contain no hidden artwork or location labels. */
#lobby .track.locked{cursor:default;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:repeating-linear-gradient(135deg,#e8eade 0 10px,#e5e7db 10px 20px);color:#7e8977;border:1px dashed #aeb9a3;opacity:1}
#lobby .track.locked>div{padding:5px 4px}
#lobby .stage-lock{display:block;min-height:0;height:45%;max-height:54px}
#lobby .stage-lock svg{height:100%;width:48px;fill:#d4dac9;stroke:#8a9b7f;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#lobby .track.locked b{font-size:11px}#lobby #stage-progress{font-size:9px}