/* Layout: a field guide to the live map. The page opens on an illustrated barangay
   with working pins; every feature below is keyed to the symbol it puts on that map.
   Palette: white and light gray grounds, near-black text, and the logo's navy blue and
   yellow as accents only. One light look on purpose, whatever the device theme.
   (Pins keep the app's own ring colours: the legend explains them.) */
:root{
  color-scheme:light;
  --paper:#ffffff; --paper-2:#f4f5f7; --card:#ffffff; --white:#ffffff; --wash:#f0f1f4;
  --tile:linear-gradient(160deg,#ffffff,#f3f4f6);
  --ink:#16191f; --ink-2:#3d434d; --muted:#69707b; --line:rgba(17,24,39,.11); --line-2:rgba(17,24,39,.2);
  --brand:#102a60; --brand-deep:#011437; --brand-2:#1d3b7a; --brand-wash:#e9eef8;
  --btn:#fdb616; --btn-hover:#ffc32b; --on-btn:#011437; --btn-border:#102a60; --btn-bw:3px; --chip-bw:2.5px; --btn-2:#fff4d4; --btn-2-hover:#ffe9a6;
  --yellow:#fdb616; --yellow-2:#ffc32b; --yellow-ink:#b98400; --orange:#fdb616;
  --amber:#fdb616; --amber-ink:#3d434d; --amber-wash:#fff4d4; --amber-line:#f5d98a;
  --band:#f4f5f7; --band-2:#ffffff; --band-ink:#16191f; --band-muted:#69707b;
  --topbar:rgba(255,255,255,.92); --focus:#2563eb;
  --ring-offer:#22c55e; --ring-request:#feb240; --ring-place:#ffffff; --you:#2563eb; --bcast:#dc2626;
  --route:#102a60; --route-case:#ffffff;
  --land:#f1f2f4; --block:#e8eaee; --bldg:#dcdfe5; --bldg-2:#cdd1d9; --road:#ffffff; --road-case:#d4d8df;
  --artery:#ffe7a3; --artery-case:#f3c84f; --bridge:#c3c8d1; --water:#dbe6f2; --water-case:#c4d4e6; --water-ink:#55709a;
  --park:#e4e9e2; --park-2:#d3dbd0; --map-ink:#69707b; --map-halo:#ffffff;
  --label-bg:#ffffff; --label-ink:#16191f; --label-sub:#69707b;
  --av-1:#ffe9ad; --av-2:#dbe4f5; --av-3:#e5e7eb; --av-ink:#2a2f38;
  --shadow-1:0 1px 2px rgba(17,24,39,.06),0 6px 18px rgba(17,24,39,.07);
  --shadow-2:0 2px 6px rgba(17,24,39,.07),0 18px 44px rgba(17,24,39,.11);
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance;font-optical-sizing:auto}
h2{font-size:clamp(2rem,1.2rem + 2.7vw,3.15rem);line-height:1.03;letter-spacing:-.024em;font-weight:780}
h3{font-size:1.1875rem;line-height:1.25;letter-spacing:-.012em;font-weight:720}
p{margin:0}
a{color:var(--brand);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:768px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.art{background-position:center;background-size:contain;background-repeat:no-repeat}
.img-logo{background-position:center;background-size:contain;background-repeat:no-repeat}
.art--atm{background-image:url("/assets/art/atm.webp?v=2e804851")}
.art--babysitter-20{background-image:url("/assets/art/babysitter-20.webp?v=2d7e384d")}
.art--bakery{background-image:url("/assets/art/bakery.webp?v=f59db4e7")}
.art--barangay-hall{background-image:url("/assets/art/barangay-hall.webp?v=9c797d5c")}
.art--barber-shop{background-image:url("/assets/art/barber-shop.webp?v=5d906ce1")}
.art--car-repair-shop{background-image:url("/assets/art/car-repair-shop.webp?v=f926272c")}
.art--carenderia{background-image:url("/assets/art/carenderia.webp?v=6c49e3a2")}
.art--church{background-image:url("/assets/art/church.webp?v=8a111e14")}
.art--coffee-shop{background-image:url("/assets/art/coffee-shop.webp?v=bfcffe56")}
.art--electrician-20{background-image:url("/assets/art/electrician-20.webp?v=92912a53")}
.art--fruit-stand{background-image:url("/assets/art/fruit-stand.webp?v=d7933090")}
.art--gas-station{background-image:url("/assets/art/gas-station.webp?v=fec35aaa")}
.art--halo-halo-stand{background-image:url("/assets/art/halo-halo-stand.webp?v=9188a34b")}
.art--itinerant-taho-vendor{background-image:url("/assets/art/itinerant-taho-vendor.webp?v=85ac515a")}
.art--laundry-shop{background-image:url("/assets/art/laundry-shop.webp?v=67e99351")}
.art--lpg-delivery-tricycle{background-image:url("/assets/art/lpg-delivery-tricycle.webp?v=83358a85")}
.art--meat-shop{background-image:url("/assets/art/meat-shop.webp?v=0237afd5")}
.art--mobile-buko-vendor{background-image:url("/assets/art/mobile-buko-vendor.webp?v=3128a23a")}
.art--mobile-fishball-vendor{background-image:url("/assets/art/mobile-fishball-vendor.webp?v=e9784eaf")}
.art--mobile-pandesal-vendor{background-image:url("/assets/art/mobile-pandesal-vendor.webp?v=6d696df1")}
.art--pharmacy{background-image:url("/assets/art/pharmacy.webp?v=6fb67697")}
.art--piso-wifi{background-image:url("/assets/art/piso-wifi.webp?v=8e6b0f3e")}
.art--plumber-20{background-image:url("/assets/art/plumber-20.webp?v=c813ec8e")}
.art--public-market{background-image:url("/assets/art/public-market.webp?v=c0f13d65")}
.art--public-school{background-image:url("/assets/art/public-school.webp?v=ecce1455")}
.art--sari-sari-store{background-image:url("/assets/art/sari-sari-store.webp?v=36709555")}
.art--tutorial-center{background-image:url("/assets/art/tutorial-center.webp?v=13443d54")}
.art--ukay-ukay-shop{background-image:url("/assets/art/ukay-ukay-shop.webp?v=626ab37e")}
.art--virtual-assistant{background-image:url("/assets/art/virtual-assistant.webp?v=20d8a715")}
.art--vulcanizing-shop{background-image:url("/assets/art/vulcanizing-shop.webp?v=833287db")}
.art--web-app-dev{background-image:url("/assets/art/web-app-dev.webp?v=3e074080")}
.img-logo{background-image:url("/assets/logo.webp?v=b7b169ca")}


/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:700 1rem/1 var(--f-body);text-decoration:none;border:var(--btn-bw) solid var(--btn-border);cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--btn);color:var(--on-btn)}
.btn--primary:hover{background:var(--btn-hover)}
.btn--line{background:var(--btn-2);color:var(--on-btn)}
.btn--line:hover{background:var(--btn-2-hover)}
.btn--amber{background:var(--btn);color:var(--on-btn)}
.btn--amber:hover{background:var(--btn-hover)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.9375rem}
.btn svg{width:18px;height:18px;flex:none}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--topbar);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.topbar__in{display:flex;align-items:center;gap:16px;min-height:62px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.3rem/1 var(--f-display);letter-spacing:-.025em}
.brand__mark{width:34px;height:34px;flex:none;border-radius:9px;background-color:#ffffff;box-shadow:0 0 0 1px var(--line)}
.topnav{display:none;gap:2px;margin-left:auto}
.topnav a{font:600 .875rem/1 var(--f-body);color:var(--ink-2);text-decoration:none;padding:9px 9px;border-radius:8px;white-space:nowrap}
.topnav a:hover{background:var(--paper-2);color:var(--ink)}
.topbar .btn{margin-left:auto}
@media (min-width:1120px){.topnav{display:flex}.topbar .btn{margin-left:8px}}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(28px,5vw,60px) clamp(40px,6vw,80px)}
.hero__grid{display:grid;gap:22px 56px;align-items:end}
@media (min-width:980px){.hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .8125rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.pulse{position:relative;width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--orange);animation:radar 2s ease-out infinite}
h1{font-size:clamp(3rem,1.3rem + 6.6vw,6.4rem);line-height:.93;letter-spacing:-.036em;font-weight:800}
.live{color:var(--ink);white-space:nowrap;background:linear-gradient(transparent 52%,var(--yellow) 52%,var(--yellow) 84%,transparent 84%);padding:0 .03em}
.live__dot{position:relative;display:inline-block;width:.17em;height:.17em;margin-left:.07em;border-radius:50%;background:var(--brand);vertical-align:baseline}
.live__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:radar 2.4s ease-out infinite}
.lede{font-size:clamp(1.125rem,1.02rem + .45vw,1.3125rem);line-height:1.55;color:var(--ink-2);max-width:36em}
.fil{margin-top:12px;font:italic 500 1.0625rem/1.5 var(--f-body);color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero__facts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font:500 .8125rem/1.4 var(--f-mono);color:var(--muted)}
.hero__facts li{display:inline-flex;align-items:center;gap:8px}
.hero__facts li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--yellow);border:2px solid var(--brand)}

