/* PLAZA — the social app's own layer. Loaded by index.html only, after styles/ui.css, so the INKWAVE tokens (--u, --k,
   --spring, --a…) and classes (.iw-panel, .iw-btn, .iw-ticket, .iw-name…) are all available.
   1. the plaza menu screens (src/ui/menus-plaza.js) — built from the INKWAVE menu kit, only layout + a few extras here
   2. the area bar (the HUD's boss bar reused: city name · people · stalls)
   3. the in-city overlay (src/social/ui.js): name tags, bubbles, chat, prompt, the top bar (badges · clock · weather
      dial) — HUD look (chunky Rubik, dark glass, white keycaps) */

/* ================================================================== 0. HOPPA's colours (index.html only: the arena never loads this file)
   The kit's tokens (ui.css --a / --b / --k / --self…) point at the brand's (ui.css .iw-ui --hp-*): ink grounds, paper
   surfaces, white as the neutral highlight with the logo's cyan + magenta cut lines as the only colour [ui-colors], mist (a neutral grey) as the secondary. The menus never write --a inline in HOPPA
   (menus.js setAccent / _applyAccent are off), so these win everywhere — the player's colour never tints a screen. */
.iw-ui, .iw-hud, .iw-hud-over, .pz {
  --k: var(--hp-ink); --k2: var(--hp-ink2); --k3: var(--hp-ink3); --muted: var(--hp-muted);
  --a: var(--hp-hi); --a-rgb: var(--hp-hi-rgb); --a-dark: var(--hp-hi-dark); --a-deep: var(--hp-hi-deep); --a-light: var(--hp-hi-light); --a-ink: var(--hp-ink);   /* [ui-colors] the highlight is neutral white now (the colour lives in the cut lines, ui.css --hp-cut*) */
  --a2: var(--hp-mag); --a2-rgb: var(--hp-mag-rgb); --a3: var(--hp-cyan); --a3-rgb: var(--hp-cyan-rgb);   /* [ui-colors] the logo's two line colours — for the cut lines only, never a fill */
  --b: var(--hp-mist); --b-rgb: var(--hp-mist-rgb); --b-dark: #6d717e; --b-deep: #454957; --b-light: #c4c7cf; --b-ink: #ffffff;
  --self: var(--hp-hi); --self-rgb: var(--hp-hi-rgb); --self-dark: var(--hp-hi-dark); --self-deep: var(--hp-hi-deep); --self-light: var(--hp-hi-light); --self-ink: var(--hp-ink);   /* [ui-colors] */
  --enemy: var(--hp-mist); --enemy-rgb: var(--hp-mist-rgb); --enemy-dark: #6d717e; --enemy-deep: #454957; --enemy-light: #c4c7cf; --enemy-ink: #ffffff;
}
/* the shared kit's purple-black glass, scrims and keycaps in HOPPA's ink and paper */
.iw-ui .iw-panel { background: linear-gradient(170deg, rgba(44, 48, 68, .9), rgba(24, 27, 40, .93)); }
.iw-ui .iw-prompts { background: rgba(22, 25, 38, .82); }
.iw-ui .iw-scrim-full { background: rgba(20, 22, 34, .55); }
.iw-ui .iw-dimbg, .iw-ui .iw-pause__dim { background: rgba(16, 18, 28, .6); }
.iw-ui .iw-scrim-left { background: linear-gradient(90deg, rgba(20, 22, 34, .74) 0%, rgba(20, 22, 34, .5) 36%, rgba(20, 22, 34, .08) 60%, rgba(20, 22, 34, 0) 70%), linear-gradient(0deg, rgba(20, 22, 34, .45), rgba(20, 22, 34, 0) 22%); }
.iw-ui .iw-key, .iw-hud .iw-key, .iw-hud-over .iw-key, .iw-ui .iw-pad--bumper, .iw-ui .iw-pad--trigger, .iw-ui .iw-pad--sys { background: linear-gradient(#fff, var(--hp-paper)); }
.iw-ui .iw-key { box-shadow: 0 0 0 2px var(--k), 0 .2em 0 2px var(--k), inset 0 -.18em 0 var(--hp-sand); }
.iw-ui .iw-rule__text { color: var(--hp-muted); }
.iw-ui .iw-cred__lead { color: var(--hp-paper); }
.iw-ui .iw-fdanger { fill: var(--hp-rose); }
.iw-ui .iw-btn--danger { --fill: var(--hp-rose); }
.iw-ui .iw-btn--small.is-armed { --bg: var(--hp-rose); --fill-ink: #7a2c2c; }
.iw-ui .iw-mode__new, .iw-ui .iw-news__stamp { background: var(--hp-hi); } /* [ui-colors] */
.iw-ui .iw-pause__live i, .iw-ui .iw-btn__live i { background: var(--hp-hi); } /* [ui-colors] */
.iw-ui .iw-pause__live { box-shadow: 0 0 0 2px var(--hp-paper), 0 0 0 4.5px var(--k), 3px 4px 0 4.5px var(--k); }
/* the city screen's YOU panel and the pause panel: the kit's --self (the arena's team ink) is the highlight here too */
.iw-ui .iw-btn--start:not(.is-focus) { --fill: var(--hp-hi); } /* [ui-colors] */
/* MESSAGES: my bubbles are paper, theirs ink glass (not a slab of yellow each) */
.iw-ui .pz-msg__bubble { background: var(--hp-ink3); color: #fff; box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .25); }
.iw-ui .pz-msg.is-me .pz-msg__bubble { background: var(--hp-paper); color: var(--hp-ink); }
.iw-ui .pz-voice--big, .iw-ui .pz-msg.is-me .pz-voice, .iw-ui .pz-voice.is-me { --vc: var(--hp-paper); --vi: var(--hp-ink); }

/* ================================================================== 1. menu screens */
/* colour swatches (city screen + the profile card) */
.pz-swatches { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); padding: calc(var(--u) * .2) 0 calc(var(--u) * .1); }
.pz-swatch { display: block; flex: none; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); border-radius: 50%; background: var(--c); cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 calc(var(--u) * -.3) 0 rgba(0, 0, 0, .22), 0 0 0 calc(var(--u) * .18) var(--k); transition: scale .35s var(--spring2), box-shadow .2s; }
.pz-swatch:hover { scale: 1.12; }
.pz-swatch.is-sel { scale: 1.16; box-shadow: inset 0 calc(var(--u) * -.3) 0 rgba(0, 0, 0, .22), 0 0 0 calc(var(--u) * .18) #fff, 0 0 0 calc(var(--u) * .36) var(--k); }
.pz-swatch.is-pop { animation: iw-pop .45s var(--spring2); }

/* plaza (main menu): the profile card + your stall card in the loadout card's place */
.pz-profile .iw-profile__stats div { justify-content: center; }
.pz-profile__color { display: flex; align-items: center; gap: .55em; margin-top: .45em; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .78); }
.pz-profile__color .pz-swatch { width: 1.55em; height: 1.55em; cursor: default; scale: 1; }
.pz-stallcard__icon { width: calc(var(--u) * 4.4); }
.pz-stallcard .iw-kitcard__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 18); }
.pz-stallcard .iw-chip i { display: inline-flex; font-size: .95em; }

/* city: the live city plays behind; two steps on one screen (data-step) — BROWSE: the postcard grid alone, full width,
   five a row on a wide screen (5 × 2 for ten cities), four on a 4:3 tablet, three upright / narrow, two on a phone's width
   ("narrow frames" below); more cities add rows and the grid scrolls, scroll arrows at the edges · PICKED: the pick grows into a hero on the left half,
   TIME OF DAY + YOU + ENTER on the right (the "PICK A CITY · two steps" block below) */
.pz-city__left { position: absolute; left: calc(var(--u) * 3.6 + var(--sal)); right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 9.6 + var(--sat)); bottom: calc(var(--u) * 5.8 + var(--sab)); display: flex; flex-direction: column; gap: calc(var(--u) * .2); }
.pz-city__label { padding-left: calc(var(--u) * 1); }
.pz-city__label .iw-seclabel__count { margin-left: .6em; margin-right: calc(var(--u) * 1); }
/* the grid scrolls (wheel · trackpad · touch · the keys keep the focused card in view); soft edges only where there is more */
.pz-city__grid { --ft: calc(var(--u) * 2.2); --fb: calc(var(--u) * 2.4); --cols: 5; --gap: calc(var(--u) * 1.7); position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); align-content: start; padding: calc(var(--u) * 1.3) calc(var(--u) * 1) calc(var(--u) * 2.6);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%); }
.pz-city__grid::-webkit-scrollbar { display: none; }
.pz-city__grid.is-top { --ft: 0px; }
.pz-city__grid.is-bottom { --fb: 0px; }
/* a postcard: the art on top (number · sun/moon · the city pill), the district, the blurb, the live clock + weather */
/* (the card's height is its art's — always 2.45 : 1 of its width, so any column count keeps the stills' framing — plus the words) */
.pz-card { position: relative; display: flex; flex-direction: column; height: auto; padding: 0; border: 0; border-radius: calc(var(--u) * 1.3);
  background: var(--k2); color: #fff; font: inherit; text-align: left; cursor: pointer; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--tilt, 0deg));
  box-shadow: 0 0 0 calc(var(--u) * .2) rgba(255, 255, 255, .22), 0 0 0 calc(var(--u) * .38) var(--k), 0 calc(var(--u) * .55) 0 calc(var(--u) * .38) rgba(0, 0, 0, .45);
  transition: transform .42s var(--spring), box-shadow .25s; }
.pz-card.is-hover { transition: transform .2s var(--out), box-shadow .25s; }
.pz-card.is-focus { z-index: 2; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.035);
  box-shadow: 0 0 0 calc(var(--u) * .22) #fff, 0 0 0 calc(var(--u) * .44) var(--k), 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .4); }
.pz-card.is-sel { box-shadow: 0 0 0 calc(var(--u) * .22) var(--a), 0 0 0 calc(var(--u) * .4) var(--k), 0 calc(var(--u) * .55) 0 calc(var(--u) * .4) var(--a-deep); }
.pz-card.is-focus.is-sel { box-shadow: 0 0 0 calc(var(--u) * .22) var(--a), 0 0 0 calc(var(--u) * .44) #fff, 0 0 0 calc(var(--u) * .66) var(--k), 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .4); }
.pz-card.is-down { scale: .97; }
.pz-card.is-pick { animation: iw-ticket-pick .5s var(--spring); }
.pz-card__art { position: relative; flex: none; height: auto; aspect-ratio: 2.45 / 1; overflow: hidden; border-radius: calc(var(--u) * 1.3) calc(var(--u) * 1.3) 0 0; background: var(--hp-ink2); }
.pz-card:not(.is-sel) .pz-card__art { filter: saturate(.6) brightness(.78); transition: filter .35s; }
.pz-card:not(.is-sel).is-focus .pz-card__art, .pz-card:not(.is-sel).is-hover .pz-card__art { filter: none; }
.pz-card__fallback { position: absolute; inset: 0; display: block; }
.pz-card__fallback svg { width: 100%; height: 100%; }
.pz-card__img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: translate(calc(var(--px, 0) * -4%), calc(var(--py, 0) * -4%)); transition: transform .5s var(--out); }
.pz-card__img.is-dusk { clip-path: inset(0 0 0 100%); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), transform .5s var(--out); }
.pz-card.is-dusk .pz-card__img.is-dusk { clip-path: inset(0 0 0 0); }
.pz-card.is-noart .pz-card__img { display: none; }
.pz-card__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 33, 48, .92) 0%, rgba(30, 33, 48, .35) 30%, transparent 55%), linear-gradient(180deg, rgba(20, 22, 34, .35), transparent 35%); }
.pz-card__place { position: absolute; left: calc(var(--u) * .9); bottom: calc(var(--u) * .75); max-width: calc(100% - var(--u) * 1.8); padding: .4em .8em; border-radius: 999px; background: rgba(22, 25, 38, .78); color: #fff;
  font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); transition: background .25s, color .25s; }
.pz-card.is-sel .pz-card__place { background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 2px var(--k); }
.pz-card__ink { position: absolute; z-index: 1; left: calc(var(--u) * -1.6); top: calc(var(--u) * -1.5); width: calc(var(--u) * 7); aspect-ratio: 1; transform: scale(0) rotate(-50deg); transition: transform .5s var(--spring2); pointer-events: none; }
.pz-card__ink svg { width: 100%; height: 100%; }
.pz-card.is-sel .pz-card__ink { transform: scale(1) rotate(0deg); }
.pz-card__num { position: absolute; z-index: 2; left: calc(var(--u) * .85); top: calc(var(--u) * .8); display: grid; place-items: center; width: calc(var(--u) * 2.7); height: calc(var(--u) * 2.7); border-radius: 50%;
  background: var(--hp-paper); color: var(--k); font: 400 calc(var(--u) * 1.1) / 1 'Titan One', sans-serif; box-shadow: 0 0 0 calc(var(--u) * .18) var(--k), 0 calc(var(--u) * .2) 0 calc(var(--u) * .18) rgba(0, 0, 0, .35);
  transition: background .25s, color .25s, scale .4s var(--spring2); }
.pz-card.is-sel .pz-card__num { background: var(--a); color: var(--a-ink); scale: 1.1; }
.pz-card__time { position: absolute; z-index: 2; right: calc(var(--u) * .8); top: calc(var(--u) * .8); display: grid; place-items: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%;
  background: rgba(22, 25, 38, .72); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); overflow: hidden; transition: background .3s; }
.pz-card__time i { position: absolute; width: 62%; height: 62%; transition: transform .5s var(--spring2), opacity .25s; }
.pz-card__time svg { width: 100%; height: 100%; }
.pz-card__sun { color: var(--hp-hi); } /* [ui-colors] */
.pz-card__moon { color: var(--hp-paper); opacity: 0; transform: translateY(120%) rotate(60deg); }
.pz-card.is-dusk .pz-card__time { background: rgba(30, 33, 48, .85); }
.pz-card.is-dusk .pz-card__sun { opacity: 0; transform: translateY(120%) rotate(-60deg); }
.pz-card.is-dusk .pz-card__moon { opacity: 1; transform: none; }
.pz-card.is-timeflip .pz-card__time { animation: iw-ticket-tflip .55s var(--spring2); }
.pz-card__body { display: flex; flex: 1; flex-direction: column; gap: calc(var(--u) * .35); padding: calc(var(--u) * .75) calc(var(--u) * 1.1) calc(var(--u) * .95); min-width: 0; }
.pz-card__name { font: 400 calc(var(--u) * 1.65) / 1.05 'Titan One', sans-serif; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-text-stroke: .14em var(--k); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--k); }
.pz-card__blurb { font: 600 var(--fs-xs) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-card__wx { display: flex; align-items: center; gap: calc(var(--u) * .45); margin-top: auto; padding-top: calc(var(--u) * .2); font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.pz-card__wxico { flex: none; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: var(--hp-hi); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); } /* [ui-colors] */
.pz-card__wxico svg { width: 100%; height: 100%; }
.pz-card__wxtxt { overflow: hidden; text-overflow: ellipsis; }
.pz-card__check { position: absolute; z-index: 2; right: calc(var(--u) * -.6); bottom: calc(var(--u) * -.6); display: grid; place-items: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%;
  background: var(--a); color: var(--a-ink); box-shadow: 0 0 0 calc(var(--u) * .2) var(--k), 0 calc(var(--u) * .2) 0 calc(var(--u) * .2) rgba(0, 0, 0, .3); transform: scale(0) rotate(-40deg); transition: transform .4s var(--spring2); }
.pz-card__check svg { width: 62%; height: 62%; }
.pz-card.is-sel .pz-card__check { transform: scale(1) rotate(0deg); }
.pz-city__time { padding: calc(var(--u) * .5); }
.pz-city__right { position: absolute; right: calc(var(--u) * 3.4 + var(--sar)); top: calc(var(--u) * 9.6 + var(--sat)); width: min(calc(50% - var(--u) * 5.6 - var(--sar)), calc(var(--u) * 42)); display: none; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.3); }
.pz-city__you { display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.2) calc(var(--u) * 1); }
.pz-city__you .iw-seclabel i { color: var(--a); }
.pz-city__right .iw-btn--start { width: 100%; height: calc(var(--u) * 6.4); }
.pz-city__right .iw-btn--start .iw-btn__sub { max-width: none; }
/* ---- PICK A CITY · two steps: BROWSE shows the grid (+ its scroll arrows) alone; PICKED hides it and shows the hero + the right column */
.pz-city[data-step="picked"] .pz-city__left, .pz-city[data-step="picked"] .pz-city__prompts--browse, .pz-city__prompts--picked { display: none; }
.pz-city[data-step="picked"] .pz-city__right, .pz-city[data-step="picked"] .pz-city__prompts--picked { display: flex; }
/* the scroll frame: the arrows sit on the soft edges and show only where there is more; a click moves one row */
.pz-city__scroll { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pz-city__scroll .pz-city__grid { flex: 1; }
.pz-city__arrow { position: absolute; left: 50%; z-index: 3; display: grid; place-items: center; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); padding: 0; border: 0; border-radius: 50%;
  background: var(--a); color: var(--a-ink); cursor: pointer; pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent; translate: -50% 0; scale: .5; opacity: 0;
  box-shadow: 0 0 0 calc(var(--u) * .2) var(--k), 0 calc(var(--u) * .25) 0 calc(var(--u) * .2) rgba(0, 0, 0, .35); transition: opacity .25s, scale .3s var(--spring2); }
.pz-city__arrow i { display: block; width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-right: calc(var(--u) * .36) solid currentColor; border-bottom: calc(var(--u) * .36) solid currentColor; border-radius: 0 0 2px 0; rotate: 45deg; translate: 0 -22%; }
.pz-city__arrow--up i { rotate: -135deg; translate: 0 22%; }
.pz-city__arrow--down { bottom: calc(var(--u) * .2); animation: pz-arrow-bob 1.3s ease-in-out infinite; }
.pz-city__arrow--up { top: calc(var(--u) * .2); animation: pz-arrow-bob-up 1.3s ease-in-out infinite; }
.pz-city__scroll:not(.is-bottom) .pz-city__arrow--down, .pz-city__scroll:not(.is-top) .pz-city__arrow--up { scale: 1; opacity: 1; }
.pz-city__arrow:hover { scale: 1.12; animation-play-state: paused; }
.pz-city__arrow:active { scale: .95; }
@keyframes pz-arrow-bob { 50% { translate: -50% calc(var(--u) * -.45); } }
@keyframes pz-arrow-bob-up { 50% { translate: -50% calc(var(--u) * .45); } }
/* back from the hero the grid returns with a quick stagger (not the first show's slow one) */
.pz-city__grid.is-again .pz-card { animation-duration: .45s; animation-delay: calc(var(--i, 0) * 22ms); }
/* the hero: the picked postcard, big, on the left half — the art keeps its 16:9 (it only shrinks when the frame is short) */
.pz-city__hero { position: absolute; left: calc(var(--u) * 3.6 + var(--sal)); top: calc(var(--u) * 9.6 + var(--sat)); width: calc(50% - var(--u) * 5.4 - var(--sal)); max-height: calc(100% - var(--u) * 15.4 - var(--sat) - var(--sab)); display: none; }
.pz-city[data-step="picked"] .pz-city__hero { display: flex; }
.pz-card--hero { --tilt: 0deg; z-index: 2; height: auto; min-height: 0; border-radius: calc(var(--u) * 1.6); transform: none; transform-origin: 0 0; cursor: default; }
.pz-card--hero .pz-card__art { flex: 1 1 auto; height: auto; min-height: calc(var(--u) * 12); aspect-ratio: 16 / 9; border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0 0; filter: none; }
.pz-card--hero .pz-card__shade { background: linear-gradient(0deg, rgba(30, 33, 48, .9) 0%, rgba(30, 33, 48, .3) 22%, transparent 42%), linear-gradient(180deg, rgba(20, 22, 34, .3), transparent 30%); }
.pz-card--hero .pz-card__place { left: calc(var(--u) * 1.3); bottom: calc(var(--u) * 1.1); padding: .5em 1em; font-size: var(--fs-s); }
.pz-card--hero .pz-card__ink { left: calc(var(--u) * -2.2); top: calc(var(--u) * -2); width: calc(var(--u) * 9.5); }
.pz-card--hero .pz-card__num { left: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); font-size: calc(var(--u) * 1.55); }
.pz-card--hero .pz-card__time { right: calc(var(--u) * 1.2); top: calc(var(--u) * 1.2); width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); }
.pz-card--hero .pz-card__body { flex: none; gap: calc(var(--u) * .55); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6) calc(var(--u) * 1.4); }
.pz-card--hero .pz-card__name { font-size: calc(var(--u) * 3.1); line-height: 1; white-space: normal; overflow: visible; text-overflow: clip; -webkit-text-stroke: .12em var(--k); }
.pz-card--hero .pz-card__blurb { font: 600 var(--fs-m) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .86); white-space: normal; overflow: visible; }
.pz-hero__foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * .5); }
.pz-card--hero .pz-card__wx { flex: 1; min-width: 0; margin-top: 0; padding-top: 0; font-size: var(--fs-s); }
.pz-card--hero .pz-card__wxico { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.pz-hero__change { flex: none; }
.pz-card--hero .pz-card__check { right: calc(var(--u) * -.8); bottom: calc(var(--u) * -.8); width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); }
/* the grid's district names follow the card's width (8.6 % of it) as well as --u: five a row stay in proportion; a name
   still too long (another language) is shrunk to fit by menus-plaza.js fitNames */
.pz-city__grid .pz-card { container-type: inline-size; }
.pz-city__grid .pz-card__name { font-size: min(calc(var(--u) * 1.65), 8.6cqi); }
/* narrow frames: four a row on a 4:3 / 16:10 frame (an iPad sideways), three upright or under 1000 px, two on a phone's width */
@media (orientation: landscape) and (max-aspect-ratio: 8/5) { .pz-city__grid { --cols: 4; } }
@media (orientation: portrait), (max-width: 1000px) { .pz-city__grid { --cols: 3; } }
@media (max-width: 600px) { .pz-city__grid { --cols: 2; } }

/* how to plaza: glyph cards in the rule-card frame */
.pz-rule__art { position: relative; display: grid; place-items: center; background: linear-gradient(160deg, var(--hp-paper), var(--hp-sand)); }
.pz-rule__sticker { position: absolute; width: calc(var(--u) * 10); opacity: .9; rotate: -12deg; }
.pz-rule__sticker svg { width: 100%; height: 100%; }
.pz-rule__ico { position: relative; width: calc(var(--u) * 5); height: calc(var(--u) * 5); color: #fff; filter: drop-shadow(0 0 2px var(--k)) drop-shadow(0 calc(var(--u) * .25) 0 var(--k)); }
.pz-rule__ico svg { width: 100%; height: 100%; }
.pz-how .iw-rule__art { height: calc(var(--u) * 7.6); }
.pz-how .iw-ctl__row { min-height: calc(var(--u) * 2.55); }

/* the in-city pause: the live city panel */
.pz-pcity { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); width: calc(var(--u) * 44); }
.pz-pcity .iw-pctl .iw-ctl { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.6); }
.pz-pcity .iw-pctl .iw-ctl__row { min-height: calc(var(--u) * 2.35); }
.pz-pcity .iw-pctl .iw-ctl__act, .pz-pcity .iw-pctl .iw-ctl__keys { font-size: var(--fs-s); }
.pz-pcity .iw-pctl .iw-ctl__act em { display: none; }
.pz-pcity .iw-pstat b { font: 400 calc(var(--u) * 1.3) / 1 'Titan One', sans-serif; }
.pz-pcity .iw-pstat small { font: 900 calc(var(--u) * .55) / 1 'Rubik', sans-serif; letter-spacing: .12em; opacity: .75; }
.pz-pause .iw-pause__live { white-space: nowrap; }

/* panel screens (stall editor / stall browser / friends): a form panel + a button column on the right */
.pz-panelscr .iw-pause__dim { background: linear-gradient(90deg, rgba(16, 18, 28, .82), rgba(16, 18, 28, .55)); }
.pz-stallform { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.6); width: calc(var(--u) * 58); max-height: calc(100% - var(--u) * 17.5); overflow: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: calc(var(--u) * .9); padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5) calc(var(--u) * 1.5); }
.pz-stallform::-webkit-scrollbar { display: none; }
.pz-panelscr__btns { position: absolute; right: calc(var(--u) * 3.8); top: calc(var(--u) * 10.6); width: calc(var(--u) * 27); display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); }
.pz-field { background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); }
.pz-field--title .iw-name__label { color: var(--a); opacity: 1; }
.pz-itemgrid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .7) calc(var(--u) * 1.1); }
.pz-itemrow { display: flex; gap: calc(var(--u) * .45); min-width: 0; }
.pz-field--item { flex: 1 1 auto; min-width: 0; }
.pz-field--item .iw-name__label { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--k); font: 400 calc(var(--u) * .95) / 1 'Titan One', sans-serif; letter-spacing: 0; opacity: 1; }
.pz-field--price { flex: 0 0 calc(var(--u) * 8.4); padding-left: calc(var(--u) * .5); }
.pz-field--price .iw-name__pen { display: none; }
.pz-field--price .iw-name__input { padding-right: calc(var(--u) * .7); }
.pz-field .iw-name__input::placeholder { color: rgba(255, 255, 255, .35); }
.pz-field.is-editing .iw-name__input::placeholder { color: rgba(30, 33, 48, .35); }
/* a row of goods / a friend */
.pz-goods { display: flex; align-items: center; gap: calc(var(--u) * .9); min-height: calc(var(--u) * 4); padding: calc(var(--u) * .5) calc(var(--u) * .6) calc(var(--u) * .5) calc(var(--u) * .7); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .06); }
.pz-goods__num { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: var(--a); color: var(--a-ink); font: 400 calc(var(--u) * 1) / 1 'Titan One', sans-serif; box-shadow: 0 0 0 calc(var(--u) * .15) var(--k); }
.pz-goods__name { flex: 1; min-width: 0; font: 400 calc(var(--u) * 1.45) / 1.1 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-goods__price { flex: none; padding: .35em .7em; border-radius: 999px; background: rgba(0, 0, 0, .35); font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .06em; }
.pz-goods .iw-btn--small { flex: none; }
.pz-friend__dot { flex: none; width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 calc(var(--u) * .15) var(--k); }
.pz-friend:not(.is-here) .pz-goods__name, .pz-friend:not(.is-here) .pz-friend__dot { opacity: .6; }
.pz-friend.is-here .pz-goods__price { background: rgba(var(--hp-hi-rgb), .16); color: var(--hp-hi-light); } /* [ui-colors] */
.pz-empty { display: flex; align-items: center; gap: calc(var(--u) * 1); margin: calc(var(--u) * .5) 0; font: 600 var(--fs-m) / 1.45 'Rubik', sans-serif; color: var(--muted); }
.pz-empty > i { flex: none; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); color: var(--a); }
.pz-empty > i svg { width: 100%; height: 100%; }
.pz-kc { display: inline-flex; vertical-align: middle; font-size: .9em; }

/* ================================================================== 2. the area bar (hud-boss.js area()) */
.iw-bb.is-area { top: calc(var(--u) * 1.4); width: calc(var(--u) * 54); transition: opacity .25s, translate .35s var(--spring); }
.iw-bb.is-area .iw-bb__phase, .iw-bb.is-area .iw-bb__notch, .iw-bb.is-area .iw-bb__pct small, .iw-bb.is-area .iw-bb__stars, .iw-bb.is-area .iw-bb__x { display: none; }
.iw-bb.is-area .iw-bb__embart { color: #fff; display: grid; place-items: center; }
.iw-bb.is-area .iw-bb__embart svg { width: 58%; height: 58%; scale: 1; translate: 0; filter: drop-shadow(0 calc(var(--u) * .2) 0 var(--k)); }
.iw-bb.is-area .iw-bb__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.iw-bb__areasub { flex: none; font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.iw-bb.is-area .iw-bb__head .iw-bb__grow { order: 1; } .iw-bb.is-area .iw-bb__areasub { order: 2; }
.iw-bb.is-area .iw-bb__pct { padding-top: 0; align-items: center; }
.iw-bb.is-area.is-tucked { opacity: 0; translate: -50% calc(var(--u) * -3); }
.iw-bb__areasub { display: none; } .iw-bb.is-area .iw-bb__areasub { display: block; }

/* ================================================================== 3. the in-city overlay */
.pz { --u: min(1vw, 1.7778dvh); --glass: var(--hp-glass); --line: rgba(255, 255, 255, .1); --ac: var(--hp-hi); /* [ui-colors] */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  font-family: 'Rubik', system-ui, sans-serif; color: #fff; position: fixed; inset: 0; pointer-events: none; z-index: 15; -webkit-font-smoothing: antialiased; }
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz kbd { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .4em; font: 800 .72em/1 'Rubik', sans-serif; border-radius: .42em; background: var(--hp-paper); color: var(--k);
  box-shadow: 0 0 0 1.5px var(--k), 0 .16em 0 1.5px var(--k); margin: 0 .2em; vertical-align: .08em; letter-spacing: .02em; }

.pz-hud .pz-tags, .pz-hud .pz-callouts { position: absolute; inset: 0; overflow: hidden; }
.pz-tag { position: absolute; left: 0; top: 0; will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 5px; transform-origin: 50% 100%; --c: #ccc; }
/* the name: an ink pill with paper type; the person's colour is only the dot before it (never the whole pill) */
.pz-tag__name { font: 800 calc(var(--u) * 1.2) / 1 'Rubik', sans-serif; letter-spacing: .03em; color: var(--hp-paper); padding: .32em .75em .34em 1.45em; border-radius: 999px;
  background: radial-gradient(circle at .78em 50%, var(--c) 0 .3em, transparent .37em), var(--hp-glass); box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .22), 0 3px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.pz-tag.is-me .pz-tag__name { display: none; }
.pz-tag.is-friend .pz-tag__name::after { content: ' ★'; color: var(--hp-hi); } /* [ui-colors] */
.pz-tag.is-target .pz-tag__name { box-shadow: 0 0 0 2px var(--hp-paper), 0 0 0 4px var(--k), 0 3px 0 4px rgba(0, 0, 0, .35); }
/* the distance pill under the name: a small dark glass chip with a map pin and the person's colour as a thin left
   accent — "nearby" · "320 km" · "9,400 km · Tokyo" — fades in after the name, never past ~35 m, never on your own head */
.pz-tag__geo { display: none; align-items: center; gap: .3em; margin-top: -1px; padding: .22em .62em .26em .42em; border-radius: 999px; background: rgba(22, 25, 38, .72); color: rgba(255, 255, 255, .88);
  font: 700 calc(var(--u) * .92) / 1 'Rubik', sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .35); }
.pz-tag__geo.is-on { display: inline-flex; animation: pz-geo-in .4s .18s var(--spring) both; }
.pz-tag.is-me .pz-tag__geo { display: none; }
.pz-tag__pin { flex: none; width: 1.05em; height: 1.05em; color: var(--hp-sand); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.pz-tag__pin svg { width: 100%; height: 100%; display: block; }
.pz-tag__km { padding-top: .04em; }
.pz-tag__geo.is-near { color: var(--hp-hi-light); } /* [ui-colors] */
.pz-tag__geo.is-near .pz-tag__pin { color: var(--hp-hi); } /* [ui-colors] */
@keyframes pz-geo-in { from { opacity: 0; transform: translateY(-4px) scale(.85); } }
/* the chat bubble over a head: see "HEAD BUBBLES · redesign" at the end of this file */
@keyframes pz-pop { from { transform: scale(.6); opacity: 0; } }
.pz-call { position: absolute; left: 0; top: 0; font: 400 calc(var(--u) * 2.2) 'Titan One', 'Rubik', sans-serif; color: var(--hp-paper); -webkit-text-stroke: .17em var(--k); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--k); white-space: nowrap; animation: pz-pop .25s var(--spring); }

/* the fps counter (hud.js, only while Settings › SHOW FPS is on): the arena keeps it top-left; the city puts it in the
   bottom-right corner, bigger, cream Titan One with a navy outline and drop so it reads on any street (nothing else
   lives there: the prompt is bottom-centre, the chat log bottom-left) */
.iw-hud.is-social .iw-fps { left: auto; top: auto; right: calc(var(--u) * 2.2); bottom: calc(var(--u) * 1.6); padding: 0; border-radius: 0; background: none;
  font: 400 max(17px, calc(var(--u) * 1.1)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; color: var(--hp-paper); -webkit-text-stroke: .17em var(--hp-ink); paint-order: stroke fill;
  text-shadow: 0 .12em 0 var(--hp-ink), 0 .12em 0 var(--hp-ink), 0 .3em .5em rgba(0, 0, 0, .35); font-variant-numeric: tabular-nums; }
.iw-hud.is-social .iw-fps.is-bad { color: var(--hp-hi); } /* [ui-colors] */

/* ================================================================== CHAT · redesign
   The public chat, right of the minimap and clear of the kid: one column, the log on top, the SAY pill under it.
   The log is one shared ink-glass panel (no box per line): a line is a colour dot (the ONE place a player's colour shows),
   the name bold white (yours the yellow), the words light; a whisper wears a small tag; a notice is muted italic behind a
   tiny icon. Closed, a line fades after 14 s (ui.update → .is-old) and folds away; once all have, the panel goes too
   (.is-quiet). ENTER opens the pill: bubble icon · input · counter (only near the 90 cap) · send arrow (yellow with text),
   its keys a pill in the notice stack (NOTICE STACK below). Yellow is the only highlight. */
.pz-chat { --cw: calc(var(--u) * 26); position: absolute; z-index: 1001;   /* (over the name tags: ui.js gives them 0–1000 by distance) */ left: calc(var(--u) * 17.5); bottom: calc(var(--u) * 5.2); width: var(--cw); display: flex; flex-direction: column; gap: calc(var(--u) * .7);
  font-family: 'Rubik', sans-serif; }
.pz-chat__log { display: flex; flex-direction: column; justify-content: flex-start; max-height: 18dvh; overflow: hidden; padding: calc(var(--u) * .7) calc(var(--u) * 1) calc(var(--u) * .75);
  border-radius: calc(var(--u) * 1.1); background: rgba(22, 25, 38, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .5s, padding .4s .3s, box-shadow .5s;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--u) * 2.2)); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--u) * 2.2)); }
