.environment-notice { position:absolute; z-index:18; left:50%; top:calc(4.5rem + env(safe-area-inset-top)); transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); padding:.7rem 1rem; border:1px solid #ffffff30; border-radius:14px; background:#101726ee; color:#fff; font:14px/1.4 system-ui,sans-serif; box-shadow:0 4px 24px #0005; }
.environment-notice p { margin:0 0 .4rem; }
.environment-notice button { margin-right:.4rem; }
.environment-notice[hidden], .city-credit[hidden] { display:none; }
.city-credit { position:absolute; z-index:8; left:max(8px,env(safe-area-inset-left,0px)); bottom:calc(max(8px,env(safe-area-inset-bottom,0px)) + var(--city-credit-offset,0px)); display:flex; flex-wrap:wrap; gap:3px 8px; box-sizing:border-box; max-width:calc(100% - max(8px,env(safe-area-inset-left,0px)) - max(8px,env(safe-area-inset-right,0px))); padding:3px 6px; border-radius:4px; background:#080e1cc9; font:11px/1.4 system-ui,sans-serif; }
.city-credit a { color:#eee; text-decoration:underline; text-underline-offset:2px; }
/* Landscape phones: the corner sits right above "Make a greeting", which lifts the credit
   into the show. Centre it, smaller, in the free band between the bottom buttons. */
@media(orientation:landscape) and (max-height:520px) { .city-credit { left:50%; transform:translateX(-50%); max-width:40%; justify-content:center; padding:2px 5px; font-size:10px; } }
@media(max-width:700px) { .environment-notice { top:calc(3.3rem + env(safe-area-inset-top)); font-size:12px; } }