/* ── The live map ─────────────────────────────────────────────────────── */
.livemap{position:relative;margin:clamp(30px,4.5vw,52px) 0 0}
.livemap__canvas{--vbx:100;--vby:150;--vbw:1200;--vbh:600;--pin-s:1;position:relative;aspect-ratio:var(--vbw) / var(--vbh);max-width:100%;border-radius:22px;overflow:hidden;background:var(--land);border:1px solid var(--line);box-shadow:var(--shadow-2);isolation:isolate}
@media (max-width:899px){.livemap__canvas{--vbx:250;--vby:70;--vbw:960;--vbh:720}}
@media (max-width:599px){.livemap__canvas{--vbx:400;--vby:60;--vbw:600;--vbh:800;--pin-s:.84;border-radius:18px}}
.world{position:absolute;z-index:0;left:calc(var(--vbx) / var(--vbw) * -100%);top:calc(var(--vby) / var(--vbh) * -100%);width:calc(1400 / var(--vbw) * 100%);height:calc(900 / var(--vbh) * 100%)}
.world__svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-land{fill:var(--land)} .m-block{fill:var(--block)} .m-bldg{fill:var(--bldg)} .m-bldg2{fill:var(--bldg-2)}
.m-park{fill:var(--park)} .m-park2{fill:var(--park-2)} .m-tree{fill:var(--park-2)} .m-flag{fill:var(--map-ink)}
.m-walk{fill:none;stroke:var(--road);stroke-width:3.5;stroke-linecap:round;opacity:.9}
.m-walk-ring{fill:none;stroke:var(--road);stroke-width:3}
.m-track{fill:none;stroke:var(--road);stroke-width:2.5;opacity:.85}
.m-park-strip{fill:none;stroke:var(--park);stroke-width:34}
.m-case{fill:none;stroke:var(--road-case);stroke-width:19;stroke-linecap:square}
.m-road{fill:none;stroke:var(--road);stroke-width:14;stroke-linecap:square}
.m-water-case{fill:none;stroke:var(--water-case);stroke-width:78}
.m-water{fill:none;stroke:var(--water);stroke-width:64}
.m-bridge{fill:none;stroke:var(--bridge);stroke-width:38}
.m-art-case{fill:none;stroke:var(--artery-case);stroke-width:31}
.m-art{fill:none;stroke:var(--artery);stroke-width:24}
.m-label{font:500 10px var(--f-mono);letter-spacing:.14em;fill:var(--map-ink);paint-order:stroke;stroke:var(--map-halo);stroke-width:3.5px;stroke-linejoin:round}
.m-label--hwy{stroke:var(--artery)}
.m-label--park{stroke:var(--park);font-size:9px}
.m-area{font:600 13px var(--f-body);letter-spacing:.34em;fill:var(--map-ink);paint-order:stroke;stroke:var(--land);stroke-width:5px;stroke-linejoin:round;opacity:.85}
.m-river{font:italic 500 13px var(--f-mono);letter-spacing:.6em;fill:var(--water-ink)}
.m-route-case,.m-route{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s ease}
.m-route-case{stroke:var(--route-case);stroke-width:12}
.m-route{stroke:var(--route);stroke-width:6.5}
.m-route-case.on,.m-route.on{opacity:1}

/* Pins: the app's own .gh-pin, rebuilt. A rotated square with one sharp corner is
   the teardrop; the RING says what kind of thing it is, the FILL its category. */
.pin{--ring:var(--ring-offer);position:absolute;left:calc(var(--x) / 1400 * 100%);top:calc(var(--y) / 900 * 100%);width:42px;height:47px;margin:-47px 0 0 -21px;padding:0;border:0;background:none;display:flex;justify-content:center;align-items:flex-start;cursor:pointer;z-index:var(--z);scale:var(--pin-s);transform-origin:50% 100%;transition:opacity .3s ease;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
.pin--request{--ring:var(--ring-request)}
.pin--place{--ring:var(--ring-place)}
.pin--bcast{--ring:var(--bc,var(--bcast));--fill:#ffffff}
.pin__head{width:40px;height:40px;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);background-color:var(--fill,#d6d3d1);background-image:linear-gradient(225deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 58%);border:5px solid var(--ring);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(15,23,42,.10),0 0 6px rgba(15,23,42,.22)}
/* The picture sits over the head like a sticker, as in the app since v4.7.1 (owner,
   2026-11-07: "the image icons are too small to be recognizable, adjust it bigger,
   not necessarily to fit inside the pin"). The ring still shows at the sides and
   the point. flex:none, or the 30px inside of the head would shrink it back. */
.pin__art{display:block;flex:none;width:38px;height:38px;transform:rotate(45deg)}
.pin__glyph{width:18px;height:18px;transform:rotate(45deg);color:var(--bc,var(--bcast))}
.pin--bcast::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:28px;margin:0 0 -14px -14px;border-radius:50%;background:var(--bc,var(--bcast));z-index:-1;pointer-events:none;animation:bcast 2.4s ease-out infinite}
.pin__label{position:absolute;bottom:calc(100% + 3px);left:50%;translate:-50% 0;background:var(--label-bg);border:1px solid rgba(15,23,42,.12);border-radius:9px;box-shadow:0 2px 8px rgba(15,23,42,.18);padding:4px 8px;white-space:nowrap;text-align:center;font:700 11px/1.25 var(--f-body);color:var(--label-ink);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.pin__label small{display:block;font-weight:500;font-size:10px;color:var(--label-sub)}
.pin:hover,.pin:focus-visible,.pin.is-open{z-index:5000}
.pin:hover .pin__label,.pin:focus-visible .pin__label,.pin.is-open .pin__label,.pin--labeled .pin__label{opacity:1;transform:none}
.pin--labeled{z-index:4000}
.pin:focus-visible{outline-offset:0}
.pin.is-off,.livemap.hide-offer .pin--offer,.livemap.hide-request .pin--request,.livemap.hide-place .pin--place,.livemap.hide-bcast .pin--bcast{opacity:0;pointer-events:none}
.livemap.hide-you .you-wrap{opacity:0}
.livemap.is-ready .pin{animation:pin-in .5s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--d) * 1ms)}
.you-wrap{position:absolute;left:calc(var(--x) / 1400 * 100%);top:calc(var(--y) / 900 * 100%);width:18px;height:18px;margin:-9px 0 0 -9px;z-index:3500;transition:opacity .3s ease}
.you{position:relative;display:block;width:18px;height:18px;border-radius:50%;background:var(--you);border:3px solid #ffffff;box-shadow:0 0 0 4px rgba(37,99,235,.25)}
.you::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--you);z-index:-1;animation:you 2.4s ease-out infinite}
@keyframes you{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(4.5);opacity:0}}
@keyframes bcast{0%{transform:scale(1);opacity:.5}70%{opacity:0}100%{transform:scale(9);opacity:0}}
@keyframes radar{0%{transform:scale(1);opacity:.55}70%{opacity:0}100%{transform:scale(3.2);opacity:0}}
@keyframes pin-in{from{transform:translateY(-16px) scale(.55)}to{transform:none}}

