/* Zoo Town map page, after the numbers pages' stack (styles.css, round2-8, live-data, shared/pages.css): header,
   footer, buttons, pills, dialogs and tokens come from there. This file adds the band, the island, signs and the rail. */
:root{--paper:#fffaf0;--up:#087e63;--down:#c45c4e;--grass:#bfe8c9;--grass-deep:#9bd5a7;--water:#9cc9f0;--soil:#e7c29a;--soil-deep:#b68c67;--win:#ffd98a;--night:#131d41;
--wood:#dca56b;--wood-deep:#a86e3f;--wood-ink:#5b3417;--ring-in:#fff7e6;--ring-out:#3a1c06;--focus:2.5px solid var(--ring-out);--inv-scale:1;--chip-line:#dce4df;--chip-ink:#3e514e;
--hill-far:#dcebf5;--hill-mid:#cfe6ea;--hill-near:#d6eed8;
--fine:#63707f}
button,input,select{font:inherit;color:inherit}
/* keyboard-only rings (main.js .ptr): cream band inside, dark brown outside */
html.ptr :focus-visible:not(input,textarea,select){outline:none}
:where(html:not(.ptr) :is(#town,#card,#list-dlg,#how,#drafts,#keys,#mine)) :is(a,button,select,summary,[role=tabpanel],[type=range]):not(.sp,.pin,.resident,.crowd-more,.door-hit,[role^=menuitem]):focus-visible,:where(html:not(.ptr)) :is(.skip-link,dialog):focus-visible{outline:var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ring-in)}
html.light-evening{--ring-out:#2a1406}html.light-night{--ring-out:#140902}
.kring{position:absolute;pointer-events:none;z-index:0;box-sizing:border-box;border:2px solid var(--ring-in);outline:2.5px solid #6e3b12;border-radius:16px}.kring.round{border-radius:50%}
.kring.home{border-radius:18px;border-width:calc(2px * var(--inv-scale));outline-width:calc(2.5px * var(--inv-scale))}
.num,.nums,td,.status-line{font-variant-numeric:tabular-nums}
.skip-link{border-radius:10px;box-shadow:0 6px 20px #16213b26;font-size:13px;font-weight:600;left:8px}

/* Header: his; current page marked by shared/pages.css */
.site-header{z-index:60}

/* ---- the band (PLAN P0.3): his page-head pattern in 64px; a chip on the map on phones ---- */
.town-band{position:relative;z-index:8;background:#fff;border-bottom:1px solid #e8ece6}
.band-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;row-gap:0;padding:6px 0 7px}
.band-eyebrow{grid-row:1;grid-column:1;margin:0;font-size:10px;letter-spacing:1.9px;color:#7a8e80;text-transform:uppercase}
.band-pills{grid-row:1;grid-column:1/-1;justify-self:end;display:flex;align-items:center;gap:6px;margin:0}
.band-pills .zp-pill,.how-pills .zp-pill{padding:3px 9px}
.band-title{grid-row:2;grid-column:1;display:flex;align-items:baseline;gap:14px;min-width:0}
.band-title h1{margin:0;max-width:none;font-size:22px;line-height:1.2;letter-spacing:-.6px;font-weight:750;white-space:nowrap}
.band-promise{margin:0;min-width:0;font-size:13.5px;line-height:1.45;color:#5f6d7d}
.band-promise .sm{display:none}
.band-link{grid-row:2;grid-column:2;justify-self:end;display:inline-flex;gap:6px;font-size:13px;font-weight:650;color:var(--zp-link,#0a7a62);text-decoration:none;white-space:nowrap}
.band-link:hover{text-decoration:underline;text-underline-offset:3px}
.band-pills .draft-pill,.how-pills .draft-pill{padding:3px 9px;border-radius:6px;font-size:10px;letter-spacing:.3px;gap:6px}
/* family strip, every width (main.js strip): the lot signs' words, one chip per family. Desktop: one row that fills
   the width (stripFit drops the "The" and tightens the chips, then wraps to two rows, before anything scrolls; the home
   word always stays), three lines per chip.
   Phones: two lines, scrolls sideways. */
.family-strip{gap:8px;overflow-x:auto;overscroll-behavior-x:contain;box-sizing:border-box;padding:5px 12px;background:#fbfdff;border-bottom:1px solid #e2eaf3;scrollbar-width:none}
.family-strip::-webkit-scrollbar{display:none}
.fam-chip{flex:1 1 0;min-width:max-content;display:flex;flex-direction:column;justify-content:center;gap:2px;height:50px;padding:3px 11px;border:1px solid #e3eaf1;border-radius:12px;background:#fff;text-align:left;cursor:pointer}
.fam-chip:hover{border-color:#cfdbe6}
html:not(.ptr) .fam-chip:focus-visible{outline:var(--focus);outline-offset:1px}
.fam-chip.idle{background:#fafbfc}
.fc-top{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.2}
.fc-line,.fc-buy{font-size:10.5px;line-height:1.2;color:#5d6b7a;white-space:nowrap}
.fc-buy{font-size:10px;color:#6a7788}
.strip-mid .fc-the{display:none}.strip-mid .family-strip{gap:6px}.strip-mid .fam-chip{padding:3px 8px}.strip-mid .fc-top{gap:5px}.strip-mid .fc-top .ladder{gap:2px;padding-left:6px}.strip-mid .fc-top .ladder i{width:5px;height:5px}
.strip-wrap .family-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:6px}.strip-wrap .fam-chip{min-width:0}

/* ---- sky: the homepage hero gradient, far hills and the woodland sprigs ---- */
.viewport{background:#f8fbff;user-select:none;-webkit-user-select:none;outline:none}
.viewport.grabbing{cursor:grabbing}
.sky{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 83% 15%,#fff0e1 0,transparent 48%),radial-gradient(ellipse at 8% 0%,#edeaff 0,transparent 50%),linear-gradient(125deg,#f8fbff 25%,#e9f5ff 75%,#f7eefa);transition:background .8s}
.hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;display:block}
.hills path{transition:fill .8s}
.h-far{fill:var(--hill-far)}.h-mid{fill:var(--hill-mid)}.h-near{fill:var(--hill-near)}
.sprigs{position:absolute;left:0;bottom:0;width:min(46%,560px);height:220px;background:url('/assets/habitat-sprigs.svg') left bottom/contain no-repeat;opacity:.58;pointer-events:none}
.sprigs.right{left:auto;right:0;transform:scaleX(-1);opacity:.45;width:min(34%,420px);height:170px}
.light-dawn .sky{background:radial-gradient(ellipse at 80% 90%,#ffe6d6 0,transparent 55%),linear-gradient(180deg,#f3e8f8,#fdeaf0 55%,#fff3e8)}
.light-golden .sky{background:radial-gradient(ellipse at 85% 15%,#fff3cf 0,transparent 45%),linear-gradient(180deg,#ffefd6,#ffe2c7 55%,#f8e3ee)}
.light-evening .sky{background:radial-gradient(ellipse at 50% 110%,#d99eb0 0,transparent 55%),linear-gradient(180deg,#3a4780,#5e5a8f 60%,#9c7fa6)}
.light-night .sky{background:radial-gradient(ellipse at 70% 20%,#27356c 0,transparent 50%),linear-gradient(180deg,#0f1735,#1a2550 60%,#252d5c)}
.light-golden{--hill-far:#f5e1d8;--hill-mid:#e8e3d6;--hill-near:#dbead2}
.light-dawn{--hill-far:#eadff0;--hill-mid:#e0e6ee;--hill-near:#dcecdc}
.light-evening{--hill-far:#6c6d9d;--hill-mid:#5d6d95;--hill-near:#56708a}
.light-night{--hill-far:#2b3563;--hill-mid:#27375f;--hill-near:#253d58}
.light-evening .sprigs,.light-night .sprigs{opacity:.18}
.sky-cloudy.light-day .sky,.sky-drizzle.light-day .sky{background:linear-gradient(170deg,#eef2f7,#f1f4f8 60%,#f4f1f7)}
.sky-rain.light-day .sky{background:linear-gradient(170deg,#dfe5ee,#e8ecf2 60%,#ebe8f0)}
.sky-cloudy.light-day,.sky-drizzle.light-day{--hill-far:#e3eaf1;--hill-mid:#d9e6e8;--hill-near:#d9eadb}
.sky-rain.light-day{--hill-far:#d7dfe9;--hill-mid:#cfdbe0;--hill-near:#d0e2d3}
.sun{position:absolute;right:7%;top:6%;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff7d6,#ffd98a 55%,#ffc062);box-shadow:0 0 40px 18px #ffe6a855;opacity:0;transition:opacity .8s}
.sky-sunny.light-day .sun,.sky-fair.light-day .sun,.sky-sunny.light-dawn .sun{opacity:.95}
.light-golden.sky-sunny .sun,.light-golden.sky-fair .sun{opacity:.95;top:14%;background:radial-gradient(circle at 38% 35%,#fff3d0,#ffc47a 55%,#ff9f5a)}
/* a crescent (a lit rim cut by the dark disc), or the plush moon.webp once it exists (.moon.art) */
.moon{position:absolute;right:8%;top:7%;width:58px;height:58px;border:0;padding:0;border-radius:50%;background:transparent;box-shadow:inset 13px -7px 0 1px #fff3c8;filter:drop-shadow(0 0 10px #fff2c088) drop-shadow(0 0 26px #ffe6a844);opacity:0;pointer-events:none;transition:opacity .8s;z-index:2}
.moon.art{border-radius:0;box-shadow:none;width:84px;height:84px;background:center/contain no-repeat;filter:drop-shadow(0 0 14px #fff2c066);z-index:3} /* image set by moon.js at the first evening (versioned URL); an opaque felt moon, so it hangs above the night tint (below the top layer and the controls) and moon.js keeps it off faces, boards and buildings */
/* moon.js: shown on a clear spot (.on), tappable only over open sky (.tap) */
.light-night .moon.on,.light-evening .moon.on{opacity:1}
.light-night .moon.on.tap,.light-evening .moon.on.tap{pointer-events:auto}
.light-evening .moon.on{opacity:.7}.light-evening .moon.on.art{opacity:.85}
.moon.yield,.moon.shift{opacity:0!important;pointer-events:none!important;transition-duration:.15s} /* moon.js: no clear spot, or moving to one */
/* stars: two tiled layers of 2px dots (different tile sizes so the pattern doesn't read as a grid) */
.stars{position:absolute;inset:0;opacity:0;transition:opacity 1s;background-image:radial-gradient(circle,#fff 0 1.1px,#fff0 1.6px),radial-gradient(circle,#fffbe8 0 1.3px,#fff0 1.9px),radial-gradient(circle,#fff 0 .9px,#fff0 1.4px);background-size:173px 131px,251px 197px,97px 83px;background-position:23px 17px,131px 61px,51px 41px}
.light-night .stars{opacity:.9}.light-evening .stars{opacity:.35}
.rainbow{position:absolute;left:50%;top:18%;width:min(70%,760px);aspect-ratio:2/1;transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(circle at 50% 100%,transparent 54%,#b39cf055 55%,#7fb0f055 60%,#5cc9ac55 65%,#ffe9a855 70%,#ffba6655 75%,#f2817255 80%,transparent 81%);opacity:0;transition:opacity 1.2s}
.rainbow-on .rainbow{opacity:.75}.light-night .rainbow,.light-evening .rainbow{opacity:0}

/* ---- scene layers ---- */
.scene{will-change:auto}.scene.gesture{will-change:transform}
.ground{position:absolute;inset:0}
.ground img{position:absolute;left:0;top:0;width:1200px;height:800px;display:block;pointer-events:none;-webkit-user-drag:none}
.ground svg{position:absolute;inset:0;width:1200px;height:800px}
.world{position:absolute;inset:0}
.scene-top{pointer-events:none;z-index:3}
.tint{position:absolute;inset:0;pointer-events:none;background:transparent;transition:background 1s;z-index:2}
.light-dawn .tint{background:#f2a0c81a}.light-golden .tint{background:#ffb05020}
.light-evening .tint{background:#1f2a5a4a}.light-night .tint{background:#141d4a73}
.sky-cloudy .tint{box-shadow:inset 0 0 0 100vmax #8b98ad12}.sky-drizzle .tint{box-shadow:inset 0 0 0 100vmax #6d7d9620}.sky-rain .tint{box-shadow:inset 0 0 0 100vmax #5b6b862e}

.sp{position:absolute;display:block;border:0;padding:0;margin:0;background:none;transform-origin:50% 100%}
.sp>img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block;pointer-events:none;-webkit-user-drag:none}
.fb{display:block;width:100%;height:100%;pointer-events:none}
.fb>svg{width:100%;height:100%;display:block;overflow:visible}
button.sp{cursor:pointer}
button.sp:focus-visible{outline:none}
html:not(.ptr) button.sp:focus-visible::after{content:"";position:absolute;inset:-6px;border-radius:18px;border:calc(2px * var(--inv-scale)) solid var(--ring-in);outline:var(--focus);outline-width:calc(2.5px * var(--inv-scale));box-shadow:0 0 calc(10px * var(--inv-scale)) #f2b45a88}
.ph{position:absolute;inset:6% 4% 0;display:grid;place-items:center;text-align:center;padding:4px;border-radius:14px 14px 8px 8px;border:2px dashed #b68c6799;background:repeating-linear-gradient(135deg,#fff4de,#fff4de 8px,#f6e4c5 8px,#f6e4c5 16px);color:#8d6a4d;font:600 10px/1.2 ui-monospace,Menlo,monospace;word-break:break-all;overflow:hidden}
.sp.ride .ph,.sp.prop .ph,.sp.decor .ph{font-size:7px;border-radius:10px}
/* weekend farmers' market stalls in Clover Park (drawn, shown only while the market is on) */
.sp.stall{display:none;pointer-events:none}.fair-on .sp.stall{display:block}
.sp.stall>svg{width:100%;height:100%;display:block;overflow:visible}
/* Mayor Mo's standee (main.js placeMayor): a faint contact shadow under his feet; he fades like the boards (main.js yieldBoards) */
.sp.mayor{cursor:pointer;transition:opacity .2s;filter:drop-shadow(0 2px 1.5px #4e426038)}
.sp.mayor::before{content:"";position:absolute;left:3px;right:3px;bottom:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,#3f35524d,#3f355200);z-index:-1}
.sp.mayor.yield{opacity:0;pointer-events:none}.sp.mayor.yield:focus-visible{opacity:1}
@media(hover:hover){.sp.mayor:hover{transform:translateY(-2px)}}
.place-hit{position:absolute;border:0;padding:0;background:transparent;z-index:1;cursor:pointer;border-radius:30px}
.place-hit:hover{background:#ffffff14}

/* ---- wooden name boards (after the homepage's "Same market. More friends." sign) ---- */
.pin{position:absolute;transform:translate(-50%,calc(-100% - 12px)) scale(min(var(--inv-scale),1.6));transform-origin:50% calc(100% + 12px);border:0;margin:0;padding:6px 11px;border-radius:9px 11px 8px 10px;cursor:pointer;white-space:nowrap;
  font:800 10px/1.15 Georgia,"Times New Roman",serif;letter-spacing:.7px;text-transform:uppercase;color:var(--wood-ink);text-shadow:0 1px 0 #f5d3a3;
  background:repeating-linear-gradient(177deg,#0000 0 4px,#9a5f2e14 4px 5px,#0000 5px 9px),linear-gradient(180deg,#ecc28d,#d59b60);box-shadow:inset 0 2px 0 #f8dcb2,inset 0 -3px 0 #a86e3f66,0 0 0 1.5px #9a6536,0 4px 8px #5a3a1a38}
.pin::after{content:"";position:absolute;left:50%;top:100%;width:5px;height:12px;margin-left:-2.5px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,#8d5a31,#b37846 60%,#8d5a31)}
.pin:hover{background:repeating-linear-gradient(177deg,#0000 0 4px,#9a5f2e14 4px 5px,#0000 5px 9px),linear-gradient(180deg,#f2cb97,#dca56b)}
.pin:focus-visible{outline:none}html:not(.ptr) .pin:focus-visible{box-shadow:inset 0 2px 0 #f8dcb2,0 0 0 1.5px #9a6536,0 0 0 3.5px var(--ring-in),0 0 0 6px var(--ring-out)}
.pin{transition:opacity .2s}.pin.clipped,.pin.yield{opacity:0;pointer-events:none}.pin.clipped:focus-visible,.pin.yield:focus-visible{opacity:1}
.pin.facade::after{display:none} /* a shop sign on the building's front: no post */
.pin.mid{transform:translate(-50%,-50%) scale(min(var(--inv-scale),1.6));transform-origin:50% 50%}
.pin.stack{white-space:normal;width:min-content;text-align:center;line-height:1.25}
.plaque{position:absolute;left:50%;bottom:-4px;transform:translate(-50%,100%) scale(var(--inv-scale));transform-origin:50% 0;background:linear-gradient(#e0b27b,#b98150);color:#fff8ea;font:700 10px/1.2 Georgia,serif;padding:3px 8px;border-radius:5px;white-space:nowrap;box-shadow:0 0 0 1px #9a6536,0 2px 4px #4e426033;pointer-events:none}

/* ---- homes, covers, lights ---- */
.glow{position:absolute;opacity:0;transition:opacity .9s;pointer-events:none}
/* a lit pane: small warm rounded rect with a soft halo, sitting on the window itself */
.glow.win{width:17px;height:15px;margin:-8px 0 0 -9px;border-radius:5px;background:radial-gradient(ellipse at 50% 40%,#fff6d6,#ffd98a 70%);box-shadow:0 0 8px 3px #ffd98a99,0 0 22px 8px #ffc96a33}
.glow.string{height:10px;margin-top:-5px;background:radial-gradient(circle,#fff3c4 0 2.2px,#ffd98a66 3.2px,transparent 5px) 0 0/12px 10px repeat-x;filter:drop-shadow(0 0 3px #ffd98a)}
/* street lamps: the bulb, plus a faint warm pool on the ground so the felt shows through the night tint */
.glow.lamp{width:70px;height:70px;margin:-35px 0 0 -35px;background:radial-gradient(closest-side,#fff0bfd0,#ffd98a55 50%,transparent 75%)}
.glow.lamp::after{content:"";position:absolute;left:-65px;top:40px;width:200px;height:96px;border-radius:50%;background:radial-gradient(closest-side,#ffe2a02e,#ffd98a14 55%,transparent)}
.glow.lantern{width:22px;height:24px;margin:-12px 0 0 -11px;border-radius:50%;background:radial-gradient(closest-side,#fff3cce6,#ffd98a80 45%,transparent)}
.light-evening .glow.on,.light-night .glow.on{opacity:1}
.light-dawn .glow.on.lamp{opacity:.5}
/* a resident standing in front of a lit window or lamp covers it (main.js yieldBoards) */
.scene-top .glow.on.yield{opacity:0}

/* ---- residents: plush portrait standees ---- */
.resident{position:absolute;left:0;top:0;width:60px;height:74px;margin:-74px 0 0 -30px;border:0;padding:0;background:none;cursor:pointer}
.resident::after{content:"";position:absolute;inset:-6px -4px -2px}
.rs{position:absolute;left:0;top:0;width:60px;height:74px;transform-origin:50% 100%}
/* a crowd stands a little smaller (main.js sets --cs from scene.js crowdSlots) */
.resident.crowd{width:calc(60px * var(--cs,1));height:calc(74px * var(--cs,1));margin:calc(-74px * var(--cs,1)) 0 0 calc(-30px * var(--cs,1))} /* the hit box shrinks too, so the one behind can be hovered */
.resident.crowd .rs{scale:var(--cs,1);transform-origin:0 0}.resident.crowd::after{inset:0}
.crowd-more{position:absolute;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;transform:translate(-50%,calc(-100% - 24px * var(--cs,1))) scale(var(--cs,1));transform-origin:50% 100%;background:#fffdf7;color:#3e514e;font:800 15px/1 Inter,ui-sans-serif,system-ui,sans-serif;box-shadow:0 0 0 3px #fff,0 0 0 5px #cdd8d2,0 6px 12px #29354c33;cursor:pointer}
.crowd-more:hover{background:#fff}
.crowd-more:focus-visible{outline:none}html:not(.ptr) .crowd-more:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px #cdd8d2,0 0 0 7px var(--ring-in),0 0 0 9.5px var(--ring-out)}
.rs .badge{position:absolute;left:5px;top:0;width:50px;height:50px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff,color-mix(in srgb,var(--hh) 22%,#fffaf0));box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--hh),0 6px 12px #29354c33}
.rs .badge img{position:absolute;left:-12%;top:-4%;width:124%;height:124%;object-fit:cover;object-position:50% 22%;display:block}
.resident.left .rs .badge img{transform:scaleX(-1)}
.rs .stand{position:absolute;left:26px;top:53px;width:8px;height:14px;border-radius:2px;background:linear-gradient(90deg,#b37846,#dca56b 50%,#a86e3f)}
.rs .base{position:absolute;left:13px;bottom:0;width:34px;height:10px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#e3b27a,#a86e3f);box-shadow:0 3px 5px #4e42601f}
.paw{position:absolute;inset:0;display:grid;place-items:center;background:var(--hh);color:#fff;font:800 18px/1 system-ui}
.paw svg{position:absolute;width:62%;height:62%;opacity:.35;color:#fff}
/* name tags: in the top layer, moved with their resident by walk.js; --tag-line staggers neighbors */
.rtag{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:1}
.rtag>span{position:absolute;left:0;top:calc(6px + var(--tag-line, 0) * 22px * var(--inv-scale));transform:translateX(-50%) scale(var(--inv-scale));transform-origin:50% 0;background:#fffffff2;color:var(--ink);border-radius:30px;padding:4px 9px 4px 7px;font:650 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap;box-shadow:0 3px 10px #29354c1f}
.rtag>span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hh);margin-right:5px;vertical-align:1px}
.rtag.crowd>span{opacity:0;transition:opacity .15s}.rtag.crowd.show>span{opacity:1}
.rtag.show{z-index:5}
.rtag.clipped:not(.show)>span{opacity:0} /* under a map button (main.js clipSigns) */
.light-night .rtag.asleep>span{background:#e9ecf8e6;color:#34406a}
.rtag .rdraft{display:none;margin:-3px -4px -3px 6px;padding:1px 7px;vertical-align:0}.rtag.show .rdraft{display:inline-flex}
/* full-body standees (chars/<species>-body-256.webp): feet on the anchor point, same 60x74 hit box */
.resident.standee .rs{width:60px;height:74px}
.rs>img.body{position:absolute;left:50%;bottom:0;height:70px;width:auto;max-width:none;transform:translateX(-50%)}
.resident.left .rs>img.body{transform:translateX(-50%) scaleX(-1)}
html:not(.ptr) .resident.standee:focus-visible .rs::before{content:"";position:absolute;inset:-4px -6px -2px;border-radius:16px;border:2px solid var(--ring-in);outline:var(--focus)}
.resident.standee.asleep .rs>img.body{filter:saturate(.6) brightness(.9)}
.resident:focus-visible{outline:none}
html:not(.ptr) .resident:focus-visible{z-index:5000!important} /* in front of its housemates while the keyboard is on it */
html:not(.ptr) .resident:focus-visible .badge{box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--hh),0 0 0 7.5px var(--ring-in),0 0 0 10px var(--ring-out)}
.resident:hover .rs{transform:translateY(-3px)}
.resident.walking .rs{animation:bob .42s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-2px) rotate(3deg)}}
.resident.asleep .badge{filter:saturate(.55) brightness(.92)}
.resident.asleep .rs::after{content:"z z";position:absolute;right:-12px;top:-10px;font:700 12px/1 system-ui;color:#dfe6ff;letter-spacing:2px;text-shadow:0 1px 2px #131d4180}
.umb{display:none;position:absolute;left:30px;top:-30px;width:2.5px;height:44px;background:#6b5a45;border-radius:2px;transform:rotate(12deg);transform-origin:50% 100%;z-index:1}
.umb::before{content:"";position:absolute;left:-30px;top:-14px;width:62px;height:28px;border-radius:62px 62px 8px 8px/52px 52px 8px 8px;background:radial-gradient(ellipse at 38% 28%,color-mix(in srgb,var(--hh) 45%,#fff),var(--hh) 72%);box-shadow:inset 0 -3px 0 #0000001f,0 4px 7px #4e426033}
.umb::after{content:"";position:absolute;left:-5px;top:-19px;width:12px;height:7px;border-radius:6px 6px 0 0;background:var(--hh)}
.resident.rainy .umb{display:block}
/* the plush umbrella (decor-umbrella-cream), its canopy tinted to the family colour through its mask (scene.js sets
   --umb, --umbm and html.umb-art once both files are in index.json; the colour is cut with cream first, so navy
   families do not multiply to a near-black canopy) */
.umb-art .umb{left:-1px;top:-47px;width:64px;height:55px;background:var(--umb) 0 0/100% 100%;transform:none;border-radius:0}
.umb-art .umb::before{display:none}
.umb-art .umb::after{left:0;top:0;width:100%;height:100%;border-radius:0;background:var(--hh);background:color-mix(in srgb,var(--hh) 62%,#fff6e6);-webkit-mask:var(--umbm) 0 0/100% 100%;mask:var(--umbm) 0 0/100% 100%;mix-blend-mode:multiply}

/* ---- top layer: private clouds, bubbles, rings, boat, birds ---- */
.pcloud{position:absolute;pointer-events:none;width:120px;height:46px;margin:-23px 0 0 -60px;border-radius:30px;background:radial-gradient(circle at 30% 40%,#f4f6fb,#c9d1e0);border:1px solid #b3bdd0;box-shadow:24px -14px 0 -2px #dfe4ee,-22px -8px 0 -6px #d8deea,0 6px 10px #4e426033}
.pcloud{transition:opacity .4s}.pcloud.yield{opacity:0} /* a resident north of the lot stands under it (main.js yieldBoards) */
.pcloud-art .pcloud{height:61px;margin-top:-30px;border:0;border-radius:0;box-shadow:none;background:var(--pcloud) center/contain no-repeat} /* the felt cloud (scene.js), art aspect .506 */
.pcloud-art .pcloud::after{top:57px} /* the streaks start at the felt's lower edge */
.pcloud::after{content:"";position:absolute;left:18px;right:18px;top:40px;height:40px;background:repeating-linear-gradient(105deg,#5a93e0 0 2px,transparent 2px 11px);-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);animation:drip 1s linear infinite}
/* the drops fall and fade: transform + opacity only, nothing repaints */
@keyframes drip{from{transform:translateY(-4px);opacity:1}to{transform:translateY(14px);opacity:0}}
.bubble{position:absolute;transform:translate(-50%,-100%) scale(var(--inv-scale));transform-origin:50% 100%;max-width:230px;background:#fff;border:1px solid #e3eaf1;border-radius:13px;padding:9px 12px;font:500 12px/1.55 Inter,ui-sans-serif,system-ui,sans-serif;color:#4e6087;box-shadow:0 6px 18px #26395518;width:max-content}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;background:#fff;border:1px solid #e3eaf1;border-width:0 1px 1px 0;transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0}
/* what we wrote is a .caption (narrator); .bubble is only an animal's own line */
.caption{position:absolute;transform:translate(-50%,-100%) scale(var(--inv-scale));transform-origin:50% 100%;max-width:230px;width:max-content;background:#fffdf6;border:1px dashed #dcc9a4;border-radius:13px;padding:8px 12px;font:italic 500 12px/1.55 Inter,ui-sans-serif,system-ui,sans-serif;color:#5b4b31;box-shadow:0 6px 18px #26395514}
.caption::after{content:"";position:absolute;left:50%;bottom:-6px;width:11px;height:11px;background:#fffdf6;border:1px dashed #dcc9a4;border-width:0 1px 1px 0;transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0}
.caption.below{transform:translate(-50%,0) scale(var(--inv-scale));transform-origin:50% 0}.caption.below::after{top:-6px;bottom:auto;transform:translateX(-50%) rotate(-135deg)}
/* first-visit guide */
.caption.guide{--dx:0px;transform:translate(-50%,-100%) translateX(var(--dx));max-width:268px;padding:11px 13px 9px;font-style:normal;color:#34496c;background:#fff;border:1px solid #cfe3d8;box-shadow:0 10px 26px #26395524;pointer-events:auto;z-index:8}
.caption.guide::after{left:calc(50% - var(--dx));background:#fff;border:1px solid #cfe3d8;border-width:0 1px 1px 0}
/* no room above the house: under it, tail up; no room by the house at all: docked under the chip row, no tail (guide.js) */
.caption.guide.below{transform:translate(-50%,10px) translateX(var(--dx))}
.caption.guide.dock{transform:none;max-width:none;box-sizing:border-box}.caption.guide.dock::after{display:none}
.caption.guide.dock.wide{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 13px}.guide.wide p{flex:1;margin:0}.guide.wide .guide-actions{flex:none}
.caption.guide.below::after{top:-6px;bottom:auto;transform:translateX(-50%) rotate(-135deg)}
.guide[hidden]{display:none}
.guide p{margin:0 0 9px;font-size:12.5px;line-height:1.55}
.guide-actions{display:flex;align-items:center;gap:6px}
.guide-step{margin-right:auto;font-size:10px;font-weight:600;color:var(--fine)}
.guide-skip{border:0;background:none;padding:6px 8px;font-size:12px;font-weight:600;color:#55657a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#55657a66;cursor:pointer}
.guide-next{border:0;border-radius:20px;background:var(--green);color:#fff;padding:6px 15px;font-size:12px;font-weight:650;cursor:pointer}
html:not(.ptr) .guide button:focus-visible{outline:var(--focus);outline-offset:2px}
/* step 3: next to the rail */
.caption.guide.at-rail{left:auto;right:14px;top:164px;transform:none;z-index:9}
.caption.guide.at-rail::after{left:auto;right:-6px;bottom:auto;top:24px;transform:rotate(-45deg)}
.roof-sign{position:absolute;width:0;height:0;pointer-events:none;transition:opacity .2s;z-index:0}
.roof-sign:is(.yield,.clipped){opacity:0}
.rs-card{position:absolute;left:0;bottom:0;transform:translateX(-50%) scale(var(--inv-scale));transform-origin:50% 100%;max-width:150px;box-sizing:border-box;padding:2px 7px 2px 6px;border-radius:7px;background:#fffaf0d9;box-shadow:0 0 0 1px #eadfca,0 2px 5px #5b341714;white-space:nowrap;font:600 10px/1.4 Inter,ui-sans-serif,system-ui,sans-serif;color:#5a4a3c}
.rs-card p{margin:0;overflow:hidden;text-overflow:ellipsis}
.rs-name{display:flex;align-items:center;gap:4px}
.rs-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--hh)}
.ladder{display:inline-flex;gap:2.5px;margin-left:auto;padding-left:8px}
.ladder i{width:6px;height:6px;border-radius:50%;background:#dfe5ec}
.ladder i.on{background:var(--hh)}
.ladder i.cur{box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--hh)}
.roof-sign.idle .rs-card{opacity:.85}
.signs-off .roof-sign{opacity:0}
.light-night .rs-card,.light-evening .rs-card{background:#f6efe2e0}
.ring{position:absolute;width:120px;height:56px;margin:-28px 0 0 -60px;border-radius:50%;border:3px solid #ffffffd0;box-shadow:0 0 0 3px #087e6888,0 0 18px #087e6866;animation:ring 1.2s ease-out 3}
@keyframes ring{0%{transform:scale(.7);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:.2}}
.boat{position:absolute;left:0;top:0;width:26px;height:14px;margin:-14px 0 0 -13px;background:linear-gradient(#fffdf6,#efe7d3);clip-path:polygon(0 30%,100% 30%,80% 100%,20% 100%);filter:drop-shadow(0 2px 1px #4e426033)}
.boat::before{content:"";position:absolute;left:9px;top:-10px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:14px solid #fffdf6}
.note{position:absolute;width:12px;height:9px;border-radius:2px;background:#fffdf6;box-shadow:0 1px 2px #4e426055;margin:-5px 0 0 -6px}
.bird{position:absolute;width:14px;height:8px;border-top:2.5px solid #fffaf0;border-radius:50% 50% 0 0;filter:drop-shadow(0 1px 1px #4e426055)}
.star-shot{position:absolute;right:20%;top:12%;width:120px;height:2px;background:linear-gradient(90deg,transparent,#fff);border-radius:2px;transform:rotate(-24deg)}
.paper-roll{position:absolute;width:14px;height:8px;margin:-8px 0 0 -7px;border-radius:4px;background:linear-gradient(#fffdf6,#e9dfc9);box-shadow:0 1px 2px #4e426040}
.light-evening .paper-roll{background:linear-gradient(#d9d6e2,#b9b3c6)}.light-night .paper-roll{background:linear-gradient(#8e93ad,#6f7390)}

/* ---- weather over everything ---- */
.weather{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.clouds{position:absolute;inset:0;animation:drift 120s ease-in-out infinite}
.clouds i{position:absolute;display:none;width:170px;height:54px;border-radius:40px;background:radial-gradient(circle at 35% 35%,#ffffff,#e9edf5);box-shadow:34px -20px 0 -4px #f4f6fa,-30px -10px 0 -10px #eef1f7,0 10px 18px #4e42601a;opacity:.9}
/* the sky's clouds keep to the top band: lower down, the third one sat on Lookout Hill, where residents stand */
.clouds i:nth-child(1){left:8%;top:9%}.clouds i:nth-child(2){left:52%;top:4%;transform:scale(.8)}.clouds i:nth-child(3){left:76%;top:3%;transform:scale(.65)}
.sky-fair .clouds i:nth-child(1),.sky-cloudy .clouds i,.sky-drizzle .clouds i,.sky-rain .clouds i{display:block}
.sky-drizzle .clouds i,.sky-rain .clouds i{background:radial-gradient(circle at 35% 35%,#eef1f6,#c9d1de);box-shadow:34px -20px 0 -4px #dde3ec,-30px -10px 0 -10px #d6dce7,0 10px 18px #4e426026}
.light-night .clouds i,.light-evening .clouds i{opacity:.35}
@keyframes drift{from{transform:translateX(-40px)}50%{transform:translateX(40px)}to{transform:translateX(-40px)}}
/* Rain: the stripes sit on an oversized child that slides down exactly one 160px tile per loop (no visible jump),
   so the whole-map layer moves on the compositor instead of repainting every frame. */
.rain{position:absolute;inset:0;display:none;overflow:hidden}
.rain::before{content:"";position:absolute;left:-40px;right:-40px;top:-200px;bottom:-40px;background:repeating-linear-gradient(104deg,transparent 0 16px,#7fa6d655 16px 17.5px,transparent 17.5px 34px),repeating-linear-gradient(98deg,transparent 0 22px,#9cc9f044 22px 23px,transparent 23px 47px);background-size:120px 160px;will-change:transform;animation:rain .6s linear infinite}
.sky-drizzle .rain,.sky-rain .rain{display:block}.sky-drizzle .rain{opacity:.55}
@keyframes rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,160px,0)}}

/* ---- map controls: his secondary pill buttons, frosted over the sky ---- */
.jump{position:absolute;left:14px;top:14px;z-index:6;display:flex;gap:6px;flex-wrap:wrap}
.jump button,.actions>button,.more>button,.zoom button,.rp-back,.rp-play,#rp-speed{border:1px solid var(--chip-line);background:#ffffffd6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:30px;padding:7px 13px;font-size:12px;font-weight:600;color:var(--chip-ink);box-shadow:0 3px 10px #26395510;min-height:34px;transition:background .15s,color .15s}
.jump button:hover,.actions>button:hover,.more>button:hover,.zoom button:hover,.rp-back:hover{background:#fff;color:var(--green)}
.zoom{position:absolute;right:14px;top:14px;z-index:6;display:flex;flex-direction:column;gap:6px}
/* ---- draft art pill and list ---- */
.draft-pill{display:flex;align-items:center;gap:7px;margin:0;padding:7px 13px;border:1px solid #ece3d2;border-radius:22px;background:#faf6eeeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:12px;font-weight:600;line-height:1.35;color:#6b5a3f;text-align:left;cursor:pointer;transition:background .15s}
.draft-pill::before,.draft-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#d6a653;flex:none}
.draft-pill:hover{background:#fffdf8}
.draft-pill[hidden]{display:none} /* no drafts left (index.json): no pill */
html:not(.ptr) .draft-pill:focus-visible{outline:var(--focus);outline-offset:2px}
.draft-which{color:#86652c;text-decoration:underline;text-decoration-color:#dcc08a;text-underline-offset:2px;white-space:nowrap}
.draft-lead{margin:0 0 10px;font-size:13px;line-height:1.6;font-weight:600;color:#34496c}
.draft-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px;font-size:12.5px;line-height:1.55;color:#4e5d77}
.draft-list b{font-weight:650;color:#6b5a3f}
.draft-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border:1px solid #ece3d2;border-radius:22px;background:#faf6ee;font-size:10px;font-weight:600;line-height:1.5;color:#6b5a3f;white-space:nowrap;vertical-align:1px}
.draft-tag::before{width:5px;height:5px}
.life-list .draft-tag{margin-left:9px}
.card-art .draft-tag{position:absolute;left:14px;top:14px;z-index:1;padding:4px 10px;font-size:11px;background:#faf6eeeb}
.card-art .draft-tag.portrait-draft{top:46px}
.card .card-body .card-asof{margin:12px 0 0;font-size:11px;line-height:1.55;color:var(--fine)}
/* the hover tag over a draft house or building on the map (top layer, constant screen size like the name tags) */
.map-draft{position:absolute;transform:translate(-50%,-50%) scale(var(--inv-scale));transform-origin:50% 50%;z-index:2000;pointer-events:none;box-shadow:0 3px 10px #29354c1f}
.map-draft[hidden]{display:none}
.zoom button{width:38px;height:38px;padding:0;font-size:18px;line-height:1;border-radius:12px}
.actions{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 28px)}
/* More ⋯ menu (PLAN P0.5) */
.more{position:relative}
.more>button[aria-expanded=true]{background:#fff;color:var(--green)}
.more-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:9;display:grid;gap:1px;min-width:224px;padding:6px;border:1px solid #e3eaf1;border-radius:14px;background:#fff;box-shadow:0 14px 34px #26395528}
.more-menu[hidden]{display:none}
.actions:has(.more-menu:not([hidden])){z-index:8} /* an open menu goes over the phone's band chip */
.more-menu [role^=menuitem]{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:9px 11px;border:0;border-radius:9px;background:none;font-size:13px;font-weight:550;line-height:1.3;color:#34496c;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.more-menu [role^=menuitem][hidden]{display:none}
.more-menu [role^=menuitem]:hover,.more-menu [role^=menuitem]:focus-visible{background:#f0f6f2;color:#1f5f4c;outline:none}
html:not(.ptr) .more-menu [role^=menuitem]:focus-visible{box-shadow:inset 0 0 0 2px var(--ring-out)}
.more-menu [role=menuitemcheckbox]::before{content:"";flex:none;display:grid;place-items:center;width:13px;height:13px;border:1.5px solid #b7c6bf;border-radius:4px;background:#fff;color:#fff;font-size:10px;font-weight:800;line-height:1}
.more-menu [role=menuitemcheckbox][aria-checked=true]::before{content:"✓";border-color:var(--green);background:var(--green)}
.replay{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid #e3eaf1;border-radius:30px;background:#fffffff2;box-shadow:0 12px 30px #26395522;width:min(560px,calc(100% - 24px))}
.replay[hidden]{display:none}
.rp-range{flex:1;display:flex}.rp-range input{width:100%;accent-color:var(--green)}
#rp-time{font-size:12px;font-weight:650;min-width:62px;text-align:right;color:#26385a}
.rp-play{width:34px;padding:0}.rp-back{white-space:nowrap}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:8;margin:0;padding:8px 14px;border-radius:14px;background:#192741e6;color:#fff;font-size:12px;max-width:80%}
.toast[hidden]{display:none}
.debug-map{position:absolute;inset:0;width:1200px;height:800px;pointer-events:none;z-index:900}

/* ---- rail: Around town, in the Zoo Chat panel's clothes ---- */
.rail{position:relative;display:flex;flex-direction:column;min-height:0;background:linear-gradient(#fbfdff,#f0f6fa);border-left:1px solid #e1e8f2;outline:none}
.handle{display:none}
.rail-title{margin:0 18px;padding:18px 0 14px}
.rail-title h2{font-size:15px;margin:0;letter-spacing:-.1px;color:var(--ink)}
.rail-title p{font-size:10.5px;line-height:1.55;color:var(--fine);margin:3px 0 0}
.rail-title{align-items:flex-start}.rail-title .chat-mark{margin-top:2px}
.rail-slot{margin-left:auto;flex:none} /* reserved slot (ROADMAP §2) */
.status{padding:12px 18px 12px;border-bottom:1px solid #e2eaf3}
.status-line{margin:0;font-size:13px;font-weight:650;line-height:1.5;color:#253455}
.status-sub{margin:3px 0 0;font-size:11px;color:var(--fine);line-height:1.6}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 0}
.feed-date{margin:0;font-size:10px;color:var(--fine);letter-spacing:.8px;text-transform:uppercase;font-weight:650}
.tabs{display:flex;gap:3px;background:#fdfefd;border:1px solid #e0e7e1;border-radius:12px;padding:3px}
.tabs button{border:0;background:transparent;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:600;color:#7c8ba4}
.tabs button[aria-selected=true]{background:#e0eee5;color:#23715b}
.tabs:has(#tab-away[hidden]){display:none}
.panels{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 18px 16px}
.feed{list-style:none;margin:0;padding:0}
.feed li{margin:0}
.feed .empty{font-size:12px;color:var(--fine);padding:14px 2px;text-align:center}
/* chat lines: avatar, name + time, bubble (his .chat-message), each one a button that flies the map there */
.msg{display:flex;gap:8px;align-items:flex-start;width:100%;margin:14px 0;padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.msg .avatar{position:relative;overflow:hidden;border-radius:50%;width:32px;height:32px;margin:0;flex:none;background:#eff6ea}
.msg .avatar .paw{font-size:13px}
.msg.owl .avatar{background:#eaf4fe}.msg.fox .avatar{background:#fff0e9}.msg.bull .avatar{background:#f1ebfc}
.msg>span:last-child{min-width:0;flex:1}
.msg .message-meta b{color:#435577;font-size:11px;font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#43557755}
.msg .message-meta time{color:var(--fine);font-size:9px;font-variant-numeric:tabular-nums}
.msg .chat-bubble{display:block;transition:border-color .15s,box-shadow .15s}
.msg:hover .chat-bubble{border-color:#c9d8e6;box-shadow:0 5px 14px #26395512}
.msg.turtle .chat-bubble{background:#eef9f2;border-color:#d7ecdf}
.msg.fox .chat-bubble{background:#fff5ee;border-color:#f0e3d8}
.msg.bull .chat-bubble{background:#f6f1ff;border-color:#e8e0f5}
.msg .reply{display:block;font-size:10px;color:var(--fine);margin-bottom:3px}
.msg .message-meta{justify-content:flex-start}.msg .message-meta time{margin-left:auto}
.msg .src.log{font-size:8px;letter-spacing:.6px;text-transform:uppercase;font-weight:650;color:var(--fine);white-space:nowrap}
.msg .trade-action{margin:0 6px 0 0;vertical-align:1px}
.trade-action.hold{color:#5a6b86;background:#eef2f8}
/* town news and town life: quiet centered notes between the chat lines */
.tnote{display:block;width:100%;margin:12px 0;padding:8px 10px;border:1px dashed #d8e2ec;border-radius:12px;background:#ffffffa6;text-align:left;font-size:11px;line-height:1.6;color:#5e6e87;cursor:pointer}
.tnote:hover{background:#fff;border-color:#c9d8e6}
.tnote time{font-weight:650;color:var(--fine);margin-right:6px;font-variant-numeric:tabular-nums}
.tnote .src,.feed-lead .src{display:inline-block;font-size:9px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;margin-right:6px;padding:1px 6px;border-radius:5px;font-style:normal;vertical-align:1px}
/* tags: feed.js SRC */
.src.life{color:#2f6f55;background:#e6f4ec}.src.news{color:#8a5a1f;background:#fbf0de}.src.homes{color:#1c6a52;background:#dff1e7}
.src.ribbon{color:#8a5f00;background:#fff3cf}.src.close{color:#3f5a86;background:#e9eef8}.src.visitors{color:#5d479a;background:#f1ecfb}
/* the rail's lead (feed.js) */
.feed-lead{display:grid;gap:6px;margin:14px 0 4px;padding:12px 13px 11px;border:1px solid #d7ecdf;border-radius:14px;background:#f5fbf7}
.feed-lead[hidden]{display:none}
.lead-kicker{margin:0;font-size:9px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--fine)}
.lead-item{display:grid;gap:3px}
.lead-main{padding:0;border:0;background:none;text-align:left;font-size:13px;font-weight:650;line-height:1.5;color:#26385a;cursor:pointer}
.lead-main:hover{color:var(--green)}
.lead-cause{margin:0;font-size:11.5px;line-height:1.6;color:#4e6087}
.lead-cause a{font-weight:650;color:var(--zp-link,#0a7a62);text-decoration:none;white-space:nowrap}
.lead-cause a:hover{text-decoration:underline;text-underline-offset:3px}
.lead-homes{margin:2px 0 0;padding-top:8px;border-top:1px dashed #cfe3d6;font-size:11.5px;line-height:1.6;color:#4e6087}
.tnote.news{border-style:solid;border-color:#f0e3cc;background:#fffaf1}
.feed li.new .chat-bubble,.feed li.new .tnote{border-color:#9fd6bd;box-shadow:0 0 0 3px #d9f2e6}
/* weekends and holidays: last trading day's paper + its closing bell, under the day's one line */
.feed-extra{display:grid;gap:12px;margin:4px 0 14px}
.paw-card{display:grid;gap:5px;padding:13px 14px 12px;border:1px solid #f0e3cc;border-radius:14px;background:#fffaf1;text-decoration:none;color:#4e5d77;box-shadow:0 4px 14px #26395508;transition:border-color .15s,box-shadow .15s}
.paw-card:hover{border-color:#e4cfa8;box-shadow:0 6px 18px #26395512}
.paw-kicker{font-size:9px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:#8a5a1f}
.paw-card b{font:700 15px/1.3 "Iowan Old Style",Georgia,"Times New Roman",serif;color:#26385a}
.paw-dek{font-size:11.5px;line-height:1.6}
.paw-read{font-size:11px;font-weight:650;color:var(--green)}
.bell-mini{border:1px solid #e3eaf1;border-radius:14px;background:#fff;padding:10px 10px 6px}
.bell-mini-h{margin:0 2px 6px;font-size:9px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;color:var(--fine)}
.bell-mini table{min-width:0;font-size:11px}
.bell-mini th,.bell-mini td{padding:6px 4px;background:none;position:static}
.bell-mini thead th{font-size:9px}
.bell-mini tbody th{font-weight:650;color:#374e70;font-size:11px}
.bell-mini .down{color:#b04e42}
.bell-mini tbody th i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.away{font-size:12px;line-height:1.7;margin:12px 0 6px;color:#4e6087}
.rail-foot{padding-top:6px;border-top:1px solid #e2eaf3;margin-top:8px;display:flex;flex-direction:column;gap:10px}
.rail .chat-footer{margin:10px 0 2px}
.rail-actions{display:flex;gap:8px;flex-wrap:wrap}
.rail-actions .button{font-size:12px;min-height:38px;padding:9px 16px;gap:10px}
.rail-actions .button span{font-size:11px}
.demo-note,.fine{margin:0;font-size:10px;line-height:1.7;color:var(--fine)}

/* ---- page footer: his footer with the town links where the artwork link sits ---- */
.town-footer{background:#fff}
.footer-links{display:flex;gap:16px;font-size:11px}
.footer-links a{text-decoration:none;color:#5d7466}.footer-links a:hover{color:var(--green)}

/* ---- dialogs: his agent dialog (portrait on top, body below) ---- */
dialog{overflow:auto;background:#fff}
dialog.card{width:min(460px,calc(100% - 32px))}
.card-art{position:relative;height:220px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),#e9f1f6}
.card-art.fox{background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),#f9ede2}
.card-art.turtle{background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),#e6f2e7}
.card-art.bull{background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),#eeebf5}
.card-art>img{height:208px;width:auto;max-height:none;object-fit:contain;object-position:center bottom}
.card-art>.fb{height:170px;width:280px;margin-bottom:10px}
.big-sign{position:relative;display:block;margin:0 0 26px;transform:rotate(-3deg)}
.big-sign::before,.big-sign::after{content:"";position:absolute;bottom:-26px;width:12px;height:44px;border-radius:3px;background:linear-gradient(90deg,#8d5a31,#b37846 60%,#8d5a31);z-index:-1}
.big-sign::before{left:22%}.big-sign::after{right:22%}
.big-sign>span{display:block;padding:16px 30px 14px;border-radius:14px 18px 12px 16px;font:800 24px/1.1 Georgia,"Times New Roman",serif;letter-spacing:1px;text-transform:uppercase;color:#5b3417;text-shadow:0 1px 0 #f5d3a3;white-space:nowrap;
  background:repeating-linear-gradient(176deg,#0000 0 6px,#9a5f2e16 6px 7px,#0000 7px 12px),linear-gradient(180deg,#ecc28d,#d59b60);box-shadow:inset 0 3px 0 #f8dcb2,inset 0 -4px 0 #a86e3f66,0 0 0 2px #9a6536,0 8px 16px #5a3a1a33}
.card-art .demo-tag{position:absolute;left:14px;top:14px;z-index:1;display:flex;align-items:center;gap:6px;max-width:calc(100% - 84px);box-sizing:border-box;line-height:1.35;padding:5px 11px;border:1px solid #e5eadd;border-radius:22px;background:#f4f6efeb;font-size:11px;font-weight:600;color:#526450}
.card-art .demo-tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green)}
.card-art .paw{position:relative;inset:auto;width:130px;height:130px;border-radius:50%;margin-bottom:34px;font-size:44px}
.card-art.place{height:170px;align-items:center;background:radial-gradient(ellipse at 50% 100%,#fff 0,transparent 70%),linear-gradient(135deg,#f1f5ed,#edf3f6)}
.card-art.place>img{height:156px}
.card-art.place>.fb{height:140px}
.card-body .eyebrow{font-size:10px;margin-bottom:8px}
.card-body h2{margin:0 0 6px}
.card-body .tagline{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.75}
.card-body blockquote{margin:12px 0 16px;font:italic 17px/1.6 Georgia,serif;color:#437764}
.card-body .stats{margin:0 0 14px;border:1px solid #edf1ed;border-radius:14px;grid-template-columns:1.3fr .9fr .9fr .9fr;padding:12px 0 10px}
.card-body .stats b{font-size:13px}
.up,.card-body .positive{color:var(--up)}.down,.card-body .negative{color:var(--down)}
.life-list{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 14px;font-size:12px;line-height:1.5}
.life-list dt{color:var(--fine)}.life-list dd{margin:0;font-weight:560;color:#34496c}
.lv-next{display:block;margin-top:1px;font-size:11.5px;font-weight:500;color:var(--fine)}
.lv{display:inline-flex;gap:3px;margin-left:7px;vertical-align:1px}.lv i{width:6px;height:6px;border-radius:50%;background:#e3e8f0}.lv i.on{background:var(--hh,var(--green))}.lv i.cur{box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px var(--hh,var(--green))}
.card-body .dialog-focus{margin:0 0 12px}
.card-body .button{width:100%}
/* action row, room for Knock / postcard (ROADMAP §2) */
.card-actions{display:flex;flex-wrap:wrap;gap:8px}
.card-actions>*{flex:1 1 170px}
.card-back{margin:0 0 12px;padding:4px 0;border:0;background:none;font-size:12px;font-weight:650;color:var(--zp-link,#0a7a62);cursor:pointer}
.how-note{margin:0 0 10px;font-size:13px;line-height:1.6;font-weight:600;color:#34496c}
.how-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.card-foot{margin:12px 0 0;font-size:11px;color:var(--fine);text-align:center}
.card-body .members{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 12px;font-size:12px;color:var(--muted)}
.card-body .members button{border:1px solid var(--chip-line);background:#fff;border-radius:30px;padding:4px 11px;font-size:12px}
.quote-pop{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#fff;border-radius:14px;padding:8px 12px;font:italic 13px/1.4 Georgia,serif;color:#437764;box-shadow:0 6px 16px #2c476424;max-width:80%;text-align:center}
.sheet{width:min(760px,calc(100% - 32px))}#list-dlg{width:min(1080px,calc(100% - 32px))}.sheet.small{width:min(420px,calc(100% - 32px))}
.sheet-body{padding:28px 30px}
.sheet h2{margin:0 0 14px;font-size:24px;letter-spacing:-.7px}
.sheet .eyebrow{font-size:10px;margin-bottom:8px}
.table-wrap{overflow:auto;border:1px solid #e3eaf3;border-radius:13px}
table{border-collapse:collapse;width:100%;font-size:12px;min-width:640px;color:#62728c}
caption{caption-side:top;text-align:left;font-size:11px;color:var(--fine);padding:11px 13px 9px}
th,td{padding:10px 11px;text-align:left;border-bottom:1px solid #edf1f7;white-space:nowrap}
th{font-size:10px;color:var(--fine);font-weight:500;background:#f7faff;position:sticky;top:0}
tbody th{color:#374e70;font-weight:650;background:none;position:static;font-size:12px}
th button{border:0;background:none;padding:0;font-weight:600;color:inherit}
th[aria-sort=ascending] button::after{content:" ↑"}th[aria-sort=descending] button::after{content:" ↓"}
td.r,th.r{text-align:right}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
/* the Town Hall board: wooden frame, pinned paper notes */
.board{position:relative;padding:18px;border-radius:18px;background:repeating-linear-gradient(177deg,#0000 0 6px,#9a5f2e12 6px 7px,#0000 7px 13px),linear-gradient(180deg,#e7b981,#cf955a);box-shadow:inset 0 0 0 7px #b67a46,inset 0 0 0 9px #9a6536,inset 0 3px 0 9px #f3cf9f55,0 8px 20px #5a3a1a26;margin:0 0 14px}
.rules{list-style:none;counter-reset:r;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rules li{counter-increment:r;position:relative;background:#fffdf6;border-radius:4px;padding:16px 14px 12px 42px;font-size:12.5px;line-height:1.6;color:#4e5d77;box-shadow:0 3px 6px #5a3a1a2e}
.rules li:nth-child(odd){transform:rotate(-.6deg)}.rules li:nth-child(even){transform:rotate(.5deg)}
.rules li::before{content:counter(r);position:absolute;left:12px;top:15px;width:21px;height:21px;border-radius:50%;background:#e0eee5;color:#23715b;font-weight:750;font-size:11px;display:grid;place-items:center}
.rules li::after{content:"";position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb3a6,#e0645a);box-shadow:0 2px 2px #0003}
.card-body .board{padding:14px}
.board-notes{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.board-notes li{position:relative;background:#fffdf6;border-radius:4px;padding:10px 12px 9px;font-size:12px;line-height:1.55;color:#4e5d77;box-shadow:0 3px 6px #5a3a1a2e}
.board-notes li::after{content:"";position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#b9d3ff,#4a8ee8)}
.board-notes b{color:#26385a}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13px;margin:0;color:#4e6087}
.keys-note{margin:14px 0 0}
.keys dt{font:600 12px ui-monospace,Menlo,monospace;background:#f1f6f9;border-radius:6px;padding:2px 7px;justify-self:start;color:#26385a}.keys dd{margin:0}
.noscript{padding:40px;text-align:center}

/* ---- motion and pause ---- */
.less-motion *,.less-motion *::before,.less-motion *::after{animation:none!important;transition:none!important}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){html:not(.motion-full) *,html:not(.motion-full) *::before,html:not(.motion-full) *::after{animation:none!important;transition:none!important}}

/* ---- Mayor Mo's box (the invitation; the tour adds its own layout from tour.js). No dim layer: only the box takes
   pointer events. ---- */
.tour{position:absolute;left:10px;right:14px;bottom:0;z-index:9;display:flex;align-items:flex-end;pointer-events:none}
.tour[hidden]{display:none}
.tour-bust{position:relative;flex:none;width:124px;height:166px}
.tour-bust img,.tour-bust svg{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.tour-bust .draft-tag{position:absolute;left:0;top:6px}
.tour-box{position:relative;box-sizing:border-box;flex:0 1 360px;min-width:0;margin:0 0 14px -8px;padding:10px 14px 10px 20px;border:1px solid #cfe3d8;border-radius:18px;background:#fff;box-shadow:0 10px 26px #26395524;color:#34496c;pointer-events:auto}
.tour-head{display:flex;gap:10px;margin:0 0 4px;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#6a7c93}
.tour-who{flex:1}
.tour-text{margin:0 0 9px;font-size:14px;line-height:1.5}
.tour-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.tour-actions button{border:0;border-radius:20px;padding:6px 13px;background:#eef4f1;font-size:12px;font-weight:650;color:#2b5a4b;cursor:pointer}
.tour-actions .tour-next{background:var(--green);color:#fff}
.tour-actions .tour-skip{background:none;font-weight:600;color:#55657a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#55657a66}
html:not(.ptr) .tour button:focus-visible{outline:var(--focus);outline-offset:2px}
html:not(.ptr) .door-hit:focus-visible{outline:none;box-shadow:0 0 0 calc(2px * var(--inv-scale)) var(--ring-in),0 0 0 calc(4.5px * var(--inv-scale)) var(--ring-out)}
html.ptr .door-hit:focus-visible:not(:hover){box-shadow:none}html.ptr .door-hit:focus-visible:not(:hover)::after{opacity:0}
@media(max-width:860px),(max-height:500px){
  .tour{left:8px;right:8px;bottom:calc(var(--peek) + 62px);display:block}
  .tour-bust{position:absolute;left:4px;bottom:calc(100% - 22px);width:88px;height:117px}
  .tour-box{margin:0;padding:10px 12px}
  .tour-head{padding-left:92px;min-height:16px}
  .tour-text{font-size:13.5px}
}
@media(pointer:coarse){.tour-actions button{min-height:44px;min-width:44px}}
/* 861-1180px: the invitation reaches the bottom buttons, so they stand on its top edge (main.js sets --tour-h) */
@media(min-width:861px) and (max-width:1180px){.viewport:has(>.invite:not([hidden])) .actions{bottom:calc(var(--tour-h) + 24px)}}
@media(max-height:500px){.tour-bust{bottom:auto;top:7px;left:10px;width:28px;height:28px;border-radius:50%;overflow:hidden;background:#f3ebe0;z-index:1}.tour-bust img{transform:scale(1.9);transform-origin:50% 21%}.tour-bust .draft-tag{display:none}.tour-head{padding-left:36px;min-height:20px;align-items:center}}

/* ---- phones, small tablets and short screens (landscape phones): the rail becomes a bottom drawer ---- */
@media(max-width:860px),(max-height:500px){
  /* The drawer is always full height and slides with transform (no layout per frame): peek shows --peek (88px; 48px on
     short screens, below), half 60svh. The camera centres above it (dom.js peekPx). */
  :root{--peek:88px}
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));border-left:0;border-top:1px solid #e1e8f2;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px #26395522;transform:translateY(calc(100% - var(--peek)));transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(#fbfdff,#f0f6fa)}
  .rail[data-state=half]{transform:translateY(calc(100% - 60svh))}.rail[data-state=full]{transform:none}
  .rail.dragging{transition:none}
  .handle{display:block;position:absolute;left:0;right:0;top:0;height:22px;border:0;background:none;z-index:2;touch-action:none;cursor:grab}
  .handle::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:5px;border-radius:3px;background:#cdd8e4;transform:translateX(-50%)}
  .rail-title{display:none}
  .rail[data-state=half] .rail-title,.rail[data-state=full] .rail-title{display:flex;padding-top:22px;margin:0 16px;padding-bottom:10px}
  .status{padding:20px 16px 8px;border-bottom:0}
  .rail[data-state=half] .status,.rail[data-state=full] .status{padding-top:10px}
  .status-line{font-size:12.5px}.status-sub{display:none}
  .rail[data-state=peek] .rail-head,.rail[data-state=peek] .panels{visibility:hidden}
  .rail[data-state=peek] .status::after{content:attr(data-latest);display:block;font-size:11.5px;color:#7c8a9f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .rail[data-state=half] .status-sub,.rail[data-state=full] .status-sub{display:block}
  .rail-head{padding:4px 16px 0}.panels{padding:0 16px 20px}
  .actions{bottom:calc(var(--peek) + 12px);right:10px;gap:5px}.actions>button,.more>button{font-size:11px;padding:5px 10px;min-height:32px}
  /* the band as a two-line chip */
  .town-band{position:absolute;left:10px;top:calc(var(--strip) + 10px);z-index:7;max-width:calc(100% - 76px);border:1px solid #e3eaf1;border-radius:14px;background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px #26395514}
  .band-inner{display:block;width:auto;margin:0;padding:6px 12px 7px}
  .band-eyebrow,.band-pills,.band-link,.band-promise .lg{display:none}
  .band-title{display:block}
  .band-title h1{font-size:15px;letter-spacing:-.2px;line-height:1.3}
  .band-promise .sm{display:block;font-size:11px;line-height:1.35;color:#55657a}
  .caption.guide.at-rail{left:10px;right:10px;top:auto;bottom:calc(var(--peek) + 58px);max-width:none;width:auto}
  .caption.guide.at-rail::after{left:34px;right:auto;top:auto;bottom:-6px;transform:rotate(45deg)}
  .replay{bottom:calc(var(--peek) + 62px)}
  /* place chips get their own full-width row (scrolls sideways, fades at the edge); zoom sits below it */
  .jump{top:62px;left:0;right:0;padding:0 44px 2px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 8px));mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 8px))}.jump::-webkit-scrollbar{display:none}
  .jump button{flex:none;min-height:32px;padding:5px 11px}
  html:not(.ptr) .jump button:focus-visible{outline-offset:-2.5px;box-shadow:inset 0 0 0 4.5px var(--ring-in)} /* the row clips: ring inside the chip */
  .zoom{right:10px;top:104px}.zoom button{width:36px;height:36px}
  .sprigs{height:150px}.sprigs.right{display:none}
  .town-footer{padding-bottom:110px}
  dialog.card{margin:auto auto 0;width:100%;max-width:520px;border-radius:24px 24px 0 0;max-height:90svh}
  .rules{grid-template-columns:1fr}
  .sheet-body{padding:22px 18px}
}
@media(max-width:860px),(max-height:500px){
  .town{--strip:52px}
  .family-strip{padding:6px 10px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .fam-chip{flex:none;height:40px;gap:3px}.fc-buy{display:none}
}
@media(max-width:380px){.actions>button,.more>button{font-size:10.5px;padding:4px 8px}}
/* touch screens: 44px targets for the guide, the bottom buttons, the More menu, the family strip, the band's link and
   draft pill (touch tablets get the desktop band), the House rules pill and its mayor's link, dialog close buttons and housemate chips, the
   rail's lead, its Town life notes and its two buttons, List view's sort and name buttons, the Watch today bar and the phone drawer's handle */
@media(pointer:coarse){
  .guide-skip,.guide-next{min-height:44px;min-width:44px}
  .lead-main,.rail-actions .button,th button,.list-who,.rp-back,.tnote{min-height:44px}
  .rp-play,#rp-speed{min-width:44px;min-height:44px}.rp-range input{height:44px;margin:0}
  th button,.list-who{min-width:44px}
  @media(max-width:520px){.replay{flex-wrap:wrap;row-gap:4px;border-radius:22px}.rp-range{order:1;flex-basis:100%}#rp-time{margin-right:auto;text-align:left}}
  .band-link,.draft-pill,.card-body .members button{min-height:44px}.band-link{align-items:center}.how-tour a{display:inline-block;padding:14px 0}
  .dialog-close{width:44px;height:44px}
  .jump button{min-height:44px}.zoom button{width:44px;height:44px}
  .actions>button,.more>button,.more-menu [role^=menuitem]{min-height:44px}
  @media(max-width:860px),(max-height:500px){.family-strip{height:56px}.fam-chip{height:44px}.town{--strip:56px}.zoom{top:116px}
    /* the drawer's handle: a 44px strip along the top, over the peek line and the title (a tap there opens the drawer
       further either way), so nothing moves */
    .handle{height:44px}}
}

/* ---- short screens, any width (landscape phones, max-height 500px): the phone layout above, tightened so the map keeps
   most of the height. The band chip and the place chips share the top row (main.js sets --band-w, the chip's width);
   the zoom buttons lie in a row at the bottom left, the bottom buttons at the bottom right, both above the drawer's
   one-line 48px peek (status, then the lead item), so no control sits on another or on the drawer. ---- */
@media(max-height:500px){
  :root{--peek:48px}
  .town{--strip:48px}.family-strip{height:48px;padding-top:2px;padding-bottom:2px}
  .status{padding-top:12px}
  .rail[data-state=peek] .status{display:flex;align-items:baseline;gap:10px;padding:15px 16px 6px}
  .rail[data-state=peek] .status-line{flex:none;white-space:nowrap}
  .rail[data-state=peek] .status::after{flex:1;min-width:0;margin-top:0}
  .town-band{top:calc(var(--strip) + 8px);max-width:min(46%,300px)}
  :root:not(.embed) .jump{top:8px;left:calc(var(--band-w,0px) + 18px);padding-left:0}
  :root:not(.embed) .zoom{top:auto;right:auto;left:10px;bottom:calc(var(--peek) + 10px);flex-direction:row}
  :root:not(.embed) .actions{bottom:calc(var(--peek) + 10px);max-width:calc(100% - 180px)}
  /* More opens beside its button, in two columns: above it there is not room for five 44px rows */
  .more-menu{bottom:0;right:calc(100% + 8px);min-width:0;grid-template-columns:repeat(2,max-content);column-gap:4px}
  /* the guide's drawer tip: one row, its tail down to the drawer between the zoom row and the bottom buttons */
  .caption.guide.at-rail{display:flex;align-items:center;gap:14px;padding:8px 10px 8px 13px}.guide.at-rail p{flex:1;margin:0}.guide.at-rail .guide-actions{flex:none}
  .caption.guide.at-rail::after{left:50%}
}

/* ---- contrast floor: his small grey labels, one notch darker here so small text meets WCAG AA (4.5:1) ---- */
.rail .chat-footer,.town-footer p,.card-body .dialog-disclosure,.card-body .stats small{color:var(--fine)}
.rail .trade-action.buy{color:#0a7a61}.rail .trade-action.sell{color:#a44f49}

/* ---- ?embed=1 (inside the local app's iframe): header, footer and rail are hidden in index.html's critical CSS; on
   phones nothing peeks up from the bottom any more, so the map controls drop back to the edge ---- */
@media(max-width:860px),(max-height:500px){.embed .actions{bottom:12px}.embed .replay{bottom:60px}.embed .jump{top:10px}.embed .zoom{right:10px;top:52px}}
@media(max-width:860px) and (pointer:coarse),(max-height:500px) and (pointer:coarse){.embed .zoom{top:62px}}
/* very narrow phones (under 350px): the band keeps only its title, so it stays one line and never covers the place chips */
@media (max-width:350px){.band-promise .sm{display:none}}