.pz-chat:not(.is-open) .pz-chat__log { justify-content: flex-end; }   /* (closed + overflowing: the newest lines show) */
.pz-chat.is-quiet:not(.is-open) .pz-chat__log { background: transparent; box-shadow: none; padding-top: 0; padding-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pz-chat.is-open .pz-chat__log { pointer-events: auto; overflow-y: auto; max-height: calc(18dvh - var(--u) * 4.6); background: rgba(22, 25, 38, .74); -webkit-mask-image: none; mask-image: none;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.pz-chat__log::-webkit-scrollbar { width: 6px; } .pz-chat__log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 3px; }
/* a line: hanging indent, so a wrapped message lines up under the name, not under the dot */
.pz-line { position: relative; flex: none; padding: calc(var(--u) * .28) 0 calc(var(--u) * .28) calc(var(--u) * 1.25); max-height: 12em; overflow: hidden;
  font: 400 calc(var(--u) * 1.18) / 1.4 'Rubik', sans-serif; color: rgba(255, 255, 255, .86); word-break: break-word; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: opacity .25s; }
.pz-line__dot { position: absolute; left: calc(var(--u) * .1); top: calc(var(--u) * .28 + .7em - var(--u) * .3); width: calc(var(--u) * .6); height: calc(var(--u) * .6); border-radius: 50%; background: var(--c, #ccc);
  box-shadow: 0 0 0 1.5px rgba(22, 25, 38, .6); }
.pz-line__who { font-weight: 700; color: #fff; margin-right: .5em; }
.pz-line__who small { font-size: 1em; font-weight: 400; color: rgba(255, 255, 255, .6); }
.pz-line.is-me .pz-line__who { color: var(--hp-hi); } /* [ui-colors] */
.pz-line__tag { display: inline-block; vertical-align: .12em; margin-right: .5em; padding: .18em .5em .16em; border-radius: 999px; font: 600 .66em / 1 'Rubik', sans-serif; font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); text-shadow: none; }
.pz-line.is-pm .pz-line__txt { color: rgba(255, 255, 255, .78); }
.pz-line.is-sys { font-style: italic; color: rgba(255, 255, 255, .6); font-size: calc(var(--u) * 1.08); }
.pz-line__ico { position: absolute; left: 0; top: calc(var(--u) * .28 + .7em - var(--u) * .45); width: calc(var(--u) * .9); height: calc(var(--u) * .9); color: rgba(255, 255, 255, .5); }
.pz-line__ico svg { display: block; width: 100%; height: 100%; }
.pz-line.is-you .pz-line__ico { color: var(--hp-hi); } /* [ui-colors] */
.pz-line.is-old { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transition: opacity .6s, max-height .4s .6s, padding .4s .6s; }   /* (fades, then folds; comes back at once) */
/* the SAY pill (hidden until ENTER), under the log in the same column */
.pz-chat__form { display: none; }
.pz-chat.is-open .pz-chat__form { display: flex; flex-direction: column; gap: calc(var(--u) * .55); animation: pz-chat-pop .22s var(--spring); }
.pz-chat__box { display: flex; align-items: center; gap: calc(var(--u) * .7); height: calc(var(--u) * 3.9); padding: 0 calc(var(--u) * .45) 0 calc(var(--u) * 1.1); border-radius: 999px;
  background: rgba(22, 25, 38, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 calc(var(--u) * .35) calc(var(--u) * 1.2) rgba(0, 0, 0, .28); transition: box-shadow .2s; }
.pz-chat__box:focus-within { box-shadow: inset 0 0 0 1.5px rgba(var(--hp-hi-rgb), .85), 0 0 0 calc(var(--u) * .3) rgba(var(--hp-hi-rgb), .22), 0 calc(var(--u) * .35) calc(var(--u) * 1.2) rgba(0, 0, 0, .28); } /* [ui-colors] */
.pz-chat__ico { flex: none; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: rgba(255, 255, 255, .55); }
.pz-chat__ico svg { display: block; width: 100%; height: 100%; }
.pz-chat .pz-chat__input { pointer-events: auto; flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; caret-color: var(--hp-hi); /* [ui-colors] */
  font: 400 calc(var(--u) * 1.32) 'Rubik', sans-serif; color: #fff; }
.pz-chat .pz-chat__input::placeholder { color: rgba(255, 255, 255, .45); font-weight: 400; }
.pz-chat .pz-chat__count { display: none; flex: none; background: none; padding: 0; font: 500 calc(var(--u) * 1) 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); }
.pz-chat .pz-chat__count.is-near { display: block; }
.pz-chat .pz-chat__count.is-full { color: var(--hp-hi); background: none; } /* [ui-colors] */
.pz-chat__send { pointer-events: auto; flex: none; display: grid; place-items: center; width: calc(var(--u) * 3); height: calc(var(--u) * 3); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); transition: background .15s, color .15s, transform .15s; }
.pz-chat__send svg { width: 52%; height: 52%; }
.pz-chat__form.has-text .pz-chat__send { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.pz-chat__form.has-text .pz-chat__send:hover { transform: scale(1.06); }
/* ================================================================== (end CHAT · redesign) */
/* the plaza menu's ENTER CITY: the primary button, but sized like a button, not a billboard; the city list fits on one line */
.iw-main__menu .pz-btn--enter.iw-btn--xl { height: calc(var(--u) * 5.6); font-size: calc(var(--u) * 2.5); padding-left: calc(var(--u) * 1.6); letter-spacing: .01em; }
.pz-btn--enter .iw-btn__sub { font-size: calc(var(--u) * 1.02); font-weight: 700; letter-spacing: .03em; max-width: calc(var(--u) * 28); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.pz-btn--enter .iw-btn__icon { transform: scale(.82); }

@keyframes pz-chat-pop { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.pz-chat__say { font: 900 calc(var(--u) * 1.3) 'Titan One', sans-serif; color: var(--ac); letter-spacing: .04em; -webkit-text-stroke: 1px var(--k); }
.pz-chat__count { font: 800 calc(var(--u) * 1.05) 'Rubik', sans-serif; color: #8a847a; background: var(--hp-sand); border-radius: 999px; padding: calc(var(--u) * .3) calc(var(--u) * .7); white-space: nowrap; }
.pz-chat__count.is-full { color: var(--k); background: var(--ac); }

/* the ACT fan's pills (the eight social actions, keys 1–8) */
.pz-act { pointer-events: auto; cursor: pointer; font: 800 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; letter-spacing: .03em; color: #fff; background: var(--glass); padding: calc(var(--u) * .4) calc(var(--u) * .9) calc(var(--u) * .4) calc(var(--u) * .45);
  border-radius: 999px; box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 rgba(0, 0, 0, .3); display: flex; align-items: center; gap: .35em; transition: background .12s, transform .3s var(--spring); }
.pz-act:hover { background: var(--ac); color: var(--k); transform: translateY(-3px); }
.pz-act:hover kbd { background: var(--k); color: var(--hp-paper); box-shadow: 0 0 0 1.5px var(--hp-paper); }
.pz-act.is-active { background: var(--hp-paper); color: var(--k); }
.pz-act.is-active kbd { background: var(--k); color: var(--hp-paper); box-shadow: 0 0 0 1.5px var(--hp-paper); }

/* THE TOP BAR (ui.js DOCK / dockAct): MENU alone top-left, round badges either side of the city's clock, the weather
   dial top-right — the arena top bar's shape (badges · an oval clock · a dial) in HOPPA's own colours: a sand rim
   (--pc, fixed — never the player's colour) round a paper disc with an ink glyph, a chunky ink outline and a hard drop
   like the chat box; hover turns the disc ink, the open screen's badge wears the yellow rim; the key's chip on each
   badge's shoulder, the name under it, the full name in a tooltip below. Every badge is a one way to each screen (no
   quick keys in a city: only CHAT, ACT and VISIT wear a chip). Clickable whenever the cursor
   is free — ESC frees it while playing (a transient hint over the bottom middle says so the first few times: ui.hint), a
   click on the city takes it back. Sizes ride --u, so a 5K / 2× panel gets real
   badges, not pin-heads. */
.pz-hud { --pc: var(--hp-sand); --nv: var(--hp-ink); --ol: max(3px, calc(var(--u) * .19)); --bd: max(44px, calc(var(--u) * 4.4)); }   /* (--pc: the badges' rim, sand for everyone — never the player's colour; --bd: a badge's diameter, never under 44 px) */
.pz-top { position: absolute; left: 50%; top: calc(var(--u) * 1.1); transform: translateX(-50%); display: flex; align-items: flex-start; gap: calc(var(--u) * 1.2); }
.pz-top__grp { display: flex; align-items: flex-start; gap: calc(var(--u) * .5); }
/* MENU alone in the top-left corner (the weather dial's mirror): the same badge, its own spot, no chip */
.pz-corner--menu { position: absolute; left: calc(var(--u) * 2.2); top: calc(var(--u) * 1.1); display: flex; align-items: flex-start; }
/* a badge: the circle, then its name with clear air between them (the key chip rides the circle's shoulder, above) */
.pz-bd-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .7); width: calc(var(--bd) + var(--u) * .6); }
.pz-bd { pointer-events: auto; cursor: pointer; position: relative; flex: none; width: var(--bd); height: var(--bd); border: 0; padding: 0; border-radius: 50%; background: var(--pc); color: var(--nv); outline: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 var(--ol) var(--nv), 0 calc(var(--u) * .3) 0 var(--ol) rgba(0, 0, 0, .42); transition: background .12s, transform .3s var(--spring), box-shadow .12s; }
.pz-bd__disc { position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle at 42% 30%, #fff, var(--hp-paper) 60%, var(--hp-sand)); box-shadow: inset 0 calc(var(--u) * -.18) 0 rgba(30, 33, 48, .1); transition: background .12s, transform .3s var(--spring); }
.pz-bd__ico { position: absolute; inset: 27%; color: var(--nv); transition: color .12s, transform .3s var(--spring); }
.pz-bd__ico svg { width: 100%; height: 100%; display: block; }
/* the key chip on the shoulder, only where a key remains (ENTER · 1–8 · RMB) */
.pz-bd__key { position: absolute; left: -12%; top: -10%; z-index: 2; margin: 0; min-width: 1.9em; height: 1.75em; padding: 0 .42em; font: 900 max(9px, calc(var(--u) * .66)) / 1 'Rubik', sans-serif; letter-spacing: .04em; border-radius: .42em;
  background: var(--hp-paper); color: var(--k); box-shadow: 0 0 0 1.5px var(--nv), 0 .16em 0 1.5px var(--nv); vertical-align: 0; transition: background .12s, color .12s; }
.pz-bd__lbl { font: 800 max(9px, calc(var(--u) * .8)) / 1 'Rubik', sans-serif; letter-spacing: .1em; color: var(--hp-paper); text-shadow: 0 1px 0 var(--k), 0 0 3px var(--k), 0 0 6px rgba(0, 0, 0, .5); white-space: nowrap; }
.pz-hud.is-free .pz-bd:hover { transform: translateY(-3px); box-shadow: 0 0 0 var(--ol) var(--nv), 0 calc(var(--u) * .42) 0 var(--ol) rgba(0, 0, 0, .42); }
.pz-hud.is-free .pz-bd:hover .pz-bd__disc { background: var(--nv); }
.pz-hud.is-free .pz-bd:hover .pz-bd__ico { color: var(--hp-paper); transform: rotate(-8deg) scale(1.1); }
.pz-hud.is-free .pz-bd:hover .pz-bd__key { background: var(--nv); color: var(--hp-paper); box-shadow: 0 0 0 1.5px var(--hp-paper), 0 .16em 0 1.5px var(--hp-paper); }
.pz-bd.is-active { background: var(--hp-hi); } /* [ui-colors] */
.pz-bd.is-active .pz-bd__disc { background: var(--hp-paper); }
.pz-bd.is-active .pz-bd__ico { color: var(--nv); }
/* VISIT: the yellow one, pulsing while a stall is at hand or under the crosshair (RMB either way) */
.pz-bd--visit { background: var(--hp-hi); animation: pz-visit-pulse 1.4s ease-in-out infinite; } /* [ui-colors] */
.pz-bd--visit .pz-bd__disc { background: var(--nv); }
.pz-bd--visit .pz-bd__ico { color: var(--hp-hi); } /* [ui-colors] */
.pz-hud.is-free .pz-bd--visit:hover .pz-bd__disc { background: var(--hp-paper); }
.pz-hud.is-free .pz-bd--visit:hover .pz-bd__ico { color: var(--nv); }
@keyframes pz-visit-pulse { 50% { box-shadow: 0 0 0 var(--ol) var(--nv), 0 calc(var(--u) * .3) 0 var(--ol) rgba(0, 0, 0, .42); } } /* [ui-colors] (no glow) */
/* the counts, bottom-right: unread messages on MESSAGES, pending friend requests on FRIENDS */
.pz-bd__badge { position: absolute; right: -12%; bottom: -8%; z-index: 2; display: none; min-width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); padding: 0 .35em; border-radius: 999px; background: var(--hp-hi); color: var(--nv); /* [ui-colors] */
  font: 900 calc(var(--u) * .92) / calc(var(--u) * 1.7) 'Rubik', sans-serif; letter-spacing: 0; text-align: center; font-style: normal; box-shadow: 0 0 0 2px var(--hp-paper), 0 0 0 3.5px var(--nv); }
.pz-bd__badge.is-on { display: block; animation: pz-pop .3s var(--spring); }
/* the tooltip, below the name: "Messages · M" (only with a free cursor: a locked pointer never hovers) */
.pz-bd-wrap[data-tip]::after, .pz-wx-wrap[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + var(--u) * .35); translate: -50% 0; z-index: 3; white-space: nowrap; padding: .5em .85em .55em; border-radius: 999px; background: var(--k); color: #fff;
  font: 700 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; letter-spacing: .04em; text-transform: none; box-shadow: 0 0 0 1.5px #fff, 0 2px 0 1.5px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(-6px); transition: opacity .12s, transform .25s var(--spring); pointer-events: none; }
.pz-hud.is-free .pz-bd-wrap:hover::after, .pz-hud.is-free .pz-wx-wrap:hover::after { opacity: 1; transform: none; }
.pz-bd-wrap--act:hover::after, .pz-bd-wrap--act.is-open::after, .pz-wx-wrap.is-open::after { display: none; }   /* ACT's fan / the dial's popover is its tooltip */
/* ACT fans the eight actions down from its badge (hover or a click; a pill plays it and the fan folds) */
.pz-top__fan { position: absolute; left: 50%; top: 100%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .4); padding-top: calc(var(--u) * .5); z-index: 3; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .15s, transform .3s var(--spring), visibility 0s .15s; }
.pz-hud.is-free .pz-bd-wrap--act:hover .pz-top__fan, .pz-hud.is-free .pz-bd-wrap--act.is-open .pz-top__fan { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .3s var(--spring), visibility 0s; }
.pz-top__fan .pz-act { animation: pz-pop .25s var(--spring) both; min-width: calc(var(--u) * 7.4); }
/* VISIT pops in at the end of the left group while a stall is at hand or under the crosshair */
.pz-bd-wrap.is-ctx { display: none; }
.pz-bd-wrap.is-ctx.is-on { display: flex; animation: pz-pop .3s var(--spring); }
/* the ESC caption ("free the cursor · click a button"), under the right group, only while the pointer is locked */
/* the clock: the city's local time in an ink oval (Intl, the map's tz), the city under it in sand */
.pz-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .1); min-width: calc(var(--u) * 11.5); height: var(--bd); padding: 0 calc(var(--u) * 1.8); border-radius: 999px; background: var(--k); color: #fff;
  box-shadow: 0 0 0 2px var(--hp-paper), 0 0 0 calc(2px + var(--ol)) var(--nv), 0 calc(var(--u) * .3) 0 calc(2px + var(--ol)) rgba(0, 0, 0, .42); }
.pz-clock__time { font: 400 calc(var(--u) * 2.25) / 1 'Titan One', sans-serif; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.pz-clock__city { font: 800 max(9.5px, calc(var(--u) * .7)) / 1 'Rubik', sans-serif; letter-spacing: .2em; color: var(--hp-sand); text-transform: uppercase; white-space: nowrap; padding-left: .2em; }
/* the weather dial, top-right: the sky kind's glyph (sun / moon · clouds · rain · storm · fog), the temperature, the
   wind (or the hour's rain); a click opens the detail popover under it when the API answered */
.pz-wx-wrap { position: absolute; right: calc(var(--u) * 2.2); top: calc(var(--u) * 1.1); width: max(64px, calc(var(--u) * 6.6)); --c: var(--hp-hi); } /* [ui-colors] */
.pz-wx { pointer-events: auto; cursor: pointer; position: relative; display: block; width: 100%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; background: var(--k); color: #fff; outline: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 2px var(--hp-paper), 0 0 0 calc(2px + var(--ol)) var(--nv), 0 calc(var(--u) * .3) 0 calc(2px + var(--ol)) rgba(0, 0, 0, .42); transition: transform .3s var(--spring); }
.pz-wx__disc { position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle at 42% 28%, #5d6275, #33374a 55%, var(--hp-ink) 85%); transition: background .6s; }
.pz-wx-wrap.is-night .pz-wx__disc { background: radial-gradient(circle at 42% 28%, #3a3d4c, #24273a 55%, var(--hp-ink) 85%); }
.pz-wx-wrap[data-kind='overcast'] .pz-wx__disc, .pz-wx-wrap[data-kind='fog'] .pz-wx__disc { background: radial-gradient(circle at 42% 28%, #6b6e7a, #3b3e4d 55%, var(--hp-ink) 85%); }
.pz-wx-wrap[data-kind='rain'] .pz-wx__disc, .pz-wx-wrap[data-kind='storm'] .pz-wx__disc, .pz-wx-wrap[data-kind='snow'] .pz-wx__disc { background: radial-gradient(circle at 42% 28%, #50546a, #2c2f42 55%, var(--hp-ink) 85%); }
.pz-wx__ico { position: absolute; left: 50%; top: 11%; width: 44%; height: 44%; translate: -50% 0; color: var(--c); filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.pz-wx__ico svg { width: 100%; height: 100%; display: block; }
.pz-wx-wrap[data-kind='rain'] .pz-wx__ico, .pz-wx-wrap[data-kind='storm'] .pz-wx__ico { animation: pz-bob 1.6s ease-in-out infinite; }
.pz-wx__temp { position: absolute; left: 0; right: 0; top: 55%; font: 400 calc(var(--u) * 1.35) / 1 'Titan One', sans-serif; letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 var(--k); }
.pz-wx__sub { position: absolute; left: 0; right: 0; top: 77%; font: 800 max(8.5px, calc(var(--u) * .62)) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .72); text-align: center; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.pz-hud.is-free .pz-wx:hover { transform: translateY(-3px); }
.pz-wx__pop { position: absolute; right: 0; top: calc(100% + var(--u) * .7); width: calc(var(--u) * 19); padding: calc(var(--u) * .8) calc(var(--u) * 1) calc(var(--u) * .7); border-radius: calc(var(--u) * 1.1); background: var(--glass); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 rgba(0, 0, 0, .3); display: none; pointer-events: auto; }
.pz-wx-wrap.is-open .pz-wx__pop { display: block; animation: pz-pop .25s var(--spring); }
.pz-wx__title { font: 400 calc(var(--u) * 1.15) / 1 'Titan One', sans-serif; letter-spacing: .03em; color: var(--c); margin-bottom: calc(var(--u) * .5); }
.pz-wx__row { display: flex; justify-content: space-between; gap: 1em; padding: .22em 0; font: 600 calc(var(--u) * .95) / 1.2 'Rubik', sans-serif; color: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .08); }
.pz-wx__row b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pz-wx__src { margin-top: calc(var(--u) * .4); font: 700 calc(var(--u) * .7) / 1 'Rubik', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }
/* [dropdown] the top bar's two drop-downs in the Settings dropdown's look (ui.css .iw-drop__list): ACT's fan becomes one
   floating glass list (the panel gradient, rim, radius, shadow) — rows with the key on the left, the hovered one a paper
   wash, the playing one the white ring — and the weather popover the same glass. A quick fade + drop; touch keeps its
   own 2-up grid of 44 px pills (mobile.css). */
html:not(.is-touch) .pz-top__fan { align-items: stretch; gap: 2px; min-width: max(168px, calc(var(--u) * 12)); margin-top: calc(var(--u) * .6); padding: calc(var(--u) * .4);
  border-radius: calc(var(--u) * 1.2); background: linear-gradient(170deg, rgba(44, 48, 68, .97), rgba(24, 27, 40, .98));
  box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .12), inset 0 2px 0 rgba(255, 255, 255, .06), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .34);
  backdrop-filter: blur(14px) saturate(1.3); transform: translateY(-6px) scale(.97); transform-origin: 50% 0; }
html:not(.is-touch) .pz-top__fan::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--u) * -.8); height: calc(var(--u) * .8); }
html:not(.is-touch) .pz-hud.is-free .pz-bd-wrap--act:hover .pz-top__fan, html:not(.is-touch) .pz-hud.is-free .pz-bd-wrap--act.is-open .pz-top__fan { transform: none; transition: opacity .15s, transform .2s var(--out), visibility 0s; }
html:not(.is-touch) .pz-top__fan .pz-act { animation: none; min-width: 0; min-height: max(34px, calc(var(--u) * 2.6)); padding: calc(var(--u) * .35) calc(var(--u) * .9) calc(var(--u) * .35) calc(var(--u) * .45);
  border-radius: calc(var(--u) * .85); background: transparent; box-shadow: none; color: rgba(243, 236, 224, .82); font: 600 max(13px, calc(var(--u) * 1.05)) / 1.15 'Rubik', sans-serif; letter-spacing: .02em; gap: .6em; white-space: nowrap; }
html:not(.is-touch) .pz-top__fan .pz-act:hover { transform: none; background: rgba(243, 236, 224, .1); color: #fff; }
html:not(.is-touch) .pz-top__fan .pz-act.is-active { background: rgba(243, 236, 224, .1); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 2px var(--hp-hi); }
html:not(.is-touch) .pz-top__fan .pz-act:hover kbd, html:not(.is-touch) .pz-top__fan .pz-act.is-active kbd { background: var(--hp-hi); color: var(--hp-ink); box-shadow: none; }
.pz-wx__pop { background: linear-gradient(170deg, rgba(44, 48, 68, .97), rgba(24, 27, 40, .98)); backdrop-filter: blur(14px) saturate(1.3); border-radius: calc(var(--u) * 1.2);
  box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .12), inset 0 2px 0 rgba(255, 255, 255, .06), 0 calc(var(--u) * .45) 0 rgba(0, 0, 0, .38), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, .34); transform-origin: 100% 0; }
.pz-wx-wrap.is-open .pz-wx__pop { animation: pz-dd-in .18s var(--out) both; }
.pz-wx__row { border-top-color: rgba(243, 236, 224, .08); color: rgba(243, 236, 224, .74); }
@keyframes pz-dd-in { from { opacity: 0; scale: .96; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { html:not(.is-touch) .pz-top__fan, .pz-wx-wrap.is-open .pz-wx__pop { animation: none; transition: none; transform: none; } }
.pz-hud.is-typing .pz-top, .pz-hud.is-modal .pz-top, .pz-hud.is-typing .pz-corner, .pz-hud.is-modal .pz-corner, .pz-hud.is-modal .pz-wx-wrap, .pz-hud.is-modal .pz-prompt { opacity: 0; pointer-events: none; }
.pz-hud.is-modal .pz-tags, .pz-hud.is-modal .pz-callouts { visibility: hidden; }
.pz-hud.is-modal .pz-chat, .pz-hud.is-modal .pz-mm { opacity: 0; visibility: hidden; pointer-events: none; }   /* any menu screen up: the chat log and the corner map step aside (they showed through the FRIENDS / MESSAGES panels) */

/* the arena HUD in the plaza: no clock, tank, special, sub, turf or squad — the minimap (bottom-left), the TAB map,
   the crosshair and the area bar stay */
.iw-hud.is-social .iw-timer, .iw-hud.is-social .iw-tank, .iw-hud.is-social .iw-sp, .iw-hud.is-social .iw-sb, .iw-hud.is-social .iw-turf, .iw-hud.is-social .iw-status, .iw-hud.is-social .iw-lineup, .iw-hud.is-social .iw-mks, .iw-hud.is-social .iw-hud__top { display: none !important; }
/* narrow screens: the top bar is icons only (the key chips and the tooltip still say what each is), the clock and the
   dial shrink a notch; the chat log moves over */
@media (max-width: 900px) { .pz-chat { width: 60vw; left: calc(var(--u) * 17.5); } .pz-bd__lbl { display: none; } .pz-bd-wrap { width: var(--bd); gap: 0; } .pz-top { gap: calc(var(--u) * .8); } .pz-top__grp { gap: calc(var(--u) * .6); } .pz-corner--menu { left: calc(var(--u) * 1.2); }
  .pz-clock { min-width: max(96px, calc(var(--u) * 9)); padding: 0 calc(var(--u) * 1.2); } .pz-clock__time { font-size: max(18px, calc(var(--u) * 2.25)); } .pz-bd__key { left: -8%; top: -8%; } }

/* emoji worn over the head (optional) and stall name bubbles */
.pz-tag__emoji { display: none; font-size: calc(var(--u) * 1.65); line-height: 1; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.pz-tag__emoji.is-on { display: block; }
@keyframes pz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pz-stag { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 50% 100%; --c: var(--hp-sand); pointer-events: none; }
/* the stall's name: a paper pill in ink type, the owner's colour only as the dot before it */
.pz-stag__name { display: inline-block; font: 400 calc(var(--u) * 1.35) 'Titan One', 'Rubik', sans-serif; letter-spacing: .02em; color: var(--k); padding: .2em .8em .25em 1.5em; border-radius: 1em; white-space: nowrap; position: relative; margin-bottom: 7px;
  background: radial-gradient(circle at .8em 50%, var(--c) 0 .32em, transparent .4em), var(--hp-paper);
  filter: drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)) drop-shadow(0 -2px 0 var(--k)) drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }   /* (the outline + drop wrap pill + tail: one shape, no seam) */
.pz-stag__name::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--hp-paper); border-bottom: 0; }
.pz-emoji { display: flex; align-items: center; justify-content: center; flex: none; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: calc(var(--u) * 1.55); line-height: 1; cursor: pointer; pointer-events: auto; font-style: normal; transition: scale .12s; }
.pz-emoji.is-none { color: rgba(255, 255, 255, .5); font: 800 calc(var(--u) * 1.2) 'Rubik', sans-serif; }
.pz-emoji:hover { scale: 1.12; }
.pz-emoji.is-sel { scale: 1.16; background: var(--hp-paper); box-shadow: 0 0 0 calc(var(--u) * .18) var(--hp-paper), 0 0 0 calc(var(--u) * .36) var(--k); }


/* ================================================================== 4. posts, messages, requests (the social features) */
/* the layer over the menus: toasts (top right) and the friend-request card (centred, upper third) */
.pz-over { z-index: 35; }
.pz-toasts { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 9); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .55); }
.pz-toast { --c: var(--hp-muted); display: flex; align-items: center; gap: .7em; max-width: calc(var(--u) * 34); padding: .5em 1em .55em .75em; border-radius: calc(var(--u) * 1.1); background: var(--glass); color: #fff;
  font: 700 calc(var(--u) * 1.2) / 1.3 'Rubik', sans-serif; box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--k), 0 4px 0 2px rgba(0, 0, 0, .3); animation: pz-toast-in .35s var(--spring); backdrop-filter: blur(8px); transition: opacity .35s, translate .35s; }
.pz-toast__dot { flex: none; width: .8em; height: .8em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--k); }
.pz-toast.is-error { --c: var(--hp-rose); }
.pz-toast.is-good, .pz-toast.is-dm { --c: var(--hp-hi); } /* [ui-colors] */
.pz-toast.is-dm { background: var(--hp-paper); color: var(--k); }
.pz-toast.is-click { pointer-events: auto; cursor: pointer; }
.pz-toast.is-out { opacity: 0; translate: 30px 0; }
@keyframes pz-toast-in { from { opacity: 0; translate: 40px 0; } }
/* the friend-request card (ui.js requestPopup): a HOPPA card — cream, a navy outline and hard drop — centred across the
   screen in its upper third (dead centre would sit on the kid's head); the requester's colour ball, their name big in
   Titan One, "wants to be friends", ACCEPT (the yellow pill) / DECLINE (an outlined paper pill), and the 20 s countdown
   as a thin yellow bar along the card's bottom edge; it pops in like the menus' .iw-in--pop */
.pz-popup { position: absolute; left: 50%; top: 31%; translate: -50% -50%; pointer-events: auto; }
.pz-popup[hidden] { display: none; }
.pz-popup__card { --c: #ccc; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); width: max(240px, calc(var(--u) * 27)); padding: calc(var(--u) * 1.8) calc(var(--u) * 2) calc(var(--u) * 1.9); overflow: hidden;
  background: var(--hp-paper); color: var(--hp-ink); border-radius: calc(var(--u) * 2); box-shadow: 0 0 0 max(3px, calc(var(--u) * .22)) var(--hp-ink), 0 calc(var(--u) * .6) 0 max(3px, calc(var(--u) * .22)) var(--hp-ink), 0 calc(var(--u) * 1.4) calc(var(--u) * 2.2) rgba(0, 0, 0, .4);
  animation: iw-in-pop .5s var(--spring) backwards; }
.pz-popup__av { position: relative; flex: none; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); margin-bottom: calc(var(--u) * .5); border-radius: 50%; background: radial-gradient(circle at 34% 28%, var(--hp-paper) 0 14%, var(--hp-ink2) 16%);
  box-shadow: 0 0 0 max(3px, calc(var(--u) * .22)) var(--hp-ink), 0 calc(var(--u) * .4) 0 max(3px, calc(var(--u) * .22)) rgba(30, 33, 48, .55); animation: pz-popup-av .6s var(--spring2, var(--spring)) backwards .12s; }
.pz-popup__av::after { content: ''; position: absolute; right: 2%; bottom: 2%; width: 26%; height: 26%; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 max(2px, calc(var(--u) * .16)) var(--hp-paper); }   /* (their colour: the name-tag dot, nothing bigger) */
@keyframes pz-popup-av { from { scale: .3; translate: 0 calc(var(--u) * -1.5); } }
.pz-popup__title { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .45); text-align: center; }
.pz-popup__name { font: 400 calc(var(--u) * 2.6) / 1.05 'Titan One', 'Rubik', sans-serif; letter-spacing: .02em; color: var(--hp-ink); max-width: calc(var(--u) * 24); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-popup__line { font: 700 calc(var(--u) * 1.25) / 1.2 'Rubik', sans-serif; letter-spacing: .02em; color: rgba(30, 33, 48, .78); white-space: nowrap; }
.pz-popup__btns { display: flex; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.1); }
/* [popup-fit] a long label (OUT THIS ROUND, its French / Spanish forms) never runs past the box: the row wraps, a button never outgrows it, and the off-state label may take two lines */
.pz-popup__btns { flex-wrap: wrap; width: 100%; max-width: 100%; justify-content: center; box-sizing: border-box; }   /* (full row width: a wrapping row inside a shrink-to-fit box would collapse into a column) */
.pz-popup__btn { max-width: 100%; min-width: 0; }
#ui-root .pz-popup__btn.is-off .pz-popup__lbl { white-space: normal; text-align: center; line-height: 1.1; }
.pz-popup__btn { cursor: pointer; pointer-events: auto; border: 0; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 9.5); padding: .62em 1.3em .66em; border-radius: 999px; font: 400 calc(var(--u) * 1.25) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .08em;
  box-shadow: 0 0 0 max(2px, calc(var(--u) * .17)) var(--hp-ink), 0 calc(var(--u) * .3) 0 max(2px, calc(var(--u) * .17)) var(--hp-ink); transition: transform .25s var(--spring), background .12s, color .12s; }