/* Map overlays */
.overlay{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1)}
.nearest{position:absolute;top:12px;left:12px;z-index:30;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px;max-width:calc(100% - 24px)}
.nearest__label{display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 4px;font:700 .8125rem/1 var(--f-body);color:var(--ink)}
.nearest__label svg{width:16px;height:16px;color:var(--brand)}
.chip{font:700 .8125rem/1 var(--f-body);color:var(--on-btn);background:var(--btn-2);border:var(--chip-bw) solid var(--btn-border);border-radius:999px;padding:8px 12px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.chip:hover{background:var(--btn-2-hover)}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--on-btn)}
.chat-toggle.overlay{background:var(--btn-2);border:var(--btn-bw) solid var(--btn-border);color:var(--on-btn)}
.chat-toggle.overlay[aria-pressed="false"]{background:var(--card)}
.legend{position:absolute;top:12px;right:12px;z-index:30;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;padding:5px;max-width:52%}
.legend__item{display:inline-flex;align-items:center;gap:6px;padding:7px 8px;border:0;border-radius:8px;background:transparent;font:600 .75rem/1 var(--f-body);color:var(--ink-2);cursor:pointer}
.legend__item:hover{background:var(--paper-2)}
.legend__item[aria-pressed="false"]{color:var(--muted);text-decoration:line-through;opacity:.55}
.lg{width:9px;height:9px;border-radius:50%;flex:none}
.lg--offer{background:var(--ring-offer)} .lg--request{background:var(--ring-request)}
.lg--place{background:#ffffff;box-shadow:0 0 0 1.5px #64748b} .lg--you{background:var(--you)}
.lg--bcast{background:var(--bcast);box-shadow:0 0 0 3px rgba(220,38,38,.22);margin:0 3px}
.chat-toggle{position:absolute;right:12px;bottom:12px;z-index:30;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.chat-toggle svg{width:20px;height:20px}
.chat-toggle[aria-pressed="false"]{color:var(--muted)}
.chat-toggle[aria-pressed="false"] .slash{opacity:1}
.chat-toggle .slash{opacity:0}
.mapchat{position:absolute;left:12px;bottom:12px;z-index:25;display:flex;flex-direction:column;gap:7px;width:min(300px,calc(100% - 80px));pointer-events:none;transition:opacity .25s ease}
.mc-row{display:flex;align-items:flex-start;gap:7px;transition:opacity .24s ease,transform .24s ease}
.mc-av{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 .6875rem/1 var(--f-body);color:var(--av-ink);box-shadow:0 1px 3px rgba(15,23,42,.25)}
.mc-bubble{min-width:0;background:var(--card);border-radius:4px 14px 14px 14px;padding:6px 10px;box-shadow:0 2px 8px rgba(15,23,42,.18);font-size:.8125rem;line-height:1.35;color:var(--ink)}
.mc-name{display:block;font-size:.6875rem;font-weight:800;color:var(--brand)}
.mc-row--mine .mc-bubble{background:var(--amber-wash)}
.livemap.chat-off .mc-row{opacity:0;transform:translateX(-14px) scale(.97)}
.livemap.chat-off .mc-row:nth-child(2){transition-delay:.06s} .livemap.chat-off .mc-row:nth-child(1){transition-delay:.12s}
.livemap.routing .mapchat{opacity:0}
.toast{position:absolute;top:66px;left:50%;translate:-50% 0;z-index:35;display:flex;align-items:center;gap:10px;padding:10px 14px;max-width:calc(100% - 24px);font-size:.8125rem;line-height:1.35;color:var(--ink);opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.toast.show{opacity:1;transform:none}
.toast__icon{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--amber-wash);color:var(--amber-ink)}
.toast__icon svg{width:17px;height:17px}
.toast b{display:block}
.routecard{position:absolute;left:12px;bottom:12px;right:68px;z-index:32;max-width:470px;display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;box-shadow:var(--shadow-2)}
.routecard[hidden]{display:none}
.routecard__icon{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--brand-wash);color:var(--brand)}
.routecard__icon svg{width:18px;height:18px}
.routecard__text{flex:1 1 auto;min-width:0}
.routecard__title{font:700 .9375rem/1.3 var(--f-body);color:var(--ink)}
.routecard__sub{font-size:.8125rem;line-height:1.4;color:var(--ink-2)}
.routecard__note{margin-top:3px;font-size:.75rem;line-height:1.35;color:var(--muted)}
.routecard__btns{display:flex;gap:6px;flex:none}
.rc-btn{height:36px;min-width:38px;padding:0 12px;border-radius:10px;border:var(--btn-bw) solid var(--btn-border);background:var(--btn-2);font:700 .875rem/1 var(--f-body);color:var(--on-btn);cursor:pointer}
.rc-btn--next{background:var(--btn)}
.livemap__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:14px}
.livemap figcaption{font-size:.875rem;color:var(--muted);max-width:60ch}
@media (max-width:599px){
  .legend{position:static;max-width:none;justify-content:center;margin-top:12px;box-shadow:none}
  .nearest{right:12px;flex-wrap:nowrap}
  .nearest__label{padding:0 2px 0 4px}
  .nearest__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legend{gap:0}
  .legend__item{padding:6px 6px}
  .mapchat{width:calc(100% - 76px)}
  .mapchat .mc-row:first-child{display:none}
  .toast{top:auto;bottom:70px}
}
@media (min-width:600px) and (max-width:899px){.mapchat .mc-row:first-child{display:none}}

/* ── Sections ─────────────────────────────────────────────────────────── */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec--tint{background:var(--paper-2)}
.sec--amber{background:var(--paper-2)}
.sec + .sec{border-top:1px solid var(--line)}
.sec--tint + .sec,.sec + .sec--tint,.sec--amber + .sec,.sec + .sec--amber{border-top:0}
.key{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:600 .75rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.key::after{content:"";height:1px;width:72px;background:var(--line-2)}
.key__marks{display:inline-flex;align-items:flex-end;gap:5px}
.mini{position:relative;display:inline-flex;justify-content:center;width:22px;height:25px}
.mini::before{content:"";width:20px;height:20px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);background:var(--fill,#d6dee6);border:3.5px solid var(--ring);box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.mini--offer{--ring:var(--ring-offer);--fill:#bfd1c2}
.mini--request{--ring:var(--ring-request);--fill:#cbd5e1}
.mini--place{--ring:var(--ring-place);--fill:#b0d1e2}
.mini--bcast{--ring:var(--bcast);--fill:#ffffff}
.kmark{width:22px;height:22px;color:var(--brand)}
.kdot{position:relative;width:14px;height:14px;border-radius:50%;background:var(--you);border:2.5px solid #ffffff;box-shadow:0 0 0 1px rgba(15,23,42,.15),0 0 0 6px rgba(37,99,235,.16)}
.kpulse{position:relative;width:12px;height:12px;border-radius:50%;background:var(--bcast)}
.kpulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--bcast);animation:radar 2s ease-out infinite}
.kradar{position:relative;width:14px;height:14px;border-radius:50%;background:var(--brand)}
.kradar::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--brand);animation:radar 2.4s ease-out infinite}
.intro{display:grid;gap:18px;max-width:780px}
.split{display:grid;gap:44px;align-items:center}
@media (min-width:980px){.split{grid-template-columns:minmax(0,11fr) minmax(0,10fr);gap:72px}.split--rev{grid-template-columns:minmax(0,10fr) minmax(0,11fr)}.split--rev .split__demo{order:-1}}
.split__text{min-width:0}
.split__text .lede{margin-top:18px}
.points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px}
.points li{position:relative;padding-left:24px;color:var(--ink-2);max-width:62ch}
.points li::before{content:"";position:absolute;left:3px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent,var(--yellow));box-shadow:0 0 0 2px var(--accent-ring,var(--brand))}
.points b{color:var(--ink);font-weight:700}
.specs{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .8125rem/1.45 var(--f-mono);color:var(--muted)}
.specs span{display:inline-flex;align-items:center;gap:8px}
.specs span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.demo{margin:0;min-width:0}
.note{margin-top:28px;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:.9375rem;line-height:1.5;color:var(--ink-2);max-width:62ch}
.note svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--yellow-ink)}
.demo__cap{margin-top:12px;font-size:.8125rem;color:var(--muted);text-align:center}

