/* Shared HUD lanes: wanted/ammo above, driving above cash, touch controls below. */
.vice-city #speedo{right:max(24px,env(safe-area-inset-right));bottom:calc(max(30px,env(safe-area-inset-bottom)) + 76px);border-radius:6px;min-width:76px;padding:9px 13px}
.vice-city #speedo small{display:block;font-size:11px;margin-top:4px;color:var(--paper)}
.vice-city #lobby .row{flex-wrap:wrap}
.vice-city #lobby .row>.full{flex:1 1 120px;width:auto}
.vice-city #lobby-crew li{min-width:0;flex-wrap:wrap;overflow-wrap:anywhere}
.vice-city #lobby-crew .pill{flex-shrink:0}
.vice-city #room-list .room{gap:12px;min-width:0}
.vice-city #room-list .room>span{overflow-wrap:anywhere;min-width:0}
.vice-city #room-list .room>button{flex-shrink:0}
.vice-city.crew-menu #touch,.vice-city.crew-menu #vprompt,.vice-city.crew-menu #vcontrols,.vice-city.crew-menu #vh-economy-prompts{visibility:hidden}
.vice-city #crew-toggle{z-index:30}
.vice-city.is-live .tl{left:168px}
.vice-city #lobby-status:empty{display:none}
.vice-city .crew-note{font-size:13px;line-height:1.45;color:#e9d5db;margin:16px 0 8px}
.vice-city .crew-guide summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;color:var(--paper);font-weight:700}
.vice-city .crew-guide summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media(pointer:coarse){
  .vice-city #crime-status{top:76px;right:max(12px,env(safe-area-inset-right));width:220px}
  .vice-city #challenge{top:252px;max-width:calc(100vw - 24px);width:calc(100vw - 24px);font-size:14px}
  .vice-city #chat{top:auto;bottom:calc(max(30px,env(safe-area-inset-bottom)) + 380px);width:min(240px,62vw);right:12px}
  .vice-city #chat>div:not(:nth-last-child(-n+2)){display:none}
  .vice-city #arsenal-hud{max-width:calc(100vw - 24px)}
  .vice-city #arsenal-hud #arsenal-reload{pointer-events:auto;min-width:44px;min-height:44px;padding:4px;background:#272e3d;border:1px solid #74808e;border-radius:4px;font-size:10px}
  .vice-city .stars{margin-bottom:0}
  .vice-city .tl{left:145px;right:12px;flex-wrap:wrap;gap:4px;font-size:12px}
  .vice-city.is-live .tl{left:145px}
  .vice-city.is-live #crew-toggle{left:12px;top:138px}
  .vice-city .tl .chip,.vice-city .tl .live{padding:4px 6px}
  .vice-city #crew{top:142px;max-width:134px;font-size:12px}
  .vice-city #speedo{top:158px;bottom:auto;right:12px}
  .vice-city #lobby{padding:max(76px,calc(env(safe-area-inset-top) + 60px)) 12px max(20px,env(safe-area-inset-bottom));align-items:center;background:rgba(14,21,30,.6);pointer-events:auto}
  .vice-city #lobby .card{align-self:center;margin:0;max-height:100%;width:min(430px,100%);padding:20px}
  .vice-city #menu{padding:24px;overflow-y:auto}
  .vice-city #menu .card{max-height:none;flex-shrink:0}
}
@media(pointer:coarse) and (max-height:520px){
  .vice-city #lobby{padding:12px 76px 12px 12px}
  .vice-city #lobby .card{width:min(460px,100%)}
  .vice-city #crew-toggle{left:auto;right:12px;top:12px;max-width:120px}
  .vice-city.is-live #crew-toggle{left:auto;right:12px;top:12px}
  .vice-city.is-live .tl{right:148px}
  .vice-city #crime-status{top:64px}
  .vice-city #arsenal-hud{top:158px}
  .vice-city #chat{display:none}
  .vice-city #challenge{top:auto;bottom:190px;width:min(320px,50vw);max-width:50vw}
  .vice-city #speedo{top:154px}
}

/* Photo mode: only the game view, a hint bar and the shutter flash. */
body.photo-mode #app>:not(canvas):not(#photo-bar):not(#photo-flash),body.photo-mode #lobby,body.photo-mode #crew-toggle,body.photo-mode #phone,body.photo-mode #vh-wallet,body.photo-mode .vh-shop{display:none!important}
#photo-bar{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;max-width:calc(100% - 32px);
  padding:9px 16px;background:rgba(11,12,24,.72);backdrop-filter:blur(10px);border-radius:6px;font:600 15px/1.2 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.03em;color:#fff3dc;pointer-events:none}
#photo-bar[hidden]{display:none}
#photo-bar b{color:#f587a9;letter-spacing:.14em}
#photo-bar kbd{display:inline-block;min-width:20px;margin-right:4px;padding:1px 5px;border-radius:3px;background:#fff3dc;color:#22121c;font:700 12px/1.3 system-ui,sans-serif;text-align:center}
#photo-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#photo-flash.go{animation:photo-flash .45s ease-out}
@keyframes photo-flash{0%{opacity:.85}100%{opacity:0}}