.pz-popup__btn:hover { transform: translateY(-2px); }
.pz-popup__btn:active { transform: translateY(calc(var(--u) * .2)); box-shadow: 0 0 0 max(2px, calc(var(--u) * .17)) var(--hp-ink), 0 calc(var(--u) * .1) 0 max(2px, calc(var(--u) * .17)) var(--hp-ink); }
.pz-popup__btn.is-ok { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.pz-popup__btn.is-ok:hover { background: var(--hp-hi-light); } /* [ui-colors] */
.pz-popup__btn.is-no { background: var(--hp-paper); color: var(--hp-ink); }
.pz-popup__btn.is-no:hover { background: #fff; }
/* each button's keycap ([A] ACCEPT · [D] DECLINE: session.handleKey takes the two keys while the card is up) — an ink cap
   with a paper letter, the letter turns the yellow while its button is hovered / focused */
.pz-popup__btn { gap: .55em; }
.pz-popup__btn .pz-popup__key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin: 0; padding: 0 .3em; border-radius: .38em; font: 800 .8em/1 'Rubik', sans-serif; letter-spacing: 0; vertical-align: 0;
  background: var(--hp-ink); color: var(--hp-paper); box-shadow: 0 .14em 0 rgba(30, 33, 48, .45); transition: color .12s; }
.pz-popup__btn:hover .pz-popup__key, .pz-popup__btn:focus-visible .pz-popup__key { color: var(--hp-hi); } /* [ui-colors] */
.pz-popup__bar { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: max(4px, calc(var(--u) * .5)); background: rgba(30, 33, 48, .14); overflow: hidden; }
.pz-popup__bar b { display: block; height: 100%; width: 100%; background: var(--hp-hi); box-shadow: inset 0 calc(var(--u) * -.12) 0 rgba(30, 33, 48, .25); transition: width .25s linear; } /* [ui-colors] */
/* ---- FRIEND REQUEST · send card (ui.js sendCard: RMB on a person) — the request card above, reused as is: the same
   cream card in the same spot (the two never show together), [F] SEND / [Esc] CANCEL, the 8 s bar. A friend reads
   "Already friends" with [F] WHISPER; a request already out reads "Request sent · waiting" with only [Esc] CLOSE */
.pz-send .pz-popup__key { min-width: 1.6em; padding: 0 .38em; }
.pz-send__card.is-pending .pz-popup__line, .pz-send__card.is-friend .pz-popup__line { color: rgba(30, 33, 48, .62); }
/* the unread badge on menu buttons */
.pz-btnbadge { position: absolute; right: calc(var(--u) * 1.1); top: 50%; translate: 0 -50%; min-width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); padding: 0 .4em; border-radius: 999px; background: var(--hp-hi); color: var(--k); font: 900 calc(var(--u) * 1.05) / calc(var(--u) * 2.4) 'Rubik', sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--k); } /* [ui-colors] */
/* a stall with a post: a little photo badge on its name bubble */
.pz-stag.has-post .pz-stag__name::before { content: '📷 '; font-size: .85em; }
/* STALL ATTENTION (ui.js, session.stallHeat): the eye count in the name pill, HOT / ON FIRE and the crown above it */
.pz-stag { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pz-stag__name { display: inline-flex; align-items: center; gap: .4em; }
.pz-stag__eyes { display: none; align-items: center; gap: .18em; font: 600 .72em 'Rubik', sans-serif; font-variant-numeric: tabular-nums; -webkit-text-stroke: 0; background: rgba(30, 33, 48, .12); border-radius: 999px; padding: .12em .5em .14em .38em; margin-right: -.4em; line-height: 1; }
.pz-stag__eyes svg { width: 1.1em; height: 1.1em; display: block; }
.pz-stag.has-eyes .pz-stag__eyes { display: inline-flex; animation: pz-heat-in .35s var(--spring) both; }
.pz-stag__badges { display: none; gap: 4px; }
.pz-stag.is-hot .pz-stag__badges, .pz-stag.is-fire .pz-stag__badges, .pz-stag.is-top .pz-stag__badges { display: flex; }
.pz-stag__heat, .pz-stag__top { display: none; font: 400 calc(var(--u) * .95) 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; color: #fff; -webkit-text-stroke: .5px var(--k); padding: .18em .62em .22em; border-radius: 999px; box-shadow: 0 2px 0 var(--k); white-space: nowrap; line-height: 1.1; }
.pz-stag.is-hot .pz-stag__heat, .pz-stag.is-fire .pz-stag__heat { display: inline-block; background: linear-gradient(180deg, var(--hp-hi-light), var(--hp-hi)); color: var(--k); -webkit-text-stroke: 0; box-shadow: 0 2px 0 var(--k); animation: pz-heat-in .4s var(--spring) both, pz-heat-pulse 1.6s ease-in-out .4s infinite; } /* [ui-colors] (no glow) */
.pz-stag.is-fire .pz-stag__heat { background: linear-gradient(180deg, var(--hp-hi-light), var(--hp-hi)); box-shadow: 0 2px 0 var(--k); animation-duration: .4s, .9s; } /* [ui-colors] (no glow) */
.pz-stag.is-top .pz-stag__top { display: inline-block; background: linear-gradient(180deg, var(--hp-hi-light), var(--hp-hi)); color: var(--k); -webkit-text-stroke: 0; box-shadow: 0 2px 0 var(--k); animation: pz-heat-in .4s var(--spring) both; } /* [ui-colors] (no glow) */
.pz-stag.is-hot .pz-stag__name, .pz-stag.is-fire .pz-stag__name { filter: drop-shadow(2px 0 0 var(--k)) drop-shadow(-2px 0 0 var(--k)) drop-shadow(0 2px 0 var(--k)) drop-shadow(0 -2px 0 var(--k)) drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); } /* [ui-colors] (no glow) */
@keyframes pz-heat-in { from { opacity: 0; transform: translateY(6px) scale(.7); } }
@keyframes pz-heat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* the "3 viewing · HOT" line in the browse header and "Viewers now …" on your own stall screen */
.pz-attn { font-variant-numeric: tabular-nums; }
.pz-attn.is-hot { color: var(--hp-hi); font-weight: 600; text-shadow: none; } /* [ui-colors] (no glow) */
/* the prompt's RMB keycap */
.pz-prompt kbd { letter-spacing: .02em; }

/* the stall editor: the post (textarea + counter) and the photo thumbnails */
.pz-area { display: flex; flex-direction: column; gap: calc(var(--u) * .6); padding: calc(var(--u) * .4) calc(var(--u) * .5); border-radius: calc(var(--u) * 1); transition: background .2s; }
.pz-area.is-focus { background: rgba(var(--a-rgb), .12); }
.pz-area__count { margin-left: auto; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.pz-area__count.is-full { color: var(--hp-hi); } /* [ui-colors] */
.pz-area__input { width: 100%; min-height: calc(var(--u) * 5.6); resize: vertical; border: 0; outline: 0; border-radius: calc(var(--u) * .9); padding: calc(var(--u) * .8) calc(var(--u) * 1); background: rgba(0, 0, 0, .28); color: #fff;
  font: 600 var(--fs-m) / 1.4 'Rubik', sans-serif; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); pointer-events: auto; }
.pz-area__input::placeholder { color: rgba(255, 255, 255, .35); }
.pz-area.is-editing .pz-area__input { background: #fff; color: var(--k); box-shadow: 0 0 0 3px var(--a); }
.pz-area.is-editing .pz-area__input::placeholder { color: rgba(30, 33, 48, .35); }
.pz-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--u) * .6); }
.pz-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--u) * .9); overflow: hidden; background: rgba(0, 0, 0, .3); box-shadow: 0 0 0 2px var(--k); }
.pz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-thumb__x { position: absolute; right: calc(var(--u) * .4); top: calc(var(--u) * .4); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border: 0; border-radius: 50%; background: var(--hp-ink); color: var(--hp-paper); font: 900 calc(var(--u) * 1) / 1 'Rubik', sans-serif; cursor: pointer; box-shadow: 0 0 0 2px var(--k); pointer-events: auto; }
.pz-thumb--add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .08); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; pointer-events: auto; transition: background .2s; }
.pz-thumb--add i { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); color: var(--a); }
.pz-thumb--add i svg { width: 100%; height: 100%; }
.pz-thumb--add:hover, .pz-thumb--add.is-focus { background: rgba(var(--a-rgb), .25); }
.pz-file { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* the stall browser: the post (carousel + text) above the goods, the lightbox over everything */
.pz-browse .pz-stallform { width: calc(var(--u) * 60); }
.pz-post { display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .6); margin-bottom: calc(var(--u) * .3); border-bottom: 2px solid rgba(255, 255, 255, .08); }
.pz-post__gallery { position: relative; height: calc(var(--u) * 24); border-radius: calc(var(--u) * 1.1); overflow: hidden; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px var(--k); }
.pz-post__gallery.is-empty { display: none; }
.pz-post__img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; pointer-events: auto; }
.pz-post__img[hidden] { display: none; }
.pz-post__arrow { position: absolute; top: 50%; translate: 0 -50%; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border: 0; border-radius: 50%; background: #fff; color: var(--k); cursor: pointer; pointer-events: auto; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .3); transition: transform .25s var(--spring); }
.pz-post__arrow:hover { transform: scale(1.1); }
.pz-post__arrow[hidden] { display: none; }
.pz-post__arrow svg { width: 55%; height: 55%; }
.pz-post__arrow.is-prev { left: calc(var(--u) * .8); } .pz-post__arrow.is-next { right: calc(var(--u) * .8); }
.pz-post__dots { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * .8); display: flex; justify-content: center; gap: calc(var(--u) * .5); }
.pz-post__dots i { width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 1.5px var(--k); cursor: pointer; pointer-events: auto; }
.pz-post__dots i.is-on { background: #fff; scale: 1.25; }
.pz-post__wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .6em; font: 700 var(--fs-s) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); }
.pz-post__wait[hidden] { display: none; }
.pz-post__wait i { width: 1.6em; height: 1.6em; } .pz-post__wait i svg { width: 100%; height: 100%; }
.pz-post__text { margin: 0; font: 600 var(--fs-m) / 1.45 'Rubik', sans-serif; color: #fff; white-space: pre-wrap; word-break: break-word; }
.pz-lightbox { position: absolute; inset: 0; z-index: 45; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 4) calc(var(--u) * 5); background: rgba(16, 18, 28, .9); backdrop-filter: blur(6px); animation: iw-fade .2s both; cursor: zoom-out; }
.pz-lightbox[hidden] { display: none; }
.pz-lightbox .pz-post__arrow { position: static; translate: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.pz-lightbox__img { justify-self: center; max-width: 100%; max-height: calc(100dvh - var(--u) * 10); border-radius: calc(var(--u) * 1.4); box-shadow: 0 0 0 4px var(--k), 0 0 0 8px var(--hp-paper), 0 20px 50px rgba(0, 0, 0, .6); animation: pz-pop .3s var(--spring); }
.pz-lightbox__bar { position: absolute; left: 50%; bottom: calc(var(--u) * 1.6); translate: -50% 0; display: flex; align-items: center; gap: calc(var(--u) * 1.5); font: 900 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .1em; color: #fff; }
.pz-lightbox__hint { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .75); }
.pz-browse .pz-panelscr__btns .iw-btn--menu { width: 100%; }

/* MESSAGES: the conversations list (left) and the open thread (right) */
.pz-chats__list { position: absolute; left: calc(var(--u) * 3.6); top: calc(var(--u) * 10.6); width: calc(var(--u) * 30); max-height: calc(100% - var(--u) * 20.2); overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: calc(var(--u) * .8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1); }
.pz-chats__list::-webkit-scrollbar { display: none; }
.pz-chats__rows { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.pz-convo { --c: #ccc; position: relative; display: flex; align-items: center; gap: calc(var(--u) * .8); width: 100%; padding: calc(var(--u) * .55) calc(var(--u) * .7); border: 0; border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .06); color: #fff; text-align: left; cursor: pointer; transition: background .2s, transform .3s var(--spring); }
.pz-convo:hover, .pz-convo.is-focus { background: rgba(var(--a-rgb), .18); }
.pz-convo.is-sel { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.pz-convo__av { position: relative; flex: none; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; background: var(--hp-sand); color: var(--hp-ink); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--k); }
.pz-convo__av::after { content: ''; position: absolute; right: -2%; bottom: -2%; width: 28%; height: 28%; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--k); }   /* (their colour only as the name-tag dot) */
.pz-convo__av svg { width: 70%; height: 70%; }
.pz-convo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.pz-convo__top { display: flex; align-items: baseline; gap: .4em; font: 400 calc(var(--u) * 1.3) / 1.1 'Titan One', sans-serif; }
.pz-convo__top b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-convo__top small { margin-left: auto; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .55); }
.pz-convo__star { color: var(--hp-hi); font-style: normal; font-size: .85em; } /* [ui-colors] */
.pz-convo__last { font: 600 var(--fs-xs) / 1.2 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-convo.has-unread .pz-convo__last { color: #fff; font-weight: 800; }
.pz-convo__badge { flex: none; min-width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); padding: 0 .4em; border-radius: 999px; background: var(--hp-hi); color: var(--k); font: 900 calc(var(--u) * 1) / calc(var(--u) * 2.2) 'Rubik', sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--k); } /* [ui-colors] */
.pz-chats__panel { position: absolute; left: calc(var(--u) * 35.4); right: calc(var(--u) * 3.8); top: calc(var(--u) * 10.6); bottom: calc(var(--u) * 9.6); padding: 0; overflow: hidden; display: flex; }   /* (bottom clears the Enter/Esc prompt pill) */
.pz-chats__thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pz-chats__none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; font: 600 var(--fs-m) / 1 'Rubik', sans-serif; color: var(--muted); }
.pz-chats__none i { width: calc(var(--u) * 4); height: calc(var(--u) * 4); color: var(--a); } .pz-chats__none i svg { width: 100%; height: 100%; }
.pz-chats__head { --c: #ccc; display: flex; align-items: center; gap: calc(var(--u) * .9); padding: calc(var(--u) * .9) calc(var(--u) * 1.2); background: rgba(0, 0, 0, .3); border-bottom: 2px solid rgba(255, 255, 255, .08); }
.pz-chats__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.pz-chats__who b { font: 400 calc(var(--u) * 1.7) / 1.1 'Titan One', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-chats__who small { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; color: rgba(255, 255, 255, .6); }
.pz-chats__tools { display: flex; gap: calc(var(--u) * .5); }
.pz-chats__log { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: calc(var(--u) * .45); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); }
.pz-quote { display: flex; align-items: flex-start; gap: .6em; align-self: stretch; padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: calc(var(--u) * .9); background: rgba(var(--hp-hi-rgb), .1); border-left: 4px solid var(--hp-hi); font: 600 var(--fs-s) / 1.35 'Rubik', sans-serif; color: #fff; } /* [ui-colors] */
.pz-quote i { flex: none; width: 1.4em; height: 1.4em; color: var(--hp-hi); } .pz-quote i svg { width: 100%; height: 100%; } /* [ui-colors] */
.pz-quote b { font-weight: 900; }
.pz-day { align-self: center; margin: calc(var(--u) * .5) 0 calc(var(--u) * .2); }
.pz-day span { padding: .3em .9em; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 900 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .12em; color: rgba(255, 255, 255, .7); }
.pz-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 72%; gap: .15em; }
.pz-msg.is-me { align-self: flex-end; align-items: flex-end; }
.pz-msg__bubble { padding: calc(var(--u) * .55) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * .25); background: #fff; color: var(--k); font: 600 var(--fs-m) / 1.35 'Rubik', sans-serif; word-break: break-word; box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .25); }
.pz-msg.is-me .pz-msg__bubble { background: var(--a); color: var(--a-ink); border-radius: calc(var(--u) * 1.1) calc(var(--u) * 1.1) calc(var(--u) * .25) calc(var(--u) * 1.1); }
.pz-msg__time { font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .45); padding: 0 .3em; }
.pz-chats__box { display: flex; align-items: center; gap: calc(var(--u) * .8); margin: calc(var(--u) * .8) calc(var(--u) * 1.2) calc(var(--u) * 1); padding: calc(var(--u) * .45) calc(var(--u) * .7) calc(var(--u) * .45) calc(var(--u) * 1); background: var(--hp-paper); border-radius: calc(var(--u) * 1.2); box-shadow: 0 0 0 3px var(--k), 0 0 0 6px rgba(255, 255, 255, .15); transition: box-shadow .2s; }
.pz-chats__box.is-focus, .pz-chats__box:focus-within { box-shadow: 0 0 0 3px var(--k), 0 0 0 7px var(--a); }
.pz-chats__box .pz-chat__say { font: 900 calc(var(--u) * 1.2) 'Titan One', sans-serif; color: var(--a); -webkit-text-stroke: 1px var(--k); }
.pz-chats__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--k); font: 700 calc(var(--u) * 1.5) 'Rubik', sans-serif; padding: calc(var(--u) * .45) 0; pointer-events: auto; }
.pz-chats__input::placeholder { color: #9c968c; font-weight: 600; }
.pz-chats__input:disabled { color: #9c968c; }
.pz-chats__btns { position: absolute; left: calc(var(--u) * 3.6); bottom: calc(var(--u) * 1.6); width: calc(var(--u) * 20); }   /* (bottom-left under the list: the Enter/Esc prompt pill owns the bottom-right corner) */
.pz-chats__btns .iw-btn--menu { width: 100%; }

/* FRIENDS: notes (requests off), blocked rows */
.pz-note { display: flex; align-items: center; gap: .7em; padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: calc(var(--u) * .9); background: rgba(243, 236, 224, .1); border-left: 4px solid var(--hp-sand); font: 600 var(--fs-s) / 1.35 'Rubik', sans-serif; }
.pz-note i { flex: none; width: 1.6em; height: 1.6em; color: var(--hp-sand); } .pz-note i svg { width: 100%; height: 100%; }
/* FRIENDS / MESSAGES › VISIT (the sparkle teleport to someone in this city): dim with its note when they are away */
.pz-visit__wrap { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .2); }
.pz-btn--off { opacity: .5; filter: saturate(.25); }
.pz-visit__note { white-space: nowrap; font: 700 calc(var(--u) * .78) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .6); font-style: normal; }
.pz-convo__go { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--hp-paper); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .15); transition: background .15s, color .15s, transform .3s var(--spring); }
.pz-convo__go svg { width: 62%; height: 62%; display: block; }
.pz-convo__go:hover { background: var(--hp-hi); color: var(--k); transform: scale(1.12); } /* [ui-colors] */
.pz-friend.is-blocked .pz-goods__name { opacity: .6; }
.pz-friend.is-blocked .pz-goods__price { background: rgba(192, 96, 90, .25); color: #e5a7a4; }

/* MENU › SOCIAL: the "stop popups" switches on the pause screen's city panel */
.pz-social { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.pz-socrow { min-height: calc(var(--u) * 3.6); padding: calc(var(--u) * .3) calc(var(--u) * .6) calc(var(--u) * .3) calc(var(--u) * .9); }
.pz-socrow .iw-row__label { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; font-size: var(--fs-s); }
.pz-socrow .iw-row__label .iw-row__pip { display: none; }
.pz-socrow__note { font: 600 var(--fs-xs) / 1.2 'Rubik', sans-serif; font-style: normal; color: rgba(255, 255, 255, .55); }
.pz-socrow__note.is-off { color: var(--hp-hi); font-weight: 800; } /* [ui-colors] */
.pz-stall .pz-stallform { max-height: calc(100% - var(--u) * 13.5); }
.pz-stall .pz-area__input { min-height: calc(var(--u) * 4.6); }

/* ================================================================== 5. where are you? (src/social/geo.js) */
/* the profile card: "📍 Hong Kong · change" */
.pz-profile__geo { display: inline-flex; align-items: center; gap: .45em; margin-top: .55em; padding: .3em .8em .32em .6em; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; pointer-events: auto;
  font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .06em; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); transition: background .2s, transform .3s var(--spring); }
.pz-profile__geo:hover, .pz-profile__geo.is-focus { background: rgba(var(--a-rgb), .3); transform: translateX(2px); }
.pz-profile__geo i { width: 1.25em; height: 1.25em; color: var(--hp-hi); } .pz-profile__geo i svg { width: 100%; height: 100%; display: block; } /* [ui-colors] */
.pz-profile__geo em { font-style: normal; color: rgba(255, 255, 255, .6); }
.pz-profile__geo em::before { content: '· '; }
.pz-profile__geo.is-none i { color: rgba(255, 255, 255, .5); }
/* the location screen: the list (left) and USE MY LOCATION · SKIP · the privacy line (right) */
.pz-loc .pz-stallform { width: calc(var(--u) * 56); gap: calc(var(--u) * .8); max-height: calc(100% - var(--u) * 16.5); }
.pz-loc__list.is-nudge { animation: pz-nudge .6s var(--spring); }
@keyframes pz-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 60% { transform: translateX(8px); } }
.pz-loc__search { flex: none; }
.pz-loc__rows { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * .45) calc(var(--u) * .7); }
.pz-loc__row { display: flex; align-items: center; gap: calc(var(--u) * .6); min-height: calc(var(--u) * 3.3); padding: calc(var(--u) * .35) calc(var(--u) * .8) calc(var(--u) * .35) calc(var(--u) * .6); border: 0; border-radius: calc(var(--u) * .9); background: rgba(255, 255, 255, .06); color: #fff; text-align: left; cursor: pointer; pointer-events: auto;
  transition: background .18s, transform .3s var(--spring); }
.pz-loc__row:hover, .pz-loc__row.is-focus { background: rgba(var(--a-rgb), .22); transform: translateX(3px); }
.pz-loc__row.is-sel { background: rgba(var(--a-rgb), .32); box-shadow: inset 0 0 0 2px var(--a); }
.pz-loc__pin { flex: none; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); color: rgba(255, 255, 255, .35); }
.pz-loc__row.is-sel .pz-loc__pin, .pz-loc__row.is-focus .pz-loc__pin { color: var(--hp-hi); } /* [ui-colors] */
.pz-loc__pin svg { width: 100%; height: 100%; display: block; }
.pz-loc__name { flex: 1; min-width: 0; font: 400 calc(var(--u) * 1.3) / 1.1 'Titan One', sans-serif; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-loc__country { flex: none; max-width: 45%; font: 700 var(--fs-xs) / 1.1 'Rubik', sans-serif; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-loc__btns { width: calc(var(--u) * 29); }
.pz-loc__btns .pz-loc__gps.iw-btn--xl { height: calc(var(--u) * 6.6); font-size: calc(var(--u) * 2.15); padding-left: calc(var(--u) * 1.4); letter-spacing: .01em; }
.pz-loc__gps .iw-btn__sub { font-size: calc(var(--u) * 1); max-width: none; white-space: nowrap; }
.pz-loc__gps .iw-btn__icon { transform: scale(.85); }
.pz-loc__gps.is-busy { opacity: .7; pointer-events: none; }
.pz-loc__status { display: none; padding: calc(var(--u) * .6) calc(var(--u) * 1); border-radius: calc(var(--u) * .9); background: rgba(22, 25, 38, .7); font: 700 var(--fs-s) / 1.35 'Rubik', sans-serif; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); animation: pz-pop .3s var(--spring); }
.pz-loc__status.is-on { display: block; }
.pz-loc__status.is-error { background: rgba(192, 96, 90, .22); box-shadow: inset 0 0 0 2px rgba(192, 96, 90, .6); }
.pz-loc__status.is-good { background: rgba(var(--hp-hi-rgb), .12); box-shadow: inset 0 0 0 2px rgba(var(--hp-hi-rgb), .5); } /* [ui-colors] */
.pz-loc__privacy { margin-top: calc(var(--u) * .4); background: rgba(255, 255, 255, .07); border-left-color: var(--hp-hi); color: rgba(255, 255, 255, .85); } /* [ui-colors] */
.pz-loc__privacy i { color: var(--hp-hi); } /* [ui-colors] */
/* city · distance lines in the friends list, the MESSAGES header and the pause › SOCIAL row */
.pz-goods__geo { flex: none; display: inline-flex; align-items: center; gap: .35em; max-width: 38%; padding: .3em .7em .32em .5em; border-radius: 999px; background: rgba(0, 0, 0, .3); font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-goods__geo i, .pz-chats__geo i { flex: none; width: 1.2em; height: 1.2em; color: var(--hp-hi); } .pz-goods__geo i svg, .pz-chats__geo i svg { width: 100%; height: 100%; display: block; } /* [ui-colors] */
.pz-chats__geo { display: inline-flex; align-items: center; gap: .3em; margin-left: .8em; letter-spacing: .02em; text-transform: none; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.pz-chats__geo::before { content: '·'; margin-right: .5em; color: rgba(255, 255, 255, .5); }
.pz-socrow--geo .iw-row__ctrl .iw-btn--small { flex: none; }
/* MENU › SOCIAL › Nearby only: the ‹ 200 km › range picker beside the toggle (left / right or a click on an arrow
   cycles the presets; dim while the filter is off) */
.pz-socrow--near .iw-row__ctrl { gap: calc(var(--u) * .7); }
.pz-near { display: inline-flex; align-items: center; gap: .15em; height: calc(var(--u) * 2.8); padding: 0 .25em; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); opacity: .55; transition: opacity .2s, box-shadow .2s; }
.pz-near.is-on { opacity: 1; box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .75); }
.iw-row.is-focus .pz-near { opacity: 1; }
.pz-near__km { min-width: 4.6em; text-align: center; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #fff; cursor: pointer; }
.pz-near__arr { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; pointer-events: auto; transition: background .15s, color .15s; }
.pz-near__arr svg { width: 60%; height: 60%; display: block; }
.pz-near__arr:hover { background: rgba(var(--a-rgb), .35); color: #fff; }
.pz-near.is-step-l .pz-near__km { animation: pz-near-l .3s var(--spring); }
.pz-near.is-step-r .pz-near__km { animation: pz-near-r .3s var(--spring); }
@keyframes pz-near-l { 0% { transform: translateX(6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes pz-near-r { 0% { transform: translateX(-6px); opacity: .4; } 100% { transform: none; opacity: 1; } }
/* …and the number box beside it: any radius (10–20,000 km), ENTER or leaving the box applies it; it shows the
   current value, lights with the filter, and shakes on nonsense */
.pz-near__box { display: inline-flex; align-items: center; gap: .3em; height: calc(var(--u) * 2.8); padding: 0 .7em 0 .5em; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); opacity: .55; cursor: text; pointer-events: auto; transition: opacity .2s, box-shadow .2s; }
.pz-near__box.is-on, .iw-row.is-focus .pz-near__box { opacity: 1; }
.pz-near__box.is-on { box-shadow: inset 0 0 0 2px rgba(var(--a-rgb), .75); }
.pz-near__box.is-editing { opacity: 1; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px var(--hp-hi); } /* [ui-colors] */
.pz-near__box.is-bad { animation: pz-nudge .5s var(--spring); box-shadow: inset 0 0 0 2px rgba(192, 96, 90, .8); }
.pz-near__in { width: 4.2em; min-width: 0; padding: 0; border: 0; background: transparent; color: #fff; text-align: right; font: 800 var(--fs-s) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; outline: none; -moz-appearance: textfield; appearance: textfield; }
.pz-near__in::-webkit-outer-spin-button, .pz-near__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pz-near__in::placeholder { color: rgba(255, 255, 255, .4); }
.pz-near__unit { font: 700 var(--fs-xs) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .6); }
/* the location screen's one-time "Show others how far away you are?" row (right column, under USE MY LOCATION) */
.pz-loc__share { margin-top: calc(var(--u) * .4); border-radius: calc(var(--u) * .9); background: rgba(22, 25, 38, .55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); pointer-events: auto; }
.pz-loc__share .iw-row__label { font-size: var(--fs-xs); }
.pz-loc__share .pz-socrow__note { white-space: normal; }
.pz-note--near { background: rgba(var(--hp-hi-rgb), .14); border-left-color: var(--hp-hi); } /* [ui-colors] */
.pz-note--near i { color: var(--hp-hi); } /* [ui-colors] */
/* the NEARBY chip, top centre under the area bar's spot: "Nearby only · 200 km · 4 here · 5 hidden" while the filter is on */
.pz-range { position: absolute; left: 50%; top: calc(var(--u) * 6.4); display: none; align-items: center; gap: .45em; padding: .4em .9em .42em .7em; border-radius: 999px; background: rgba(22, 25, 38, .72); color: #fff; font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 0 0 1.5px rgba(var(--hp-hi-rgb), .5); transform: translateX(-50%); pointer-events: none; animation: pz-pop .3s var(--spring); } /* [ui-colors] */
.pz-range.is-on { display: inline-flex; }
.pz-range i { width: 1.25em; height: 1.25em; color: var(--hp-hi); } .pz-range i svg { width: 100%; height: 100%; display: block; } /* [ui-colors] */
.pz-hud.is-modal .pz-range { opacity: 0; }

/* ---- voice notes (src/social/voice.js): the hold-to-record mic with its countdown ring, the voice bubbles ------------ */
.pz-mic { position: relative; display: inline-flex; align-items: center; gap: calc(var(--u) * .6); flex: none; }
.pz-mic.is-off { opacity: .35; pointer-events: none; }
.pz-mic__btn { position: relative; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border: 0; border-radius: 50%; background: var(--a); color: var(--a-ink); cursor: pointer; display: grid; place-items: center; pointer-events: auto; box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .25); transition: transform .25s var(--spring), background .2s; touch-action: none; user-select: none; -webkit-user-select: none; }
.pz-mic__btn:hover, .pz-mic__btn.is-focus { transform: scale(1.08); }
.pz-mic__ico { display: block; width: 58%; height: 58%; } .pz-mic__ico svg { width: 100%; height: 100%; display: block; }
.pz-mic__ringwrap { position: absolute; inset: -6px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pz-mic__ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.pz-mic__track { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 7; }
.pz-mic__arc { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.pz-mic.is-rec .pz-mic__ringwrap { opacity: 1; }
.pz-mic.is-rec .pz-mic__btn { background: var(--hp-rose); color: #fff; animation: pz-mic-pulse 1s ease-in-out infinite; }
.pz-mic.is-busy .pz-mic__btn { opacity: .6; }
@keyframes pz-mic-pulse { 50% { box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .25), 0 0 0 10px rgba(192, 96, 90, .25); } }
.pz-mic__cap { display: flex; flex-direction: column; gap: .15em; line-height: 1.1; white-space: nowrap; }
.pz-mic__cap b { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; color: #8a847a; }
.pz-mic__cap small { font: 600 calc(var(--u) * .85) / 1 'Rubik', sans-serif; color: #9c968c; }
.pz-mic__clock { color: var(--hp-rose) !important; font-variant-numeric: tabular-nums; } .pz-mic__clock em { font-style: normal; color: #9c968c; }
.pz-chats__box .pz-mic__cap { display: none; }   /* in the SAY box: the button alone (the caption shows while recording) */
.pz-chats__box .pz-mic.is-rec .pz-mic__cap, .pz-chats__box .pz-mic.is-busy .pz-mic__cap { display: flex; }
.pz-chats__boxwrap { display: flex; flex-direction: column; }
.pz-chats__box[hidden], .pz-chats__preview[hidden] { display: none; }
.pz-chats__preview { display: flex; align-items: center; gap: calc(var(--u) * .9); margin: calc(var(--u) * .8) calc(var(--u) * 1.2) calc(var(--u) * 1); padding: calc(var(--u) * .5) calc(var(--u) * .7) calc(var(--u) * .5) calc(var(--u) * .8); background: rgba(0, 0, 0, .35); border-radius: calc(var(--u) * 1.2); box-shadow: 0 0 0 3px var(--k), 0 0 0 6px rgba(var(--a-rgb), .5); animation: pz-chat-pop .25s var(--spring); }
.pz-chats__pvbtns, .pz-vnote__btns { display: flex; gap: calc(var(--u) * .5); margin-left: auto; }
/* the bubble: play / stop, the bars, the duration (lit bars follow the playhead) */
.pz-voice { --vc: var(--hp-paper); --vi: var(--k); display: inline-flex; align-items: center; gap: calc(var(--u) * .7); padding: calc(var(--u) * .45) calc(var(--u) * .9) calc(var(--u) * .45) calc(var(--u) * .5); border-radius: calc(var(--u) * 1.3); background: var(--vc); color: var(--vi); box-shadow: 0 0 0 2px var(--k), 0 3px 0 2px rgba(0, 0, 0, .25); min-width: calc(var(--u) * 16); }
.pz-msg .pz-voice { border-radius: calc(var(--u) * 1.3) calc(var(--u) * 1.3) calc(var(--u) * 1.3) calc(var(--u) * .25); }
.pz-msg.is-me .pz-voice, .pz-voice.is-me { --vc: var(--a); --vi: var(--a-ink); }
.pz-msg.is-me .pz-voice { border-radius: calc(var(--u) * 1.3) calc(var(--u) * 1.3) calc(var(--u) * .25) calc(var(--u) * 1.3); }
.pz-voice__play { flex: none; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); border: 0; border-radius: 50%; background: var(--vi); color: var(--vc); cursor: pointer; display: grid; place-items: center; pointer-events: auto; transition: transform .2s var(--spring); }
.pz-voice__play:hover { transform: scale(1.1); } .pz-voice__play svg { width: 60%; height: 60%; display: block; }
.pz-voice.is-played .pz-voice__play { opacity: .7; }
.pz-voice.is-gone { opacity: .6; } .pz-voice.is-gone .pz-voice__play { cursor: default; opacity: .35; }
.pz-voice__mid { display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.pz-voice__lbl { font: 800 var(--fs-xs) / 1 'Rubik', sans-serif; letter-spacing: .1em; opacity: .75; }
.pz-voice__bars { display: flex; align-items: center; gap: 2px; height: calc(var(--u) * 1.9); }
.pz-voice__bars i { width: 3px; border-radius: 2px; background: currentColor; opacity: .35; height: calc(12% + var(--l) * 9.5%); transition: opacity .15s; }
.pz-voice__bars i.is-lit { opacity: 1; }
.pz-voice.is-playing .pz-voice__bars i { animation: none; }
.pz-voice__dur { font: 800 var(--fs-s) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-voice__rep { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border: 0; border-radius: 50%; background: transparent; color: var(--vi); opacity: .45; cursor: pointer; display: grid; place-items: center; pointer-events: auto; }
.pz-voice__rep:hover { opacity: 1; } .pz-voice__rep svg { width: 70%; height: 70%; }
.pz-msg.is-voice { max-width: 82%; }
/* the browse screen's HEAR THE SELLER: big, in the seller's colour */
.pz-hear { display: flex; } .pz-hear[hidden] { display: none; }
.pz-voice--big { --vc: var(--a); --vi: var(--a-ink); width: 100%; padding: calc(var(--u) * .7) calc(var(--u) * 1.3) calc(var(--u) * .7) calc(var(--u) * .7); gap: calc(var(--u) * 1); cursor: pointer; }
.pz-voice--big .pz-voice__play { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); } .pz-voice--big .pz-voice__bars { height: calc(var(--u) * 2.6); flex: 1; } .pz-voice--big .pz-voice__bars i { width: 5px; }
.pz-voice--big .pz-voice__lbl { font-size: var(--fs-s); } .pz-voice--big .pz-voice__dur { font-size: var(--fs-m); }
.pz-voice--big.is-focus { box-shadow: 0 0 0 2px var(--k), 0 0 0 6px #fff, 0 3px 0 6px rgba(0, 0, 0, .25); }
.pz-hear__wait { display: flex; align-items: center; gap: .6em; padding: calc(var(--u) * .6) 0; font: 700 var(--fs-s) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); }
.pz-hear__wait i { width: 1.6em; height: 1.6em; } .pz-hear__wait i svg { width: 100%; height: 100%; }
/* the stall editor's voice note */
.pz-vnote__row { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .06); }
.pz-vnote__row.is-rec .pz-mic__btn { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.pz-vnote__row.is-rec .pz-mic__cap b { color: #fff; font-size: var(--fs-s); } .pz-vnote__row.is-rec .pz-mic__cap small { color: rgba(255, 255, 255, .6); font-size: var(--fs-xs); }
.pz-vnote__row.is-rec .pz-mic__clock em { color: rgba(255, 255, 255, .55); }
/* the speaker on a stall's name bubble when the seller left a voice note (next to the photo badge) */
.pz-stag.has-voice .pz-stag__name::before { content: '🔊 '; font-size: .85em; }
.pz-stag.has-post.has-voice .pz-stag__name::before { content: '📷 🔊 '; }

/* a list of people each with ADD FRIEND: the rows' buttons stay quiet (a paper outline) and only the focused / hovered one
   takes the yellow — six yellow pills in a column would make the highlight the background */
.iw-ui .pz-addfriend.iw-btn--primary { --bg: rgba(243, 236, 224, .08); --fill: var(--hp-hi); --fill-ink: var(--hp-ink); color: var(--hp-paper); /* [ui-colors] */
  box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .35), 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35); }
.iw-ui .pz-addfriend.iw-btn--primary::before { display: none; }
.iw-ui .pz-addfriend.iw-btn--primary.is-focus { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .15), 0 calc(var(--u) * .3) 0 var(--hp-hi-deep); } /* [ui-colors] */

/* toggles: one look for every ON / OFF switch in HOPPA — see "TOGGLES · global" at the end of this file */
/* the pause's YOUR VISIT card: a quiet raised surface, not a yellow wash (the kit tints it with --self) */
.iw-ui .iw-pyou { background: rgba(243, 236, 224, .06); box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .16); }
/* the focused settings / pause row: the yellow ring already says where you are — the row itself lifts to a paper wash, not a yellow (olive on ink) one */
.iw-ui .iw-row.is-focus { background: rgba(243, 236, 224, .08); }

/* ==================================================================== PICK A CITY · the right column (TIME OF DAY tiles · YOU · ENTER!)
   Shares the hero's top and bottom edges (--pz-hero-h is the hero's height, set from _scr_city), 1.6u radii like the hero,
   ink-navy panels, white text, the brand yellow as the only highlight. */
.pz-city__right { gap: calc(var(--u) * .75); min-height: var(--pz-hero-h, auto); }
.pz-city__right > .iw-panel { border-radius: calc(var(--u) * 1.6); }
.pz-city__time { padding: calc(var(--u) * .6) calc(var(--u) * .75) calc(var(--u) * .75); }
.pz-city__right .iw-setrow--stack { gap: calc(var(--u) * .55); padding: calc(var(--u) * .35) calc(var(--u) * .4) calc(var(--u) * .4); border-radius: calc(var(--u) * 1.1); }
.pz-city__right .iw-setrow.is-focus { background: rgba(243, 236, 224, .06); }
.pz-city__right .iw-setrow__label, .pz-city__right .iw-seclabel { font: 900 max(12.5px, calc(var(--u) * 1.02)) / 1 'Rubik', sans-serif; letter-spacing: .14em; color: rgba(255, 255, 255, .92); }
.pz-city__right .iw-setrow__label i, .pz-city__right .iw-seclabel i { width: 1.55em; height: 1.55em; color: var(--hp-hi); } /* [ui-colors] */
/* the four tiles */
.pz-tod { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .7); }
.pz-tod.is-edge-l { animation: pz-tod-edge-l .32s ease-out; }
.pz-tod.is-edge-r { animation: pz-tod-edge-r .32s ease-out; }
@keyframes pz-tod-edge-l { 30% { translate: calc(var(--u) * -.5) 0; } }
@keyframes pz-tod-edge-r { 30% { translate: calc(var(--u) * .5) 0; } }
.pz-tod__tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .3); min-width: 0;
  padding: calc(var(--u) * .6) calc(var(--u) * .4) calc(var(--u) * .55); border-radius: calc(var(--u) * 1.1); background: rgba(243, 236, 224, .07); color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .35); cursor: pointer; pointer-events: auto;
  transition: background .18s, color .18s, box-shadow .18s, translate .18s var(--spring2); }
.pz-tod__tile:hover { background: rgba(243, 236, 224, .13); translate: 0 calc(var(--u) * -.15); }
.pz-tod__ico { display: block; width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); min-width: 28px; min-height: 28px; color: var(--hp-hi); transition: color .18s, scale .3s var(--spring2); } /* [ui-colors] */
.pz-tod__ico svg { width: 100%; height: 100%; }
.pz-tod__lab { font: 400 max(18px, calc(var(--u) * 1.4)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; white-space: nowrap; }
.pz-tod__sub { max-width: 100%; font: 700 max(11px, calc(var(--u) * .78)) / 1.1 'Rubik', sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pz-tod__tile.is-sel { background: var(--hp-hi); color: var(--hp-ink); box-shadow: inset 0 0 0 2px var(--hp-ink), 0 calc(var(--u) * .3) 0 rgba(0, 0, 0, .4); } /* [ui-colors] */
.pz-tod__tile.is-sel .pz-tod__ico { color: var(--hp-ink); scale: 1.08; }
.pz-tod__tile.is-sel .pz-tod__sub { color: rgba(30, 33, 48, .78); }
.pz-tod__tile.is-pop { animation: iw-pop .45s var(--spring2); }
/* YOU: a roomier name field, swatches and emoji on even grids (one row each) */
.pz-city__right .pz-city__you { flex: 1; justify-content: space-between; gap: calc(var(--u) * .25); padding: calc(var(--u) * .75) calc(var(--u) * .75) calc(var(--u) * .6); }
.pz-city__you > .iw-seclabel { padding: 0 calc(var(--u) * .4) calc(var(--u) * .25); }
.pz-city__you .iw-name { padding: calc(var(--u) * .35) calc(var(--u) * .35) calc(var(--u) * .35) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.1); background: rgba(16, 18, 28, .7); }
.pz-city__you .iw-name__label { font-size: max(12px, calc(var(--u) * .92)); opacity: .8; }
.pz-city__you .iw-name__input { height: calc(var(--u) * 3.1); font-size: max(20px, calc(var(--u) * 1.75)); border-radius: calc(var(--u) * .8); }
.pz-city__you .iw-name__pen { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.pz-city__you .pz-swatches { display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: calc(var(--u) * .45); padding: calc(var(--u) * .3) calc(var(--u) * .35); justify-items: center; }
.pz-city__you .pz-swatch { width: min(100%, calc(var(--u) * 2.45)); height: auto; aspect-ratio: 1; }
.pz-city__you .pz-emoji { width: min(100%, calc(var(--u) * 2.9)); height: auto; aspect-ratio: 1; font-size: calc(var(--u) * 1.6); background: rgba(243, 236, 224, .09); }
.pz-city__you .pz-emoji.is-none { font-size: calc(var(--u) * 1.2); }
.pz-city__you .pz-emoji.is-sel { background: var(--hp-hi); box-shadow: 0 0 0 calc(var(--u) * .16) var(--hp-ink), 0 0 0 calc(var(--u) * .32) var(--hp-hi); } /* [ui-colors] */
.pz-city__you .pz-swatch.is-sel { box-shadow: inset 0 calc(var(--u) * -.3) 0 rgba(0, 0, 0, .22), 0 0 0 calc(var(--u) * .16) var(--hp-ink), 0 0 0 calc(var(--u) * .32) var(--hp-hi); } /* [ui-colors] */
.pz-city__right .iw-btn--start { flex: none; height: calc(var(--u) * 5.4); }
/* ENTER! is the strongest thing on the page focused or not: a yellow slab with navy type even before the cursor lands on it */
.pz-city__right .iw-btn--start:not(.is-focus) { --bg: var(--hp-hi); color: var(--hp-ink); box-shadow: inset 0 0 0 2px var(--hp-ink), 0 calc(var(--u) * .4) 0 rgba(0, 0, 0, .38); } /* [ui-colors] */
/* ==================================================================== end PICK A CITY right column */

/* ==================================================================== MENU · right panel (menus-plaza.js _scr_plazapause / _plzSocialRows)
   The in-city MENU's right panel: the city name big with a small LIVE · NIGHT chip, then Settings' tabs, rows and
   footer (the .hs-* classes of "SETTINGS · HOPPA"; the panel carries .hs-set for them) — see "MENU · tabs" below.
   Here: the head, the Nearby only radius pill and the Location pen. Ink-navy and paper neutrals; the yellow only marks
   things (the picked tab, the focus ring, an ON knob). */
.pz-mp.pz-pcity { width: calc(var(--u) * 41); gap: calc(var(--u) * 1.1); padding: calc(var(--u) * 1.8) calc(var(--u) * 1.8) calc(var(--u) * 1.3); }
.pz-mp__head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1); min-width: 0; }
.pz-mp__city { display: flex; align-items: center; gap: .4em; min-width: 0; font: 400 max(22px, calc(var(--u) * 2.1)) / 1.05 'Titan One', sans-serif; color: var(--hp-paper); }
.pz-mp__city span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mp__city i { display: block; flex: none; width: .95em; height: .95em; color: var(--hp-hi); } /* [ui-colors] */
.pz-mp__city i svg, .pz-mp__time i svg, .pz-mp__edit svg, .pz-mp__arr svg { display: block; width: 100%; height: 100%; }
.pz-mp__time { display: inline-flex; flex: none; align-items: center; gap: .45em; padding: .45em .8em; border-radius: 999px; background: rgba(243, 236, 224, .08);
  font: 800 max(10px, calc(var(--u) * .76)) / 1 'Rubik', sans-serif; letter-spacing: .12em; color: rgba(243, 236, 224, .8); white-space: nowrap; }
.pz-mp__time i { display: block; width: 1.25em; height: 1.25em; color: var(--hp-hi); } /* [ui-colors] */
/* the toggles: the one global size and look ("TOGGLES · global" at the end of this file) */
/* Nearby only's radius: one pill, ‹ [ 75 ] km › — the number is typed, the arrows step the presets */
.pz-mp__km { display: inline-flex; align-items: center; height: calc(var(--u) * 2.5); padding: 0 .2em; border-radius: 999px; background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .12); opacity: .6; transition: opacity .2s, box-shadow .2s; }
.pz-mp__km.is-on, .iw-row.is-focus .pz-mp__km { opacity: 1; }
.pz-mp__arr { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 2); height: calc(var(--u) * 2); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(243, 236, 224, .7); cursor: pointer; pointer-events: auto; transition: background .15s, color .15s; }
.pz-mp__arr svg { width: 58%; height: 58%; }
.pz-mp__arr:hover { background: rgba(243, 236, 224, .14); color: #fff; }
.pz-mp__kmbox { display: inline-flex; align-items: baseline; gap: .25em; padding: .2em .35em; border-radius: .5em; cursor: text; pointer-events: auto; transition: background .15s, box-shadow .15s; }
.pz-mp__kmbox:hover { background: rgba(243, 236, 224, .08); }
.pz-mp__kmbox.is-editing { background: rgba(243, 236, 224, .12); box-shadow: inset 0 0 0 2px var(--hp-hi); } /* [ui-colors] */
.pz-mp__kmbox.is-bad { animation: pz-nudge .5s var(--spring); }
.pz-mp .pz-near__in { width: 3.4em; text-align: right; font: 800 max(13px, calc(var(--u) * 1.02)) / 1 'Rubik', sans-serif; }
.pz-mp__unit { font: 700 max(10px, calc(var(--u) * .72)) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }
.pz-mp__km.is-step-l .pz-near__in { animation: pz-near-l .3s var(--spring); }
.pz-mp__km.is-step-r .pz-near__in { animation: pz-near-r .3s var(--spring); }
/* Location · Hong Kong + a pen */
.pz-mp__geo { font-weight: 600; color: rgba(243, 236, 224, .62); }
.pz-mp__geo::before { content: '·'; margin: 0 .5em; }
.pz-mp__geo.is-unset { font-style: italic; }
.pz-mp__edit { display: flex; align-items: center; justify-content: center; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); border-radius: 50%;
  background: rgba(243, 236, 224, .1); color: var(--hp-paper); --k: var(--hp-ink); transition: background .15s, color .15s; }