/* ── App-screen replicas (illustrations, not controls) ────────────────── */
.ui{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-2);padding:18px;font-size:.9375rem;color:var(--ink)}
.ui + .ui{margin-top:16px}
.ui__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font:750 1.0625rem/1.2 var(--f-display);letter-spacing:-.01em}
.ui__head small{font:500 .75rem/1 var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.ui__stack{display:grid;gap:10px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:13px;background:var(--wash)}
.seg span{padding:10px 0;border-radius:10px;text-align:center;font-weight:700;font-size:.875rem;color:var(--muted)}
.seg .on{background:var(--card);color:var(--brand);box-shadow:var(--shadow-1)}
.field{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:0}
.field__label{display:flex;justify-content:space-between;gap:8px;font:600 .6875rem/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.field__val{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);min-width:0}
.field__val .art{width:30px;height:26px;flex:none}
.field__val--multi{display:block;font-weight:500;color:var(--ink-2);font-size:.875rem;line-height:1.5}
.ui-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ui-btn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:13px;background:var(--btn);border:var(--btn-bw) solid var(--btn-border);color:var(--on-btn);font-weight:800;letter-spacing:.01em}
.sig{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0}
.sig + .sig{border-top:1px solid var(--line)}
.sig .art{width:40px;height:34px}
.sig__t{font-weight:700;font-size:.9375rem;line-height:1.3}
.sig__s{font-size:.8125rem;color:var(--muted)}
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:700 .75rem/1 var(--f-body);white-space:nowrap}
.st--live{background:var(--brand-wash);color:var(--brand)}
.st--live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--you)}
.st--shelf{background:var(--wash);color:var(--ink-2)}
.st--review{background:var(--amber-wash);color:var(--amber-ink)}
.search{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1.5px solid var(--brand);border-radius:14px;font-weight:600}
.search svg{width:18px;height:18px;color:var(--brand);flex:none}
.search__caret{width:2px;height:18px;background:var(--brand);margin-left:-6px;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:7px 12px;border-radius:999px;background:var(--wash);font-weight:600;font-size:.8125rem;color:var(--ink-2)}
.chips .on{background:var(--btn);box-shadow:inset 0 0 0 var(--chip-bw) var(--btn-border);color:var(--on-btn)}
.routecard--static{position:static;max-width:none;box-shadow:none;border:1px solid var(--line)}
.try{margin-top:16px;display:flex;justify-content:center}
.notif{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.notif__icon{width:36px;height:36px;border-radius:10px;background-color:#ffffff;border:1px solid var(--line)}
.notif__meta{font:500 .75rem/1.2 var(--f-mono);color:var(--muted);letter-spacing:.03em}
.notif__t{margin-top:3px;font-weight:700;font-size:.9375rem;line-height:1.3}
.notif__b{font-size:.875rem;color:var(--ink-2);line-height:1.4}
.thread{display:grid;gap:8px}
.th-head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.th-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:800 .875rem/1 var(--f-body);background:var(--av-2);color:var(--av-ink);flex:none}
.th-name{font-weight:700;line-height:1.25}
.th-sub{font-size:.8125rem;color:var(--muted)}
.bub{max-width:82%;padding:8px 12px;border-radius:16px;font-size:.9rem;line-height:1.4}
.bub--them{background:var(--wash);border-top-left-radius:5px;justify-self:start}
.bub--me{background:var(--amber-wash);border-top-right-radius:5px;justify-self:end}
.th-lock{display:flex;align-items:center;gap:8px;margin-top:8px;padding:9px 12px;border-radius:12px;background:var(--brand-wash);font-size:.8125rem;color:var(--ink-2)}
.th-lock svg{width:16px;height:16px;color:var(--brand);flex:none}
.wallpost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.wallpost .mc-av{width:30px;height:30px;font-size:.75rem}
.wallpost__meta{font:500 .75rem/1.3 var(--f-mono);color:var(--muted)}
.bc{position:relative;padding:18px 18px 18px 22px;overflow:hidden}
.bc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--bcast)}
.bc__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.prio{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:#fee2e2;color:#991b1b;font:800 .75rem/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase}
.prio::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bcast)}
.bc__ends{font:500 .75rem/1 var(--f-mono);color:var(--muted)}
.bc__fil{font:700 .8125rem/1.3 var(--f-body);color:var(--muted)}
.bc__t{margin-top:2px;font:750 1.25rem/1.2 var(--f-display);letter-spacing:-.01em}
.bc__b{margin-top:8px;color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.bc__dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0 0;font-size:.875rem}
.bc__dl dt{color:var(--muted)} .bc__dl dd{margin:0;font-weight:600}
.bc__upd{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:8px}
.upd{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;font-size:.875rem;line-height:1.4}
.upd time{font:500 .75rem/1.6 var(--f-mono);color:var(--muted)}
.bc__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ghost{display:inline-flex;align-items:center;padding:9px 14px;border-radius:11px;border:var(--btn-bw) solid var(--btn-border);background:var(--btn-2);color:var(--on-btn);font-weight:700;font-size:.875rem}
.ghost--g{background:var(--btn)}
.opts{display:grid;gap:7px}
.opts__label{font:600 .6875rem/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.opts__row{display:flex;flex-wrap:wrap;gap:6px}
.opts__row span{padding:7px 11px;border-radius:10px;border:1px solid var(--line-2);font-weight:600;font-size:.8125rem;color:var(--ink-2)}
.opts__row .on{border-color:var(--btn-border);box-shadow:inset 0 0 0 1.5px var(--btn-border);background:var(--btn-2);color:var(--on-btn)}
.opts__row small{font-weight:500;color:var(--muted)}
.stop{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:12px;border:var(--btn-bw) solid var(--btn-border);background:var(--btn-2);font-weight:700;color:var(--on-btn)}
.stop::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--on-btn)}
.ppl{display:grid;gap:0}
.ppl__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0}
.ppl__row + .ppl__row{border-top:1px solid var(--line)}
.ppl__av{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 .8125rem/1 var(--f-body);color:var(--av-ink)}
.ppl__av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--card);background:var(--dot,#94a3b8)}
.ppl__n{font-weight:700;line-height:1.25}
.ppl__s{font-size:.8125rem;color:var(--muted)}
.ppl__tag{font:500 .75rem/1 var(--f-mono);color:var(--muted)}

/* ── Read-the-map + categories ────────────────────────────────────────── */
.mapguide{display:grid;gap:40px;margin-top:44px}
@media (min-width:980px){.mapguide{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}}
.rings{display:grid;gap:4px;margin:18px 0 0;padding:0}
.rings div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.rings dt{display:flex;justify-content:center}
.rings dd{margin:0;color:var(--ink-2)}
.rings dd b{display:block;color:var(--ink);font-weight:700}
.rings .mini{width:26px;height:30px}
.rings .mini::before{width:24px;height:24px;border-width:4.5px}
.guide-note{margin-top:14px;font-size:.9375rem;color:var(--muted)}
.cats{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.cats li{display:grid;justify-items:center;align-content:start;gap:8px;padding:12px 6px 10px;border-radius:14px;background:var(--tile);border:1px solid var(--line);text-align:center}
.cats .art{width:64px;height:54px}
.cats span:last-child{font-size:.75rem;line-height:1.25;font-weight:600;color:var(--ink-2)}
.facts{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:28px 36px}
@media (min-width:700px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts li{padding-top:16px;border-top:2px solid var(--ink)}
.facts p{margin-top:8px;color:var(--ink-2);font-size:.9375rem}

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alerts-top{display:grid;gap:32px;align-items:center}
@media (min-width:980px){.alerts-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.mascot{width:100%;height:auto;max-width:100%;display:block;border-radius:22px}
.pair{display:grid;gap:20px;margin-top:44px}
@media (min-width:860px){.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.acard{display:grid;gap:14px;align-content:start;padding:24px;border-radius:22px;background:var(--card);border:1px solid var(--amber-line)}
.acard p{color:var(--ink-2)}
.acard__k{font:600 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}

/* ── Business ─────────────────────────────────────────────────────────── */
.biz{display:grid;gap:22px;margin-top:44px}
@media (min-width:1000px){.biz{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bcard{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:22px;background:var(--card);border:1px solid var(--line);min-width:0}
.bcard p{color:var(--ink-2);font-size:.9688rem}
.bcard__demo{min-height:172px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px;border-radius:16px;background:var(--paper-2)}
.bcard__demo .placecard{background:var(--card)}
.bcard__more{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.bcard__more a{font-weight:700}
.steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:.875rem;color:var(--ink-2)}
.steps__n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 .8125rem/1 var(--f-mono);background:var(--brand-wash);color:var(--brand)}
.code{display:flex;gap:6px;margin-top:6px}
.code span{width:30px;height:38px;border-radius:9px;border:1.5px solid var(--line-2);display:grid;place-items:center;font:600 1rem/1 var(--f-mono);color:var(--ink)}
.code .fill{border-color:var(--brand)}
.code .cur{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
.placecard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px}
.placecard .art{width:58px;height:50px}
.placecard__n{font-weight:700;line-height:1.25}
.placecard__s{font-size:.8125rem;color:var(--muted)}
.counts{display:flex;gap:18px;margin-top:10px;font:500 .8125rem/1 var(--f-mono);color:var(--ink-2)}
.counts b{font-weight:600;color:var(--ink)}
.spons{border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.spons__banner{position:relative;aspect-ratio:3 / 1;max-width:100%;display:flex;align-items:center;gap:12px;padding:0 16px;background:linear-gradient(120deg,#011437,#102a60 58%,#fdb616 165%);color:#ffffff}
.spons__banner .art{width:64px;height:56px;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.spons__name{font:800 1.125rem/1.1 var(--f-display);letter-spacing:-.01em}
.spons__tag{font-size:.8125rem;opacity:.92}
/* In the foot, as in the app's sponsor card (js/sponsor-card.js: "Sponsored" +
   "Visit website"). On the banner it sat over the sponsor's name. */
.spons__chip{display:inline-block;padding:4px 7px;border-radius:6px;background:#102a60;color:#ffffff;font:600 .625rem/1 var(--f-mono);letter-spacing:.1em}
.spons__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:.8125rem;color:var(--ink-2);background:var(--card)}
.price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price b{font:780 1.6rem/1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.price span{font-size:.875rem;color:var(--muted)}

/* ── Privacy ──────────────────────────────────────────────────────────── */
.priv{display:grid;gap:40px;margin-top:44px}
@media (min-width:980px){.priv{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}}
.blur{margin:0;border-radius:22px;background:var(--land);border:1px solid var(--line);overflow:hidden}
.blur svg{display:block;width:100%;height:auto}
.blur__cap{padding:12px 16px;font-size:.875rem;color:var(--ink-2);background:var(--card);border-top:1px solid var(--line)}
.pgrid{list-style:none;margin:0;padding:0;display:grid;gap:26px 32px}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pgrid li{display:grid;gap:6px;align-content:start}
.pgrid h3{display:flex;align-items:center;gap:10px}
.pgrid h3 svg{width:20px;height:20px;color:var(--brand);flex:none}
.pgrid p{color:var(--ink-2);font-size:.9688rem}
.tips{margin-top:48px;display:grid;gap:12px;padding:22px 24px;border-radius:20px;background:var(--paper-2)}
.tips ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
@media (min-width:860px){.tips ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.tips li{position:relative;padding-left:20px;color:var(--ink-2);font-size:.9375rem}
.tips li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* ── Also + closing ───────────────────────────────────────────────────── */
.also{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:24px 36px}
@media (min-width:860px){.also{grid-template-columns:repeat(3,minmax(0,1fr))}}
.also li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:2px solid var(--ink)}
.also p{color:var(--ink-2);font-size:.9688rem}
.closing{background:var(--band);color:var(--band-ink);padding-block:clamp(64px,9vw,112px)}
.closing__in{display:grid;gap:28px;align-items:end}
@media (min-width:980px){.closing__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px}}
.closing h2{color:var(--band-ink);font-size:clamp(2.4rem,1.3rem + 4.2vw,4.6rem);letter-spacing:-.04em;line-height:.98}
.closing p{color:var(--band-muted);font-size:1.0625rem;max-width:44ch}
.closing .cta-row{margin-top:26px}
.more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.more a{color:var(--brand);font-weight:600}
.support{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px;color:var(--band-muted)}
.support .email{font:600 1rem/1 var(--f-mono);color:var(--band-ink);-webkit-user-select:all;user-select:all}
.copy{padding:7px 12px;border-radius:9px;border:var(--btn-bw) solid var(--btn-border);background:var(--btn-2);color:var(--on-btn);font:700 .8125rem/1 var(--f-body);cursor:pointer}
.copy:hover{background:var(--btn-2-hover)}
.foot{padding-block:22px;background:var(--band-2);color:var(--band-muted);border-top:1px solid var(--line);font-size:.8125rem}
.foot__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.foot .brand{color:var(--band-ink);font-size:1rem}
.foot .brand__mark{width:26px;height:26px;border-radius:7px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pulse::after,.live__dot::after,.kpulse::after,.kradar::after,.you::after,.pin--bcast::after{animation:none;opacity:0}
  .livemap.is-ready .pin{animation:none}
  .search__caret{animation:none}
  .m-route-case,.m-route,.pin,.mc-row,.toast{transition:none}
}

/* ── giggora.com, the website (added to site.css by build-site.js) ──────────────
   The landing page above was first a stand-alone showcase; these rules make it a
   site: the base the showcase's host used to provide, the shorter navigation,
   the "Giggora has moved" bar, "Get the app", and the FAQ / legal pages. */

html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }

/* Four links, so the navigation fits from tablet width up. */
@media (min-width: 760px) { .topnav { display: flex; } .topbar .btn { margin-left: 8px; } }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }

/* Old installed web app → this site. Shown by site.js in standalone mode only. */
.moved { background: #fff4d4; border-bottom: 1px solid #f5d98a; color: var(--ink); }
.moved__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 12px; font-size: .9375rem; }
.moved__in p { flex: 1 1 320px; min-width: 0; }

/* ── Get the app ─────────────────────────────────────────────────────────── */
.getapp__pair { display: grid; gap: 22px; margin-top: 40px; }
@media (min-width: 900px) { .getapp__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
.gacard { display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.gacard__top { display: flex; align-items: center; gap: 14px; }
.gacard__icon { width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--brand-wash); color: var(--brand); }
.gacard__icon svg { width: 26px; height: 26px; }
.gacard__sub { color: var(--muted); font-size: .9375rem; }
.gacard p { color: var(--ink-2); }
.gacard__btn { align-self: flex-start; }
.gacard__btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.gacard__facts { display: grid; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--paper-2); font-size: .875rem; }
.gacard__facts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.gacard__facts dt { color: var(--muted); }
.gacard__facts dd { margin: 0; font-weight: 600; color: var(--ink); min-width: 0; }
.gacard__facts code { font: 500 .75rem/1.45 var(--f-mono); color: var(--ink-2); word-break: break-all; }
.gacard__hash { display: flex; align-items: flex-start; gap: 8px; }
.gacard__hash code { flex: 1 1 auto; min-width: 0; }
.gacard__hash .copy { flex: none; padding: 4px 9px; font-size: .75rem; }
.gacard__warn { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: #fff4d4; border: 1px solid #f5d98a; font-size: .9063rem; color: var(--ink); }
.gacard__warn svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--yellow-ink); }
.gacard__steps, .gacard__list { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink-2); font-size: .9375rem; }
.getapp__or { margin-top: 26px; text-align: center; color: var(--muted); }

/* ── How-to videos ───────────────────────────────────────────────────────────
   Portrait phone videos. On a phone: one row to swipe through. From tablet
   width: a grid. Nothing downloads until a video is tapped (preload="none").
   Big on purpose: the app's text inside the video must stay readable, so
   two across on a tablet and three on a computer, not four (owner, 2026-11-05:
   "too small and too difficult to read"). */
.howto { list-style: none; margin: 40px 0 0; padding: 0 0 12px; display: grid; gap: 18px;
  grid-auto-flow: column; grid-auto-columns: max(240px, 78%); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (min-width: 700px) { .howto { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 26px; overflow: visible; padding-bottom: 0; } }
@media (min-width: 1000px) { .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 30px; } }
/* Never taller than most of the screen (a landscape tablet, a short laptop):
   the card narrows instead, centred in its column. */
.howto__item { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  width: 100%; max-width: calc(82svh * 9 / 16); justify-self: center; }
.howto__video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px;
  background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.howto__text h3 { font-size: 1.0625rem; }
.howto__text p { margin-top: 5px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.howto__len { display: inline-block; margin-top: 9px; padding: 4px 9px; border-radius: 999px; background: var(--paper-2); font: 600 .75rem/1 var(--f-mono); letter-spacing: .06em; color: var(--muted); }

/* ── FAQ, Privacy, Terms, Advertise ──────────────────────────────────────── */
.doc { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 96px); }
.doc__wrap { max-width: 880px; }
.doc__head { display: grid; gap: 14px; margin-bottom: 30px; }
.doc__head h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1; letter-spacing: -.034em; font-weight: 800; }
.doc__head .lede { max-width: 40em; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc em { font-style: italic; }

.fq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.fq-chip { display: inline-flex; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-2); font-weight: 700; font-size: .875rem; text-decoration: none; }
.fq-chip:hover { border-color: var(--brand); color: var(--brand); }
.fq-cat { margin: 36px 0 10px; font: 600 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); scroll-margin-top: 84px; }
.doc .lg-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 6px 22px; margin-top: 12px; }
.fq-q { border-bottom: 1px solid var(--line); }
.fq-q:last-child { border-bottom: 0; }
.fq-q > summary { list-style: none; cursor: pointer; position: relative; padding: 17px 34px 17px 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }
.fq-q > summary::-webkit-details-marker { display: none; }
.fq-q > summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 1.45rem; font-weight: 400; color: var(--muted); line-height: 1.2; }
.fq-q[open] > summary::after { content: "\2212"; }
.fq-q[open] > summary { color: var(--brand); }
.fq-a { padding: 0 0 16px; }
.fq-a p { margin: 0 0 10px; color: var(--ink-2); }
.fq-a ul { margin: 0 0 10px; padding-left: 20px; color: var(--ink-2); }
.fq-a li { margin-bottom: 5px; }
.fq-note { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #fff4d4; border: 1px solid #f5d98a; color: var(--ink); }
.fq-note--info { background: var(--brand-wash); border-color: #c9d5ec; }
.fq-foot { margin-top: 30px; text-align: center; color: var(--muted); }

.doc .lg-card.lg-legal { padding: 18px 24px 8px; }
.lg-h2 { margin: 6px 0 10px; font: 750 1.3rem/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink); }
.lg-h3 { margin: 18px 0 6px; font-weight: 700; color: var(--ink); }
.lg-p { margin: 0 0 12px; color: var(--ink-2); }
.lg-list { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.lg-list li { margin-bottom: 6px; }
.lg-note { margin: 12px 0 14px; padding: 12px 14px; border-radius: 12px; font-size: .9688rem; color: var(--ink); }
.lg-note--key, .lg-note--warn { background: #fff4d4; border: 1px solid #f5d98a; }
.lg-note--good, .lg-note--info { background: var(--brand-wash); border: 1px solid #c9d5ec; }
.lg-updated { margin-top: 30px; text-align: center; color: var(--muted); font-size: .875rem; }
.lg-linkbtn { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Rider (2026-11-07) ─────────────────────────────────────────────────────
   The #riders demo: two offers and a job on its way, drawn like the app's
   cards in the site's own palette (navy for done, yellow for now). */
.roffer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; }
.roffer + .roffer { border-top: 1px solid var(--line); }
.roffer__n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; line-height: 1.3; }
.roffer__ok { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand); font: 700 .6875rem/1 var(--f-body); }
.roffer__s { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.45; }
.roffer__star { color: var(--yellow-ink); font-weight: 700; }
.roffer__p { display: grid; justify-items: end; gap: 2px; }
.roffer__p b { font: 800 1.0625rem/1.2 var(--f-display); }
.roffer__p span { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.jsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jsteps li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 7px 0 7px 32px; color: var(--muted); }
.jsteps li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--card); box-sizing: border-box; }
.jsteps li.is-done { color: var(--ink-2); }
.jsteps li.is-done::before { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.jsteps li.is-now { color: var(--ink); font-weight: 700; }
.jsteps li.is-now::before { border: 5px solid var(--yellow); box-shadow: 0 0 0 2px var(--brand); }
.jsteps time { font: 500 .75rem/1.6 var(--f-mono); color: var(--muted); font-weight: 500; }
.due { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); font-size: .875rem; color: var(--muted); }
.due b { color: var(--ink); text-align: right; }
.due .due__t { color: var(--ink); font-weight: 800; }

/* The Rider videos: the same cards as "Learn Giggora in a minute", in two
   groups (asking a rider; riding), each with its own small heading. */
.howto__group { margin: 44px 0 0; font: 600 .75rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.howto__group + .howto { margin-top: 18px; }

/* ── Games (the "Play" section) ──────────────────────────────────────────────
   Five small games on a copy of the landing page's make-believe barangay
   (games.body.html + games.js). The map, the pins and "You" reuse the landing
   map's classes (.world, .pin, .you-wrap); this file adds the game's frame:
   tabs, the canvas, the HUD, the side panel, start/end screens. */

.game { margin-top: 36px; }
/* Five tabs: 2 + 2 + 1 (the last one spans) on a phone; 3 + 2 on a tablet
   (a 6-column grid: thirds, then halves); all 5 in one row on a computer. */
.game__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 759px) { .game__tab:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 760px) { .game__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } .game__tab { grid-column: span 2; } .game__tab:nth-child(n+4) { grid-column: span 3; } }
@media (min-width: 1100px) { .game__tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } .game__tab, .game__tab:nth-child(n+4) { grid-column: auto; } }
.game__tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--card);
  font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.game__tab:hover { border-color: var(--line-2); }
