/* Mobile storefront artwork at the existing desktop footprint.
   Decoration only: no booth/grid size, gap, collision or input changes.
   Touch-first devices retain their existing mobile storefronts at every width. */
@media (min-width:601px) and (hover:hover) and (pointer:fine) {
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth {
    --desktop-facade-filter:none;
    isolation:isolate;
    background:#091b30!important;
    border-color:var(--roof-accent);
    border-radius:10px;
    box-shadow:inset 0 0 0 5px #102d48,0 8px 0 #030d1b,0 12px 24px #02081380!important;
  }
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth:nth-child(even) {--desktop-facade-filter:hue-rotate(65deg)}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth[data-neon="cyan"] {--desktop-facade-filter:none}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth[data-neon="pink"] {--desktop-facade-filter:hue-rotate(85deg)}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth[data-neon="mint"] {--desktop-facade-filter:hue-rotate(-45deg)}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth[data-neon="gold"] {--desktop-facade-filter:hue-rotate(185deg)}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth:before {
    inset:58px 26px 104px;
    background:linear-gradient(145deg,#102238,#071425)!important;
    border-color:#6c9cb444;
    border-radius:7px;
    box-shadow:inset 0 2px 9px #0008;
    z-index:-2;
  }
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth:after {display:none!important}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth>.shop-architecture {
    inset:0;
    z-index:-1;
    border-radius:8px;
    background:linear-gradient(90deg,#092540 0 5px,#52d9ef 7px,#14728f 11px,#102c47 16px,transparent 28px calc(100% - 28px),#102c47 calc(100% - 16px),#14728f calc(100% - 11px),#52d9ef calc(100% - 7px),#092540 calc(100% - 5px));
    filter:var(--desktop-facade-filter);
    opacity:1;
    pointer-events:none;
  }
  body.outpost-body #swap-map#swap-map#swap-map .shop-roofline {
    inset:0 0 auto;
    height:58px;
    border:0;
    box-shadow:none;
    background:url('/voxel-city/outpost-facade-20261012a.png') center top/100% 365% no-repeat;
  }
  /* The roof spans the building, but its cube sign must not stretch with it.
     Mask the stretched sign and crop the same artwork at its native ratio. */
  body.outpost-body #swap-map#swap-map#swap-map .shop-roofline:before {
    content:"";
    display:block!important;
    opacity:1;
    position:absolute;
    inset:3px auto auto 50%;
    width:34%;
    height:47px;
    transform:translateX(-50%);
    border:0;
    border-radius:0;
    background:linear-gradient(#09233d,#175179 13%,#193452 16% 84%,#4bdeff 87%,#12617e 95%);
    box-shadow:none;
  }
  body.outpost-body #swap-map#swap-map#swap-map .shop-roofline:after {
    content:"";
    display:block!important;
    opacity:1;
    position:absolute;
    inset:0 auto auto 50%;
    width:54px;
    height:54px;
    transform:translateX(-50%);
    border:0;
    border-radius:0;
    background:url('/voxel-city/outpost-facade-20261012a.png') center -9px/342% auto no-repeat;
    box-shadow:none;
  }
  body.outpost-body #swap-map#swap-map#swap-map .shop-window-bank,
  body.outpost-body #swap-map#swap-map#swap-map .shop-founder-crest {display:none!important}
  body.outpost-body #swap-map#swap-map#swap-map .shop-street-trim {
    inset:auto 0 0;
    height:104px;
    opacity:1;
    background:url('/voxel-city/outpost-facade-20261012a.png') center bottom/100% 360% no-repeat;
  }
  /* Keep the existing doorway anchor; the mobile art supplies the glass doors. */
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth:not(.door-faces-up)>.roof-door {opacity:0;pointer-events:none}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth.door-faces-up .shop-street-trim {
    background:linear-gradient(#142b40,#091729 65%,var(--roof-accent) 67% 70%,#162e44 72% 90%,#061220 91%);
  }
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth.door-faces-up>.roof-door {
    background:linear-gradient(90deg,#103c58 46%,#abf4ff 47% 52%,#103c58 53%);
    border-color:var(--roof-accent);
    box-shadow:0 0 13px var(--roof-accent);
    z-index:2;
  }
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth>.booth-number {border-radius:5px;background:#061423;color:#e9f5ff}
  body.outpost-body #swap-map#swap-map#swap-map #brand-spot>.booth-number {color:#ffe39a;border-color:#e7c66e}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth>.booth-visit {
    background:linear-gradient(#233f55,#11283d)!important;
    border-color:var(--roof-accent)!important;
    box-shadow:0 3px 0 #06111e,0 0 12px color-mix(in srgb,var(--roof-accent) 12%,transparent)!important;
  }
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth:focus-visible {outline:3px solid #c2f5ff;outline-offset:4px}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth.has-billboard>.shop-billboard-art {
    inset:58px 26px 104px;
    border:1px solid #83bad977;
    border-radius:6px;
    background:#071425;
    z-index:-1;
  }
  body.outpost-body #swap-map#swap-map#swap-map .shop-billboard-art img {object-fit:cover!important;opacity:.9}
  body.outpost-body #swap-map#swap-map#swap-map .shop-billboard-art:after {background:linear-gradient(180deg,#081628ef 0%,#081628b3 38%,#07152622 62%,#071526ab 100%)}
  body.outpost-body #swap-map#swap-map#swap-map .swap-booth>.shop-billboard-info {background:#071a2df2;border-color:#74bbcf80}
  body.outpost-body #swap-map#swap-map#swap-map .empty-booth>.shop-architecture {opacity:.65;filter:var(--desktop-facade-filter) saturate(.65)}
}