.pz-mp__edit svg { width: 56%; height: 56%; }
.pz-mp__row--geo { cursor: pointer; }
.pz-mp__row--geo:hover .pz-mp__edit, .pz-mp__row--geo.is-focus .pz-mp__edit { background: var(--hp-hi); color: var(--hp-ink); --k: var(--hp-hi); } /* [ui-colors] */
/* ==================================================================== end MENU · right panel */

/* ==================================================================== MENU · tabs (menus-plaza.js _scr_plazapause)
   The pause panel borrows Settings wholesale (.hs-tabs / .hs-tab / .hs-rows / .hs-row / .hs-foot / .hs-saved, scoped by
   .hs-set on the panel); only the fit to this narrower, vertically centred panel lives here. */
.pz-mp.pz-pcity.hs-set { width: calc(var(--u) * 44); max-height: calc(100dvh - var(--u) * 16); gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4) calc(var(--u) * 1.2); }
.pz-mp .pz-mp__head { padding: 0 calc(var(--u) * .3); }
/* the tab glyphs' cut-outs (the smile's face, the pin's hole) show the slab's yellow, not ink on ink */
.pz-mp .hs-tab.is-sel { --k: var(--hp-hi); } /* [ui-colors] */
.pz-mp .hs-rows { margin-top: 0; padding-left: 0; padding-right: 0; }
.pz-mp .hs-row[hidden], .pz-mp .pz-mp__pane[hidden] { display: none; }
.pz-mp .hs-row__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mp .hs-foot { margin-top: 0; }
.pz-mp .hs-saved { min-width: 0; }
.pz-mp .hs-saved span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mp .hs-saved.is-row { color: var(--hp-paper); }
.pz-mp .hs-saved.is-row i { display: none; }
/* the radius pill and the pen at the rows' size */
.pz-mp .pz-mp__km { height: max(40px, calc(var(--u) * 3)); }
.pz-mp .pz-mp__arr { width: max(32px, calc(var(--u) * 2.4)); height: max(32px, calc(var(--u) * 2.4)); }
.pz-mp .pz-near__in { font-size: max(17px, calc(var(--u) * 1.3)); }
.pz-mp .pz-mp__unit { font-size: max(14px, calc(var(--u) * 1)); }
.pz-mp .pz-mp__edit { width: max(40px, calc(var(--u) * 3)); height: max(40px, calc(var(--u) * 3)); }
/* city toasts while a menu screen is up (social/ui.js .pz-over.is-menu): one line high in the top-right corner, above
   every screen's content (the headers sit top-left, the panels start lower) — and only the newest one, so a burst never
   stacks down into a panel */
.pz-over.is-menu .pz-toasts { top: calc(var(--u) * 1.4); }
.pz-over.is-menu .pz-toast:not(:last-child) { display: none; }
/* ==================================================================== end MENU · tabs */

/* ==================================================================== TOGGLES · global
   Every ON / OFF switch in HOPPA (Settings, the in-city MENU's right panel, the stall editor, the share switches…) is
   the kit's .iw-toggle (menus.js _toggle); this block gives them ONE size and look (arena.html never loads this file, so
   the arena keeps its own). A pill track with a round knob; the word sits inside the track, opposite the knob, big and
   bold. ON: a sand track, the yellow knob on the right, navy "ON". OFF: a muted ink track, a paper knob on the left,
   muted "OFF". The knob slides, the colours cross-fade; the focused row (or keyboard focus) rings the track in yellow. */
.iw-ui { --tg-w: max(68px, calc(var(--u) * 6.4)); --tg-h: max(30px, calc(var(--u) * 2.75)); --tg-pad: max(3px, calc(var(--u) * .28)); --tg-k: calc(var(--tg-h) - var(--tg-pad) * 2); }
.iw-ui .iw-toggle { width: var(--tg-w); height: var(--tg-h); border-radius: 999px; background: rgba(12, 14, 22, .55);
  box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .2), inset 0 2px 4px rgba(0, 0, 0, .3); outline: none;
  transition: background .28s var(--out), box-shadow .2s; }
.iw-ui .iw-toggle.is-on { background: var(--hp-sand); box-shadow: inset 0 0 0 1.5px rgba(30, 33, 48, .1), inset 0 -2px 0 rgba(30, 33, 48, .1); }
.iw-ui .iw-toggle__knob { top: var(--tg-pad); left: var(--tg-pad); width: var(--tg-k); height: var(--tg-k); background: var(--hp-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4), inset 0 -2px 0 rgba(30, 33, 48, .12); transition: transform .38s var(--spring), background .28s, box-shadow .28s; }
.iw-ui .iw-toggle.is-on .iw-toggle__knob { transform: translateX(calc(var(--tg-w) - var(--tg-k) - var(--tg-pad) * 2)); background: var(--hp-hi); /* [ui-colors] */
  box-shadow: 0 0 0 1.5px rgba(30, 33, 48, .55), 0 1px 3px rgba(30, 33, 48, .35), inset 0 -2px 0 rgba(30, 33, 48, .14); }
/* the word: centred in the free part of the track (knob side left out), 1.5–1.8× the old size */
.iw-ui .iw-toggle__txt { font: 800 max(14px, calc(var(--u) * 1.2)) / 1 'Rubik', sans-serif; letter-spacing: .04em; text-align: center;
  transition: opacity .22s, translate .3s var(--out); }
.iw-ui .iw-toggle__off { left: calc(var(--tg-k) + var(--tg-pad)); right: 0; color: rgba(243, 236, 224, .62); opacity: 1; }
.iw-ui .iw-toggle__on { left: 0; right: calc(var(--tg-k) + var(--tg-pad)); color: var(--hp-ink); opacity: 0; translate: -.3em 0; }
.iw-ui .iw-toggle.is-on .iw-toggle__off { opacity: 0; translate: .3em 0; }
.iw-ui .iw-toggle.is-on .iw-toggle__on { opacity: 1; translate: 0 0; }
.iw-ui .iw-toggle__ink { display: none; }   /* (the kit's flash ripple: noise on a quiet switch) */
.iw-ui .iw-toggle.is-flip .iw-toggle__knob { animation: none; }
/* focus: a yellow ring round the track (the focused settings / MENU row, or keyboard focus) */
.iw-ui .iw-row.is-focus .iw-toggle, .iw-ui .iw-setrow.is-focus .iw-toggle, .iw-ui .iw-toggle:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(243, 236, 224, .2), 0 0 0 2px var(--hp-ink), 0 0 0 4px var(--hp-hi); } /* [ui-colors] */
.iw-ui .iw-row.is-focus .iw-toggle.is-on, .iw-ui .iw-setrow.is-focus .iw-toggle.is-on, .iw-ui .iw-toggle.is-on:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(30, 33, 48, .1), 0 0 0 2px var(--hp-ink), 0 0 0 4px var(--hp-hi); } /* [ui-colors] */
.iw-ui .iw-toggle:hover:not(.is-on) { background: rgba(12, 14, 22, .7); }
@media (prefers-reduced-motion: reduce) { .iw-ui .iw-toggle, .iw-ui .iw-toggle__knob, .iw-ui .iw-toggle__txt { transition: none; } }
/* ==================================================================== end TOGGLES · global */

/* ==================================================================== HEAD BUBBLES · redesign
   Over the heads, quiet and modern: the words a person said sit in a soft paper pill (Rubik medium, ink type, at most two
   lines then …) with a small neat tail; body and tail are ONE opaque shape (the tail tucks 1 px under the body, same
   paper) and the hairline + soft shadow are drop-shadow filters on the whole element, so no seam at 1× or 2×. It pops in
   gently and fades out (display is transitioned discretely, so a gone bubble takes no room and a keeper's stall tag can
   settle back). The name tag and the stall tag get the same restraint: no outline, no hard drop, a soft shadow. */
.pz-tag { gap: max(3px, calc(var(--u) * .3)); }
.pz-tag__bubble { position: relative; display: none; max-width: calc(var(--u) * 19); margin-bottom: max(6px, calc(var(--u) * .5));
  padding: calc(var(--u) * .5) calc(var(--u) * .85) calc(var(--u) * .55); border-radius: calc(var(--u) * 1.05); background: #faf6ee; color: var(--hp-ink);
  font: 500 max(12px, calc(var(--u) * 1.05)) / 1.32 'Rubik', sans-serif; letter-spacing: .005em; text-align: center; word-break: break-word;
  filter: drop-shadow(0 0 .6px rgba(30, 33, 48, .45)) drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .45) rgba(10, 12, 20, .28));
  opacity: 0; transform: translateY(4px) scale(.94); transform-origin: 50% 100%;
  transition: opacity .32s ease, transform .32s var(--out), display .32s allow-discrete; animation: none; }
.pz-tag__bubble.is-on { display: block; opacity: 1; transform: none; transition: opacity .2s ease, transform .34s var(--spring), display 0s allow-discrete; }
@starting-style { .pz-tag__bubble.is-on { opacity: 0; transform: translateY(6px) scale(.86); } }
.pz-tag__say { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pz-tag__bubble::after { --tl: max(5px, calc(var(--u) * .42)); content: ''; position: absolute; left: 50%; top: calc(100% - 1px); width: 0; height: 0; margin-left: calc(var(--tl) * -1); border: var(--tl) solid transparent; border-top: calc(var(--tl) + 1px) solid #faf6ee; border-bottom: 0; }
/* the name: a small ink-glass pill, paper type, the colour dot; no ring, no hard drop */
.pz-tag__name { font: 700 max(11px, calc(var(--u) * 1.02)) / 1 'Rubik', sans-serif; letter-spacing: .02em; padding: .36em .8em .38em 1.5em;
  background: radial-gradient(circle at .78em 50%, var(--c) 0 .28em, transparent .34em), rgba(22, 25, 38, .74); box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
.pz-tag.is-target .pz-tag__name { box-shadow: 0 0 0 1.5px var(--hp-paper), 0 1px 4px rgba(0, 0, 0, .3); }
.pz-tag__geo { box-shadow: inset 2px 0 0 var(--c), 0 1px 3px rgba(0, 0, 0, .25); background: rgba(22, 25, 38, .66); }
/* the stall's tag: the same paper pill as the bubble (Titan One stays: it is a sign), the owner's dot, a soft shadow */
.pz-stag__name { font-size: calc(var(--u) * 1.22); padding: .26em .85em .3em 1.5em; border-radius: 999px; margin-bottom: 6px;
  background: radial-gradient(circle at .8em 50%, var(--c) 0 .3em, transparent .37em), #faf6ee;
  filter: drop-shadow(0 0 .6px rgba(30, 33, 48, .45)) drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .45) rgba(10, 12, 20, .28)); }
.pz-stag__name::after { --tl: max(5px, calc(var(--u) * .42)); top: calc(100% - 1px); bottom: auto; margin-left: calc(var(--tl) * -1); border-width: calc(var(--tl) + 1px) var(--tl) 0; border-top-color: #faf6ee; }
.pz-stag.is-hot .pz-stag__name, .pz-stag.is-fire .pz-stag__name { filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 calc(var(--u) * .2) calc(var(--u) * .5) rgba(10, 12, 20, .3)); } /* [ui-colors] (no glow) */
.pz-stag__heat, .pz-stag__top { -webkit-text-stroke: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pz-stag.is-hot .pz-stag__heat, .pz-stag.is-fire .pz-stag__heat, .pz-stag.is-top .pz-stag__top { box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } /* [ui-colors] (no glow) */
@media (prefers-reduced-motion: reduce) { .pz-tag__bubble, .pz-tag__bubble.is-on { transition: none; } }
/* ==================================================================== end HEAD BUBBLES · redesign */

/* ==================================================================== WHISPER · autocomplete
   "/w" in the SAY pill: a small ink-glass list floats just above the pill (over the log, never shifting it) — the people
   within 6 m, nearest first: their colour dot, the name (the typed part bold), the metres muted on the right. The picked
   row wears a paper wash and a yellow edge; nobody close = one muted line. */
.pz-chat__form { position: relative; }
.pz-wsug { position: absolute; left: 0; bottom: calc(100% + var(--u) * .5); z-index: 2; min-width: calc(var(--u) * 15); max-width: 100%; padding: calc(var(--u) * .35);
  border-radius: calc(var(--u) * 1); background: #1b1e2c; box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .12), 0 calc(var(--u) * .3) calc(var(--u) * 1) rgba(0, 0, 0, .35);
  pointer-events: auto; animation: pz-wsug-in .18s var(--out); }
.pz-wsug[hidden] { display: none; }
@keyframes pz-wsug-in { from { opacity: 0; transform: translateY(6px); } }
.pz-wsug__head { padding: calc(var(--u) * .3) calc(var(--u) * .6) calc(var(--u) * .35); font: 800 max(10px, calc(var(--u) * .72)) / 1 'Rubik', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 236, 224, .5); }
.pz-wsug__row { display: flex; align-items: center; gap: calc(var(--u) * .6); width: 100%; padding: calc(var(--u) * .45) calc(var(--u) * .7); border: 0; border-radius: calc(var(--u) * .7);
  position: relative; background: transparent; color: var(--hp-paper); text-align: left; cursor: pointer; font: 400 max(13px, calc(var(--u) * 1.1)) / 1.1 'Rubik', sans-serif; transition: background .12s; }
.pz-wsug__row:hover { background: rgba(243, 236, 224, .07); }
.pz-wsug__row.is-sel { background: rgba(243, 236, 224, .12); }
.pz-wsug__row.is-sel::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 2px; background: var(--hp-hi); } /* [ui-colors] */
.pz-wsug__dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--c); }
.pz-wsug__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-wsug__name b { font-weight: 800; }
.pz-wsug__m { flex: none; font: 600 .8em / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(243, 236, 224, .5); }
.pz-wsug__none { padding: calc(var(--u) * .35) calc(var(--u) * .7) calc(var(--u) * .5); font: italic 500 max(12px, calc(var(--u) * 1)) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .55); }
/* ==================================================================== end WHISPER · autocomplete */

/* ==================================================================== SETTINGS · HOPPA (menus-plaza.js _scr_settings)
   One centred ink panel: three big tabs (SOUND · DISPLAY · CONTROLS), then tall rows — the label at body size on the
   left (an occasional one-line note under it), the control on the right with its value always shown. QUALITY and the
   advanced pickers are PICK A CITY's tiles. Advanced folds open under DISPLAY. The rows scroll inside the panel when
   the screen is short. Paper / sand neutrals; the yellow only marks things (the picked tab and tile, the focus ring). */
.hs-set .hs-panel { position: absolute; left: 50%; top: calc(var(--u) * 8.6); max-height: calc(100dvh - var(--u) * 13.2); width: min(calc(var(--u) * 62), calc(100vw - 32px)); translate: -50% 0;
  display: flex; flex-direction: column; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.6); }
.hs-set .iw-scrim-left { width: 100%; }
/* tabs: three wide buttons, the picked one a yellow slab */
.hs-tabs { display: flex; align-items: center; gap: calc(var(--u) * .5); flex: none; padding: calc(var(--u) * .45); border-radius: calc(var(--u) * 1.2); background: rgba(0, 0, 0, .3); }
.hs-tabs.is-edge-l { animation: pz-tod-edge-l .32s ease-out; }
.hs-tabs.is-edge-r { animation: pz-tod-edge-r .32s ease-out; }
.hs-tabs__key { flex: none; padding: 0 calc(var(--u) * .35); font-size: max(15px, calc(var(--u) * 1.15)); }
.hs-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: .55em; height: max(48px, calc(var(--u) * 4)); border: 0; border-radius: calc(var(--u) * .9);
  background: transparent; color: rgba(243, 236, 224, .78); font: 400 max(18px, calc(var(--u) * 1.45)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .05em;
  cursor: pointer; pointer-events: auto; transition: background .18s, color .18s; }
.hs-tab i { display: block; width: 1.2em; height: 1.2em; }
.hs-tab i svg { width: 100%; height: 100%; }
.hs-tab:hover { background: rgba(243, 236, 224, .08); color: #fff; }
.hs-tab.is-sel { background: var(--hp-hi); color: var(--hp-ink); box-shadow: inset 0 0 0 2px var(--hp-ink), 0 calc(var(--u) * .25) 0 rgba(0, 0, 0, .35); } /* [ui-colors] */
/* the rows: scroll inside the panel if they run out of room */
.hs-rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: calc(var(--u) * .7); padding: 2px 6px 2px 4px; scrollbar-width: thin; scrollbar-color: rgba(243, 236, 224, .25) transparent; }
.hs-set .hs-row { min-height: max(46px, calc(var(--u) * 3.4)); gap: calc(var(--u) * 2); padding: calc(var(--u) * .55) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.1);
  background: rgba(243, 236, 224, .045); transform: none; }
.hs-set .hs-row + .hs-row, .hs-set .hs-adv { margin-top: calc(var(--u) * .35); }
.hs-set .hs-row.is-focus { background: rgba(243, 236, 224, .1); transform: none; }
.hs-row__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.hs-row__label { font: 700 max(17px, calc(var(--u) * 1.35)) / 1.15 'Rubik', sans-serif; color: var(--hp-paper); }
.hs-row__help { font: 500 max(14px, calc(var(--u) * 1.05)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .66); }
.hs-row__ctrl { flex: none; }
/* sliders: a roomier track, the number big and readable */
.hs-set .iw-slider { width: calc(var(--u) * 24); min-width: 220px; gap: calc(var(--u) * 1.2); }
.hs-set .iw-slider__val { width: 3.6em; font-size: max(18px, calc(var(--u) * 1.45)); color: var(--hp-paper); }
/* QUALITY (and the advanced pickers): the label above, the tiles full width underneath */
.hs-set .hs-row--stack { flex-direction: column; align-items: stretch; gap: calc(var(--u) * .7); padding-top: calc(var(--u) * .9); padding-bottom: calc(var(--u) * .9); }
.hs-set .hs-row--stack .hs-row__ctrl { display: block; }
.hs-tiles { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: calc(var(--u) * .6); }
.hs-tiles .hs-tile { min-height: max(52px, calc(var(--u) * 4.2)); }
.hs-tiles .pz-tod__sub { font-size: max(14px, calc(var(--u) * 1)); }
.hs-tiles--compact .hs-tile { min-height: max(46px, calc(var(--u) * 3.4)); padding: calc(var(--u) * .4); }
.hs-tiles--compact .pz-tod__lab { font-size: max(17px, calc(var(--u) * 1.3)); }
.hs-set .hs-row.is-focus .pz-tod__tile:not(.is-sel) { background: rgba(243, 236, 224, .1); }
/* links: OPEN › / SHOW ⌄ */
.hs-link { display: inline-flex; align-items: center; gap: .45em; font: 800 max(16px, calc(var(--u) * 1.2)) / 1 'Rubik', sans-serif; letter-spacing: .08em; color: rgba(243, 236, 224, .82); }
.hs-link i { display: block; width: 1.3em; height: 1.3em; }
.hs-link i svg { width: 100%; height: 100%; }
.hs-chev { rotate: 90deg; transition: rotate .25s var(--spring2); }
.hs-row--more.is-open .hs-chev { rotate: -90deg; }
.hs-set .hs-row.is-focus .hs-link { color: var(--hp-hi); } /* [ui-colors] */
/* Advanced: the folded group, a little inset with a sand edge */
.hs-set .hs-row--more { background: transparent; box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .1); }
.hs-adv { padding: calc(var(--u) * .45); border-radius: calc(var(--u) * 1.3); background: rgba(0, 0, 0, .2); animation: hs-adv-in .3s var(--out); }
@keyframes hs-adv-in { from { opacity: 0; translate: 0 -6px; } }
/* the foot: "saved" (neutral, its check in yellow) and RESET <TAB> */
.hs-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * .9); padding: calc(var(--u) * .9) calc(var(--u) * .3) 0; border-top: 1px solid rgba(243, 236, 224, .1); }
.hs-saved { display: inline-flex; align-items: center; gap: .5em; font: 600 max(15px, calc(var(--u) * 1.1)) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .72); }
.hs-saved i { display: block; width: 1.3em; height: 1.3em; color: var(--hp-hi); } /* [ui-colors] */
.hs-saved i svg { width: 100%; height: 100%; }
.hs-saved.is-on { animation: iw-pop .45s var(--spring2); color: var(--hp-paper); }
.hs-set .hs-reset { font-size: max(15px, calc(var(--u) * 1.1)); }
@media (prefers-reduced-motion: reduce) { .hs-adv, .hs-chev { animation: none; transition: none; } }
/* ==================================================================== end SETTINGS · HOPPA */
/* ==================================================================== FRIENDS · MESSAGES (menus-plaza.js _scr_plazafriends / _scr_plazachats)
   Settings' design language (the screens carry .hs-set, so the .hs-* tabs / rows / foot above apply): one centred ink
   panel, body-size type (nothing under 14px), paper / sand neutrals, the yellow only as the highlight (the picked tab,
   VISIT while they are in this city, ACCEPT, the unread dots, a focused pill), rose only for the destructive actions in
   the ⋯ sheet. Every action is a pill of one size. Both panels stop clear of the prompts pill (bottom right). */
.pz-fm { --fm-bottom: max(80px, calc(var(--u) * 7.2)); }
.pz-fm .hs-panel { max-height: calc(100dvh - var(--u) * 8.6 - var(--fm-bottom)); }
.pz-fm--friends .hs-panel { width: min(calc(var(--u) * 70), calc(100vw - 32px)); }
/* the tabs: a count chip after the label (yellow when something waits: incoming requests) */
.pz-fm .hs-tab.is-sel { --k: var(--hp-hi); } /* [ui-colors] */
.pz-fm__n { display: inline-block; min-width: 1.9em; padding: .3em .5em; border-radius: 999px; background: rgba(243, 236, 224, .12); color: inherit;
  font: 800 max(13px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; letter-spacing: 0; text-align: center; font-variant-numeric: tabular-nums; }
.pz-fm__n[hidden] { display: none; }
.hs-tab.is-sel .pz-fm__n { background: rgba(30, 33, 48, .16); }
.pz-fm__n--hot { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.hs-tab.is-sel .pz-fm__n--hot { background: var(--hp-ink); color: var(--hp-hi); } /* [ui-colors] */
/* a person: the colour dot, the name, a quiet line, the pills; the row lights while one of its pills has the focus */
.pz-fm .pz-fr { justify-content: flex-start; gap: calc(var(--u) * 1); min-height: max(58px, calc(var(--u) * 4.5)); padding-right: calc(var(--u) * .7); cursor: default; }
.pz-fm .pz-fr:has(.is-focus), .pz-fm .pz-fr:hover { background: rgba(243, 236, 224, .09); }
.pz-fm .pz-fr .hs-row__text { flex: 1; }
.pz-fr__dot { flex: none; width: max(12px, calc(var(--u) * .9)); height: max(12px, calc(var(--u) * .9)); border-radius: 50%; background: var(--c, #6b6580); box-shadow: 0 0 0 2px rgba(22, 25, 38, .5); }
.pz-fr__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-fr__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-fr.is-here .pz-fr__sub { color: rgba(243, 236, 224, .82); }
.pz-fr--blocked .pz-fr__name { color: rgba(243, 236, 224, .62); }
.pz-fr__acts { display: flex; align-items: center; gap: calc(var(--u) * .55); }
.pz-fm .pz-fr__fold { cursor: pointer; }
.pz-fr__chip { display: inline-flex; align-items: center; gap: .5em; height: max(40px, calc(var(--u) * 3)); padding: 0 max(14px, calc(var(--u) * 1.15)); border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .12); font: 800 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(243, 236, 224, .55); }
.pz-fr__chip i { display: block; width: 1.35em; height: 1.35em; }
.pz-fr__chip i svg { width: 100%; height: 100%; }
.pz-fm .hs-adv .pz-fr { background: transparent; }
/* the pills: one height, round ends, the kit's ink-fill focus without the slide */
.pz-fm .pz-pill { height: max(40px, calc(var(--u) * 3)); padding: 0 max(14px, calc(var(--u) * 1.15)); border-radius: 999px; gap: .5em;
  font: 800 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; letter-spacing: .06em; transform: none; }
.pz-fm .pz-pill .iw-btn__icon { width: 1.35em; height: 1.35em; }
.pz-fm .pz-pill.is-focus { transform: scale(1.04); }
.pz-fm .pz-pill.pz-btn--off { opacity: .45; filter: saturate(.2); }
.pz-fm .pz-more { width: max(40px, calc(var(--u) * 3)); padding: 0; justify-content: center; }
.pz-fm .pz-more .iw-btn__text { display: none; }
.pz-fm .pz-more .iw-btn__icon { width: 1.4em; height: 1.4em; }
.pz-fm .pz-more .iw-btn__icon svg { filter: none; }
.pz-fm .pz-pill .pz-fm__n { margin-left: .2em; }
/* empty states: one friendly line */
.pz-fm__empty { display: flex; align-items: center; justify-content: center; gap: .7em; padding: calc(var(--u) * 2.6) calc(var(--u) * 1.2); text-align: center;
  font: 500 max(16px, calc(var(--u) * 1.25)) / 1.35 'Rubik', sans-serif; color: rgba(243, 236, 224, .7); }
.pz-fm__empty i { flex: none; display: block; width: 1.5em; height: 1.5em; color: rgba(243, 236, 224, .4); }
.pz-fm__empty i svg { width: 100%; height: 100%; }
.pz-fm__foot { min-width: 0; }
.pz-fm__foot span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the ⋯ sheet (the kit's modal): the actions stacked, CANCEL last */
.pz-fm-sheet .iw-modal__btns { flex-direction: column; align-items: stretch; width: min(calc(var(--u) * 28), 100%); margin: 0 auto; gap: calc(var(--u) * .7); }
.pz-fm-sheet .iw-modal__btns .iw-btn { justify-content: center; }
.pz-fm-sheet .iw-modal__title { margin-bottom: calc(var(--u) * 1.4); }
/* MESSAGES: one wide panel, the chats on the left, the thread on the right */
.pz-fm--chats .hs-panel.pz-cm { width: min(calc(var(--u) * 92), calc(100vw - 32px)); height: calc(100dvh - var(--u) * 8.6 - var(--fm-bottom)); flex-direction: row; gap: calc(var(--u) * 1.1); }
.pz-cm__side { flex: none; width: clamp(240px, calc(var(--u) * 30), 40%); display: flex; flex-direction: column; min-height: 0; }
.pz-cm__sidehead { flex: none; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * .5) calc(var(--u) * .9) calc(var(--u) * .9);
  font: 400 max(18px, calc(var(--u) * 1.45)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: rgba(243, 236, 224, .78); }
.pz-cm__sidehead .pz-fm__n { color: rgba(243, 236, 224, .78); }
.pz-cm__rows { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--u) * .35); padding: 2px 4px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(243, 236, 224, .25) transparent; }
.pz-cm__row { position: relative; flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1); width: 100%; min-height: max(60px, calc(var(--u) * 4.7)); padding: calc(var(--u) * .6) calc(var(--u) * 1);
  border: 0; border-radius: calc(var(--u) * 1.1); background: rgba(243, 236, 224, .045); color: var(--hp-paper); text-align: left; cursor: pointer; pointer-events: auto; transition: background .18s; }
.pz-cm__row:hover, .pz-cm__row.is-focus { background: rgba(243, 236, 224, .1); }
.pz-cm__row.is-sel { background: rgba(243, 236, 224, .14); }
.pz-cm__row.is-sel::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 4px; border-radius: 2px; background: var(--hp-hi); } /* [ui-colors] */
.pz-cm__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35em; }
.pz-cm__top { display: flex; align-items: baseline; gap: .6em; min-width: 0; }
.pz-cm__top b { min-width: 0; font: 700 max(17px, calc(var(--u) * 1.35)) / 1.15 'Rubik', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cm__top small { flex: none; margin-left: auto; font: 500 max(14px, calc(var(--u) * 1)) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(243, 236, 224, .55); }
.pz-cm__last { font: 500 max(14px, calc(var(--u) * 1.05)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cm__row.has-unread .pz-cm__last { color: var(--hp-paper); font-weight: 600; }
.pz-cm__unread { flex: none; min-width: max(22px, calc(var(--u) * 1.75)); height: max(22px, calc(var(--u) * 1.75)); padding: 0 .4em; border-radius: 999px; background: var(--hp-hi); color: var(--hp-ink); /* [ui-colors] */
  font: 800 max(13px, calc(var(--u) * .95)) / max(22px, calc(var(--u) * 1.75)) 'Rubik', sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
/* the thread: a quiet well inside the panel */
.pz-cm__thread { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; border-radius: calc(var(--u) * 1.2); background: rgba(0, 0, 0, .22); overflow: hidden; }
.pz-cm__none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7em; font: 500 max(16px, calc(var(--u) * 1.25)) / 1.3 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }
.pz-cm__none i { display: block; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); color: rgba(243, 236, 224, .3); }
.pz-cm__none i svg { width: 100%; height: 100%; }
.pz-cm__head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1); min-height: max(64px, calc(var(--u) * 5)); padding: calc(var(--u) * .7) calc(var(--u) * .9) calc(var(--u) * .7) calc(var(--u) * 1.3); border-bottom: 1px solid rgba(243, 236, 224, .1); }
.pz-cm__who { flex: 1; min-width: 0; }
.pz-cm__who .hs-row__label { font-size: max(19px, calc(var(--u) * 1.55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cm__who .hs-row__help { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-cm__tools { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .55); }
.pz-cm__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(var(--u) * .35); padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  scrollbar-width: thin; scrollbar-color: rgba(243, 236, 224, .25) transparent; }
.pz-cm__day { align-self: center; margin: calc(var(--u) * .7) 0 calc(var(--u) * .3); font: 600 max(14px, calc(var(--u) * 1)) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .5); }
.pz-cm__quote { flex: none; align-self: stretch; display: flex; align-items: flex-start; gap: .6em; padding: calc(var(--u) * .7) calc(var(--u) * 1); border-radius: calc(var(--u) * 1); background: rgba(243, 236, 224, .06);
  font: 500 max(15px, calc(var(--u) * 1.1)) / 1.35 'Rubik', sans-serif; color: rgba(243, 236, 224, .78); }
.pz-cm__quote b { font-weight: 700; color: var(--hp-paper); }
.pz-cm__quote i { flex: none; display: block; width: 1.3em; height: 1.3em; color: rgba(243, 236, 224, .5); }
.pz-cm__quote i svg { width: 100%; height: 100%; }
/* bubbles: mine right in paper, theirs left in ink glass; the time quiet under the last of a run */
.pz-cm .pz-msg { flex: none; max-width: 72%; gap: .3em; }
.pz-cm .pz-msg.is-end { margin-bottom: calc(var(--u) * .45); }
.iw-ui .pz-cm .pz-msg__bubble { padding: calc(var(--u) * .6) calc(var(--u) * 1.05); border-radius: calc(var(--u) * 1.25) calc(var(--u) * 1.25) calc(var(--u) * 1.25) calc(var(--u) * .35);
  background: #353a50; color: var(--hp-paper); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .08); font: 500 max(16px, calc(var(--u) * 1.25)) / 1.4 'Rubik', sans-serif; }
.iw-ui .pz-cm .pz-msg.is-me .pz-msg__bubble { background: var(--hp-paper); color: var(--hp-ink); box-shadow: none; border-radius: calc(var(--u) * 1.25) calc(var(--u) * 1.25) calc(var(--u) * .35) calc(var(--u) * 1.25); }
.pz-cm .pz-msg__time { padding: 0 .4em; font: 500 max(14px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(243, 236, 224, .45); }
.iw-ui .pz-cm .pz-voice { --vc: #353a50; --vi: var(--hp-paper); min-width: calc(var(--u) * 18); padding: calc(var(--u) * .45) calc(var(--u) * 1) calc(var(--u) * .45) calc(var(--u) * .5); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .08); }
.iw-ui .pz-cm .pz-msg.is-me .pz-voice, .iw-ui .pz-cm .pz-voice.is-me { --vc: var(--hp-paper); --vi: var(--hp-ink); box-shadow: none; }
.pz-cm .pz-voice__play { width: max(34px, calc(var(--u) * 2.7)); height: max(34px, calc(var(--u) * 2.7)); }
.pz-cm .pz-voice__dur { font: 600 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; }
.pz-cm .pz-voice__lbl { font: 700 max(13px, calc(var(--u) * .9)) / 1 'Rubik', sans-serif; }
.pz-cm .pz-voice.is-focus { box-shadow: 0 0 0 3px var(--hp-hi); } /* [ui-colors] */
/* the SAY pill: the city chat's (bubble · the box · the count near the cap · the send arrow · the mic) */
.pz-cm__boxwrap { flex: none; padding: calc(var(--u) * .8) calc(var(--u) * 1.1) calc(var(--u) * 1); }
.pz-cm__box, .pz-cm__preview { display: flex; align-items: center; gap: calc(var(--u) * .7); height: max(52px, calc(var(--u) * 3.9)); padding: 0 calc(var(--u) * .45) 0 calc(var(--u) * 1.1); border-radius: 999px;
  background: rgba(22, 25, 38, .86); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); transition: box-shadow .2s, opacity .2s; }
.pz-cm__box[hidden], .pz-cm__preview[hidden] { display: none; }
.pz-cm__box.is-focus, .pz-cm__box:focus-within { box-shadow: inset 0 0 0 1.5px rgba(var(--hp-hi-rgb), .85), 0 0 0 calc(var(--u) * .3) rgba(var(--hp-hi-rgb), .22); } /* [ui-colors] */
.pz-cm__box.is-off { opacity: .65; }
.pz-cm__ico { flex: none; width: max(18px, calc(var(--u) * 1.5)); height: max(18px, calc(var(--u) * 1.5)); color: rgba(255, 255, 255, .55); }
.pz-cm__ico svg { display: block; width: 100%; height: 100%; }
.pz-cm__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; caret-color: var(--hp-hi); pointer-events: auto; /* [ui-colors] */
  font: 400 max(16px, calc(var(--u) * 1.32)) 'Rubik', sans-serif; color: #fff; }
.pz-cm__input::placeholder { color: rgba(255, 255, 255, .45); }
.pz-cm__input:disabled { cursor: default; }
.pz-cm__count { display: none; flex: none; font: 500 max(14px, calc(var(--u) * 1)) 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .55); }
.pz-cm__count.is-near { display: block; }
.pz-cm__count.is-full { color: var(--hp-hi); } /* [ui-colors] */
.pz-cm__send { flex: none; display: grid; place-items: center; width: max(38px, calc(var(--u) * 3)); height: max(38px, calc(var(--u) * 3)); padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); transition: background .15s, color .15s, transform .15s; }
.pz-cm__send svg { width: 52%; height: 52%; }
.pz-cm__box.has-text .pz-cm__send { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.pz-cm__box.has-text .pz-cm__send:hover { transform: scale(1.06); }
.pz-cm .pz-mic__btn { width: max(38px, calc(var(--u) * 3)); height: max(38px, calc(var(--u) * 3)); background: rgba(255, 255, 255, .1); color: var(--hp-paper); box-shadow: none; }
.pz-cm .pz-mic__btn:hover, .pz-cm .pz-mic__btn.is-focus { background: rgba(255, 255, 255, .2); }
.pz-cm .pz-mic.is-rec .pz-mic__btn { background: var(--hp-rose); color: #fff; }
.pz-cm__box .pz-mic__cap { display: none; }
.pz-cm__box .pz-mic.is-rec .pz-mic__cap, .pz-cm__box .pz-mic.is-busy .pz-mic__cap { display: flex; }
.pz-cm .pz-mic__cap b { font: 700 max(14px, calc(var(--u) * 1)) / 1 'Rubik', sans-serif; letter-spacing: .06em; color: var(--hp-paper); }
.pz-cm .pz-mic__cap small, .pz-cm .pz-mic__clock em { font: 500 max(14px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; color: rgba(243, 236, 224, .6); }
.pz-cm__preview { padding-left: calc(var(--u) * .45); box-shadow: inset 0 0 0 1.5px rgba(var(--hp-hi-rgb), .55); height: auto; min-height: max(52px, calc(var(--u) * 3.9)); } /* [ui-colors] */
.pz-cm__preview .pz-voice { margin: calc(var(--u) * .3) 0; }
.pz-cm__pvbtns { display: flex; gap: calc(var(--u) * .5); margin-left: auto; }
/* ==================================================================== end FRIENDS · MESSAGES */

/* ==================================================================== MAIN MENU · profile (menus-plaza.js _scr_plaza, the top-right card)
   One quiet card: the kid's live portrait in a circle, the name big with a small dot in your colour (the only place the
   colour shows here), one muted line "Hong Kong ✎ · 10 friends", then one stall row with EDIT / SET UP. Ink-navy and
   paper neutrals; the yellow only marks the focus ring (the menu kit's cursor) and a focused button. No icons beyond the
   pencils, no caps labels. The picture + name are one button → PROFILE (plazaprofile: name + photo). */
.pz-main .pz-main__side { bottom: auto; width: calc(var(--u) * 26); min-width: 300px; }
.iw-panel.pz-me { display: flex; flex-direction: column; gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4);
  background: rgba(30, 33, 48, .86); border-radius: calc(var(--u) * 1.2); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .1), 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(0, 0, 0, .3); color: var(--hp-paper); }
.iw-panel.pz-me::before { display: none; }
.pz-me__who { display: flex; align-items: center; gap: calc(var(--u) * 1); min-width: 0; margin: calc(var(--u) * -.4); padding: calc(var(--u) * .4); border: 0; border-radius: calc(var(--u) * .9);
  background: none; color: inherit; text-align: left; cursor: pointer; pointer-events: auto; transition: background .15s; }
.pz-me__who:hover, .pz-me__who.is-focus { background: rgba(243, 236, 224, .08); }
.pz-me__pen { flex: none; display: block; width: .55em; height: .55em; margin-left: .15em; color: rgba(243, 236, 224, .4); transition: color .15s; }
.pz-me__pen svg { display: block; width: 100%; height: 100%; --k: var(--hp-ink); }
.pz-me__who:hover .pz-me__pen, .pz-me__who.is-focus .pz-me__pen { color: var(--hp-hi); } /* [ui-colors] */
.pz-me__pic { position: relative; flex: none; width: max(52px, calc(var(--u) * 4.4)); height: max(52px, calc(var(--u) * 4.4)); border-radius: 50%; overflow: hidden;
  background: var(--hp-ink3); box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .14); display: grid; place-items: center; }
.pz-me__ini { font: 400 max(22px, calc(var(--u) * 1.9)) / 1 'Titan One', sans-serif; color: rgba(243, 236, 224, .7); }
.pz-me__pic.has-portrait .pz-me__ini, .pz-me__pic.has-photo .pz-me__ini { display: none; }
.pz-me__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-me__pic .iw-portrait { position: absolute; inset: 0; display: block; }
.pz-me__pic .iw-portrait canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.pz-me__name { display: flex; align-items: center; gap: .4em; min-width: 0; font: 400 max(22px, calc(var(--u) * 1.85)) / 1.1 'Titan One', sans-serif; color: var(--hp-paper); }
.pz-me__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-me__dot { flex: none; width: .42em; height: .42em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(30, 33, 48, .9); }
.pz-me__line { display: flex; align-items: center; flex-wrap: wrap; gap: .3em .9em; font: 600 max(14px, calc(var(--u) * 1)) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .7); }
.pz-me__friends b { font-weight: 700; color: var(--hp-paper); font-variant-numeric: tabular-nums; }
.pz-me__geo { display: inline-flex; align-items: center; gap: .4em; margin: 0 -.45em; padding: .25em .45em; border: 0; border-radius: .5em; background: none; color: var(--hp-paper);
  font: inherit; cursor: pointer; pointer-events: auto; transition: background .15s; }