.game__tab[aria-selected="true"] { border-color: var(--btn-border); background: #fff4d4; box-shadow: 0 0 0 1px var(--btn-border); }
.game__tab-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background-color: var(--paper-2); display: grid; place-items: center; color: var(--brand); }
.game__tab-icon.art { background-size: 30px 30px; }
.game__tab-icon svg { width: 24px; height: 24px; }
.game__tab-text { min-width: 0; display: grid; gap: 1px; }
.game__tab-text b { font: 750 .9375rem/1.2 var(--f-body); text-wrap: balance; }
.game__tab-text small { font-size: .78rem; line-height: 1.25; color: var(--muted); }

.game__main { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .game__main { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; } }

/* The map window. Like .livemap__canvas: --vbx..--vbh pick the part of the
   1400×900 world on screen (smaller on a phone, so pins stay big enough to tap). */
.game__canvas { --vbx: 150; --vby: 95; --vbw: 1000; --vbh: 700; --pin-s: 1; position: relative; aspect-ratio: var(--vbw) / var(--vbh); border-radius: 22px; overflow: hidden;
  background: var(--land); border: 1px solid var(--line); box-shadow: var(--shadow-2); isolation: isolate; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 999px) { .game__canvas { --vbx: 200; --vby: 70; --vbw: 900; --vbh: 760; } }
