/* Night-fun round: garage framing + carousel + plate, the co-driver bubble (bigger avatar, talking, speaker button),
   photo mode controls. Loaded after style.css; the minimap and the police glow bring their own small styles. */

/* ---------------- garage: title on top, the car in the top half, the choices from halfway down */
#garage{display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(11,15,20,.62) 0,rgba(11,15,20,0) 15%,rgba(11,15,20,0) 47%,rgba(11,15,20,.9) 54%,rgba(11,15,20,.97) 70%)}
#garage .ghead{position:absolute;left:0;right:0;top:0;height:13vh;min-height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:max(6px,env(safe-area-inset-top)) 16px 0;pointer-events:none}
#garage .ghead h1{margin:2px 0 0;font-size:clamp(22px,3.4vw,34px);text-shadow:0 2px 12px rgba(0,0,0,.55)}
#garage .gstage{height:50vh}
#garage .gbox{max-width:1120px;margin:0 auto;padding:4px 16px max(22px,env(safe-area-inset-bottom))}
#garage .gbox .lead{margin:0 0 4px}
@media (max-height:820px){#garage .gbox .lead{display:none}}
@media (max-height:500px){#garage .ghead .kicker{display:none}#garage .ghead h1{font-size:20px}}

/* car cards: a swipe carousel with arrow buttons */
.gcarwrap{display:flex;align-items:center;gap:6px}
.gcarwrap .gcars{flex:1;min-width:0;scroll-snap-type:x mandatory;scroll-behavior:smooth;margin:6px 0 4px}
.gcarwrap .gcar{scroll-snap-align:center}
.garr{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line,rgba(255,255,255,.2));background:rgba(28,37,50,.92);color:#eef1f5;font:700 24px/1 system-ui,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.garr:hover{border-color:var(--accent,#ff9f1a)} .garr:disabled{opacity:.35;cursor:default}

/* number plate */
.gplate{display:flex;gap:10px;align-items:center;flex-wrap:wrap;text-align:left}
.gplatebox{display:inline-flex;align-items:stretch;height:42px;border-radius:6px;overflow:hidden;border:2px solid #111;background:#f0c419;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.gplatebox .gnl{background:#1d3f9a;color:#fff;font:700 11px/1 Arial,sans-serif;width:22px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.gplatebox input{width:8.4ch;border:0;background:transparent;color:#111;font:800 24px/1 "Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:0 8px;outline:none}
.gplatebox input::placeholder{color:rgba(17,17,17,.35)}
.gplatebox:focus-within{outline:3px solid var(--accent,#ff9f1a);outline-offset:2px}
#gPlateMsg.bad{color:#ff8a7a}

/* co-drivers: a 3 x 2 grid */
#garage .gchars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible}
#garage .gch{flex:none;min-width:0}
@media (max-width:520px){#garage .gchars{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:500px){#garage .gch svg{width:36px;height:36px}#garage .gch small{display:none}#garage .gch{padding:6px 8px}}

/* ---------------- co-driver bubble: twice the avatar, a talking mouth, a speaker button */
#coBubble{align-items:flex-end}
#coBubble .coav svg{width:80px;height:80px}
body.touch #coBubble .coav svg{width:60px;height:60px}
#coBubble .cobody{padding-right:40px}
#coBubble .cospk{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.08);font-size:14px;line-height:1;cursor:pointer;pointer-events:auto;display:grid;place-items:center;padding:0}
#coBubble .cospk.on{background:rgba(255,159,26,.25)}
#coBubble.neon .cospk{background:rgba(255,255,255,.22)}
#coBubble.talking .coav svg{animation:coBob .32s ease-in-out infinite alternate}
#coBubble.talking .coav .mouthO{animation:coTalk .24s steps(1) infinite}
#coBubble.talking .coav .mouth{animation:coTalk .24s steps(1) infinite reverse}
@keyframes coTalk{0%{opacity:1}50%{opacity:0}}
@keyframes coBob{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){#coBubble.talking .coav svg{animation:none}}
/* in photo mode the bubble is moved out of the hidden HUD, above the photo bar */
body.photo > #coBubble{position:fixed;z-index:16;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));pointer-events:none}

/* ---------------- photo mode: format, camera, light, sticker, caption */
#photoBar .pctl{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;pointer-events:auto;background:rgba(11,15,20,.72);padding:8px 12px;border-radius:14px;max-width:min(980px,100%)}
#photoBar .pgrp{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
#photoBar .pgrp > span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#aab4c0;margin-right:2px}
#photoBar .pchip{border:1px solid rgba(255,255,255,.25);background:rgba(28,37,50,.9);color:#eef1f5;border-radius:999px;padding:5px 11px;font:600 13px/1.1 system-ui,Segoe UI,sans-serif;cursor:pointer}
#photoBar .pchip.on{background:var(--accent,#ff9f1a);border-color:var(--accent,#ff9f1a);color:#141414}
#photoFrame{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);z-index:14;pointer-events:none;border-left:2px dashed rgba(255,255,255,.7);border-right:2px dashed rgba(255,255,255,.7);box-shadow:0 0 0 100vmax rgba(5,8,12,.42)}
body.touch #photoBar .pchip{padding:4px 9px;font-size:12px}
@media (max-height:500px){#photoBar{bottom:max(8px,env(safe-area-inset-bottom))}#photoBar .pctl{padding:5px 8px;gap:4px 10px}#photoBar .phint{display:none}}