.pz-me__geo i { display: block; width: .9em; height: .9em; color: rgba(243, 236, 224, .55); transition: color .15s; }
.pz-me__geo i svg { display: block; width: 100%; height: 100%; --k: var(--hp-ink); }
.pz-me__geo.is-none { color: rgba(243, 236, 224, .7); }
.pz-me__geo:hover, .pz-me__geo.is-focus { background: rgba(243, 236, 224, .1); }
.pz-me__geo:hover i, .pz-me__geo.is-focus i { color: var(--hp-hi); } /* [ui-colors] */
.pz-me__stall { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .8); padding-top: calc(var(--u) * 1); border-top: 1px solid rgba(243, 236, 224, .1); min-width: 0; }
.pz-me__stxt { display: flex; flex-direction: column; gap: .3em; min-width: 0; font: 600 max(14px, calc(var(--u) * 1)) / 1.2 'Rubik', sans-serif; }
.pz-me__slabel { color: rgba(243, 236, 224, .55); font-size: .88em; }
.pz-me__sval { color: rgba(243, 236, 224, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-me__sval b { font-weight: 700; color: var(--hp-paper); }
.pz-me__sval.is-none { color: rgba(243, 236, 224, .75); }
.pz-me__edit { flex: none; padding: .55em 1.1em; border: 0; border-radius: 999px; background: rgba(243, 236, 224, .12); color: var(--hp-paper); cursor: pointer; pointer-events: auto;
  font: 700 max(14px, calc(var(--u) * .95)) / 1 'Rubik', sans-serif; transition: background .15s, color .15s; }
.pz-me__edit:hover { background: rgba(243, 236, 224, .2); }
.pz-me__edit.is-focus { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
/* PROFILE (plazaprofile): the photo in a bigger circle beside its line, the name field, one hint; buttons on the right */
.pz-profscr .pz-prof { width: calc(var(--u) * 44); min-width: 420px; gap: calc(var(--u) * 1.2); }
.pz-prof__photo { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.pz-prof__pic { flex: none; }
.pz-prof__av { width: max(96px, calc(var(--u) * 8)); height: max(96px, calc(var(--u) * 8)); }
.pz-prof__av .pz-me__ini { font-size: max(40px, calc(var(--u) * 3.4)); }
.pz-prof__txt { display: flex; flex-direction: column; gap: .4em; min-width: 0; }
.pz-prof__label { font: 700 max(17px, calc(var(--u) * 1.25)) / 1.2 'Rubik', sans-serif; color: var(--hp-paper); }
.pz-prof__hint { font: 500 max(14px, calc(var(--u) * .98)) / 1.35 'Rubik', sans-serif; color: rgba(243, 236, 224, .62); }
.pz-profscr .iw-btn.is-disabled { opacity: .45; }
/* the locker's name tag is read-only in HOPPA (PROFILE renames) */
.iw-name--ro .iw-name__input { pointer-events: none; cursor: default; }
/* PICK A CITY › YOU: the name read-only + "Change in Profile" (replaces the name field once you have a name) */
.pz-you__name { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .8); min-width: 0; padding: calc(var(--u) * .55) calc(var(--u) * .6) calc(var(--u) * .55) calc(var(--u) * 1.1);
  border-radius: calc(var(--u) * 1.1); background: rgba(16, 18, 28, .7); }
.pz-you__nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 max(20px, calc(var(--u) * 1.75)) / 1.1 'Titan One', sans-serif; color: var(--hp-paper); }
.pz-you__link { flex: none; padding: .5em .9em; border: 0; border-radius: 999px; background: rgba(243, 236, 224, .1); color: rgba(243, 236, 224, .85); cursor: pointer; pointer-events: auto;
  font: 600 max(13px, calc(var(--u) * .9)) / 1 'Rubik', sans-serif; transition: background .15s, color .15s; }
.pz-you__link:hover { background: rgba(243, 236, 224, .18); color: var(--hp-paper); }
.pz-you__link.is-focus { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
/* PROFILE: the buttons sit left-aligned under the card (the top right stays free) */
.pz-profscr .pz-panelscr__btns { left: calc(var(--u) * 3.6); right: auto; top: calc(var(--u) * 31.6); bottom: auto; flex-direction: row; width: auto; gap: calc(var(--u) * 1.2); }
.pz-profscr .pz-panelscr__btns .iw-btn--menu { width: auto; flex: none; white-space: nowrap; padding-right: calc(var(--u) * 2.2); }
/* HOPPA menu toasts (out of a city; in a city they go to the city's own stack): top-centre, above every screen's
   content (the headers sit top-left, the cards and buttons start lower), never over a top-right button. Success ticks
   are the brand yellow, not green (yellow is the only highlight). */
.iw-ui .iw-toasts { right: auto; left: 50%; top: calc(var(--u) * 1.4 + var(--sat)); translate: -50% 0; align-items: center; }
.iw-ui .iw-toast { max-width: calc(var(--u) * 30); rotate: 0deg; animation-name: pz-mtoast-in; }
.iw-ui .iw-toast:nth-child(even) { rotate: 0deg; }
.iw-ui .iw-toast.is-out { animation-name: pz-mtoast-out; }
@keyframes pz-mtoast-in { from { opacity: 0; translate: 0 calc(var(--u) * -2); scale: .9; } }
@keyframes pz-mtoast-out { to { opacity: 0; translate: 0 calc(var(--u) * -1.5); scale: .95; } }
.iw-ui .iw-toast.is-good .iw-toast__icon { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.iw-ui .iw-saved i, .iw-ui .iw-lsaved i { color: var(--hp-hi); } /* [ui-colors] */
.iw-ui .iw-saved.is-on i { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
/* ==================================================================== end MAIN MENU · profile */

/* ==================================================================== MINIMAP · redesign
   The corner map (src/social/citymap.js, driven by hud.js): a small round heading-up city map — paper/sand plan, the
   sea a muted blue-grey, your yellow arrow centred and pointing up, a tiny N on the rim. A thin frame and a soft shadow,
   no tab; a quiet TAB · Visit chip rides its top edge and the district name sits under it. Bottom-left, clear of the
   chat column (.pz-chat starts at 17.5u). Click / tap = the big map. Hidden while the big map is up. */
.pz-mm { --u: min(1vw, 1.7778dvh); --mm: max(124px, calc(var(--u) * 11)); position: absolute; left: calc(var(--u) * 2.4); bottom: calc(var(--u) * 2); width: var(--mm);
  display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .12s; }
.pz-mm__disc { position: relative; width: var(--mm); height: var(--mm); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 calc(var(--u) * .3) calc(var(--u) * 1.3) rgba(10, 12, 20, .3); transition: transform .18s, box-shadow .18s; }
.pz-mm__cv { display: block; width: 100%; height: 100%; border-radius: 50%; }
.pz-mm:hover .pz-mm__disc { transform: scale(1.03); box-shadow: 0 0 0 2px rgba(var(--hp-hi-rgb), .9), 0 calc(var(--u) * .3) calc(var(--u) * 1.3) rgba(10, 12, 20, .3); } /* [ui-colors] */
.pz-mm:active .pz-mm__disc { transform: scale(.98); }
.pz-mm__tab { position: absolute; left: 50%; top: 0; translate: -50% calc(-100% - var(--u) * .45); display: flex; align-items: center; gap: .45em; padding: .26em .75em .26em .28em; border-radius: 999px;
  background: rgba(22, 25, 38, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 8px rgba(0, 0, 0, .2);
  font: 500 max(12px, calc(var(--u) * 1)) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.pz-mm__tab kbd { font: 700 .8em / 1 'Rubik', sans-serif; letter-spacing: .06em; padding: .32em .5em .28em; border-radius: .45em; background: #f3ece0; color: #1e2130; box-shadow: 0 .14em 0 #c9bfa9; }
.pz-mm__name { max-width: calc(var(--mm) + var(--u) * 4); margin-top: calc(var(--u) * .65); font: 500 max(12px, calc(var(--u) * 1.05)) / 1.2 'Rubik', sans-serif; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-mm__name:empty { display: none; }
.iw-hud.is-enter .pz-mm { animation: iw-hud-slide .7s var(--spring) backwards .1s; }
body.iw-dio-on .pz-mm { opacity: 0; pointer-events: none; }
/* the big map (diorama.js _visitHop): a Visit's dotted white hop arc, the travelled part a faint trail, the landing ring yellow */
.iw-dio-j.is-hop .o { stroke: var(--hp-ink, #1e2130); stroke-width: 7; opacity: .22; }
.iw-dio-j.is-hop .i { stroke: #fff; stroke-width: 4.5; stroke-dasharray: 1 9; filter: drop-shadow(0 0 1.5px rgba(20, 22, 32, .7)); }
.iw-dio-j.is-hop .d { stroke: #fff; stroke-width: 2.5; opacity: .35; filter: none; }
.iw-dio-j.is-hop .r { fill: rgba(var(--hp-hi-rgb), .12); stroke: var(--hp-hi); stroke-width: 3; filter: drop-shadow(0 0 1.5px rgba(20, 22, 32, .8)); } /* [ui-colors] */
/* ==================================================================== end MINIMAP · redesign */

/* =====================================================================================
   LOCKER (HOPPA): no name tag / look chips on the right (menus.js) — the pedestal kid is the summary; section labels at
   reading size; the city's chat log and minimap step aside while it is up (social/ui.js body.pz-locker-up)
   ===================================================================================== */
.iw-ui .iw-locker .iw-lsec__title { font: 800 var(--fs-m) / 1 'Rubik', sans-serif; letter-spacing: .08em; color: #fff; }
.iw-ui .iw-locker .iw-lsec__title small { font: 700 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .72); opacity: 1; }
.iw-ui .iw-locker .iw-lspin { font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .1em; }
.iw-ui .iw-locker .iw-lsaved { font: 700 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
body.pz-locker-up .pz-chat, body.pz-locker-up .pz-mm { opacity: 0; visibility: hidden; pointer-events: none; }
.iw-ui .iw-locker .iw-linfo__names small { font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .08em; }
.iw-ui .iw-locker .iw-linfo__eq { font: 800 var(--fs-s) / 1 'Rubik', sans-serif; letter-spacing: .06em; }
/* [locker-ui] LOCKER · HOPPA (menus.js _scr_locker) — Settings' design language: the screen carries .hs-set, so the header,
   the panel card (.hs-panel), the tab bar (.hs-tabs / .hs-tab), the row type (.hs-row__label / .hs-row__help), the saved
   line and the foot (.hs-foot / .hs-saved) are SETTINGS' own. Only the layout and the cards live here: the panel on the
   left at Settings' top, the kid on the city's hop pad in the free area right of it (showcase.js measures .lk-body).
   Each option group is a Settings "stacked" row (label + current pick over a grid). Cards: plain rounded tiles in the
   row's paper tint, the name in the row label type (small head cards: the help type); colours: flat circles. The worn
   card / colour: a plain white ring (+ a white tick on a card) — no yellow halo, no tilt, no splat, no Titan One. */
.lk { --lk-l: calc(var(--u) * 3.6 + var(--sal, 0px)); --lk-w: min(calc(var(--u) * 58), calc(100% - var(--lk-l) - 300px));
  --lk-c-bust: 6; --lk-c-head: 8; --lk-c-face: 8; --lk-c-body: 6; --lk-c-swatch: 12; }
.hs-set.lk .lk-panel { left: var(--lk-l); right: auto; top: calc(var(--u) * 8.6); width: var(--lk-w); height: calc(100% - var(--u) * 14.8); max-height: none; translate: none; }
.lk .lk-rows { display: flex; flex-direction: column; gap: calc(var(--u) * .35); }
.lk-sec { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * .7); padding: calc(var(--u) * .9) calc(var(--u) * 1.2) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.1); background: rgba(243, 236, 224, .045); }
.lk-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); min-width: 0; }
.lk-sec__head .hs-row__label { flex: none; }
.lk-sec__cur { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.lk-grid { display: grid; grid-template-columns: repeat(var(--lk-c, 6), minmax(0, 1fr)); gap: calc(var(--u) * .6); }
.lk-grid--bust { --lk-c: var(--lk-c-bust); } .lk-grid--head { --lk-c: var(--lk-c-head); } .lk-grid--face { --lk-c: var(--lk-c-face); }
.lk-grid--body { --lk-c: var(--lk-c-body); } .lk-grid--swatch { --lk-c: var(--lk-c-swatch); gap: calc(var(--u) * .5); }
/* a card: the portrait on top, the name under it */
.lk-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: calc(var(--u) * 1);
  background: rgba(243, 236, 224, .06); color: var(--hp-paper); font: inherit; text-align: center; cursor: pointer; pointer-events: auto; overflow: hidden; outline: none;
  box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .07); transition: background .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
.lk-tile:hover { background: rgba(243, 236, 224, .11); }
.lk-tile__art { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.lk-tile--body .lk-tile__art { aspect-ratio: .86; }
.lk-tile--bust .lk-tile__art { aspect-ratio: 1.12; }   /* (a little wider than tall: two rows of looks fit the panel) */
.lk-tile__pic { position: absolute; inset: 0; display: block; animation: iw-fade .25s both; }
.lk-tile__pic.is-swap { animation-duration: .2s; }
.lk-tile__pic canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-tile__art > svg { position: absolute; inset: 15%; width: 70%; height: 70%; opacity: .85; }
.lk-tile__ico { position: absolute; inset: 26%; color: rgba(243, 236, 224, .18); }
.lk-tile__ico svg { width: 100%; height: 100%; }
.lk-tile__name { display: block; padding: 0 .45em .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 max(15px, calc(var(--u) * 1.2)) / 1.15 'Rubik', sans-serif; color: var(--hp-paper); }
.lk-tile--bust .lk-tile__name { font-size: max(17px, calc(var(--u) * 1.35)); }   /* (Settings' row label) */
.lk-tile--head .lk-tile__name, .lk-tile--face .lk-tile__name { padding: 0 .2em .6em; font: 500 max(14px, calc(var(--u) * .95)) / 1.2 'Rubik', sans-serif; color: rgba(243, 236, 224, .82); }   /* (Settings' help type) */
.lk-tile__eq { position: absolute; top: calc(var(--u) * .5); right: calc(var(--u) * .5); display: grid; place-items: center; width: max(20px, calc(var(--u) * 1.6)); height: max(20px, calc(var(--u) * 1.6));
  border-radius: 50%; background: #fff; color: var(--hp-ink); opacity: 0; scale: .6; transition: opacity .15s, scale .2s var(--out); pointer-events: none; }
.lk-tile__eq svg { width: 62%; height: 62%; }
.lk-tile.is-on { background: rgba(243, 236, 224, .13); box-shadow: inset 0 0 0 2px #fff; }
.lk-tile.is-on .lk-tile__eq { opacity: 1; scale: 1; }
.lk-tile.is-on .lk-tile__name { color: #fff; }
.lk-tile.is-pick { animation: lk-pick .28s var(--out); }
@keyframes lk-pick { 40% { scale: .965; } }
/* a colour: a clean circle; the worn one a white ring round it */
.lk-tile--swatch { aspect-ratio: 1; border-radius: 50%; background: transparent; box-shadow: none; overflow: visible; }
.lk-tile--swatch:hover { background: rgba(243, 236, 224, .1); }
.lk-tile--swatch .lk-tile__art { position: absolute; inset: 13%; width: auto; aspect-ratio: auto; }
.lk-tile--swatch .lk-tile__eq { display: none; }
.lk-tile--swatch.is-on { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.lk-dot { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
/* the info row: the focused card's name + its line, "Wearing" when it is the one you wear */
.lk-info { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.5); min-height: max(46px, calc(var(--u) * 3.4)); margin-top: calc(var(--u) * .6);
  padding: calc(var(--u) * .6) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.1); background: rgba(243, 236, 224, .045); }
.lk-info__txt { min-width: 0; }
.lk-info__name, .lk-info__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-info__eq { display: none; flex: none; align-items: center; gap: .45em; padding: .45em .85em .45em .6em; border-radius: 999px; background: rgba(243, 236, 224, .1); color: var(--hp-paper);
  font: 600 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; }
.lk-info__eq i { display: block; width: 1.2em; height: 1.2em; color: var(--hp-hi); } /* [ui-colors] */
.lk-info__eq i svg { width: 100%; height: 100%; }
.lk-info.is-on .lk-info__eq { display: inline-flex; }
/* the foot: Settings' saved line + SHUFFLE (RESET's ghost button) and DONE (the yellow pill) */
.lk-foot__acts { flex: none; display: flex; align-items: center; gap: calc(var(--u) * .8); }
.hs-set.lk .lk-btn { font-size: max(15px, calc(var(--u) * 1.1)); }
.iw-ui .lk .lk-done { --bg: var(--hp-hi); --fill: #fff; --fill-ink: var(--hp-ink); color: var(--hp-ink); box-shadow: none; padding-left: calc(var(--u) * 1.6); padding-right: calc(var(--u) * 1.8); } /* [ui-colors] */
.iw-ui .lk .lk-done::before { display: none; }
.iw-ui .lk .lk-done .iw-btn__icon svg { filter: none; }
.lk-shuffle.is-roll .iw-btn__icon { animation: lk-roll .45s var(--out); }
@keyframes lk-roll { from { rotate: -180deg; } }
.hs-set.lk .hs-saved { min-width: 0; }
.hs-set.lk .hs-saved span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Drag to spin", centred under the kid (showcase.js frames the kid in the middle of the free area right of the panel) */
.lk-spin { position: absolute; left: calc((var(--lk-l) + var(--lk-w) + 100% + var(--sa-r, 0px)) / 2); bottom: calc(var(--u) * 6.2 + var(--sab, 0px)); translate: -50% 0;
  display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.05em; border-radius: 999px; background: rgba(22, 25, 38, .72); color: rgba(243, 236, 224, .85);
  box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .08); font: 600 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; white-space: nowrap; pointer-events: none; }
.lk-spin__ico { display: block; width: 1.25em; height: 1.25em; }
.lk-spin__ico svg { width: 100%; height: 100%; }
.lk-spin .iw-pad { font-size: .9em; }
.iw-ui.is-pad .lk-spin__lbl { display: none; }   /* (a pad: the right stick + Spin instead) */
@media (prefers-reduced-motion: reduce) { .lk-tile, .lk-tile__eq { transition: none; } .lk-tile.is-pick, .lk-shuffle.is-roll .iw-btn__icon, .lk-tile__pic { animation: none; } }
/* HOPPA's fell-in-the-water card (hud.js _showSplash; the arena keeps .iw-spl): one small ink-glass card low in the
   middle (above the chat log, which would sit over it lower down) — the white ball mark in a thin yellow ring that drains with the wait, a friendly line, the countdown line.
   No squid, no team colour, no splat shape. Pops in / out on transform + opacity only. */
.hp-rsp { position: absolute; inset: 0; pointer-events: none; }
.hp-rsp__card { position: absolute; left: 50%; bottom: 25%; display: flex; align-items: center; gap: calc(var(--u) * 1.1); padding: calc(var(--u) * .7) calc(var(--u) * 1.6) calc(var(--u) * .7) calc(var(--u) * .7);
  border-radius: 999px; background: var(--hp-glass); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .22); transform: translateX(-50%); animation: hp-rsp-in .42s cubic-bezier(.34, 1.4, .64, 1) both .12s; }
@keyframes hp-rsp-in { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.92); } }
.hp-rsp.is-out .hp-rsp__card { animation: hp-rsp-out .3s ease-in forwards; }
@keyframes hp-rsp-out { to { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.96); } }
.hp-rsp__ring { position: relative; flex: none; display: grid; place-items: center; width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.hp-rsp__ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-rsp__ring .bg { fill: var(--hp-ink); stroke: rgba(255, 255, 255, .14); stroke-width: 6; }
.hp-rsp__ring .fg { fill: none; stroke: var(--hp-hi); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .12s linear; } /* [ui-colors] */
.hp-rsp__mark { position: relative; width: 56%; height: auto; margin-top: -6%; }
.hp-rsp__text { display: flex; flex-direction: column; gap: .3em; white-space: nowrap; }
.hp-rsp__title { font: 700 calc(var(--u) * 1.3) / 1.15 'Rubik', sans-serif; letter-spacing: .01em; }
.hp-rsp__sub { font: 500 calc(var(--u) * 1.05) / 1.15 'Rubik', sans-serif; color: var(--hp-muted); font-variant-numeric: tabular-nums; }
body.iw-dio-on .hp-rsp { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hp-rsp__card, .hp-rsp.is-out .hp-rsp__card { animation-duration: .01s; } }

/* =====================================================================================
   BIG MAP · redesign (src/social/bigmap.js over diorama.js's swoop; the arena's map keeps hud.css .iw-dio*)
   The corner map's big sibling: ink-navy glass, paper / sand, ONE highlight (yellow); player colours only as rings / dots.
   Pin geometry (keep in step with bigmap.js _layout / _hitTest): ground point at 0,0; the head's centre 1.95u above it.
   ===================================================================================== */
.iw-dio.is-hoppa .iw-dio__tilt, .iw-dio.is-hoppa .iw-dio__head, .iw-dio.is-hoppa .iw-dio__foot, .iw-dio.is-hoppa .iw-dio__pins, .iw-dio.is-hoppa .iw-dio__zones,
.iw-dio.is-hoppa .iw-dio__dms, .iw-dio.is-hoppa .iw-dio-plan { display: none !important; }
.iw-dio.is-hoppa .iw-dio__vig { background: radial-gradient(ellipse 78% 82% at 50% 52%, transparent 58%, rgba(20, 22, 34, .28) 100%); }
.iw-dio.is-hoppa .iw-dio__arc .i { stroke-width: 3.5; }
body.pz-bigmap-on .pz-chat, body.pz-bigmap-on .pz-prompt { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility 0s .15s; }
.pz-bm { --u: min(1vw, 1.7778dvh); --ink: #1e2130; --paper: #f3ece0; --sand: #e3d9c6; --y: var(--hp-hi); --glass: rgba(22, 25, 38, .84); /* [ui-colors] */
  position: absolute; inset: 0; display: none; pointer-events: none; font-family: 'Rubik', system-ui, sans-serif; color: var(--paper); }
.pz-bm.is-on { display: block; pointer-events: auto; cursor: default; }
.pz-bm.has-hover { cursor: pointer; }
.pz-bm__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 34, .42) 0%, rgba(20, 22, 34, 0) 26%), linear-gradient(0deg, rgba(20, 22, 34, .32) 0%, rgba(20, 22, 34, 0) 16%); }
.pz-bm__pads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: var(--pinK); }
.pz-bm__pads path { fill: rgba(var(--hp-hi-rgb), .14); stroke: rgba(255, 246, 214, .85); stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; } /* [ui-colors] */
.pz-bm__marks, .pz-bm__pins { position: absolute; inset: 0; opacity: var(--pinK); }
.pz-bm.is-fast .pz-bm-pin, .pz-bm.is-fast .pz-bm-area { transition: none; }

/* area labels: light, spaced caps; they step aside (fade) under pins and labels */
.pz-bm-area { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform .09s linear; }
.pz-bm-area span { position: absolute; left: 0; top: 0; translate: -50% -50%; white-space: nowrap; font: 700 max(10px, calc(var(--u) * .78)) / 1 'Rubik', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 252, 244, .94); text-shadow: 0 0 calc(var(--u) * .35) rgba(20, 22, 34, .75), 0 1px 2px rgba(20, 22, 34, .7); transition: opacity .2s; }
.pz-bm-area.is-hide span { opacity: 0; }

/* pins */
.pz-bm-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; --pc: #9a9eab; --r: calc(var(--u) * 1.05); transition: transform .09s linear; }
.pz-bm-pin__ground { position: absolute; left: calc(var(--u) * -.3); top: calc(var(--u) * -.3); width: calc(var(--u) * .6); height: calc(var(--u) * .6); border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .13) var(--paper), 0 1px 4px rgba(0, 0, 0, .35); }
.pz-bm-pin__tail { position: absolute; left: calc(var(--u) * -.08); bottom: calc(var(--u) * .15); width: calc(var(--u) * .16); height: var(--tl, calc(var(--u) * .9)); border-radius: 99px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(30, 33, 48, .35); transform-origin: 50% 100%; rotate: var(--ta, 0rad); }
.pz-bm-pin__head { position: absolute; left: calc(var(--r) * -1 + var(--hx, 0px)); top: calc(var(--u) * -1.95 - var(--r) + var(--hy, 0px)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--pc), 0 0 0 calc(var(--u) * .1) rgba(30, 33, 48, .55), 0 calc(var(--u) * .2) calc(var(--u) * .6) rgba(10, 12, 20, .35);
  transform-origin: 50% 100%; transition: scale .18s cubic-bezier(.34, 1.6, .64, 1); }
.pz-bm-pin__ini { font: 800 calc(var(--u) * .95) / 1 'Rubik', sans-serif; translate: 0 .04em; }
.pz-bm-pin__star { display: none; position: absolute; right: calc(var(--u) * -.38); top: calc(var(--u) * -.38); width: calc(var(--u) * .95); height: calc(var(--u) * .95); padding: calc(var(--u) * .14);
  border-radius: 50%; background: var(--y); color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .09) var(--ink); box-sizing: border-box; }
.pz-bm-pin__star svg, .pz-bm-pin__flame svg, .pz-bm-pin__awn svg, .pz-bm-pin__arrow svg { display: block; width: 100%; height: 100%; }
.pz-bm-pin.is-friend .pz-bm-pin__head { box-shadow: inset 0 0 0 calc(var(--u) * .24) var(--y), 0 0 0 calc(var(--u) * .1) var(--ink), 0 calc(var(--u) * .2) calc(var(--u) * .6) rgba(10, 12, 20, .35); }
.pz-bm-pin.is-friend .pz-bm-pin__star { display: block; }
.pz-bm-pin__label { position: absolute; left: calc(var(--r) + var(--u) * .3 + var(--hx, 0px)); top: calc(var(--u) * -1.95 + var(--hy, 0px)); translate: 0 -50%; white-space: nowrap; display: flex; align-items: center; gap: .4em;
  padding: .3em .66em .3em .55em; border-radius: 999px; background: var(--glass); color: var(--paper); font: 600 max(11px, calc(var(--u) * .86)) / 1 'Rubik', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .2); transition: opacity .1s; }
.pz-bm-pin--peer .pz-bm-pin__label::before { content: ''; width: .52em; height: .52em; border-radius: 50%; background: var(--pc); flex: none; }
.pz-bm-pin.is-left .pz-bm-pin__label { left: auto; right: calc(var(--r) + var(--u) * .3 - var(--hx, 0px)); }
.pz-bm-pin.is-nolabel .pz-bm-pin__label { opacity: 0; }
.pz-bm-pin.is-friend .pz-bm-pin__label { box-shadow: inset 0 0 0 1px rgba(var(--hp-hi-rgb), .55), 0 2px 6px rgba(0, 0, 0, .2); } /* [ui-colors] */
/* stalls: a small paper tile with the awning, the name on a paper pill; HOT / ON FIRE = a yellow flame badge */
.pz-bm-pin--stall { --r: calc(var(--u) * .95); z-index: 1; }
.pz-bm-pin--peer { z-index: 2; }
.pz-bm-pin--stall .pz-bm-pin__head { border-radius: calc(var(--u) * .55); background: var(--ink); color: var(--paper); --pz-bm-awn: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * .14) var(--paper), 0 calc(var(--u) * .2) calc(var(--u) * .6) rgba(10, 12, 20, .35); }
.pz-bm-pin__awn { width: 68%; height: 68%; }
.pz-bm-pin--stall .pz-bm-pin__head { top: calc(var(--u) * -.95 - var(--r) + var(--hy, 0px)); }
.pz-bm-pin--stall .pz-bm-pin__label { top: calc(var(--u) * -.95 + var(--hy, 0px)); }
.pz-bm-pin--stall .pz-bm-pin__ground { display: none; }
.pz-bm-pin--stall .pz-bm-pin__tail { bottom: 0; height: var(--tl, 0px); }
.pz-bm-pin--stall .pz-bm-pin__label { background: rgba(243, 236, 224, .94); color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.pz-bm-pin__flame { display: none; position: absolute; right: calc(var(--u) * -.45); top: calc(var(--u) * -.45); width: calc(var(--u) * 1); height: calc(var(--u) * 1); padding: calc(var(--u) * .13);
  border-radius: 50%; background: var(--y); color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .09) var(--ink); box-sizing: border-box; }
.pz-bm-pin.is-hot .pz-bm-pin__flame, .pz-bm-pin.is-fire .pz-bm-pin__flame { display: block; }
.pz-bm-pin.is-fire .pz-bm-pin__flame { animation: pz-bm-fire 1.2s ease-in-out infinite; }
@keyframes pz-bm-fire { 50% { scale: 1.18; } }
.pz-bm-pin.is-hot .pz-bm-pin__head, .pz-bm-pin.is-fire .pz-bm-pin__head { box-shadow: 0 0 0 calc(var(--u) * .14) var(--y), 0 calc(var(--u) * .2) calc(var(--u) * .6) rgba(10, 12, 20, .35); }
/* you: the yellow arrow disc, a slow pulse on the ground, a yellow "You" pill */
.pz-bm-pin--you { --r: calc(var(--u) * 1.26); z-index: 3; }
.pz-bm-pin--you .pz-bm-pin__head { background: var(--y); color: var(--ink); box-shadow: 0 0 0 calc(var(--u) * .16) var(--ink), 0 0 0 calc(var(--u) * .3) var(--paper), 0 calc(var(--u) * .25) calc(var(--u) * .8) rgba(10, 12, 20, .4); }
.pz-bm-pin__arrow { display: block; width: 62%; height: 62%; }
.pz-bm-pin--you .pz-bm-pin__ground { background: var(--y); box-shadow: 0 0 0 calc(var(--u) * .13) var(--ink); }
.pz-bm-pin--you .pz-bm-pin__ground::after { content: ''; position: absolute; inset: calc(var(--u) * -.9); border-radius: 50%; border: 2px solid var(--y); animation: pz-bm-you 2s ease-out infinite; }
@keyframes pz-bm-you { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 1.25; } }
.pz-bm-pin--you .pz-bm-pin__label { background: var(--y); color: var(--ink); font-weight: 800; letter-spacing: .02em; }
/* hover / picked: the pin grows; press = a pop */
.pz-bm-pin.is-hover { z-index: 4; }
.pz-bm-pin.is-hover .pz-bm-pin__head { scale: 1.28; }
.pz-bm-pin.is-hover:not(.is-friend):not(.pz-bm-pin--stall) .pz-bm-pin__head { box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--pc), 0 0 0 calc(var(--u) * .14) var(--y), 0 calc(var(--u) * .25) calc(var(--u) * .8) rgba(10, 12, 20, .4); }
.pz-bm-pin.is-hover.pz-bm-pin--stall .pz-bm-pin__head { box-shadow: 0 0 0 calc(var(--u) * .16) var(--y), 0 calc(var(--u) * .25) calc(var(--u) * .8) rgba(10, 12, 20, .4); }
.pz-bm-pin.is-press .pz-bm-pin__head { animation: pz-bm-press .4s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes pz-bm-press { 35% { scale: 1.5; } 100% { scale: 1; } }

/* the hover card */
.pz-bm-card { position: absolute; left: 0; top: 0; z-index: 6; display: none; flex-direction: column; gap: calc(var(--u) * .65); min-width: calc(var(--u) * 13); max-width: calc(var(--u) * 22);
  padding: calc(var(--u) * .75); border-radius: calc(var(--u) * 1); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(var(--u) * .4) calc(var(--u) * 1.6) rgba(10, 12, 20, .35); transition: transform .09s linear; }
.pz-bm.is-fast .pz-bm-card { transition: none; }
.pz-bm-card.is-on { display: flex; animation: pz-bm-card .2s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes pz-bm-card { from { opacity: 0; scale: .94; } }
.pz-bm-card__row { display: flex; align-items: center; gap: calc(var(--u) * .65); }
.pz-bm-card__av { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: var(--paper); color: var(--ink);
  font: 800 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; box-shadow: inset 0 0 0 calc(var(--u) * .2) var(--pc, #9a9eab); }
.pz-bm-card__av--stall { border-radius: calc(var(--u) * .6); background: var(--paper); color: var(--ink); --pz-bm-awn: var(--paper); box-shadow: none; }
.pz-bm-card__av--stall svg { width: 64%; height: 64%; }
.pz-bm-card__txt { display: flex; flex-direction: column; gap: calc(var(--u) * .3); min-width: 0; margin-right: auto; }
.pz-bm-card__txt b { font: 700 max(13px, calc(var(--u) * 1.1)) / 1.1 'Rubik', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-bm-card__txt small { font: 500 max(11px, calc(var(--u) * .82)) / 1.1 'Rubik', sans-serif; color: var(--hp-muted, #c9c3b7); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pz-bm-card__tag { flex: none; display: flex; align-items: center; gap: .3em; padding: .3em .6em .3em .4em; border-radius: 999px; background: rgba(var(--hp-hi-rgb), .14); color: var(--y); /* [ui-colors] */
  font: 700 max(10px, calc(var(--u) * .74)) / 1 'Rubik', sans-serif; letter-spacing: .04em; box-shadow: inset 0 0 0 1px rgba(var(--hp-hi-rgb), .4); } /* [ui-colors] */
.pz-bm-card__tag svg { width: 1.15em; height: 1.15em; }
.pz-bm-card__go { all: unset; box-sizing: border-box; display: block; text-align: center; padding: calc(var(--u) * .55) calc(var(--u) * 1); border-radius: 999px; background: var(--y); color: var(--ink);
  font: 800 max(12px, calc(var(--u) * .9)) / 1 'Rubik', sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; box-shadow: 0 calc(var(--u) * .16) 0 var(--hp-hi-dark); transition: filter .12s, translate .12s; } /* [ui-colors] */
.pz-bm-card__go:hover { filter: brightness(1.06); }
.pz-bm-card__go:active { translate: 0 calc(var(--u) * .1); box-shadow: 0 calc(var(--u) * .06) 0 var(--hp-hi-dark); } /* [ui-colors] */
.pz-bm-card__go[disabled] { background: rgba(255, 255, 255, .14); color: rgba(243, 236, 224, .55); box-shadow: none; cursor: default; }

/* header: the district big, the city small, the local time + weather chips */
.pz-bm__head { position: absolute; left: calc(var(--u) * 2.6); top: calc(var(--u) * 8.6); display: flex; flex-direction: column; gap: calc(var(--u) * .55);
  opacity: var(--pinK); translate: 0 calc((1 - var(--pinK)) * -10px); pointer-events: none; }
.pz-bm__dist { font: 400 calc(var(--u) * 3.2) / .95 'Titan One', sans-serif; letter-spacing: .01em; color: #fff; text-shadow: 0 calc(var(--u) * .15) calc(var(--u) * .7) rgba(15, 17, 28, .55), 0 1px 0 rgba(15, 17, 28, .35); }
.pz-bm__sub { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.pz-bm__city { font: 800 max(10px, calc(var(--u) * .86)) / 1 'Rubik', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); text-shadow: 0 1px 3px rgba(15, 17, 28, .7); margin-right: calc(var(--u) * .3); }
.pz-bm__chip { display: flex; align-items: center; gap: .4em; padding: .34em .7em .34em .5em; border-radius: 999px; background: var(--glass); font: 500 max(11px, calc(var(--u) * .86)) / 1 'Rubik', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); white-space: nowrap; }
.pz-bm__chip svg { width: 1.25em; height: 1.25em; flex: none; }
.pz-bm__chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-bm__chip small { font: inherit; color: var(--hp-muted, #c9c3b7); }
.pz-bm__chip--time svg { color: var(--sand); }
.pz-bm__chip--wx svg { color: var(--y); }
.pz-bm.is-night .pz-bm__chip--wx svg { color: #dce1ee; }

/* legend (bottom-left) + footer keycaps (bottom centre) */
.pz-bm__legend { position: absolute; left: calc(var(--u) * 2.6); bottom: calc(var(--u) * 2.2); display: flex; gap: calc(var(--u) * .45); opacity: var(--pinK); pointer-events: none; }
.pz-bm__lg { display: flex; align-items: center; gap: .45em; padding: .36em .72em .36em .4em; border-radius: 999px; background: var(--glass); font: 500 max(11px, calc(var(--u) * .84)) / 1 'Rubik', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); white-space: nowrap; }
.pz-bm__lg i { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--paper); color: var(--ink); }
.pz-bm__lg i svg { width: 72%; height: 72%; }
.pz-bm__lg b { font-weight: 700; color: var(--hp-muted, #c9c3b7); font-variant-numeric: tabular-nums; }
.pz-bm__lg--friends i { background: var(--y); }
.pz-bm__lg--stalls i { border-radius: .4em; background: var(--ink); color: var(--paper); --pz-bm-awn: var(--ink); box-shadow: 0 0 0 1.5px var(--paper); }
.pz-bm__lg.is-none { opacity: .6; }
.pz-bm__foot { position: absolute; left: 50%; bottom: calc(var(--u) * 2.2); translate: -50% calc((1 - var(--pinK)) * 12px); opacity: var(--pinK); display: flex; align-items: center; gap: .45em;
  padding: .45em 1em .45em .9em; border-radius: 999px; background: var(--glass); font: 500 max(11px, calc(var(--u) * .9)) / 1 'Rubik', sans-serif; color: var(--paper); white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.pz-bm__foot em { width: 3px; height: 3px; margin: 0 .35em; border-radius: 50%; background: rgba(243, 236, 224, .4); }
.pz-bm-key { font: 700 .82em / 1 'Rubik', sans-serif; letter-spacing: .06em; padding: .34em .5em .28em; min-width: 1.1em; text-align: center; border-radius: .45em; background: var(--paper); color: var(--ink); box-shadow: 0 .14em 0 #c9bfa9; }
.pz-bm-key svg { display: block; width: 1em; height: 1em; margin: -.1em -.1em -.16em; }
@media (max-width: 1100px) { .pz-bm__legend { display: none; } }
@media (prefers-reduced-motion: reduce) { .pz-bm-pin--you .pz-bm-pin__ground::after, .pz-bm-pin.is-fire .pz-bm-pin__flame { animation: none; } }
/* ==================================================================== end BIG MAP · redesign */

/* ================================================================== BOSS WAR (src/social/bosswar.js)
   HOPPA's calm kit (ink glass, paper, ONE yellow highlight); the rift's violet is the war's only accent, and only inside
   the war. The invite is the friend-request card (.pz-popup); the war HUD: your HP + DASH energy bottom-centre, the
   clock and the fighters still in under the boss bar (top-centre, the arena's bar restyled below), name tags with a hp
   sliver over the other fighters; the suit-up / leave flash; the results card. */
.pz-war { --rift: #6fae2e; --rift-l: #a9d873;   /* [no-violet] the blight greens (was #6fae2e / #a9d873) */ --suit: #3df0ff; z-index: 14; }
.pz-war-over { z-index: 41; }
.pz-war > :not(.pz-war__tags) { opacity: 0; transition: opacity .35s; }
.pz-war.is-on > * { opacity: 1; }
.pz-war:not(.is-on) .pz-war__tags { display: none; }
.pz-war__info { position: absolute; left: 50%; top: calc(var(--u) * (4 + 5.6 * var(--war-bars, 1)));   /* (under the lowest boss bar: twin / extra bars set --war-bars) */ translate: -50% 0; display: flex; gap: calc(var(--u) * .7); }
.pz-war__info > span { display: inline-flex; align-items: center; gap: .45em; padding: .38em .95em .4em .7em; border-radius: 999px; background: var(--glass); color: #fff;
  font: 400 calc(var(--u) * 1.25) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .03em; box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--hp-ink), 0 3px 0 2px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
.pz-war__info small { font: 700 .72em/1 'Rubik', sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .7); }
.pz-war__info b { font-weight: 400; font-variant-numeric: tabular-nums; }
.pz-war__ico { display: block; width: 1.05em; height: 1.05em; color: var(--hp-hi); } /* [ui-colors] */
.pz-war__ico svg { width: 100%; height: 100%; display: block; }
.pz-war__time.is-last { animation: pz-war-pulse 1s ease-in-out infinite; }
.pz-war__time.is-last b { color: var(--hp-hi); } /* [ui-colors] */
@keyframes pz-war-pulse { 50% { scale: 1.07; } }
/* you: HP and the dash energy, bottom centre */
.pz-war__me { position: absolute; left: 50%; bottom: calc(var(--u) * 2.4); translate: -50% 0; width: calc(var(--u) * 30); display: flex; flex-direction: column; gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.1) calc(var(--u) * .85); border-radius: calc(var(--u) * 1.3); background: var(--glass); box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--hp-ink), 0 4px 0 2px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
.pz-war__row { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.pz-war__lbl { flex: none; width: calc(var(--u) * 3.6); font: 400 calc(var(--u) * 1.05) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .85); }
.pz-war__bar { position: relative; flex: 1; height: calc(var(--u) * 1.5); border-radius: 999px; background: rgba(0, 0, 0, .42); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.pz-war__bar i { position: absolute; inset: 0; transform-origin: left; border-radius: inherit; }
.pz-war__hp .pz-war__chip { background: rgba(255, 255, 255, .75); }
.pz-war__hp .pz-war__fill { background: linear-gradient(#f9f5ec, var(--hp-paper) 55%, var(--hp-sand)); box-shadow: inset 0 calc(var(--u) * -.2) 0 rgba(30, 33, 48, .18); }
.pz-war__me.is-low .pz-war__hp .pz-war__fill { background: linear-gradient(#e98b84, var(--hp-rose)); animation: pz-war-low .8s ease-in-out infinite; }
@keyframes pz-war-low { 50% { filter: brightness(1.35); } }
.pz-war__num { flex: none; min-width: calc(var(--u) * 3.2); text-align: right; font: 400 calc(var(--u) * 1.6) / 1 'Titan One', 'Rubik', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.pz-war__row--en .pz-war__bar { height: calc(var(--u) * .8); }
.pz-war__en .pz-war__fill { background: var(--hp-hi); box-shadow: inset 0 calc(var(--u) * -.12) 0 rgba(30, 33, 48, .25); } /* [ui-colors] */
.pz-war__en.is-empty { animation: pz-war-empty .45s steps(2, jump-none) infinite; }
.pz-war__en.is-empty .pz-war__fill { background: var(--hp-hi-dark); } /* [ui-colors] */
@keyframes pz-war-empty { 50% { box-shadow: inset 0 0 0 2px var(--hp-hi); } } /* [ui-colors] (no glow) */
.pz-war__row kbd { min-width: calc(var(--u) * 3.2); font-size: calc(var(--u) * .9); }
.pz-war__out { position: absolute; left: 50%; top: 42%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); opacity: 0 !important; transition: opacity .3s; }
.pz-war.is-ko .pz-war__out { opacity: 1 !important; animation: pz-war-ko .5s var(--spring); }
.pz-war__out b { font: 400 calc(var(--u) * 4.4) / 1 'Titan One', 'Rubik', sans-serif; color: #fff; letter-spacing: .03em; text-shadow: 0 calc(var(--u) * .3) 0 var(--hp-ink), 0 0 calc(var(--u) * 2.4) var(--rift); -webkit-text-stroke: calc(var(--u) * .12) var(--hp-ink); paint-order: stroke fill; }
.pz-war__out span { font: 700 calc(var(--u) * 1.4) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .85); }
@keyframes pz-war-ko { from { scale: 1.6; opacity: 0; } }
.pz-war.is-ko .pz-war__me, .pz-war.is-ko .pz-war__info { opacity: .35; }
/* the other fighters' tags: name (their colour as the dot), home town, a hp sliver */
.pz-war__tags { position: absolute; inset: 0; }
.pz-war__tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform-origin: 50% 100%; will-change: transform; }
.pz-war__tagname { display: inline-flex; align-items: center; gap: .4em; padding: .26em .7em .28em .55em; border-radius: 999px; background: var(--glass); color: var(--hp-paper);
  font: 800 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; letter-spacing: .03em; box-shadow: 0 0 0 1.5px var(--hp-ink); white-space: nowrap; }
.pz-war__tagname i { width: .7em; height: .7em; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--hp-paper); }
.pz-war__tag small { font: 700 calc(var(--u) * .8) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.pz-war__taghp { position: relative; width: calc(var(--u) * 4.4); height: calc(var(--u) * .42); border-radius: 99px; background: rgba(0, 0, 0, .55); overflow: hidden; box-shadow: 0 0 0 1px var(--hp-ink); }
.pz-war__taghp i { position: absolute; inset: 0; transform-origin: left; background: var(--hp-paper); }
.pz-war__tag.is-low .pz-war__taghp i { background: var(--hp-rose); }
/* the invite: the friend-request card with the rift as its avatar */
.pz-war-inv__av { display: grid; place-items: center; background: #141620; animation: pz-popup-av .6s var(--spring) backwards .12s; }
.pz-war-inv__arc { transition: stroke-dashoffset .3s linear; }
.pz-war-inv__av::after { display: none; }
.pz-war-inv__av svg { width: 100%; height: 100%; }
@keyframes pz-war-rift { to { rotate: 360deg; } }
.pz-war-inv .pz-popup__name { max-width: none; }
.pz-war-inv .pz-popup__line { white-space: normal; max-width: calc(var(--u) * 30); }
.pz-war-inv__card { width: max(300px, calc(var(--u) * 34)); }
/* the suit-up / leave flash: white rippling out from the middle (HOPPA's hop wipe, in light) */
.pz-war-flash { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: grid; place-items: center; opacity: 0; }
.pz-war-flash[hidden] { display: none; }
.pz-war-flash.is-in { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .97) 0 40%, rgba(232, 238, 255, .96) 70%, rgba(222, 240, 214, .95)); animation: pz-war-fin .32s ease-out; }
.pz-war-flash.is-out { opacity: 0; transition: opacity .6s ease-in; background: radial-gradient(circle at 50% 50%, #fff, rgba(222, 240, 214, .95)); }
@keyframes pz-war-fin { from { opacity: 0; } }
.pz-war-flash__ring { position: absolute; left: 50%; top: 50%; width: 10vmax; height: 10vmax; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * .5) rgba(111, 174, 46, .55), inset 0 0 0 calc(var(--u) * .3) rgba(61, 240, 255, .6); opacity: 0; }
.pz-war-flash.is-in .pz-war-flash__ring { animation: pz-war-ring 1.4s cubic-bezier(.2, .7, .3, 1) infinite; }
.pz-war-flash__ring.b { animation-delay: .45s !important; }
.pz-war-flash__ring.c { animation-delay: .9s !important; }
@keyframes pz-war-ring { 0% { scale: .2; opacity: 1; } 100% { scale: 14; opacity: 0; } }
.pz-war-flash__txt { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
.pz-war-flash__txt b { font: 400 calc(var(--u) * 5.2) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; color: var(--hp-ink); }
.pz-war-flash.is-in .pz-war-flash__txt b { animation: pz-war-word .5s var(--spring) backwards .08s; }
.pz-war-flash__txt span { font: 700 calc(var(--u) * 1.5) / 1 'Rubik', sans-serif; letter-spacing: .04em; color: rgba(30, 33, 48, .7); }
@keyframes pz-war-word { from { scale: .4; opacity: 0; } }
/* the results card */
.pz-war-res { position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: auto; }
.pz-war-res[hidden] { display: none; }
.pz-war-res__card { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.4); width: max(340px, calc(var(--u) * 42)); padding: calc(var(--u) * 2.4) calc(var(--u) * 2.6) calc(var(--u) * 2.2); border-radius: calc(var(--u) * 1.6);
  background: rgba(16, 18, 27, .9); backdrop-filter: blur(14px) saturate(1.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, .45); animation: pz-war-res .45s var(--spring); }
.pz-war-res__card.is-win { box-shadow: inset 0 0 0 1px rgba(var(--hp-hi-rgb), .35), 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, .45); } /* [ui-colors] (no glow) */
@keyframes pz-war-res { from { scale: .9; opacity: 0; translate: 0 calc(var(--u) * 1.5); } }
.pz-war-res__head { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); text-align: center; }
.pz-war-res__head b { font: 400 calc(var(--u) * 4) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; color: #fff; }
.pz-war-res__card.is-win .pz-war-res__head b { color: var(--hp-hi); text-shadow: none; } /* [ui-colors] (no glow) */
.pz-war-res__head span { font: 600 calc(var(--u) * 1.35) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); }
/* stats: one clean row, hairline dividers, no boxes — [ui-sizes] as many columns as stats (PURIFIED, the 5th, wrapped under a 4-column grid) */
.pz-war-res__stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: calc(var(--u) * 1.1) 0; border-block: 1px solid rgba(255, 255, 255, .1); }
.pz-war-res__stats > div { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .45em; padding: 0 .4em; text-align: center; }
.pz-war-res__stats > div + div { border-left: 1px solid rgba(255, 255, 255, .1); }
.pz-war-res__stats small, .pz-war-res__mvp small { font: 700 calc(var(--u) * 1.05) / 1.15 'Rubik', sans-serif; letter-spacing: .08em; color: rgba(255, 255, 255, .55); text-transform: uppercase; }
.pz-war-res__stats b { font: 400 calc(var(--u) * 2.2) / 1 'Titan One', 'Rubik', sans-serif; font-variant-numeric: tabular-nums; }
.pz-war-res__mvp { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: .75em 1.1em; border-radius: calc(var(--u) * 1); background: rgba(var(--hp-hi-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--hp-hi-rgb), .3); } /* [ui-colors] */
.pz-war-res__mvp small { color: var(--hp-hi); } /* [ui-colors] */
.pz-war-res__mvp span { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: .55em; font: 700 calc(var(--u) * 1.6) / 1 'Rubik', sans-serif; }
.pz-war-res__mvp span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-war-res__mvp span i, .pz-war-res__list i { flex: none; width: .7em; height: .7em; border-radius: 50%; }
.pz-war-res__mvp em, .pz-war-res__list em { font: 800 calc(var(--u) * 1) / 1 'Rubik', sans-serif; font-style: normal; letter-spacing: .06em; padding: .3em .6em; border-radius: 99px; background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.pz-war-res__mvp em.is-cpu, .pz-war-res__list em.is-cpu { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); }
.pz-war-res__dmg { font: 400 calc(var(--u) * 1.7) / 1 'Titan One', 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: var(--hp-hi); } /* [ui-colors] */
.pz-war-res__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * .2); }
.pz-war-res__list li { display: flex; align-items: center; gap: .6em; padding: .45em 1.1em; border-radius: calc(var(--u) * .7); font: 600 calc(var(--u) * 1.3) / 1 'Rubik', sans-serif; color: rgba(255, 255, 255, .85); }
.pz-war-res__list li.is-you { background: rgba(255, 255, 255, .07); color: #fff; }
.pz-war-res__list li > span { width: 1.4em; color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.pz-war-res__list li b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-war-res__list li small { font: 700 calc(var(--u) * 1.3) / 1 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .65); }
.pz-war-res__reward, .pz-war-res__coins { display: flex; align-items: center; gap: calc(var(--u) * 1); padding: .2em .2em; }
.pz-war-res__reward b, .pz-war-res__coins b { display: block; font: 700 calc(var(--u) * 1.45) / 1.15 'Rubik', sans-serif; }
.pz-war-res__reward small, .pz-war-res__coins small { font: 500 calc(var(--u) * 1.15) / 1.35 'Rubik', sans-serif; color: rgba(255, 255, 255, .6); }
.pz-war-res__coins { display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 1); row-gap: .25em; }
.pz-war-res__coins .pz-war-res__coin { grid-row: span 2; align-self: center; }
.pz-war-res__coins b { color: var(--hp-hi); align-self: end; } /* [ui-colors] */
.pz-war-res__coins small { align-self: start; }
.pz-war-res__badge, .pz-war-res__coin { flex: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
.pz-war-res__badge { animation: pz-war-badge 2.2s ease-in-out infinite; }
.pz-war-res__badge svg, .pz-war-res__coin svg { width: 100%; height: 100%; }
@keyframes pz-war-badge { 50% { rotate: 6deg; scale: 1.06; } }
.pz-war-res__go { align-self: center; margin-top: calc(var(--u) * .4); }
/* the arena's boss bar / callouts / damage numbers inside the war: HOPPA's ink glass and paper, the rift's violet as
   the boss's colour, the yellow only for weak-point hits and the OPEN window (hud-boss.js setWar adds .is-war) */
.iw-bhud.is-war, .iw-bover.is-war { --boss: #6fae2e; --boss-l: #a9d873; --boss-d: #2f6a4e; --boss-light: #a9d873; --boss-dark: #2f6a4e; --k: #1e2130; --gold: #ffd23f; }
.iw-bhud.is-war .iw-bb__plate { background: var(--hp-glass) !important; }
/* inside the war the city's top bar, weather dial and chat log step aside (MENU stays: MENU › LEAVE BOSS WAR) */
.pz-hud.is-war .pz-top, .pz-hud.is-war .pz-wx-wrap, .pz-hud.is-war .pz-chat__log, .pz-hud.is-war .pz-range { display: none; }
.iw-bhud.is-war .iw-bb { top: calc(var(--u) * 2); }
/* the boss's face beside the bar (every boss, the twins too): a level disc with the portrait's own yellow ring, a soft
   glow — no spinning ink splat, no white/black sticker ring, no tilt */
.iw-bhud.is-war .iw-bb__emb { rotate: 0deg; }
.iw-bhud.is-war .iw-bb__embsplat { display: none; }
.iw-bhud.is-war .iw-bb__embart { inset: 0; background: #0d0f14; box-shadow: 0 0 0 max(2px, calc(var(--u) * .18)) var(--hp-hi), 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(0, 0, 0, .45); } /* [ui-colors] (no glow) */
.iw-bhud.is-war .iw-bb__embart:has(.iw-bb__portrait) { box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(0, 0, 0, .45); } /* [ui-colors] (no glow) */
.iw-bhud.is-war .iw-bb__embart svg { scale: 1; translate: 0; }
.iw-bhud.is-war .iw-bb.is-enraged .iw-bb__embart { box-shadow: 0 0 calc(var(--u) * 2.2) rgba(224, 48, 31, .55), 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(0, 0, 0, .45); }
.iw-bhud.is-war .iw-bb.is-dead .iw-bb__embart { box-shadow: 0 calc(var(--u) * .4) calc(var(--u) * 1.2) rgba(0, 0, 0, .45); }

/* ==================================================================== NOTICE STACK
   The one place and the one look for every in-city hint and notification (social/ui.js notice / toast / hint;
   docs/SOCIAL.md): a column at the true horizontal centre whose bottom rides just above the chat column (ui._placePrompt
   sets `bottom` live: the log's top, else the SAY box's slot; it glides) and whose top stays under the crosshair (pills
   that don't fit are held folded, .is-held). The chat log is capped for it (CHAT: 18dvh closed; open, 18dvh less the SAY
   box, so its top — the stack's baseline — never moves when the box opens): 2+ pills always fit. Every item is
   the same ink-glass pill — the context prompt's size, font and paper keycaps. column-reverse: the first child sits
   at the bottom — the SAY box's key hint, then the live context prompt (the bottom slot; no timeout) — and transient
   hints / toasts stack above, newest on top. A pill unfolds, then fades and springs in; it fades, then folds away.
   An error wears a rose edge (the one non-yellow accent); a clickable one (a DM) takes the pointer. While a menu
   screen is up the stack steps aside (toasts go to .pz-toasts then). */
.pz-notes { --nh: calc(var(--u) * 7); position: absolute; z-index: 1002; left: 50%; bottom: calc(var(--u) * 10.6); translate: -50% 0; transition: opacity .15s, bottom .3s ease-out;
  display: flex; flex-direction: column-reverse; align-items: center; width: max-content; max-width: calc(100vw - var(--u) * 4); }
/* [ui-sizes] the Boss War's invite / seat card (centred, tall on a desktop) sat on the stack's upper notices: while it is
   up the stack steps out (at 1280×720 the card covers even the context prompt) — the toasts wait in the log / the
   badges (touch: the card is a bottom-right sheet and the stack steps left of it, styles/mobile.css) */
html:not(.is-touch) body.pzh-invcard .pz-notes {   /* [perf-p2] (src/ui/hasClasses.js; was :has()) */ opacity: 0; pointer-events: none; }   /* (opacity: a lit pill sets its own visibility) */
.pz-note { box-sizing: border-box; max-width: calc(var(--u) * 50); max-height: 0; margin-top: 0; padding: 0 calc(var(--u) * 1.5) 0 calc(var(--u) * 1.2); overflow: visible;
  border-radius: calc(var(--u) * 1.55); background: var(--glass); color: #fff; font: 700 calc(var(--u) * 1.4) / 1.25 'Rubik', sans-serif; text-align: center; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px) scale(.94); visibility: hidden;
  transition: opacity .16s, transform .2s, visibility 0s .34s, max-height .22s .12s, margin .22s .12s, padding .22s .12s; }
.pz-note.is-on { max-height: var(--nh); margin-top: calc(var(--u) * 1.1); padding-top: calc(var(--u) * .6); padding-bottom: calc(var(--u) * .65); opacity: 1; transform: none; visibility: visible;
  transition: max-height .22s, margin .22s, padding .22s, visibility 0s, opacity .2s .1s, transform .35s .1s var(--spring); }
.pz-note.is-on.is-held { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(8px) scale(.94); visibility: hidden;
  transition: opacity .16s, transform .2s, visibility 0s .34s, max-height .22s .12s, margin .22s .12s, padding .22s .12s; }   /* (no room under the crosshair: folded, back when there is) */
.pz-note kbd { letter-spacing: .02em; margin-block: -.25em; }
.pz-note kbd { margin-inline: .25em; }
.pz-note kbd:first-child { margin-left: 0; }
.pz-note__sep { display: inline-block; margin-inline: .75em; opacity: .55; font-weight: 800; }   /* (a keycap never makes its pill taller than a plain one) */
.pz-note.is-toast { white-space: normal; text-wrap: balance; }   /* (a long toast wraps: same pill, a line taller) */
.pz-note.is-error { box-shadow: inset 0 0 0 2px var(--hp-rose), 0 3px 0 rgba(0, 0, 0, .3); }
.pz-note.is-toxic { box-shadow: inset 0 0 0 2px #6fae2e, 0 3px 0 rgba(0, 0, 0, .3); }   /* [blight] a hazard warning: the world's toxic green (never a UI highlight) */
.pz-note.is-toxic b { color: #b7d68a; letter-spacing: .06em; }
.pz-note.is-click { pointer-events: auto; cursor: pointer; }
.pz-note.is-click:hover { box-shadow: inset 0 0 0 2px rgba(var(--hp-hi-rgb), .7), 0 3px 0 rgba(0, 0, 0, .3); } /* [ui-colors] */
.pz-note button { pointer-events: auto; }
.pz-note.is-bump { animation: pz-note-bump .3s var(--spring); }
@keyframes pz-note-bump { 40% { scale: 1.05; } }
.pz-hud.is-modal .pz-notes { opacity: 0; pointer-events: none; }
body.pz-bigmap-on .pz-notes .pz-prompt { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }   /* (the big map: the context prompt folds; toasts still show) */
/* ==================================================================== end NOTICE STACK
/* the lobby line, the results' top fighters (computer fighters carry a small CPU chip here — never over their heads) */
/* the BOSS WAR badge (top bar): live while a war runs in this city — a pulsing ring in the rift's violet, "LIVE · N" */
.pz-bd-wrap--bosswar.is-live .pz-bd::after { content: ''; position: absolute; inset: calc(var(--u) * -.45); border-radius: 50%; box-shadow: 0 0 0 max(2px, calc(var(--u) * .2)) #6fae2e; animation: pz-war-live 1.4s ease-out infinite; pointer-events: none; }
.pz-bd-wrap--bosswar.is-live .pz-bd__lbl { color: var(--hp-hi); } /* [ui-colors] */
/* [ui-sizes] the round's state (GATHERING · 0:25 / LIVE · 24/30 / NEXT IN 0:20) is wider than the badge: it reads from the
   badge's left edge into the free bar before the weather dial (centred, it ran into MAP's label at every desktop size) */
.pz-bd-wrap--bosswar > .pz-bd__lbl { align-self: flex-start; margin-left: calc(var(--u) * .3); }
@keyframes pz-war-live { 0% { opacity: 1; scale: .92; } 100% { opacity: 0; scale: 1.25; } }
/* the knocked-out card's buttons (Watch the rest / Back to the city) */
.pz-war__outbtns { display: none; gap: calc(var(--u) * .8); margin-top: calc(var(--u) * 1.4); pointer-events: auto; }
.pz-war.is-ko .pz-war__outbtns { display: flex; }
.pz-war:not(.can-watch) .pz-war__outbtns [data-act="kowatch"] { display: none; }
.pz-war__out .pz-popup__btn b, .pz-war__outbtns .pz-popup__lbl { font: inherit; color: inherit; text-shadow: none; -webkit-text-stroke: 0; }
/* the round card: the seats filling up, first come first served (yours highlighted, the newest popping in) */
.pz-war-seats { width: 100%; display: flex; flex-direction: column; gap: calc(var(--u) * .45); margin-top: calc(var(--u) * .6); }
.pz-war-seats[hidden] { display: none; }
.pz-war-seats__n { font: 400 calc(var(--u) * 1.3) / 1 'Titan One', 'Rubik', sans-serif; color: var(--hp-ink); text-align: center; }
.pz-war-seats__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * .3); max-height: calc(var(--u) * 7.2); overflow: hidden;}
/* [ui-audit] more seats than fit: the list scrolls (it cut the first rows mid-name on a phone), no bar */
.pz-war-seats__list { overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.pz-war-seats__list::-webkit-scrollbar { display: none; }
.pz-war-seats__list li { display: inline-flex; align-items: center; gap: .35em; padding: .25em .55em; border-radius: 99px; background: var(--hp-sand); color: var(--hp-ink); font: 700 calc(var(--u) * .85) / 1 'Rubik', sans-serif; }
.pz-war-seats__list li > span { color: rgba(30, 33, 48, .5); font-weight: 800; }
.pz-war-seats__list li > i { width: .6em; height: .6em; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--hp-ink); }
.pz-war-seats__list li.is-new { animation: pz-war-seat .45s var(--spring); }
.pz-war-seats__list li.is-you { background: var(--hp-hi); } /* [ui-colors] */
.pz-war-seats__list li.is-cpu { background: rgba(30, 33, 48, .08); color: rgba(30, 33, 48, .55); }
@keyframes pz-war-seat { from { scale: .3; opacity: 0; } }
.pz-popup__btn.is-off { background: rgba(30, 33, 48, .12); color: rgba(30, 33, 48, .5); cursor: default; box-shadow: none; }
.pz-popup__btn.is-off:hover { transform: none; }
/* watching (the ghost): no HP / DASH of your own, no crosshair; the fighters list on the right */
.pz-war.is-watch .pz-war__me { display: none; }
.iw-hud.is-watch .iw-xh { display: none !important; }
.pz-war__list { display: none; position: absolute; right: calc(var(--u) * 1.6); top: calc(var(--u) * 16); width: calc(var(--u) * 13); max-height: 56dvh; overflow: hidden; padding: calc(var(--u) * .7); border-radius: calc(var(--u) * 1.1);
  background: var(--glass); box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--hp-ink); pointer-events: auto; backdrop-filter: blur(8px); }
.pz-war.is-watch .pz-war__list { display: block; }
.pz-war__listhd { display: block; margin-bottom: .5em; font: 800 calc(var(--u) * .78) / 1.3 'Rubik', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .7); }
.pz-war__listhd kbd { font-size: .9em; }
.pz-war__list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pz-war__list li { display: flex; align-items: center; gap: .45em; padding: .28em .5em; border-radius: .5em; font: 700 calc(var(--u) * .9) / 1 'Rubik', sans-serif; color: var(--hp-paper); cursor: pointer; }
.pz-war__list li:hover { background: rgba(255, 255, 255, .08); }
.pz-war__list li.is-on { background: var(--hp-hi); color: var(--hp-ink); } /* [ui-colors] */
.pz-war__list li > i { width: .6em; height: .6em; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--hp-paper); }
/* the badge while seats are open */
.pz-bd-wrap--bosswar.is-gather .pz-bd::after { box-shadow: 0 0 0 max(2px, calc(var(--u) * .2)) var(--hp-hi); } /* [ui-colors] */
/* the enraged boss: the HP bar refills in its colour */
.iw-bhud.is-war .iw-bb.is-heal .iw-bb__fill { background: linear-gradient(#ff9a86, #e0301f 46%, #7a1208) !important; transition: none; }
.iw-bhud.is-war .iw-bb.is-heal .iw-bb__plate { box-shadow: 0 0 0 3px #e0301f, 0 0 0 6px var(--k), 0 0 calc(var(--u) * 2.4) 6px rgba(224, 48, 31, .55); }
/* the round card and the knocked-out card sit in the exact middle of the screen (the HP / DASH panel stays clear below) */
.pz-war-over .pz-war-inv { top: 50%; }
.pz-war-inv .pz-war-inv__card { max-height: calc(100dvh - var(--u) * 16); }
.pz-war__out { top: 50%; }
/* supply-drop boosts you carry: chips over the HP bar */
.pz-war__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .4); }
.pz-war__chips:empty { display: none; }
.pz-war__chip { display: inline-flex; align-items: center; gap: .45em; padding: .3em .65em; border-radius: 99px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px var(--c); color: #fff; font: 800 calc(var(--u) * .78) / 1 'Rubik', sans-serif; letter-spacing: .05em; }
.pz-war__chip i { width: .7em; height: .7em; border-radius: 50%; background: var(--c); box-shadow: 0 0 .6em var(--c); }
.pz-war__chip b { font: 400 1.1em/1 'Titan One', 'Rubik', sans-serif; font-variant-numeric: tabular-nums; color: var(--c); }

/* ==================================================================================================================
   COINS (src/social/coins.js, src/social/wallet.js): the gold-coin reward. Gold is the reward colour ONLY (the coin
   icon and the amounts); everything else keeps the calm brand palette, yellow stays the UI highlight.
   ================================================================================================================== */
.pz-coin { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
:root { --coin-gold: #ffc93a; --coin-gold-deep: #e0a21e; }
/* the counter under the city clock: shows when your coins change, the +N chip beside it, fades after a few seconds */
.pz-coinhud { position: absolute; left: 50%; top: calc(var(--u) * 1.1 + var(--bd) + var(--u) * .75); z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .3) calc(var(--u) * .95) calc(var(--u) * .3) calc(var(--u) * .35); border-radius: 999px; background: var(--hp-glass); color: var(--coin-gold);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(var(--u) * -.8)) scale(.9); transition: opacity .35s, transform .35s; }
.pz-coinhud.is-on { opacity: 1; transform: translate(-50%, 0); transition: opacity .2s, transform .35s var(--spring); }
.pz-coinhud__ico { display: block; width: max(20px, calc(var(--u) * 2)); height: max(20px, calc(var(--u) * 2)); }
.pz-coinhud__n { font: 400 max(16px, calc(var(--u) * 1.55)) / 1 'Titan One', sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pz-coinhud__add { position: absolute; left: 100%; top: 50%; margin-left: calc(var(--u) * .5); padding: .25em .55em; border-radius: 999px; background: var(--coin-gold); color: var(--hp-ink);
  font: 400 max(13px, calc(var(--u) * 1.15)) / 1 'Titan One', sans-serif; white-space: nowrap; opacity: 0; transform: translateY(-50%) scale(.6); transition: opacity .3s, transform .3s; }
.pz-coinhud__add.is-on { opacity: 1; transform: translateY(-50%); animation: pz-coin-add .45s var(--spring); }
@keyframes pz-coin-add { 0% { transform: translateY(-50%) scale(.5); } 60% { transform: translateY(-50%) scale(1.15); } 100% { transform: translateY(-50%) scale(1); } }
.pz-hud.is-modal .pz-coinhud { opacity: 0; }
/* in the Boss War too the counter stays in its bottom-right corner (clear of the HP / DASH bars bottom-centre) */
.pz-hud.is-war .pz-coinhud { top: auto; }
/* the "+N" over your kid's head: floats up and fades */
.pz-coinpops { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.pz-coinpop { position: absolute; display: flex; align-items: center; gap: .25em; translate: -50% -100%; color: var(--coin-gold);
  font: 400 max(18px, calc(var(--u) * 1.9)) / 1 'Titan One', sans-serif; white-space: nowrap; -webkit-text-stroke: max(1.5px, calc(var(--u) * .14)) var(--hp-ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .35); animation: pz-coinpop 1.25s ease-out forwards; }
.pz-coinpop svg { width: 1.05em; height: 1.05em; }
@keyframes pz-coinpop { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 14% { opacity: 1; transform: translateY(-4px) scale(1.12); } 26% { transform: translateY(-8px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60px) scale(.95); } }
/* the notice-stack pill: "+120 coins · Boss War reward" */
.pz-note--coins { display: inline-flex; align-items: center; gap: .4em; }
.pz-note--coins svg { width: 1.35em; height: 1.35em; flex: none; }
.pz-note--coins b { color: var(--coin-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
/* a balance inline (the main-menu card, the MENU header): the coin + the number in gold */
.pz-coinamt { display: inline-flex; align-items: center; gap: .35em; color: var(--coin-gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-coinamt i { display: block; width: 1.25em; height: 1.25em; flex: none; }
.pz-coinamt b { font-weight: 800; }
/* PROFILE › Coins (Settings' design language: a section label, tall rows) */
/* its own panel right of the name + photo panel (the buttons stay under that one) */
.pz-profscr .pz-prof.pz-prof__coins { left: auto; right: calc(var(--u) * 3.6); width: calc(var(--u) * 26); min-width: 300px; gap: calc(var(--u) * .9); }   /* (right-anchored: clear of the button row under the name panel) */
.pz-prof__coinhead { display: flex; align-items: center; gap: calc(var(--u) * 1.1); }
.pz-prof__coinbig { display: block; width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); flex: none; }
.pz-prof__coinbal { display: flex; flex-direction: column; gap: calc(var(--u) * .25); min-width: 0; }
.pz-prof__coinbal b { font: 400 max(30px, calc(var(--u) * 3.4)) / 1 'Titan One', sans-serif; color: var(--coin-gold); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pz-prof__coinbal span { font: 700 max(12px, calc(var(--u) * .85)) / 1.2 'Rubik', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 236, 224, .6); }
.pz-prof__stats { display: flex; flex-direction: column; gap: 2px; }
.pz-prof__stat { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .8); padding: calc(var(--u) * .65) calc(var(--u) * .9); border-radius: calc(var(--u) * .6); background: rgba(243, 236, 224, .06); box-shadow: inset 0 0 0 2px rgba(243, 236, 224, .06); }
.pz-prof__stat small { font: 700 max(11px, calc(var(--u) * .75)) / 1.2 'Rubik', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 236, 224, .55); }
.pz-prof__stat b { font: 400 max(16px, calc(var(--u) * 1.35)) / 1 'Titan One', sans-serif; color: var(--hp-paper); font-variant-numeric: tabular-nums; }
.pz-prof__stat b.is-gold { color: var(--coin-gold); }
.pz-prof__hist { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pz-prof__histhd { font: 700 max(11px, calc(var(--u) * .75)) / 1.2 'Rubik', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 236, 224, .55); }
.pz-prof__hrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * .8); border-radius: calc(var(--u) * .6); background: rgba(243, 236, 224, .04);
  font: 600 max(13px, calc(var(--u) * .95)) / 1.25 'Rubik', sans-serif; color: rgba(243, 236, 224, .8); }
.pz-prof__hrow time { color: rgba(243, 236, 224, .5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-prof__hrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-prof__hrow span em { font-style: normal; color: rgba(243, 236, 224, .5); }
.pz-prof__hrow .pz-coinamt { justify-self: end; }
.pz-prof__hempty { padding: calc(var(--u) * .7) calc(var(--u) * .8); border-radius: calc(var(--u) * .6); background: rgba(243, 236, 224, .04); font: 600 max(13px, calc(var(--u) * .95)) / 1.35 'Rubik', sans-serif; color: rgba(243, 236, 224, .55); }
/* the main-menu profile card: the balance on the location · friends line */
.pz-me__coins { margin-left: auto; }
/* the in-city MENU panel header: the balance between the city and the time chip */
.pz-mp__coins { flex: none; font: 700 max(14px, calc(var(--u) * 1.05)) / 1 'Rubik', sans-serif; padding: .45em .8em; border-radius: 999px; background: rgba(243, 236, 224, .08); }
/* ============================================================================================================ /COINS */
/* near death in the war: a red pulsing screen edge */
.pz-war.is-lowhp::before { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(var(--u) * 9) calc(var(--u) * 1.5) rgba(220, 40, 60, .55); animation: pz-war-heart .9s ease-in-out infinite; opacity: 1 !important; }
@keyframes pz-war-heart { 0%, 100% { opacity: .55; } 15% { opacity: 1; } 30% { opacity: .65; } 45% { opacity: .95; } }
/* the gold on the results card */
/* supply drops off screen: an arrow on the edge in the drop's colour */
.pz-war__arrows { position: absolute; inset: 0; pointer-events: none; }
.pz-war__arrow { position: absolute; left: 0; top: 0; width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); background: var(--c); clip-path: polygon(100% 50%, 15% 0, 35% 50%, 15% 100%); filter: drop-shadow(0 0 calc(var(--u) * .5) var(--c)); will-change: transform; }
/* the HP bar wears the suit's state: green → amber → red */
.pz-war__hp .pz-war__fill { background: linear-gradient(#a8f5c4, #4fdc8c 55%, #2fae69) !important; }
.pz-war__me.is-mid .pz-war__hp .pz-war__fill { background: linear-gradient(#ffd99a, #ffb43d 55%, #d98a1c) !important; }
.pz-war__me.is-low .pz-war__hp .pz-war__fill { background: linear-gradient(#f2a29b, #e0524a 55%, #b8332c) !important; }
/* ==================================================================== COINS · always-on corner
   The coin balance lives in the bottom-right corner for the whole visit (the user's ask); the fps counter (when shown)
   sits just above it. Hidden while a menu screen is up, like the rest of the HUD corners. */
.pz-coinhud { left: auto; right: calc(var(--u) * 2.2); top: auto; bottom: calc(var(--u) * 1.6); transform: none; }
.pz-coinhud.is-on { transform: none; }
.pz-coinhud__add { left: auto; right: 100%; margin-left: 0; margin-right: calc(var(--u) * .5); }
.iw-hud.is-social .iw-fps { bottom: calc(var(--u) * 5.2); }
.pz-hud.is-modal .pz-coinhud, body.pz-locker-up .pz-coinhud { opacity: 0; }
/* ==================================================================== BOSS WAR · timed power-up pill (the rocket launcher)
   The shared notice-stack pill with a launcher icon, "ROCKET 20" counting down and a draining yellow bar; the last 5 s
   pulse (warDrops.js _rocketPill). */
.pz-note--timer { display: inline-flex; align-items: center; gap: .5em; font-variant-numeric: tabular-nums; }
.pz-note--timer .pz-note__ico { width: 1.4em; height: 1.4em; flex: none; }
.pz-note--timer b { letter-spacing: .08em; }
.pz-note--timer em { font-style: normal; font-weight: 800; color: var(--hp-hi); min-width: 1.4em; text-align: right; } /* [ui-colors] */
.pz-note--timer .pz-note__bar { position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * .5); border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; flex: none; }
.pz-note--timer .pz-note__bar > i { position: absolute; inset: 0; width: auto; height: auto; background: var(--hp-hi); transform-origin: 0 50%; } /* [ui-colors] */
.pz-note.is-pulse { animation: pz-note-pulse .5s ease-in-out infinite alternate; }
@keyframes pz-note-pulse { to { box-shadow: 0 0 0 2px var(--hp-hi); } } /* [ui-colors] (no glow) */
/* the rocket launcher's ammo pips (10, emptying per shot) */
.pz-note--timer .pz-note__pips { display: inline-flex; gap: 3px; width: auto; height: auto; flex: none; }
.pz-note--timer .pz-note__pips > i { width: calc(var(--u) * .45); height: calc(var(--u) * .9); border-radius: 2px; background: rgba(255, 255, 255, .18); }
.pz-note--timer .pz-note__pips > i.is-on { background: var(--hp-hi); } /* [ui-colors] */

/* ==================================================================== MAIN MENU · centred column
   (menus-plaza.js _scr_plaza .pz-main--centre) the wordmark top-left (a size up), your profile card top-right, the menu
   in one column at the true centre over the split preview with the focused item's line under it; a soft dark pool
   behind the column, the city clear at the edges */
.pz-main--centre .iw-scrim-left { display: none; }
.pz-main__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 48% at 50% 66%, rgba(16, 18, 27, .66), rgba(16, 18, 27, .36) 60%, rgba(16, 18, 27, 0) 100%),
    linear-gradient(180deg, rgba(16, 18, 27, .5), rgba(16, 18, 27, 0) 22%), linear-gradient(0deg, rgba(16, 18, 27, .45), rgba(16, 18, 27, 0) 22%); }
.pz-main__logo { position: absolute; left: calc(var(--u) * 3.4 + var(--sal, 0px)); top: calc(var(--u) * 2.4 + var(--sat, 0px)); transform-origin: 0 0; scale: 1.35; }
.pz-main__me { position: absolute; right: calc(var(--u) * 3.2 + var(--sar, 0px)); top: calc(var(--u) * 2.4 + var(--sat, 0px)); width: calc(var(--u) * 28); min-width: 320px; }
.pz-main__col { position: absolute; left: 50%; top: auto; bottom: calc(var(--u) * 6.5 + var(--sab, 0px)); translate: -50% 0; width: min(calc(var(--u) * 34), calc(100vw - 32px)); min-width: min(360px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 1.3); }
.pz-main--centre .pz-main__menu { position: static; transform: none; width: auto; left: auto; top: auto; gap: calc(var(--u) * .8); }
.pz-main--centre .pz-main__menu .iw-btn--menu { width: 100%; rotate: 0deg; }
.pz-main--centre .iw-btn--menu.is-focus { transform: scale(1.025); }
.pz-main--centre .pz-main__desc { position: static; align-self: center; max-width: none; justify-content: center; text-align: center; min-height: 1.4em; }
/* the profile card: a slim glass card — portrait + name + location / friends / coins, the stall line under it */
.pz-main__me .pz-me { width: 100%; margin: 0; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); gap: calc(var(--u) * .8); border-radius: calc(var(--u) * 1.4);
  background: rgba(22, 25, 38, .72); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 calc(var(--u) * .8) calc(var(--u) * 2.4) rgba(0, 0, 0, .3); }
.pz-main__me .pz-me__stall { padding-top: calc(var(--u) * .8); }
@media (max-width: 900px) { .pz-main__me { width: calc(100vw - 32px); left: 16px; right: 16px; top: auto; bottom: calc(var(--u) * 7); min-width: 0; } .pz-main__logo { scale: 1; } }

/* ==================================================================== SCREEN HEADER + KEY HINTS (every HOPPA menu screen)
   Simple and tidy: a round glass back button (just the arrow; ESC is in the hints bar), the title in plain heavy Rubik
   caps — no ink blob, no outline — and one quiet line under it. The key hints bottom-right: one slim glass pill, keycaps
   + plain labels, even spacing. */
.iw-ui .iw-head { gap: calc(var(--u) * 1.3); align-items: center; }
.iw-ui .iw-backbtn { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); min-width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%;
  background: rgba(22, 25, 38, .72); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.iw-ui .iw-backbtn .iw-hint { display: none; }
.iw-ui .iw-backbtn__arrow { width: 58%; height: 58%; background: none; color: #fff; }
.iw-ui .iw-backbtn__arrow svg { width: 100%; height: 100%; }
.iw-ui .iw-backbtn:hover { transform: translateX(-2px); background: rgba(22, 25, 38, .9); box-shadow: inset 0 0 0 1px rgba(var(--hp-hi-rgb), .6); } /* [ui-colors] */
.iw-ui .iw-head__blob { display: none; }
.iw-ui .iw-head__title { font-size: calc(var(--u) * 2.7); }
.iw-ui .iw-head__title .iw-display { font: 800 1em / 1 'Rubik', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 calc(var(--u) * .2) calc(var(--u) * 1) rgba(0, 0, 0, .35); }
.iw-ui .iw-head__sub { margin-top: .5em; font: 500 max(15px, calc(var(--u) * 1.25)) / 1.25 'Rubik', sans-serif; color: rgba(255, 255, 255, .72); text-shadow: 0 1px calc(var(--u) * .5) rgba(0, 0, 0, .4); }
.iw-ui .iw-prompts { gap: calc(var(--u) * 1.6); padding: calc(var(--u) * .6) calc(var(--u) * 1.3); background: rgba(22, 25, 38, .72); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font: 600 max(14px, calc(var(--u) * 1.1)) / 1 'Rubik', sans-serif; }
.iw-ui .iw-prompts .iw-hint { gap: .55em; }
.iw-ui .iw-prompts .iw-hint__label { font-weight: 600; color: rgba(255, 255, 255, .78); letter-spacing: .02em; }
/* hunted by the boss (src/boss/bossAggro.js): a red edge pulse; the arrow to the boss in red */
.pz-war.is-hunted::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(var(--u) * 7) calc(var(--u) * 1.2) rgba(255, 40, 60, .5); animation: pz-war-heart .7s ease-in-out infinite; }
.pz-war__arrow--hunt { --c: #ff3040; }

/* ================================================================================================================
   HOTBAR (src/social/warHotbar.js, warLoadout.js) — the Boss War's bottom-centre group: the 8-slot hotbar at the bottom,
   the HP / DASH panel right above it (lifted and laid out side by side here), the bag button at the bar's right end;
   the notice stack clears the group (ui._placePrompt asks hotbar.clearance()); the chat box steps up over the corner
   map, left of the group. The inventory panel, the charge cannon's ring on the crosshair.
   ================================================================================================================ */
.pz-hotbar { --hs: calc(var(--u) * 4.2); --hg: calc(var(--u) * .45); position: absolute; left: 50%; bottom: calc(var(--u) * 1.2); translate: -50% 0; z-index: 15;
  display: flex; align-items: center; gap: var(--hg); padding: calc(var(--u) * .5); border-radius: calc(var(--u) * 1.25); background: var(--glass);
  box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--hp-ink), 0 4px 0 2px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.pz-hotbar.is-on { opacity: 1; visibility: visible; transition: opacity .3s; }
.pz-hb__slot, .pz-hb__inv { position: relative; flex: none; width: var(--hs); height: var(--hs); padding: 0; border: 0; border-radius: calc(var(--u) * .8); cursor: pointer; pointer-events: auto;
  background: rgba(8, 10, 18, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .92); transition: transform .14s var(--spring), box-shadow .14s, background .14s; }
.pz-hb__slot:hover, .pz-hb__inv:hover { background: rgba(255, 255, 255, .1); }
.pz-hb__ico { position: absolute; inset: 16%; display: block; pointer-events: none; }
.pz-hb__ico svg, .pz-hb__ico img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pz-hotbar .pz-hb__key { position: absolute; left: calc(var(--u) * .3); top: calc(var(--u) * .25); min-width: 0; height: auto; padding: 0; background: none; box-shadow: none;
  font: 400 max(12px, calc(var(--u) * 1.05)) / 1 'Titan One', 'Rubik', sans-serif; color: rgba(255, 255, 255, .62); text-shadow: 0 1px 0 var(--hp-ink); pointer-events: none; }
.pz-hb__n { position: absolute; right: calc(var(--u) * .3); bottom: calc(var(--u) * .2); font: 400 max(13px, calc(var(--u) * 1.3)) / 1 'Titan One', 'Rubik', sans-serif; color: #fff;
  -webkit-text-stroke: calc(var(--u) * .1) var(--hp-ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; pointer-events: none; }
.pz-hb__slot.is-empty { background: rgba(8, 10, 18, .32); }
.pz-hb__gauge { display: none; position: absolute; right: calc(var(--u) * .35); top: 18%; bottom: 18%; width: calc(var(--u) * .45); border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; pointer-events: none; }
.pz-hb__gauge > b { position: absolute; inset: 0; transform-origin: bottom; background: var(--hp-hi); border-radius: inherit; } /* [ui-colors] */
.pz-hb__slot.has-gauge .pz-hb__gauge { display: block; }
.pz-hb__slot.has-gauge .pz-hb__ico { right: 22%; }
.pz-hb__slot.is-ready { animation: pz-hb-ready .7s ease-in-out infinite; }
.pz-hb__slot.is-ready .pz-hb__gauge > b { background: #fff; }   /* [ui-colors] */
.pz-hb__slot.is-ready::after { content: attr(data-ready); position: absolute; left: 50%; bottom: calc(var(--u) * .25); translate: -50% 0; padding: .15em .4em; border-radius: 99px; background: var(--hp-hi); color: var(--hp-ink); /* [ui-colors] */
  font: 400 max(12px, calc(var(--u) * .95)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
@keyframes pz-hb-ready { 50% { box-shadow: inset 0 0 0 calc(var(--u) * .24) var(--hp-hi); } } /* [ui-colors] (no glow) */
.pz-hb__slot.is-off .pz-hb__ico { opacity: .32; filter: grayscale(1); }
.pz-hb__ico { inset: 10%; }
.pz-hb__slot.is-off .pz-hb__n { color: rgba(255, 255, 255, .45); }
.pz-hb__slot.is-sel { transform: translateY(calc(var(--u) * -.25)); background: rgba(var(--hp-hi-rgb), .1); color: #fff; /* [ui-colors] */
  box-shadow: inset 0 0 0 calc(var(--u) * .24) var(--hp-hi); } /* [ui-colors] (no glow) */
.pz-hb__slot.is-sel .pz-hb__key { color: var(--hp-hi); } /* [ui-colors] */
.pz-hb__slot[data-item="needle"].is-sel .pz-hb__ico, .pz-hb__slot.is-jab .pz-hb__ico { animation: pz-hb-pulse .6s ease-in-out infinite; }
@keyframes pz-hb-pulse { 50% { filter: none; scale: 1.08; } } /* [ui-colors] (no glow) */
.pz-hb__inv { width: calc(var(--hs) * .86); height: calc(var(--hs) * .86); margin-left: calc(var(--u) * .35); border-radius: 50%; background: rgba(255, 255, 255, .06); }
.pz-hb__inv::before { content: ''; position: absolute; left: calc(var(--u) * -.6); top: 15%; bottom: 15%; width: 2px; background: rgba(255, 255, 255, .12); }
.pz-hb__inv .pz-hb__ico { inset: 22%; color: rgba(255, 255, 255, .85); }
.pz-hotbar .pz-hb__inv .pz-hb__key { left: auto; right: calc(var(--u) * -.15); top: auto; bottom: calc(var(--u) * -.15); min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: .4em;
  background: var(--hp-paper); color: var(--hp-ink); text-shadow: none; font-size: max(12px, calc(var(--u) * .95)); display: inline-grid; place-items: center; }
.pz-hotbar.is-inv .pz-hb__inv { box-shadow: inset 0 0 0 calc(var(--u) * .22) var(--hp-hi); } /* [ui-colors] */
/* the HP / DASH panel, one group with the bar: lifted over it, as wide, HP and DASH side by side, chunky numbers;
   HP white → crimson as it drops (--hpk from the hotbar), a chip trail, a heal flash; DASH yellow, a refill shimmer, a
   clear empty state; the cracked-suit mark at low HP */
.pz-war.has-hotbar .pz-war__me { bottom: calc(var(--u) * 7.15); width: calc(var(--u) * 41.8); flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: calc(var(--u) * 1.3); row-gap: calc(var(--u) * .45);
  padding: calc(var(--u) * .65) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.25); }
.pz-war.has-hotbar .pz-war__chips { flex: 0 0 100%; order: -1; }
.pz-war.has-hotbar .pz-war__row { flex: 1.7 1 0; min-width: 0; gap: calc(var(--u) * .6); }
.pz-war.has-hotbar .pz-war__row--en { flex: 1 1 0; }
.pz-war.has-hotbar .pz-war__lbl { width: auto; font-size: max(13px, calc(var(--u) * 1.15)); }
.pz-war.has-hotbar .pz-war__hp { height: calc(var(--u) * 1.75); }
.pz-war.has-hotbar .pz-war__me .pz-war__hp .pz-war__fill { background: linear-gradient(rgba(255, 255, 255, .35), transparent 55%), color-mix(in oklab, #f6f1e7 calc(var(--hpk, 1) * 100%), #c8102e) !important; }   /* (over the green → amber → red suit-state rules: the user's call, white → crimson, no green) */
.pz-war.has-hotbar .pz-war__hp .pz-war__chip { background: rgba(255, 196, 190, .85); }
.pz-war.has-hotbar .pz-war__num { min-width: calc(var(--u) * 3.4); font-size: max(18px, calc(var(--u) * 2.05)); -webkit-text-stroke: calc(var(--u) * .1) var(--hp-ink); paint-order: stroke fill; }
.pz-war.has-hotbar .pz-war__me.is-crack .pz-war__num { color: color-mix(in oklab, #fff 55%, #ff4a4a); }
.pz-war__crack { display: none; flex: none; width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: #ff5a4f; }
.pz-war__crack svg { width: 100%; height: 100%; display: block; }
.pz-war.has-hotbar .pz-war__me.is-crack .pz-war__crack { display: block; animation: pz-war-low .8s ease-in-out infinite; }
.pz-war.has-hotbar .pz-war__me.is-heal .pz-war__hp { box-shadow: inset 0 0 0 2px var(--hp-hi); } /* [ui-colors] (no glow) */
.pz-war.has-hotbar .pz-war__me.is-heal .pz-war__hp .pz-war__fill { animation: pz-hb-heal .9s ease-out; }
@keyframes pz-hb-heal { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.pz-war.has-hotbar .pz-war__en { height: calc(var(--u) * 1.1); }
.pz-war.has-hotbar .pz-war__me.is-refill .pz-war__en .pz-war__fill { background: linear-gradient(100deg, var(--hp-hi) 30%, #c9ccd6 45%, var(--hp-hi) 60%) 0 0 / 300% 100%; animation: pz-hb-shim .9s linear infinite; } /* [ui-colors] */
@keyframes pz-hb-shim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.pz-war.has-hotbar .pz-war__en.is-empty { background: repeating-linear-gradient(-45deg, rgba(var(--hp-hi-rgb), .16) 0 calc(var(--u) * .4), rgba(0, 0, 0, .45) 0 calc(var(--u) * .8)); } /* [ui-colors] */
.pz-war.has-hotbar .pz-war__row--en kbd { font-size: max(12px, calc(var(--u) * .95)); }
/* the chat box in the war: up over the corner map, left of the group (the stack no longer rides on it) */
.pz-hud.is-war.has-hotbar .pz-chat { left: calc(var(--u) * 2.4); bottom: calc(var(--u) * 8 + max(124px, var(--u) * 11)); width: min(var(--cw), calc(50vw - var(--u) * 24)); }
/* [inv-e] the inventory (E / I; a long press on the bar on touch): Minecraft's card — INVENTORY, LOCKER, the 4 × 10
   storage — docked right over the REAL bar, which is its hotbar row (--clr: the bar's height from the screen's bottom,
   set by warHotbar.js). --cs: one cell, as big as the screen's width (10 columns) and the room over the bar allow; 4 × 10
   always. While it is open the bar sits over the card's layer and HP / GLOW step aside */
.pz-inv { --u: min(1vw, 1.7778dvh); --glass: var(--hp-glass); --line: rgba(255, 255, 255, .1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  position: fixed; inset: 0 0 var(--clr, 0px) 0; z-index: 17; display: grid; place-items: end center; padding-bottom: max(6px, calc(var(--u) * .6));
  background: rgba(6, 8, 14, .5); pointer-events: auto; font-family: 'Rubik', system-ui, sans-serif; color: #fff; -webkit-font-smoothing: antialiased;
  --cs: min(calc(var(--u) * 4.4), calc((100vw - 48px) / 11.3), calc((100dvh - var(--clr, 90px) - 28px) / 6.2)); --cg: calc(var(--cs) * .1); }   /* (a body-level layer, z 17: over the city HUD 15, the touch pad 16, the war 14; under the menus 20. It dims and blocks the game down to the bar — the bar itself stays bright and live) */
.pz-inv[hidden] { display: none; }
.pz-hotbar.is-inv .pz-hb__slot { touch-action: none; cursor: pointer; }
.pz-hotbar.is-inv .pz-hb__slot.is-over, .pz-inv__cell.is-over { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px #fff; }
body.pz-inv-up .pz-war__me, body.pz-inv-up .tc { visibility: hidden; }
.pz-inv__card { pointer-events: auto; width: calc(var(--cs) * 10.56 + var(--cg) * 9); box-sizing: border-box; max-width: calc(100vw - 16px); padding: calc(var(--cs) * .24) calc(var(--cs) * .28) calc(var(--cs) * .34); border-radius: calc(var(--cs) * .3);
  background: var(--hp-cut), rgba(22, 25, 38, .95); color: #fff; box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--hp-ink), 0 6px 0 2px rgba(0, 0, 0, .3);
  animation: pz-inv-in .2s var(--spring); }
@keyframes pz-inv-in { from { opacity: 0; translate: 0 8px; } }
.pz-inv__hd { display: flex; align-items: center; gap: calc(var(--cs) * .18); margin-bottom: calc(var(--cs) * .22); }
.pz-inv__hd b { flex: none; font: 400 max(14px, calc(var(--cs) * .32)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.pz-inv__keys { flex: 1; min-width: 0; font: 600 max(11px, calc(var(--cs) * .2)) / 1.2 'Rubik', sans-serif; color: rgba(255, 255, 255, .7); }
.pz-inv__keys.is-msg { color: var(--hp-cyan); }
.pz-inv__locker { flex: none; display: inline-flex; align-items: center; gap: .45em; height: max(30px, calc(var(--cs) * .64)); padding: 0 .45em 0 .35em; border: 0; border-radius: 99px; cursor: pointer;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(var(--hp-cyan-rgb), .55); color: #fff; font: 400 max(12px, calc(var(--cs) * .25)) / 1 'Titan One', 'Rubik', sans-serif; letter-spacing: .05em; }
.pz-inv__locker:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 2px var(--hp-cyan); }
.pz-inv__lki { width: 1.6em; height: 1.6em; display: block; color: var(--hp-paper); }
.pz-inv__lki svg { width: 100%; height: 100%; display: block; }
.pz-inv__locker kbd { min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: .4em; display: inline-grid; place-items: center; background: var(--hp-paper); color: var(--hp-ink); box-shadow: none; font: inherit; font-size: .85em; }
.pz-inv__x { flex: none; width: max(30px, calc(var(--cs) * .6)); height: max(30px, calc(var(--cs) * .6)); padding: calc(var(--cs) * .12); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.pz-inv__x:hover { background: rgba(255, 255, 255, .16); }
.pz-inv__x svg { width: 100%; height: 100%; display: block; }
.pz-inv__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, var(--cs)); grid-auto-rows: var(--cs); gap: var(--cg); }
.pz-inv__cell { position: relative; width: var(--cs); height: var(--cs); border-radius: calc(var(--cs) * .19); background: rgba(8, 10, 18, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.pz-inv__cell:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }   /* (a clean highlight: brighter + a thin solid line — no cut lines) */
.pz-inv__cell.is-empty { background: rgba(8, 10, 18, .28); }
.pz-inv__cell .pz-hb__ico { inset: 11%; }
.pz-inv .pz-hb__n { right: 7%; bottom: 5%; font-size: max(12px, calc(var(--cs) * .28)); }
.pz-inv__tip { position: fixed; left: 0; top: 0; z-index: 3; max-width: min(300px, 80vw); display: flex; flex-direction: column; align-items: flex-start; gap: .3em; padding: .55em .8em .65em; border-radius: 10px;
  background: rgba(16, 18, 27, .96); box-shadow: inset 0 0 0 1.5px var(--line), 0 0 0 2px var(--hp-ink); color: #fff; pointer-events: none; font: 600 max(12px, calc(var(--u) * .95)) / 1.3 'Rubik', sans-serif; }
.pz-inv__tip[hidden], .pz-inv__ghost[hidden] { display: none; }
.pz-inv__tip b { font: 400 max(14px, calc(var(--u) * 1.15)) / 1.1 'Titan One', 'Rubik', sans-serif; letter-spacing: .03em; }
.pz-inv__tip b em { font-style: normal; color: var(--hp-cyan); }
.pz-inv__tip small { font-size: inherit; color: rgba(255, 255, 255, .75); }
.pz-inv__tip small.is-st { color: rgba(var(--hp-cyan-rgb), .9); }
/* the stack in hand, under the cursor (Minecraft: it rides with the pointer until it is put down) */
.pz-inv__ghost { position: fixed; left: 0; top: 0; z-index: 1004; width: calc(var(--cs) * .9); height: calc(var(--cs) * .9); margin: calc(var(--cs) * -.45) 0 0 calc(var(--cs) * -.45); pointer-events: none; color: #fff; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.pz-inv__ghost svg, .pz-inv__ghost img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pz-inv__ghost .pz-hb__n { right: -6%; bottom: -6%; }
/* [inv-e] the bar in the city (warHotbar.js cityOn): the war's layout as a display — no HP / GLOW; 1–8 / the wheel move
   the white frame only; a menu screen / the Locker hides it; the chat log steps up over it (desktop — on touch the chat is
   a top-left panel) */
.pz-hud.is-modal .pz-hotbar.is-city, body.pz-locker-up .pz-hotbar.is-city { opacity: 0; visibility: hidden; }
html:not(.is-touch) .pz-hud.has-cbar:not(.is-war) .pz-chat { bottom: calc(var(--u) * 7.8); }
/* the charge cannon's charge ring round the crosshair */
.pz-cring { position: absolute; left: 50%; top: 50%; width: calc(var(--u, 1vw) * 7); height: calc(var(--u, 1vw) * 7); translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .15s; }
.pz-cring.is-on { opacity: 1; }
.pz-cring svg { width: 100%; height: 100%; display: block; rotate: -90deg; overflow: visible; }
.pz-cring circle { fill: none; stroke-width: 4; }
.pz-cring__track { stroke: rgba(255, 255, 255, .22); }
.pz-cring__fill { stroke: var(--hp-hi); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; filter: none; } /* [ui-colors] (no glow) */
.pz-cring.is-full .pz-cring__fill { stroke: #2de2e6; animation: pz-cring-full .35s ease-in-out infinite alternate; } /* [ui-colors] */
@keyframes pz-cring-full { to { stroke-width: 6; filter: none; } } /* [ui-colors] (no glow) */
/* seat-row tags (FIRST IN · bonus here; others, e.g. the Blight Vac's, use the same .pz-war-seats__tag look): compact
   yellow chips that wrap inside the row instead of overflowing it */
.pz-war-seats__list li:has(> em) { flex-wrap: wrap; max-width: 100%; row-gap: .25em; }
.pz-war-seats__list li > em, .pz-war-seats__first, .pz-war-seats__tag { flex: none; padding: .2em .5em; border-radius: 99px; background: var(--hp-hi); color: var(--hp-ink); font: 400 .95em / 1 'Titan One', 'Rubik', sans-serif; font-style: normal; letter-spacing: .02em; white-space: nowrap; } /* [ui-colors] */

/* ---- [blight] RIFT BLIGHT (src/boss/blight.js): the poison vignette while you stand in it, the +PURIFIED pop ---- */
.war-toxic { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(ellipse 72% 64% at 50% 52%, rgba(90, 130, 50, 0) 55%, rgba(80, 120, 50, .22) 78%, rgba(30, 60, 30, .5) 100%);
  mix-blend-mode: normal; }   /* (no pulsing: a soft, steady edge) */
.war-purified { --u: min(1vw, 1.7778dvh); position: fixed; left: 0; top: 0; pointer-events: none; z-index: 6; will-change: transform; }
.war-purified b { display: block; transform: translate(-50%, -50%); font: 400 calc(var(--u, 8px) * 1.5) / 1 'Titan One', sans-serif;
  color: #fff; letter-spacing: .04em; white-space: nowrap; opacity: 0;
  text-shadow: 0 2px 0 rgba(20, 22, 32, .6); } /* [ui-colors] (no glow) */
.war-purified.is-on b { animation: war-purified-pop .9s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes war-purified-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -110%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -150%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .war-purified.is-on b { animation-duration: .6s; } }
/* [blight] the waiting card: seats 1–3 start with the Blight Vac */
.pz-war-seats__list li .pz-war-seats__vac { margin-left: auto; padding-left: .6em; font-style: normal; font-size: .78em; letter-spacing: .04em; color: var(--hp-hi); white-space: nowrap; } /* [ui-colors] */
/* [ui-sizes] a narrow desktop window (≈ 1024 px): the seat tags fell to 7–8 px — a floor (identical from ≈ 1300 px up); the
   clock's city (8 → 9.5 px) and the dial's wind line (7 → 8.5 px) got one too, above */
.pz-war-seats__list li .pz-war-seats__vac { font-size: max(10px, .78em); }
.pz-war-seats__list li > em, .pz-war-seats__first, .pz-war-seats__tag { font-size: max(10px, .95em); }
/* [blight] the Blight Vac's full tank: its slot flashes READY (yellow: the UI highlight) */
.pz-hb__slot.is-ready { animation: pz-hb-ready .5s ease-in-out infinite alternate; }
.pz-hb__slot.is-ready .pz-hb__n { color: var(--hp-hi); } /* [ui-colors] */
@keyframes pz-hb-ready { from { box-shadow: 0 0 0 2px rgba(var(--hp-hi-rgb), .35); } to { box-shadow: 0 0 0 3px rgba(var(--hp-hi-rgb), 1); } } /* [ui-colors] (no glow) */
@media (prefers-reduced-motion: reduce) { .pz-hb__slot.is-ready { animation: none; box-shadow: 0 0 0 3px rgba(var(--hp-hi-rgb), 1); } } /* [ui-colors] */
/* [blight] the Blight Vac's huge shot: the screen's edges pull in for the charge beat */
.war-vacpull { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(12, 40, 20, .55) 100%); }
.war-vacpull.is-on { animation: war-vacpull .55s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes war-vacpull { 0% { opacity: 0; transform: scale(1.08); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .war-vacpull.is-on { animation-duration: .3s; } }

/* twin / extra boss bars (guardians, lions, the Tengu): the bars themselves sit a little smaller (hud-boss.js setTwin
   scales them .86), but the boss's FACE stays big and readable — the portrait disc is enlarged back up */
.iw-bhud.is-war .iw-bb--twin .iw-bb__emb { width: calc(var(--u) * 9.2); height: calc(var(--u) * 9.2); margin-right: calc(var(--u) * -3.4); }

/* boss HP bars 30 % smaller (user call): every bar — main, twin and extra (their name, face portrait, %, notches and
   offsets are all in --u) — and the OPEN! call-out work in a 0.7 × unit; the war's timer/fighters row follows */
.iw-bhud .iw-bb, .iw-bhud .iw-bcall, .iw-bhud .iw-bmv { --u: calc(min(1vw, 1.7778dvh) * .7); }
.pz-war__info { top: calc(min(1vw, 1.7778dvh) * .7 * (4 + 5.6 * var(--war-bars, 1))); }
/* the war's opening title ribbon (boss face, BOSS WAR tag, name, epithet — hud-boss.js _warTitleCard) 30 % smaller too */
.iw-wtc { --u: calc(min(1vw, 1.7778dvh) * .7); }
/* the Boss War card's title wraps inside the card (long lines like "A new Boss War is gathering in Shibuya Crossing"
   and longer translations) instead of running out past its edge */
.pz-war-inv .pz-popup__name { max-width: 100%; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; font-size: calc(var(--u) * 2.1); line-height: 1.15; }
.pz-war-inv .pz-popup__title { width: 100%; }
/* the war's end splash (DEFEATED! / RIFT CLOSED, the boss line and the rift tear behind it — hud-boss.js _ending) 30 % smaller */
.iw-bend.is-war { --u: calc(min(1vw, 1.7778dvh) * .7); }
.iw-bend.is-war .iw-rift { width: min(67vw, calc(var(--u) * 96)); }
/* results card: the big white figures a size down so long numbers / translations never overflow their column */
.pz-war-res__stats b { font-size: calc(var(--u) * 1.75); white-space: nowrap; }
.pz-war-res__stats > div { min-width: 0; }
.pz-war-res__dmg { font-size: calc(var(--u) * 1.45); }
.pz-war-res__list li small { font-size: calc(var(--u) * 1.15); }

/* [perf3-mac] layout containment on HUD groups that are already stacking contexts (their translate): a change inside
   (a pill's words, a slot's count) lays out only the group */
.pz-hotbar, .pz-notes { contain: layout style; }

/* [mp-fire] the Boss War's MP (social/warMp.js; the war HUD's second bar, was DASH): a cool suit-cyan fill (HOPPA yellow stays
   the only highlight — the out-of-MP flash keeps it); out of MP: the bar flashes (.is-empty, above), the crosshair greys
   (.iw-xh[data-mp="out"]), a phone's FIRE button dims (.tc-btn--fire.is-mp-out; --mp = MP 0…1 on it) */
.pz-war__mp .pz-war__fill, .pz-war.has-hotbar .pz-war__mp .pz-war__fill, .pz-war.has-hotbar .pz-war__me.is-refill .pz-war__mp .pz-war__fill { background: #3df0ff; }
.pz-war__mp.is-empty .pz-war__fill { background: #1f7f88; }
.iw-xh[data-mp="out"] .iw-ret { opacity: .4; scale: .85; }
/* [boss-range] aiming at a boss body past the shooting range: the reticle dims, a small TOO FAR tag under it */
.iw-xh[data-range="far"] .iw-ret { opacity: .35; }
.iw-xh__far { display: none; position: absolute; left: 0; top: 26px; translate: -50% 0; white-space: nowrap; font: 800 10px/1 var(--font-ui, system-ui); letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(20, 16, 30, .72); border: 1px solid rgba(255, 255, 255, .35); pointer-events: none; }
.iw-xh[data-range="far"] .iw-xh__far { display: block; }
.tc-btn--fire.is-mp-out { opacity: .45; filter: grayscale(1); }

/* [no-glow] the user (2026-10-11): no yellow glow on highlighted menu items — the focus ring is a plain white
   outline on a dark keyline (no yellow halo, no pulse); city cards / setting rows keep their shape cues without yellow */
.iw-cursor__ring { box-shadow: 0 0 0 3px var(--k); animation: none; }
.pz-card.is-focus { box-shadow: 0 0 0 calc(var(--u) * .22) #fff, 0 0 0 calc(var(--u) * .44) var(--k), 0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(0, 0, 0, .4); }
.iw-setrow.is-focus { background: rgba(255, 255, 255, .08); }
.pz-mm:hover .pz-mm__disc { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 calc(var(--u) * .3) calc(var(--u) * 1.3) rgba(10, 12, 20, .3); }


/* ---- [stall-city] the main menu's "STALL · <city>" badge (menus-plaza.js _plzStallBadge): where your stall is open.
   Top right. On a desktop it sits above the profile card (in the card's own column, so nothing overlaps it); on a
   phone / tablet (and a narrow window) the card drops to the bottom and the badge takes the screen's corner, inside
   the notch-safe insets. Plain white focus, a cyan icon and a magenta underline — no yellow, no glow. */
.pz-stallbadge__row { display: flex; justify-content: flex-end; margin-bottom: calc(var(--u) * .6); }
.pz-stallbadge { display: inline-flex; align-items: center; gap: .55em; max-width: 100%; padding: .5em .95em .45em; border: 0; border-radius: 999px;
  background: rgba(16, 14, 28, .72); color: #fff; box-shadow: inset 0 -2px 0 var(--hp-mag); cursor: pointer; pointer-events: auto;
  font: 700 max(13px, calc(var(--u) * .9)) / 1.1 'Rubik', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.pz-stallbadge__ic { display: inline-flex; width: 1.1em; height: 1.1em; color: var(--hp-cyan); flex: none; }
.pz-stallbadge__ic svg { width: 100%; height: 100%; }
.pz-stallbadge__txt { overflow: hidden; text-overflow: ellipsis; }
.pz-stallbadge.is-none { background: rgba(16, 14, 28, .45); box-shadow: none; color: rgba(255, 255, 255, .7); font-weight: 500; letter-spacing: .02em; }
.pz-stallbadge.is-none .pz-stallbadge__ic { color: rgba(255, 255, 255, .55); }
.pz-stallbadge:hover { background: rgba(16, 14, 28, .88); }
.pz-stallbadge.is-focus { background: #fff; color: #15121c; box-shadow: inset 0 -2px 0 var(--hp-mag); }
.pz-stallbadge.is-focus .pz-stallbadge__ic { color: #15121c; }
.pz-stallbadge--corner { display: none; position: absolute; z-index: 3; top: calc(12px + var(--sat, 0px)); right: calc(14px + var(--sar, 0px)); max-width: calc(50% - 28px); }
html.is-touch .pz-stallbadge__row { display: none; }
html.is-touch .pz-stallbadge--corner { display: inline-flex; }
@media (max-width: 900px) { .pz-stallbadge__row { display: none; } .pz-stallbadge--corner { display: inline-flex; } }
.pz-stallopen { color: var(--hp-cyan); }
/* [played] PLAYED: the main menu's quiet chip beside the stall badge, the PROFILE screen's panel */
.pz-stallbadge__row { align-items: center; gap: calc(var(--u) * .6); }
.pz-played { color: rgba(255, 255, 255, .72); font: 600 max(12px, calc(var(--u) * .8)) / 1 'Rubik', sans-serif; letter-spacing: .06em; white-space: nowrap; }
.pz-played__rows { display: flex; flex-wrap: wrap; gap: .35em 1.4em; color: rgba(255, 255, 255, .78); font: 500 max(13px, calc(var(--u) * .9)) / 1.3 'Rubik', sans-serif; }
/* [ui-audit] PROFILE's PLAYED block inside the profile form (it was a second absolute panel on top of the form's photo row) */
.pz-playedpanel--in { position: static; margin: 0; padding: calc(var(--u) * .9) 0 0; background: none; box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
/* [ui-audit] the in-city MENU on a keyboard screen: ten entries now (SHOP joined) — the column fits the view (it ran 4–6 px off
   the bottom at 16:9: MENU's title cut, LEAVE CITY under the edge). The entries share what height there is, never less than
   a 34 px row */
html:not(.is-touch) .pz-pause .iw-pause__col { top: calc(var(--u) * 2); bottom: calc(var(--u) * 2); transform: none; justify-content: center; gap: calc(var(--u) * .9); }
html:not(.is-touch) .pz-pause .iw-pause__menu { min-height: 0; gap: calc(var(--u) * .45); }
html:not(.is-touch) .pz-pause .iw-pause__menu .iw-btn--menu { flex: 0 1 auto; min-height: 34px; height: calc(var(--u) * 5.4); }
/* [ui-audit] keyboard screens: the HUD's key chips / caps micro-labels at the desktop floor (10 px caps — they were 8.5–9.7 px
   on a 1280×720 or 1920×1080 window: ENTER / TAB / 1–8 chips, the clock's city, the wind under the weather dial, the map's keys) */
html:not(.is-touch) .pz-bd__key { font-size: max(10px, calc(var(--u) * .66)); }
html:not(.is-touch) .pz-clock__city { font-size: max(10px, calc(var(--u) * .7)); }
html:not(.is-touch) .pz-wx__sub { font-size: max(10px, calc(var(--u) * .62)); letter-spacing: .02em; }
html:not(.is-touch) .pz-bm-key { font-size: max(10px, .82em); }
html:not(.is-touch) .pz kbd { font-size: max(11px, .72em); }
/* [ui-audit] one-line boxes that cut (overflow hidden) need room for CJK / Hangul ascenders: line-height 1 clipped
   変更は自動で保存されます / a player's name in the results by 3–4 px */
.hs-saved span, .pz-war-res__list li b { line-height: normal; }   /* (normal: the font's own ascent + descent, whatever face a CJK page falls back to) */
/* [ui-audit] keyboard screens, CJK / Hangul: the top bar's labels at the 11 px floor (10.2 px at 1280×720) */
html:not(.is-touch):is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) .pz-bd__lbl { font-size: max(11px, calc(var(--u) * .8)); }
/* [ui-audit] the war's seat list at the 11 px floor on a 1280×720 window (10.9 px) */
html:not(.is-touch) .pz-war-seats__list li { font-size: max(11px, calc(var(--u) * .85)); }
/* [ui-audit] the results card fits a short window (1280×720: VICTORY above the top, BACK TO REALITY under the bottom): it
   scrolls inside the view, its button pinned at the foot */
html:not(.is-touch) .pz-war-res { max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: none; border-radius: calc(var(--u) * 1.6); }
html:not(.is-touch) .pz-war-res::-webkit-scrollbar { display: none; }
html:not(.is-touch) .pz-war-res__go { position: sticky; bottom: 8px; z-index: 2; }
/* [ammo] low green liquid: the Blight Vac's slot calls for attention (a green pulse) */
.pz-hotbar [data-item="vac"].is-call { box-shadow: inset 0 0 0 calc(var(--u) * .22) #8dffc0; animation: pz-vac-call 1s ease-in-out infinite; }
@keyframes pz-vac-call { 50% { box-shadow: inset 0 0 0 calc(var(--u) * .34) #8dffc0; } }
.pz-war__row--mp .pz-war__fill { background: #6fe8a0; }
/* [ui-audit] a chat bubble breaks a long word instead of running out of its side */
.pz-tag__say { overflow-wrap: anywhere; }
/* [ui-audit] PROFILE: the photo buttons pinned to the screen's foot (at a fixed top they sat on the form once PLAYED joined it,
   and on the coins panel's last line); the form scrolls inside what is left above them */
.pz-profscr .pz-panelscr__btns { top: auto; bottom: calc(var(--u) * 3.4); }
.pz-profscr .pz-prof:not(.pz-prof__coins) { max-height: calc(100% - var(--u) * 10.6 - var(--u) * 3.4 - max(56px, var(--u) * 6) - var(--u) * 1.6); overflow-y: auto; scrollbar-width: none; }
.pz-profscr .pz-prof.pz-prof__coins { max-height: calc(100% - var(--u) * 10.6 - var(--u) * 3.4 - max(56px, var(--u) * 6) - var(--u) * 1.6); overflow-y: auto; scrollbar-width: none; }
/* [glow] the launcher in hand: one missile's GLOW cost marked at the end of the fill */
.pz-war__mp.is-cost { position: relative; }
.pz-war__mp.is-cost::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc((var(--p, 1) - var(--cost, .185)) * 100%); width: calc(var(--cost, .185) * 100%); background: rgba(255, 255, 255, .55); mix-blend-mode: screen; pointer-events: none; }
/* [ui-audit] one-line cut boxes clip SIDEWAYS only (overflow-x: clip keeps the ellipsis; y stays visible): a CJK fallback face's
   tall ascent was cut at the top (Ada in the results, Central, Hong Kong · DAY under ENTER!) */
.pz-war-res__list li b, .pz-war-res__mvp span b, .iw-btn .iw-btn__sub { overflow: visible; overflow-x: clip; }
/* [ui-audit] the war menu's long LEAVE label (fr QUITTER LA GUERRE DES BOSS / es SALIR DE LA GUERRA DE JEFES) wraps in its button */
html:not(.is-touch) #ui-root .pz-pause .iw-pause__menu .iw-btn--menu .iw-btn__label { white-space: normal; line-height: 1.05; }   /* (#ui-root: i18n.css keeps every button label on one line at that weight) */
html:not(.is-touch) .pz-pause .iw-pause__menu .iw-btn--menu .iw-btn__text { min-width: 0; }
/* [glow-bar] the GLOW gauge (warMp.js a.mp.e; was the MP bar) as a glass tube of blight-green liquid, matching the back
   tank (warVac.js [tank-fill]). bosswar.js writes the fill (scaleX) and --p at ≤ 10 Hz; everything else is CSS on
   transform / opacity: the level eases (.12 s), the leading edge sloshes (.pz-war__wave), bubbles rise (.pz-war__bub),
   a sheen sweeps the glass now and then; .is-refill (warHotbar.js, the vac or a refill pack) runs a fill-up rush,
   .is-dry (≤ 15 %) pulses, .is-cost (the launcher in hand) marks one missile's cost at the end of the fill */
.pz-war__mp, .pz-war.has-hotbar .pz-war__mp { --gl: #6fae2e; --gl-hi: #c4f57e; --gl-deep: #2f5a12; isolation: isolate;
  background: linear-gradient(rgba(14, 26, 10, .78), rgba(4, 8, 4, .62)); box-shadow: inset 0 0 0 1.5px rgba(196, 245, 126, .3), inset 0 2px 3px rgba(0, 0, 0, .55); }
.pz-war.has-hotbar .pz-war__mp { height: calc(var(--u) * 1.3); }
.pz-war__mp .pz-war__fill, .pz-war.has-hotbar .pz-war__mp .pz-war__fill, .pz-war.has-hotbar .pz-war__me.is-refill .pz-war__mp .pz-war__fill, .pz-war__row--mp .pz-war__fill {
  background: linear-gradient(180deg, var(--gl-hi) 0 10%, #93d44c 26%, var(--gl) 56%, #3f7a1c 100%); box-shadow: none; border-radius: 0; animation: none; transition: transform .12s linear; }
.pz-war__mp.is-empty .pz-war__fill { background: var(--gl-deep); }
.pz-war.has-hotbar .pz-war__mp.is-empty { background: repeating-linear-gradient(-45deg, rgba(111, 174, 46, .22) 0 calc(var(--u) * .4), rgba(0, 0, 0, .5) 0 calc(var(--u) * .8)); }
.pz-war__mp.is-empty .pz-war__wave, .pz-war__mp.is-empty .pz-war__bub { opacity: 0; }
.pz-war__mp .pz-war__lq { transform: translateX(calc((var(--p, 1) - 1) * 100%)); transition: transform .12s linear; border-radius: 0; pointer-events: none; }
.pz-war__mp .pz-war__bub { position: absolute; inset: 0; overflow: hidden; }
.pz-war__mp .pz-war__bub::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: .75;
  background: radial-gradient(circle at 20% 70%, rgba(230, 255, 190, .9) 0 1.2px, transparent 1.8px), radial-gradient(circle at 63% 30%, rgba(230, 255, 190, .75) 0 1px, transparent 1.6px), radial-gradient(circle at 85% 85%, rgba(230, 255, 190, .6) 0 .9px, transparent 1.4px);
  background-size: 29px 50%, 41px 50%, 23px 50%; animation: pz-glow-bub 2.6s linear infinite; }
@keyframes pz-glow-bub { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.pz-war__mp .pz-war__wave { position: absolute; top: 0; bottom: 0; right: calc(var(--u) * -.42); width: calc(var(--u) * .5); overflow: hidden; }
.pz-war__mp .pz-war__wave::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200%; animation: pz-glow-wave 1.1s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0H4C7 4 7 4 4 8S1 12 4 16H0Z' fill='%2393d44c'/%3E%3Cpath d='M4 0C7 4 7 4 4 8S1 12 4 16' fill='none' stroke='%23e2ffb4' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 100% 50% repeat-y; }
@keyframes pz-glow-wave { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.pz-war__mp .pz-war__sheen { overflow: hidden; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0 16%, transparent 38% 82%, rgba(255, 255, 255, .1)); }
.pz-war__mp .pz-war__sheen::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); animation: pz-glow-sheen 4.5s ease-in-out infinite; }
@keyframes pz-glow-sheen { 0%, 62% { transform: translateX(-120%) skewX(-20deg); } 85%, 100% { transform: translateX(560%) skewX(-20deg); } }
/* fill-up: a bright rush running through the liquid while it climbs */
.pz-war__mp .pz-war__bub::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(226, 255, 180, .75), transparent); }
.pz-war__me.is-refill .pz-war__mp .pz-war__bub::after { opacity: 1; animation: pz-glow-rush .45s linear infinite; }
@keyframes pz-glow-rush { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
/* dry (≤ 15 %): the liquid and the tube's rim pulse */
.pz-war__mp .pz-war__sheen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--gl-hi); opacity: 0; }
.pz-war__mp.is-dry .pz-war__sheen::after { animation: pz-glow-dry .7s ease-in-out infinite alternate; }
.pz-war__mp.is-dry .pz-war__fill, .pz-war.has-hotbar .pz-war__me .pz-war__mp.is-dry .pz-war__fill, .pz-war__mp.is-dry .pz-war__lq { animation: pz-glow-dryf .7s ease-in-out infinite alternate; }
@keyframes pz-glow-dry { from { opacity: .15; } to { opacity: 1; } }
@keyframes pz-glow-dryf { from { opacity: .45; } to { opacity: 1; } }
/* the launcher in hand: one missile's cost (ROCKET_COST) hatched at the end of the fill, a bright cut where it starts */
.pz-war__mp.is-cost::after { z-index: 3; mix-blend-mode: normal; border-left: 2px solid #fff;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 3px, rgba(255, 255, 255, .12) 0 6px); }
/* the label: GLOW + the percentage, green, steady width */
.pz-war__glow { color: var(--gl-hi, #c4f57e); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-war.has-hotbar .pz-war__row--mp .pz-war__glow { min-width: 8.4ch; }
.pz-war.has-hotbar .pz-war__row--mp .pz-war__mp { min-width: max(64px, calc(var(--u) * 7)); }   /* (a phone: the tube keeps a readable length) */
html.is-touch .pz-war.has-hotbar .pz-war__row--mp { flex: 0 0 auto; }   /* (it takes its own width; the HP bar gives way) */
html.is-touch .pz-war.has-hotbar .pz-war__row--mp .pz-war__mp { width: max(64px, calc(var(--u) * 7)); flex: none; }
/* [glow-bar] the passive regen (≈ 1 % a second, warHotbar.js .is-regen): a slow soft swell rising through the liquid —
   calmer than the vac / pack rush */
.pz-war__mp .pz-war__lq::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; opacity: 0; transform: translateY(100%);
  background: linear-gradient(0deg, transparent, rgba(214, 255, 160, .38) 50%, transparent); }
.pz-war__me.is-regen .pz-war__mp .pz-war__lq::after { opacity: 1; animation: pz-glow-regen 1.8s ease-in-out infinite; }
@keyframes pz-glow-regen { from { transform: translateY(100%); } to { transform: translateY(-100%); } }
/* FULL (the vac can't take more): a calm settled surface — no slosh, the bubbles rest — and a bright cap line at the top
   end of the tube */
.pz-war__mp.is-full .pz-war__wave { opacity: 0; }
.pz-war__mp.is-full .pz-war__bub::before { animation-duration: 6s; opacity: .4; }
.pz-war__mp::before { content: ''; position: absolute; top: 12%; bottom: 12%; right: calc(var(--u) * .18); width: 2px; z-index: 2; border-radius: 2px; background: #eaffc8; box-shadow: 0 0 calc(var(--u) * .3) var(--gl-hi); opacity: 0; transition: opacity .3s; pointer-events: none; }
.pz-war__mp.is-full::before { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
  .pz-war__mp .pz-war__fill, .pz-war__mp .pz-war__lq { transition: none; }
  .pz-war__mp *, .pz-war__mp *::before, .pz-war__mp *::after { animation: none !important; }
  .pz-war__mp.is-dry .pz-war__sheen::after { opacity: 1; }
}
/* [vac-slot] the vac's own slot at the hotbar's end: GLOW green, a gap before it; lit while pulling */
.pz-hotbar .pz-hb__vac { margin-left: calc(var(--hg) * 2.2); }
.pz-hotbar .pz-hb__vac .pz-hb__gauge > b { background: #6fe8a0; }
.pz-hotbar .pz-hb__vac.is-sel { box-shadow: inset 0 0 0 calc(var(--u) * .22) #8dffc0; }
.pz-hotbar .pz-hb__vac[hidden] { display: none; }
.pz-hotbar .pz-hb__vac.is-full { opacity: .75; }
.pz-hotbar .pz-hb__vac.is-full .pz-hb__n { color: #8dffc0; font-size: .7em; }
/* [popup-fit] refined ([ui-audit]): EVERY answer's label may take two lines, not only the off-state one — on a phone a third
   button sharing the row (FERMER | MANCHE SUIVANTE | COMPLET, SIGUIENTE RONDA, LIBÉRER LA PLACE, REJOINDRE…) ran into its
   neighbour. The words break between words only; the buttons keep one height in their row */
#ui-root .pz-popup__btn { white-space: normal; }
#ui-root .pz-popup__btn .pz-popup__lbl { white-space: normal; text-align: center; line-height: 1.1; min-width: 0; overflow-wrap: normal; word-break: keep-all; }
html:lang(ja) #ui-root .pz-popup__btn .pz-popup__lbl, html:lang(zh-Hant) #ui-root .pz-popup__btn .pz-popup__lbl, html:lang(zh-Hans) #ui-root .pz-popup__btn .pz-popup__lbl { word-break: normal; }
.pz-popup__btns { align-items: stretch; }
/* [ui-audit] keyboard screens at 1280×720: the last micro words at the 11 px floor (FIRST IN · bonus, a used item's ×1 / 使用,
   昼 under the menu's city, a CJK boss-bar status) */
html:not(.is-touch) :is(.pz-war-seats__first, .pz-war-seats__tag) { font-size: max(11px, .95em); }
html:not(.is-touch) :is(.pz-shop-used b, .pz-shop-used em) { font-size: 11px; }
html:not(.is-touch):is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) :is(.pz-mp__time, .iw-bb__grow, .iw-bb__rage) { font-size: max(11px, 1em); }
html:not(.is-touch):is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) .pz-mp__time { font-size: 11px; }
html:not(.is-touch):is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) :is(.iw-bb__grow, .iw-bb__rage) { font-size: max(11px, calc(var(--u) * 1.15)) !important; }

/* [no-sel-lines] the user (2026-10-12): "remove two lines when grid box is highlighted" — no cyan / magenta cut lines under the selected hotbar slot */
.pz-hb__slot.is-sel::before { content: none; display: none; }
/* [vac-nobar] the user (2026-10-13): the vac slot shows no bar */
.pz-hotbar .pz-hb__vac .pz-hb__gauge { display: none; }
.pz-hb__key--mouse svg { width: 1em; height: 1.2em; vertical-align: -0.15em; }
html:not(.is-touch) :is(.pz-shop-reward__lines li, .pz-shop-reward__buys, .pz-shop-reward__rec) { font-size: max(11px, calc(var(--u) * .95)); }   /* [ui-audit] (the results' coin reward at 1280×720) */
/* [final-pass] the results card's player names (MVP + the list) on a CJK / Hangul page: the fallback face's ascent sits above a
   line-height-1 box (iPad ja / zh cut the top ~4 px); a normal line box plus a hair of top padding clears it */
html:is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) .pz-war-res__mvp span b, html:is(:lang(ja), :lang(zh-Hant), :lang(zh-Hans), :lang(ko)) .pz-war-res__list li b { line-height: normal; padding-top: .12em; }

/* ==================================================================== [director] BOSS WAR · war events, revive, twist
   (src/social/director/README.md) The event banner (.pz-ev: its icon, WAR EVENT, the title, one line of what to do —
   the war HUD's dark glass, the event's colour as --c), the event / revive / twist pills (the shared notice stack's
   timer pill, .pz-note--ev: the icon and the bar in --c; .is-big for the blight bomb on you), the twist chip on the clock
   row, the revive line on the knock-out card. */
.pz-ev { --c: #3df0ff; position: absolute; left: 50%; top: 24%; translate: -50% 0; display: flex; align-items: center; gap: calc(var(--u) * 1.2); max-width: min(92vw, calc(var(--u) * 62));
  padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1.05) calc(var(--u) * 1.1); border-radius: calc(var(--u) * 1.4); background: rgba(16, 18, 30, .78); color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), inset calc(var(--u) * .45) 0 0 var(--c), 0 0 0 2px var(--hp-ink), 0 5px 0 2px rgba(0, 0, 0, .3); backdrop-filter: blur(10px);
  opacity: 0; scale: .7; transition: opacity .25s, scale .45s var(--spring); pointer-events: none; }
.pz-ev.is-in { opacity: 1; scale: 1; }
.pz-ev.is-out { opacity: 0; scale: .92; transition: opacity .4s, scale .4s; }
.pz-ev__ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; color: var(--c); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px var(--c); }
.pz-ev__ico svg { width: 62%; height: 62%; }
.pz-ev.is-in .pz-ev__ico { animation: pz-ev-pop .6s var(--spring) .1s backwards; }
@keyframes pz-ev-pop { from { scale: 0; rotate: -30deg; } }
.pz-ev__txt { display: flex; flex-direction: column; gap: calc(var(--u) * .35); min-width: 0; }
.pz-ev__txt small { font: 800 calc(var(--u) * 1.05) / 1 'Rubik', sans-serif; letter-spacing: .26em; color: #ff4fd8; }
.pz-ev__txt b { font: 400 calc(var(--u) * 3.2) / 1.05 'Titan One', 'Rubik', sans-serif; letter-spacing: .02em; color: #fff; text-wrap: balance; }
.pz-ev__txt span { font: 600 calc(var(--u) * 1.45) / 1.3 'Rubik', sans-serif; color: rgba(255, 255, 255, .86); text-wrap: balance; }
.pz-note--ev .pz-note__ico { color: var(--c, var(--hp-hi)); }
.pz-note--ev .pz-note__bar > i { background: var(--c, var(--hp-hi)); transition: transform .12s linear; }
.pz-note--ev .pz-note__lbl { letter-spacing: .02em; }
.pz-note.is-big { font-size: 1.22em; }
.pz-note.is-big .pz-note--ev .pz-note__bar { width: calc(var(--u) * 9); height: calc(var(--u) * .7); }
.pz-note.is-big.is-pulse { animation: pz-ev-bomb .4s ease-in-out infinite alternate; }
@keyframes pz-ev-bomb { to { box-shadow: 0 0 0 3px #ff3a6e; } }
.pz-war__info > .pz-war__twist { color: #fff; }
.pz-war__twist .pz-war__ico { color: #ff4fd8; }
.pz-war__twist b { font-size: .86em; letter-spacing: .05em; white-space: nowrap; }
.pz-war__out .pz-war__revive { font: 800 calc(var(--u) * 1.5) / 1.2 'Rubik', sans-serif; color: #3df0ff; letter-spacing: .02em; padding: .3em .9em; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 2px rgba(61, 240, 255, .45); animation: pz-war-pulse 1.2s ease-in-out infinite; }
html.is-touch .pz-ev { top: 30%; }
html.is-touch .pz-ev__txt b { font-size: max(18px, calc(var(--u) * 3)); }
html.is-touch .pz-ev__txt span { font-size: max(12px, calc(var(--u) * 1.5)); }
html.is-touch .pz-ev__txt small { font-size: max(10px, calc(var(--u) * 1.05)); }
html.is-touch .pz-war__out .pz-war__revive { font-size: max(13px, calc(var(--u) * 1.5)); }
@media (max-width: 760px) { .pz-war__twist b { max-width: 9em; overflow: hidden; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { .pz-ev, .pz-ev.is-in .pz-ev__ico { transition: opacity .2s; animation: none; scale: 1; } .pz-war__out .pz-war__revive { animation: none; } }

/* ==================================================================== [offhours] OFF-HOURS (src/social/offhours/offhours.js)
   The transition card in / out (the OFF-HOURS logo on a dim olive dark, a line), a tag's burst of static, the city HUD
   pieces that make no sense inside (weather, the range filter, the chat log) hidden. Its pills are the notice stack's. */
.oh-card { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #3a3822 0%, #16160d 70%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.oh-card.is-on { opacity: 1; }
.oh-card.is-out { opacity: 0; transition-duration: .55s; }
/* [offhours] death (HP 0): the war's knock-out look — a dark red vignette, YOU DIED, LOST IN OFF-HOURS, the coins lost (~2.5 s; over the way-out card) */
.oh-dead { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(ellipse at 50% 50%, rgba(40, 8, 8, .35) 0%, rgba(30, 4, 6, .82) 75%, rgba(10, 0, 2, .95)); }
.oh-dead.is-on { opacity: 1; }
.oh-dead.is-out { opacity: 0; transition-duration: .55s; }
.oh-dead__in { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u, 8px) * 1.2); text-align: center; padding: 0 16px; }
.oh-dead__in b { font: 400 calc(var(--u, 8px) * 8) / 1 'Titan One', sans-serif; color: #fff; -webkit-text-stroke: .1em #1a0306; paint-order: stroke fill; text-shadow: 0 .06em 0 #1a0306, 0 0 .5em rgba(255, 60, 70, .55); letter-spacing: .02em; }
.oh-dead.is-on .oh-dead__in b { animation: oh-dead-in .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.oh-dead__in span { font: 900 max(14px, calc(var(--u, 8px) * 1.9)) / 1 'Rubik', sans-serif; letter-spacing: .2em; color: #ff8a7a; }
.oh-dead__in em { font: 800 max(13px, calc(var(--u, 8px) * 1.5)) / 1.2 'Rubik', sans-serif; font-style: normal; color: #f5b82e; }
@keyframes oh-dead-in { 0% { opacity: 0; scale: 2.4; rotate: 8deg; } 45% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .oh-dead.is-on .oh-dead__in b { animation: none; } }
@media (max-width: 520px) { .oh-dead__in b { font-size: max(40px, calc(var(--u, 8px) * 7)); } }
/* [offhours] TIME'S UP: the room closing — the screen goes down to black, steadily over 1.5 s (no flicker), the banner on it */
.oh-dead.is-time { background: none; transition: opacity .3s ease; }
.oh-dead.is-time::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #020203; opacity: 0; transition: opacity 1.5s linear; }
.oh-dead.is-time.is-on::before { opacity: .96; }
.oh-dead.is-time .oh-dead__in span { color: #ffd23f; }
/* [offhours] the run's clock (ohClock.js: the war clock's dial) — top centre, just right of the OFF-HOURS HUD; its ring
   goes steadily from cyan to warning red over the last two minutes (--oh-red), no pulsing glow */
.oh-hud > .pz-warclock.is-oh { position: absolute; inset: auto; left: calc(100% + var(--u) * .9); top: 50%; translate: 0 -50%; z-index: auto; }
.pz-warclock.is-oh .pz-warclock__dial { position: relative; right: auto; top: auto; }
.pz-warclock.is-oh .pz-warclock__dial, .pz-warclock.is-oh.is-last .pz-warclock__dial { --ring: color-mix(in srgb, #ff3b52 var(--oh-red, 0%), var(--hp-cyan, #2de2e6)); }
.pz-warclock.is-oh.is-last.is-on .pz-warclock__dial { animation: none; }
.oh-card__in { display: grid; justify-items: center; gap: calc(var(--u, 8px) * 1.2); padding: 0 16px; text-align: center; }
.oh-card__logo { font-size: min(13vw, 120px); }
.oh-card__line { margin: calc(var(--u, 8px) * 2) 0 0; font-weight: 800; letter-spacing: .06em; color: #e9f7e0; font-size: clamp(15px, 2.2vw, 22px); }
.oh-card__sub { margin: 0; color: #9dffcf; letter-spacing: .04em; font-size: clamp(13px, 1.7vw, 17px); opacity: .9; }
.oh-static { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0;   /* a tag / a knock-down: a dark vignette pulse (no white flash, no strobe) */
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(10, 14, 8, .78) 100%); animation: oh-static .9s ease-out forwards; }
@keyframes oh-static { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .oh-static { animation-duration: .4s; } }
/* the city-only UI goes while you are inside (MENU, CHAT, ACT, MESSAGES, FRIENDS stay): the clock, the weather, the
   range filter, the chat log, the city map, STALL / LOCKER / MAP / VISIT / the Boss War badge, the city coin badge */
.pz-hud.is-offhours :is(.pz-wx-wrap, .pz-range, .pz-chat__log, .pz-bd-wrap--stall, .pz-bd-wrap--locker, .pz-bd-wrap--map, .pz-bd-wrap--visit, .pz-bd-wrap--bosswar),
html.is-offhours :is(.pz-mm, .pz-coinhud) { display: none !important; }
.pz-hud.is-offhours .pz-clock { visibility: hidden; }   /* (its slot kept: the top bar's groups stay where they are) */
/* the OFF-HOURS HUD: top centre, under the top bar — the carried coins and how close the EXIT is, one compact glass pill */
.oh-hud { --u: min(1vw, 1.7778dvh); position: absolute; left: 50%; top: calc(max(env(safe-area-inset-top, 0px), calc(var(--u) * 1.1)) + max(56px, calc(var(--u) * 7.6)));   /* (under the top bar's badges and their labels) */ transform: translateX(-50%); z-index: 4; display: grid; justify-items: center; gap: calc(var(--u) * .35);
  padding: calc(var(--u) * .55) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1.4); background: rgba(22, 24, 16, .62); box-shadow: inset 0 0 0 1.5px rgba(157, 255, 207, .35), 0 3px 0 rgba(0, 0, 0, .25);
  color: #f2f6e8; font-weight: 800; font-size: max(12px, calc(var(--u) * 1.35)); letter-spacing: .04em; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.oh-hud__t, .oh-hud__c { display: flex; align-items: center; gap: .45em; }
.oh-hud__ico { display: inline-flex; width: 1.2em; height: 1.2em; color: #9dffcf; }
.oh-hud__ico svg { width: 100%; height: 100%; }
.oh-hud__bar { position: relative; width: calc(var(--u) * 9); height: calc(var(--u) * .5); border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.oh-hud__bar > i { position: absolute; inset: 0; background: #9dffcf; transform-origin: 0 50%; }
.oh-hud__time { font-style: normal; color: #9dffcf; min-width: 2.6em; text-align: right; }
.oh-hud__c { font-size: .9em; font-weight: 700; }
.oh-hud__c b { color: #9dffcf; }
.oh-hud__sep { opacity: .5; }
.oh-hud.is-watch .oh-hud__c { display: none; }
.oh-hud.is-dark { box-shadow: inset 0 0 0 1.5px rgba(255, 120, 120, .55), 0 3px 0 rgba(0, 0, 0, .25); }
.oh-hud.is-dark .oh-hud__bar > i, .oh-hud.is-dark .oh-hud__time { background-color: #ff8a7a; color: #ff8a7a; }
.oh-hud.is-dark .oh-hud__time { background: none; }
@media (prefers-reduced-motion: no-preference) { .oh-hud.is-bump { animation: oh-bump .35s ease-out; } }
html.is-touch .oh-hud { top: calc(max(env(safe-area-inset-top, 0px), calc(var(--u) * 1.1)) + max(52px, calc(var(--u) * 5.6))); }   /* (a phone's top bar is its round buttons only) */
@keyframes oh-bump { 40% { transform: translateX(-50%) scale(1.07); } }
/* [offhours] the Boss War card's side option (OFF-HOURS: the after-hours room, any time you're not fighting) — a quiet
   full-width row under the card's buttons: a small door icon, the name, one line of what it is */
.pz-popup__side { grid-column: 1 / -1; flex-basis: 100%; display: flex; align-items: center; gap: .7em; width: 100%; margin-top: .45em; padding: .55em .8em; border: 0; border-radius: .7em;
  background: var(--hp-ink, #1e2130); box-shadow: inset 0 0 0 1.5px rgba(157, 255, 207, .45); color: #f2f6e8; font: inherit; text-align: left; cursor: pointer; }   /* [oh-readable] dark ink row: the card is light paper, so pale text on a pale tint was unreadable */
.pz-popup__side:hover, .pz-popup__side:focus-visible { background: #2b3044; box-shadow: inset 0 0 0 2px #9dffcf; }
.pz-popup__side .pz-popup__key { background: rgba(255, 255, 255, .14); color: #f2f6e8; box-shadow: none; }
.pz-popup__side-ico { display: inline-flex; width: 1.6em; height: 1.6em; color: #9dffcf; flex: none; }
.pz-popup__side-ico svg { width: 100%; height: 100%; }
.pz-popup__side-txt { display: grid; gap: .1em; flex: 1; min-width: 0; }
.pz-popup__side-txt b { color: #9dffcf; letter-spacing: .06em; font-size: .95em; }
.pz-popup__side-txt small { font-size: .78em; color: #d6dccb; white-space: normal; line-height: 1.25; }
.oh-hud__leave { pointer-events: auto; margin-left: .5em; padding: .2em .7em; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #f2f6e8; font: inherit; font-size: .82em; letter-spacing: .06em; cursor: pointer; }
.oh-hud__leave:hover { background: rgba(255, 138, 122, .35); }
.oh-hud__run { color: #9dffcf; }
.pz-popup__btns:has(.pz-popup__side) { flex-wrap: wrap; }
html.is-touch .pz-popup__btns:has(.pz-popup__side) { flex-wrap: wrap !important; }
.pz-popup__side { pointer-events: auto; order: 9; font-size: max(13px, calc(var(--u, 8px) * 1.2)); }

/* [offhours] the HUD: the CARRIED coins (the main number), how close the EXIT is, LEAVE */
.oh-hud__coins { display: flex; align-items: center; gap: .45em; font-size: 1.25em; }
.oh-hud__coins b { color: var(--coin-gold, #f5b82e); font-size: 1.25em; min-width: 1.6em; text-align: right; }
.oh-hud__coin { width: 1.1em; height: 1.1em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe28a, #d9951c 70%); box-shadow: 0 0 .5em rgba(245, 184, 46, .55); }
.oh-hud.is-low .oh-ring { display: inline-block; width: 1.2em; height: 1.2em; border-radius: 50%; background: conic-gradient(#9dffcf calc(var(--k) * 360deg), rgba(255, 255, 255, .15) 0); }
/* [offhours] the war HUD in the room: only its HP + GLOW bars (.pz-war__me), the rest (the clock, the fighters, the list, the tags) hidden */
.pz-war.is-oh :is(.pz-war__info, .pz-war__list, .pz-war__arrows, .pz-war__tags, .pz-war__out, .pz-war__chips) { display: none !important; }
/* the EXIT's closeness: a band (FAR · CLOSER · NEAR · VERY CLOSE) and a warmth meter — no direction */
.oh-hud__band { color: #9dffcf; letter-spacing: .08em; min-width: 5.5em; }
.oh-hud__heat { position: relative; display: inline-block; width: calc(var(--u) * 6); height: calc(var(--u) * .55); border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.oh-hud__heat > i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #5aa0ff, #9dffcf 50%, #ffd23f 80%, #ff7a3d); transition: transform .3s; }
.oh-hud[data-band="very-close"] .oh-hud__band { color: #ffd23f; }
/* [oh-top-center] OFF-HOURS: the city clock is hidden (visibility) and the right group is empty — both still took room in
   the top bar, so its visible buttons sat left of centre (the user: "backroom top menu is not centered") */
.is-offhours .pz-top .pz-clock, .is-offhours .pz-top .pz-top__grp--r { display: none; }