@media (max-width: 599px) { .game__canvas { --vbx: 360; --vby: 50; --vbw: 640; --vbh: 820; --pin-s: .84; border-radius: 18px; } }
.game__canvas .world { cursor: default; }
.game__canvas.is-guessing .world { cursor: crosshair; }
/* Layers: the map, then (Zombie Apocalypse) the night at z 1, the fx at z 2,
   the pins at z 3, so the night darkens the map but not the pins or rings. */
.world__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; overflow: visible; }
.game__pins { position: absolute; inset: 0; z-index: 3; }

/* Pins in a game: the landing pin, plus tags, badges and states. */
.gpin { animation: gpin-in .35s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes gpin-in { from { transform: translateY(-14px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.gpin.is-gone { animation: gpin-out .35s ease both; pointer-events: none; }
@keyframes gpin-out { to { transform: translateY(-8px) scale(.6); opacity: 0; } }
.gpin.is-shake { animation: gpin-shake .4s ease; }
@keyframes gpin-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }
.gpin.is-dim { opacity: .35; }
.gpin.is-pulse .pin__head { animation: gpin-pulse 1s ease-in-out 3; }
@keyframes gpin-pulse { 50% { box-shadow: 0 0 0 1px rgba(15,23,42,.1), 0 0 0 10px rgba(253,182,22,.55); } }
.gtag { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; z-index: 2; padding: 3px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 2px 6px rgba(15,23,42,.16); font: 750 11px/1.2 var(--f-body); color: var(--ink); white-space: nowrap; pointer-events: none; }
.gtag.is-best { background: var(--ring-offer); border-color: transparent; color: #fff; }
.gtag.is-warn { background: #fff4d4; border-color: #f5d98a; }
.gbadge { position: absolute; top: -6px; right: -6px; z-index: 3; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--brand); color: #fff; font: 800 11px/1 var(--f-body); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.gbadge--qty { background: var(--btn); color: var(--on-btn); box-shadow: 0 0 0 2px var(--btn-border); right: auto; left: -8px; }
.gring { position: absolute; left: 50%; top: 20px; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(var(--ring-request) calc(var(--p, 1) * 360deg), rgba(15,23,42,.12) 0); -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px); mask: radial-gradient(circle, transparent 20px, #000 21px); }
.gpin.is-late .gring { background: conic-gradient(var(--bcast) calc(var(--p, 1) * 360deg), rgba(15,23,42,.12) 0); }
.gpin.is-live::after { content: ""; position: absolute; left: 50%; top: 20px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid var(--ring-offer); z-index: -1; pointer-events: none; animation: glive 1.2s ease-out infinite; }
@keyframes glive { from { transform: scale(.8); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.gpin.is-paused { filter: grayscale(1); opacity: .45; transition: opacity .35s ease, filter .35s ease; pointer-events: none; }
.gfloat { position: absolute; z-index: 6000; translate: -50% -100%; padding: 3px 8px; border-radius: 999px; font: 800 12px/1.2 var(--f-body); color: #fff; background: var(--ring-offer); white-space: nowrap; pointer-events: none;
  animation: gfloat 1s ease-out forwards; }
.gfloat--bad { background: var(--bcast); }
@keyframes gfloat { from { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-30px); } }
.gst { position: absolute; z-index: 1; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.12); font: 700 10px/1.4 var(--f-body); letter-spacing: .02em;
  color: var(--ink-2); white-space: nowrap; translate: -50% -50%; pointer-events: none; }
.gfly { position: fixed; z-index: 9999; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background-color: #fff; background-size: 24px 24px; box-shadow: 0 4px 14px rgba(15,23,42,.25);
  pointer-events: none; transition: transform .5s cubic-bezier(.5,0,.3,1), opacity .5s ease; }
.gcart .pin__head { box-shadow: 0 0 0 1px rgba(15,23,42,.1), 0 0 0 6px rgba(253,182,22,.45); }

/* HUD: the goal on the left, time and score on the right. */
.game__hud { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 30; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.game__hud[hidden] { display: none; }
.ghud-goal { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 14px; background: var(--card); border: 2px solid var(--btn-border); box-shadow: var(--shadow-1); }
.ghud-goal .art { width: 34px; height: 34px; flex: none; border-radius: 10px; background-color: #fff4d4; background-size: 26px 26px; }
.ghud-goal b { display: block; font: 800 1.0625rem/1.15 var(--f-body); color: var(--ink); }
.ghud-goal small { display: block; font-size: .75rem; line-height: 1.2; color: var(--muted); }
.ghud-goal.is-pop { animation: ghud-pop .35s ease; }
@keyframes ghud-pop { 40% { transform: scale(1.04); } }
.ghud-stats { flex: none; display: flex; gap: 6px; }
.ghud-stat { min-width: 54px; padding: 6px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); text-align: center; }
.ghud-stat b { display: block; font: 800 1rem/1.1 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.ghud-stat small { display: block; font: 600 .625rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ghud-stat.is-low b { color: var(--bcast); }
@media (max-width: 599px) {
  .game__hud { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .ghud-goal { padding: 5px 9px 5px 5px; gap: 8px; }
  .ghud-goal .art { width: 28px; height: 28px; background-size: 21px 21px; }
  .ghud-goal div { min-width: 0; }
  .ghud-goal b, .ghud-goal small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ghud-goal b { font-size: .9375rem; }
  .ghud-goal small { font-size: .6875rem; }
  .ghud-verb { display: none; }                 /* "Hanapin si Princess" cut the NAME off; the name is what matters */
  .ghud-stat { min-width: 46px; padding: 5px 7px; }
  .ghud-stat b { font-size: .875rem; }
}

.game__toast { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; z-index: 35; display: block; width: max-content; max-width: min(420px, calc(100% - 24px)); padding: 9px 14px;
  font-size: .8125rem; line-height: 1.35; color: var(--ink); text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.game__toast.show { opacity: 1; transform: none; }
.game__toast b { display: block; }
.game__toast--bcast { border-color: #f3b4b4; }
.game__banner { position: absolute; left: 50%; top: 46%; z-index: 36; translate: -50% -50%; padding: 10px 26px; border-radius: 18px; background: var(--btn); border: 4px solid var(--btn-border);
  font: 800 clamp(1.5rem, 1rem + 2.4vw, 2.4rem)/1 var(--f-display); color: var(--on-btn); letter-spacing: -.02em; white-space: nowrap; opacity: 0; transform: scale(.7); pointer-events: none; }
.game__banner.show { animation: gbanner 1.3s ease both; }
@keyframes gbanner { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.08); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* Start and end screens, over the map. */
.game__screen { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 14px; background: rgba(244,245,247,.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); overflow: auto; }
.game__screen[hidden] { display: none; }
.gs { width: min(440px, 100%); margin: auto; padding: 18px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); text-align: center; }
.gs__icon { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 16px; background-color: #fff4d4; background-size: 40px 40px; display: grid; place-items: center; color: var(--brand); }
.gs__icon svg { width: 32px; height: 32px; }
.gs__kicker { font: 600 .6875rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gs__title { margin: 6px 0 4px; font: 800 1.6rem/1.05 var(--f-display); letter-spacing: -.02em; }
.gs__sub { color: var(--ink-2); font-size: .9375rem; }
.gs__rules { margin: 14px 0 16px; padding: 0; list-style: none; display: grid; gap: 7px; text-align: left; font-size: .875rem; line-height: 1.4; color: var(--ink-2); }
.gs__rules li { display: flex; gap: 9px; }
.gs__rules li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--btn); box-shadow: 0 0 0 2px var(--btn-border); }
.gs__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gs__best { margin-top: 12px; font-size: .8125rem; color: var(--muted); }
.gs__score { margin: 2px 0 0; font: 800 2.6rem/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.gs__lines { margin: 10px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--paper-2); display: grid; gap: 5px; text-align: left; font-size: .8438rem; }
.gs__lines div { display: flex; justify-content: space-between; gap: 12px; }
.gs__lines span { color: var(--muted); }
.gs__lines b { font-variant-numeric: tabular-nums; }
.gs__new { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ring-offer); color: #fff; font: 800 .75rem/1.2 var(--f-body); }
.gs__cta { display: block; margin-top: 14px; font-size: .875rem; font-weight: 700; }

/* The side panel: what each game needs besides the map. */
.game__side { display: grid; gap: 12px; align-content: start; }
.gcard { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.gcard h3 { font-size: 1rem; margin-bottom: 8px; }
.gcard p { font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.gcard p + p { margin-top: 6px; }
.gstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gstats div { padding: 9px 6px; border-radius: 12px; background: var(--paper-2); text-align: center; }
.gstats b { display: block; font: 800 1.15rem/1.1 var(--f-body); font-variant-numeric: tabular-nums; }
.gstats span { font: 600 .625rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glog { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.glog li { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); }
.glog .art { width: 22px; height: 22px; flex: none; }
.glog b { color: var(--ink); }
.glog .ok { margin-left: auto; font-weight: 800; color: #15803d; }
.glog .meh { margin-left: auto; font-weight: 800; color: var(--yellow-ink); }
.gqueue { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: q; }
.gqueue li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: var(--paper-2); font-size: .8125rem; color: var(--ink-2); }
.gqueue li::before { counter-increment: q; content: counter(q); width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 800 11px/1 var(--f-body); }
.gqueue .art { width: 20px; height: 20px; flex: none; }
.gqueue .empty { background: none; padding: 0; }
.gqueue .empty::before { display: none; }
.gbar { height: 10px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.gbar i { display: block; height: 100%; background: var(--btn); border-radius: inherit; transition: width .3s ease; }

/* Nawawalang Shih Tzu: the neighbours' chat. */
.gchat { display: grid; gap: 8px; max-height: 340px; overflow: auto; padding-right: 2px; }
.gchat .mc-row { opacity: 1; }
.gchat .mc-bubble { box-shadow: none; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer; }
.gchat .mc-row--owner .mc-bubble { background: #fff4d4; border-color: #f5d98a; cursor: default; }
.gchat .mc-row.is-new { animation: gchat-in .35s ease both; }
@keyframes gchat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.gchat mark { background: #fff4d4; color: inherit; border-radius: 4px; padding: 0 2px; font-weight: 700; }
.gbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gmeter { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; color: var(--ink-2); }
.gmeter b { font-variant-numeric: tabular-nums; }

/* Pin Bingo: the card. */
.gbingo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gcell { position: relative; aspect-ratio: 1.25; display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px 4px; border-radius: 12px; background: var(--paper-2); border: 2px solid transparent;
  font: 700 .6875rem/1.15 var(--f-body); color: var(--ink-2); text-align: center; }
.gcell .art { width: 30px; height: 30px; }
.gcell.is-free { background: #fff4d4; border-color: #f5d98a; }
.gcell.is-free .img-logo { width: 30px; height: 30px; }
.gcell.is-on { background: #e8f7ee; border-color: var(--ring-offer); color: #14532d; }
.gcell.is-on::after { content: ""; position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; border-radius: 50%; background: var(--ring-offer); }
.gcell.is-on::before { content: ""; position: absolute; top: 8px; right: 11px; z-index: 1; width: 4px; height: 8px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gcell.is-line { box-shadow: 0 0 0 2px var(--btn-border); }
.gcell.is-pop { animation: ghud-pop .4s ease; }

/* Zombie Apocalypse: the night, zombies, families on their way, broadcasts. */
.game__canvas.is-night .world::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0b1b3d; opacity: var(--night-o, .34); transition: opacity 1.4s linear; pointer-events: none; }
.gzombie { position: absolute; left: calc(var(--x) / 1400 * 100%); top: calc(var(--y) / 900 * 100%); width: 38px; height: 38px; margin: -35px 0 0 -19px; z-index: var(--z); pointer-events: none;
  scale: var(--pin-s); transform-origin: 50% 90%; animation: gz-rise .5s ease-out both; }
.gzombie svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 90%; animation: gz-shamble .9s ease-in-out infinite alternate; }
.gzombie.is-left svg { scale: -1 1; }
.gzombie.is-gone { animation: gz-sink .6s ease-in both; }
@keyframes gz-rise { from { opacity: 0; transform: translateY(10px) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes gz-shamble { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes gz-sink { to { opacity: 0; transform: translateY(8px) scale(.5); } }
.gfam { position: absolute; left: calc(var(--x) / 1400 * 100%); top: calc(var(--y) / 900 * 100%); width: 24px; height: 24px; margin: -12px 0 0 -12px; z-index: var(--z); display: grid; place-items: center; border-radius: 50%;
  background: var(--btn); border: 3px solid var(--btn-border); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(15,23,42,.35); font: 800 11px/1 var(--f-body); color: var(--on-btn);
  pointer-events: none; scale: var(--pin-s); transition: opacity .35s ease, transform .35s ease; }
.gfam.is-in { opacity: 0; transform: scale(.4); }
.gfam.is-gone { opacity: 0; transform: scale(1.6); }
.gzhouse .pin__glyph { color: var(--brand); width: 19px; height: 19px; }
.gzhouse .gbadge--qty { display: inline-flex; align-items: center; gap: 1px; }
.gzhouse .gbadge--qty svg { width: 9px; height: 9px; }
.gpin.is-danger { --ring: var(--bcast); }
.gpin.is-danger .pin__head { animation: gz-danger .8s ease-in-out infinite alternate; }
@keyframes gz-danger { to { box-shadow: 0 0 0 1px rgba(15,23,42,.1), 0 0 0 9px rgba(220,38,38,.38); } }
.gpin.is-caught { filter: grayscale(1); opacity: .5; }
.gbadge--safe { background: var(--ring-offer); }
.gz-bc { animation: gz-fade 1.2s ease both; }
.gz-ripple { transform-box: fill-box; transform-origin: center; animation: gz-ripple .8s ease-out both; }
@keyframes gz-ripple { from { transform: scale(.12); opacity: .9; } to { transform: scale(1); opacity: 0; } }
@keyframes gz-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.game__note { margin-top: 14px; font-size: .8125rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .gpin, .gpin.is-gone, .gpin.is-shake, .gfloat, .game__banner.show, .gchat .mc-row.is-new, .gzombie, .gzombie.is-gone { animation-duration: .01s; }
  .gpin.is-live::after, .gpin.is-pulse .pin__head, .gzombie svg, .gz-ripple, .gz-bc, .gpin.is-danger .pin__head { animation: none; }
  .gfly, .gfam, .game__canvas.is-night .world::after { transition: none; }
}