/* Garage-only presentation; match HUD and result overlays keep their own layout. */
body:not(.playing) #brand { display:none; }
#overlay:not(.results) { align-items:flex-start; justify-content:center; padding:24px; background:linear-gradient(90deg,#06101999,transparent 75%); }
#garageShell { --panel:#101a23; --muted:#a4b3bf; --line:#ffffff24; --accent:#ffd43b; width:min(460px,100%); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; box-sizing:border-box; border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 18px 60px #0005; color:#f2f5f7; font:14px/1.45 "Segoe UI",Arial,sans-serif; }
#garageShell * { box-sizing:border-box; }
#garageShell [hidden] { display:none !important; }
#garageShell .masthead { display:block; padding:0 0 20px; }
#garageShell .brand h1 { font:24px/1.2 "Black Ops One",sans-serif; margin:0; color:var(--accent); letter-spacing:0; text-shadow:none; }
#garageShell .brand .sub { font:11px/1.5 "Segoe UI",Arial,sans-serif; letter-spacing:1.3px; color:var(--muted); margin-top:5px; }
#garageShell .presenceBar { gap:12px; margin-top:12px; }
#garageShell .presChip { padding:0; background:none; border:0; color:var(--muted); font:11px/1.4 "Segoe UI",Arial,sans-serif; }
#garageShell .presChip b { font:inherit; color:#e8edf1; margin-right:3px; }
#garageShell .stepLabel { padding:0; justify-content:space-between; gap:8px; font:12px/1.4 "Segoe UI",Arial,sans-serif; letter-spacing:0; color:var(--muted); }
#garageShell #inspect { text-align:left; margin:12px 0 16px !important; padding:0; min-height:0 !important; }
#garageShell #inspect .name { font:600 23px/1.2 "Segoe UI",Arial,sans-serif; letter-spacing:0; text-shadow:none; color:#fff; }
#garageShell #inspect .meme { font:14px/1.5 "Segoe UI",Arial,sans-serif; margin:8px 0 10px; color:var(--muted); max-width:none; }
#garageShell summary { cursor:pointer; font:600 12px/1.5 "Segoe UI",Arial,sans-serif; color:#c6d2db; padding:6px 0; }
#garageShell #inspStats dl { margin:10px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
#garageShell #inspStats dt { font-size:11px; color:var(--muted); }
#garageShell #inspStats dd { margin:2px 0 0; font-size:13px; font-variant-numeric:tabular-nums; }
#garageShell .specNote,#garageShell .accountHint { font:12px/1.5 "Segoe UI",Arial,sans-serif; color:var(--muted); margin:10px 0; }
#garageShell #garage { grid-template-columns:1fr 1fr !important; width:100%; padding:0; gap:8px; margin:0; }
#garageShell .card { min-height:66px !important; padding:11px 12px !important; background:#ffffff05; border:1px solid var(--line); border-radius:9px; box-shadow:none; text-align:left; color:#f2f5f7; transform:none; }
#garageShell .card:hover { background:#ffffff0b; border-color:#ffffff65; }
#garageShell .card.on { background:#ffd43b0e; border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
#garageShell .card .title { display:block; font:600 13px/1.3 "Segoe UI",Arial,sans-serif; margin:0; }
#garageShell .card .tag { display:block; font:12px/1.4 "Segoe UI",Arial,sans-serif; margin:4px 0 0; letter-spacing:0; color:var(--muted); }
#garageShell button,#garageShell input { font:600 13px/1.3 "Segoe UI",Arial,sans-serif; letter-spacing:0; text-shadow:none; }
#garageShell button:focus-visible,#garageShell summary:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#garageShell .row { gap:8px; margin:0; padding:0; }
#garageShell .stepActions { margin-top:16px; }
#garageShell .cta { min-height:42px; padding:10px 14px; border:1px solid transparent; border-radius:8px; background:var(--accent); color:#18202a; box-shadow:none; transform:none; }
#garageShell .cta.ghost,#garageShell .backLink { background:transparent; color:#dce4ea; border:1px solid var(--line); box-shadow:none; }
#garageShell #toMatchup { width:100%; }
#garageShell .garageControlHint { font:12px/1.5 "Segoe UI",Arial,sans-serif; color:var(--muted); margin:12px 0 18px; }
#garageShell #garageSettings { border-top:1px solid var(--line); padding-top:10px; }
#garageShell .chromeRow { display:grid; gap:12px; padding:12px 0 0; justify-content:stretch; }
#garageShell .garageAudio { justify-content:flex-start; }
#garageShell .xAuthBar,#garageShell .xSignedIn { justify-content:flex-start; border:0; border-radius:0; padding:0; gap:8px; background:none; }
#garageShell .xIdentity,#garageShell .xDisplayName,#garageShell #xHandle,#garageShell .xGuestBadge { font:12px/1.4 "Segoe UI",Arial,sans-serif; letter-spacing:0; }
#garageShell .xGuestBadge { border:0; padding:0; color:var(--muted); }
#garageShell .legalLine,#garageShell #credit { font:10px/1.5 "Segoe UI",Arial,sans-serif; letter-spacing:0; padding:0; margin:8px 0 0; color:var(--muted); text-align:left; }
#garageShell #credit a { color:#c6d2db; }
#garageShell .garageStep { padding:0; }
#garageShell .lockedVehicle { font:600 14px/1.4 "Segoe UI",Arial,sans-serif; text-align:left; padding:12px 0; text-shadow:none; letter-spacing:0; }
#garageShell .matchModes { padding:0; gap:6px; grid-template-columns:repeat(3,minmax(0,1fr)); }
#garageShell .modeCard,#garageShell .gfxCard { padding:10px; min-height:0; border:1px solid var(--line); border-radius:8px; background:#ffffff05; box-shadow:none; }
#garageShell .modeCard.on,#garageShell .gfxCard.on { border-color:var(--accent); background:#ffd43b0e; }
#garageShell .modeTitle,#garageShell .gfxTitle { font:600 12px/1.4 "Segoe UI",Arial,sans-serif; color:#fff; letter-spacing:0; }
#garageShell .modeSub,#garageShell .gfxSub { font:10px/1.4 "Segoe UI",Arial,sans-serif; letter-spacing:0; color:var(--muted); }
#garageShell .gfxRow { margin:12px 0; padding:0; gap:6px; }
#garageShell .matchPane { margin-top:12px; }
#garageShell .backLink { padding:7px 10px; border-radius:6px; }
#garageShell .searchCard { font:14px/1.5 "Segoe UI",Arial,sans-serif; }
@media(max-width:600px) {
  #overlay:not(.results) { padding:12px; align-items:center; }
  #garageShell { padding:20px; max-height:calc(100dvh - 24px); }
}
@media(max-height:600px) { #overlay:not(.results) { justify-content:flex-start; } #garageShell { padding:18px; } }
/* A direct launch on home; visual alternatives live one button away. */
#garageShell { width:min(480px,100%); padding:22px; }
#garageShell .masthead { padding-bottom:16px; }
#garageShell .featuredArena { position:relative; margin-bottom:14px; height:166px; border-radius:12px; overflow:hidden; background:#253e4e; border:1px solid var(--line); }
#garageShell .featuredArena>img { width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; }
#garageShell .featuredCopy { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; background:linear-gradient(0deg,#071723f5,#07172399 34%,transparent 78%); }
#garageShell .featuredCopy>span { align-self:flex-start; font-size:9px; font-weight:700; letter-spacing:1.3px; color:#a5f0f3; }
#garageShell .featuredCopy h2 { margin:2px 0 3px; font:750 25px/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:0; color:#fff; text-shadow:none; }
#garageShell .featuredCopy p { margin:0; font-size:12px; color:#d3e4e8; }
#garageShell .stepLabel { display:flex; align-items:center; min-height:36px; }
#garageShell .textButton { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:4px 2px; border:0; background:transparent; color:#b7ccd7; box-shadow:none; font-size:12px; }
#garageShell .textButton:hover { color:#fff; }
#garageShell .card { display:flex; align-items:center; gap:6px; padding:6px 8px!important; min-height:62px!important; border-width:1px!important; }
#garageShell .card img { display:block; width:62px; height:40px; object-fit:contain; flex:none; }
#garageShell .card .carCopy { min-width:0; }
#garageShell .card .title { font-size:11px; }
#garageShell .card .tag { font-size:10px; margin-top:3px; }
#garageShell .stepActions { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:8px; margin-top:14px; }
#garageShell .cta { min-height:46px; font-size:13px!important; padding:10px 12px!important; box-shadow:none!important; }
#garageShell #playNow { font-size:14px!important; display:flex; align-items:center; justify-content:space-between; gap:6px; text-align:left; }
#garageShell #toMatchup { width:auto; font-size:12px!important; padding:10px!important; }
#garageShell .launchNote { margin:8px 0 0; font-size:11px; text-align:center; color:var(--muted); }
#garageShell .garageControlHint { margin:12px 0 4px; font-size:12px; }
#garageShell .garageTools { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:12px; }
#garageShell #garageSettings { border-top:0; padding-top:0; }
#garageShell .arenaChoices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#garageShell .arenaCard { min-width:0; overflow:hidden; display:flex; flex-direction:column; padding:0 0 10px; border:1px solid var(--line); border-radius:10px; background:#ffffff05; color:#fff; text-align:left; box-shadow:none; }
#garageShell .arenaCard img { display:block; width:100%; height:100px; object-fit:cover; }
#garageShell .arenaCardTitle { display:block; margin:9px 10px 3px; font-weight:700; font-size:14px; }
#garageShell .arenaCardNote { display:block; margin:0 10px; font-weight:400; font-size:10px; color:var(--muted); }
#garageShell .arenaCard.on { border-color:var(--accent); background:#ffd43b10; box-shadow:inset 0 -3px var(--accent); }
#garageShell .arenaCard.on .arenaCardTitle::after { content:' ✓'; color:var(--accent); }
#garageShell .gfxRow { display:grid; grid-template-columns:1fr 1fr; }
#garageShell .gfxCard { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; }
#garageShell .stadiumLighting { display:grid; grid-template-columns:1fr 1fr; margin-bottom:12px; }
#garageShell .modeCard { min-height:58px; }
#garageShell #localPane #go { width:100%; }
#garageShell .lockedVehicle { color:var(--muted); font-size:11px; }
#garageShell .backLink { min-height:44px; }
#garageShell .searchCard { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 40px #0005; }
#garageShell .searchTitle { font:800 24px/1.2 'Segoe UI',Arial,sans-serif; text-shadow:none; letter-spacing:0; }
#garageShell .searchKicker { font:700 11px/1.4 'Segoe UI',Arial,sans-serif; letter-spacing:1px; }
@media(max-width:600px) {
  #garageShell { padding:16px; }
  #garageShell .featuredArena { height:148px; }
  #garageShell .card img { width:48px; height:36px; }
  #garageShell .card .title { font-size:10px; }
  #garageShell .stepActions { grid-template-columns:minmax(0,1fr) 106px; }
  #garageShell #playNow { font-size:13px!important; }
  #garageShell .gfxCard { flex-direction:column; gap:2px; }
}
@media(max-width:380px) {
  #garageShell .card { gap:2px; padding:5px!important; }
  #garageShell .card img { width:37px; }
  #garageShell .featuredCopy p { font-size:11px; }
  #garageShell .stepActions { grid-template-columns:minmax(0,1fr) 94px; }
}
@media(max-height:700px) {
  #garageShell .featuredArena { height:114px; }
  #garageShell .masthead { padding-bottom:8px; }
  #garageShell .presenceBar { margin-top:6px; }
}
@media(max-height:500px) and (min-width:501px) {
  #garageShell { width:min(860px,100%); padding:14px; }
  #garageShell .masthead { position:relative; padding-bottom:10px; }
  #garageShell .brand .sub { display:none; }
  #garageShell .presenceBar { position:absolute; right:0; top:0; }
  #garageShell #stepVehicle { display:grid; grid-template-columns:.9fr 1.3fr; column-gap:14px; }
  #garageShell .featuredArena { height:164px; grid-column:1; grid-row:1/4; margin:0; }
  #garageShell .featuredCopy h2 { font-size:21px; }
  #garageShell #stepVehicle>.stepLabel { grid-column:2; grid-row:1; }
  #garageShell #garage { grid-column:2; grid-row:2; }
  #garageShell .card { min-height:49px!important; }
  #garageShell .stepActions { grid-column:2; grid-row:3; margin-top:8px; }
  #garageShell .launchNote { grid-column:1/-1; margin-top:8px; }
  #garageShell #inspect { grid-column:1/-1; }
  #garageShell .garageControlHint { display:none; }
  #garageShell .garageTools { margin-top:7px; }
  #garageShell .arenaCard img { height:86px; }
}
#hazardNotice { position:fixed; z-index:6; top:100px; left:50%; transform:translateX(-50%); padding:7px 12px; background:#0e1b29e8; border-radius:6px; color:#ffbc85; font:700 11px 'Segoe UI',Arial,sans-serif; pointer-events:none; }
.moonEntry { display:flex; align-items:center; gap:12px; padding:8px; border:1px solid #b3d4ed30; border-radius:10px; background:#142336; color:#edf4ff; text-decoration:none; margin-top:10px; grid-column:1/-1; }
.moonEntry:hover { background:#20364e; border-color:#83cfe0; }
.moonEntry:focus-visible { outline:2px solid #ffcd79; outline-offset:3px; }
.moonEntry img { width:96px; height:54px; border-radius:6px; object-fit:cover; }
.moonEntry>span { flex:1; }
.moonEntry strong { display:block; font:800 16px/1.3 'Segoe UI',Arial,sans-serif; }
.moonEntry small { display:block; font:700 9px/1.5 'Segoe UI',Arial,sans-serif; color:#78d8e8; letter-spacing:1px; }
.moonEntry span span { display:block; font:400 11px/1.5 'Segoe UI',Arial,sans-serif; color:#b2c5d6; }
.moonEntry>b { margin-right:8px; }
@media(max-height:700px) { .moonEntry { margin-top:5px; padding:5px 8px; } .moonEntry img { width:72px; height:42px; } .moonEntry strong { font-size:14px; } .moonEntry span span { display:none; } }
#hazardNotice[hidden] { display:none; }
body.pixel-mode #hazardNotice { top:88px; }
@media(max-height:500px) and (min-width:740px) { body.pixel-mode #hazardNotice { top:auto; bottom:8px; max-width:calc(100% - 320px); } }
body.sink-mode.pixel-mode #brand::after { content:'KITCHEN SINK / CHAOS SOCCER'; }
@media(max-height:500px) and (min-width:601px) {
  body.sink-mode.playing:not(.pixel-mode) #skillControls { display:grid; grid-template-columns:1fr 1fr; left:auto; right:16px; top:136px; bottom:auto; transform:none; width:124px; }
  body.sink-mode:not(.pixel-mode) #skillControls button { padding:5px 2px; min-width:0; }
  body.sink-mode:not(.pixel-mode) #skillControls #specialBtn { min-width:0; }
  body.sink-mode:not(.pixel-mode) #menuBtn { left:16px; right:auto !important; }
  body.sink-mode:not(.pixel-mode) #boostBtn { width:70px; height:70px; font-size:16px; }
  body.sink-mode:not(.pixel-mode) #boostHud { left:22px; right:auto; bottom:88px !important; width:110px; transform:none; }
}