/* Region banner and map lock styling (kept separate from style.css). */
#region-banner{position:absolute;left:50%;top:20%;transform:translate(-50%,-14px) rotate(-1.2deg);z-index:8;display:grid;gap:.1rem;justify-items:center;
  padding:.7rem 2.2rem .85rem;background:var(--cream,#fff6dc);border:5px solid var(--ink,#2a1840);border-radius:1.2rem;box-shadow:7px 7px 0 var(--ink,#2a1840);
  opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1);text-align:center;min-width:min(22rem,86vw)}
#region-banner.show{opacity:1;transform:translate(-50%,0) rotate(-1.2deg)}
#region-banner span{font-family:var(--fun,"Lilita One",sans-serif);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--region,#f2b94b);border:3px solid var(--ink,#2a1840);border-radius:999px;padding:.12rem .8rem;order:2;margin-top:.35rem;text-shadow:1px 1px 0 var(--ink,#2a1840)}
#region-banner strong{font-family:var(--fun,"Lilita One",sans-serif);font-weight:400;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1;text-transform:uppercase;color:var(--region,#f2b94b);-webkit-text-stroke:2.5px var(--ink,#2a1840);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink,#2a1840)}
body[data-controls=touch] #region-banner{top:16%}
#map-places button.locked{opacity:.6;border-style:dashed}
.map-lock-note{margin:.5rem 0 0;font-size:.78rem;color:#5a4670}
@media(prefers-reduced-motion:reduce){#region-banner{transition:opacity .2s}}