/* digi-app · ui/app.css
   digiFREE's look. ONE set of design numbers (the :root block) so the native port pulls
   them in one move. Night home (the globe), light cards. Very little green: dM is the
   only green, because green means "talk to Digi Discounts". */
:root{
  --red:#cf0202; --red-glow:#ff4b3f; --green:#05672a; --ink:#1a1a1d;
  --night:#070203; --tile:color-mix(in srgb,var(--acc) 7%,rgba(16,9,10,.88)); --tile-edge:rgba(255,255,255,.08);
  --text:#fff; --muted:rgba(255,255,255,.66); --faint:rgba(255,255,255,.38);
  --acc:#ff5a4f; --acc-l:#cf0202;          /* her color: set by her theme */
  --r-tile:22px; --r-sq:24%;               /* squircles: 24% everywhere a logo shows (digiUI 6.18) */
  --gap:12px; --pad:16px; --col:560px;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:200ms; --t-mid:300ms;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  font-family:'Montserrat',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}   /* no tap flashes, ever (digiUI 5) */
html,body{margin:0;height:100%;background:var(--night);color:var(--text);overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 50% 46%,color-mix(in srgb,var(--acc) 13%,#050102) 0%,color-mix(in srgb,var(--acc) 5%,#050102) 55%,#040203 100%) fixed}
/* her background, when she chose no world (Oct 5): a solid, a gradient or a texture,
   always in her color. The globe canvas steps aside. */
#bg{transition:opacity .7s ease}body.bg-flat #bg{opacity:0}   /* her solid, gradient or texture fades in as the film's globe steps aside (was display:none) */
body.bg-flat{background:var(--bgfill) fixed}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:10px}

/* ── the globe, behind everything ── */
#bg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;display:block}   /* the tallest the screen can be: no black strip when the browser's bar slides away */

/* ── the mark: digiAPP (Nov 9, 2026; digiAPP_Build 4: "I LOVE IT, C!"). digi 600 faded, APP 900 in white on dark
   (a soft white glow on night), in ink on light. Never her theme or her level: the level line under it carries the
   color. The fade's exact strength waits for A2. ── */
.mark{font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-transform:none;line-height:1;color:rgba(255,255,255,.5)}
.mark b{font-weight:900;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.35),0 0 26px rgba(255,255,255,.14)}
.light .mark,.staff .mark{color:rgba(33,33,33,.45)}
.light .mark b,.staff .mark b{color:#212121;text-shadow:none}
.mark sup{font-size:.36em;font-weight:600;vertical-align:1.15em;margin-left:.06em}

/* ── the film's words ── */
#film{position:fixed;inset:0;z-index:50;pointer-events:auto;cursor:default}
#film .fm-mark{position:absolute;margin:0;opacity:0;transform-origin:0 0;will-change:transform,opacity;pointer-events:none}
#film .fm-tag{position:absolute;left:0;right:0;text-align:center;font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:13px;color:rgba(255,255,255,.86);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#film .fm-halo{position:absolute;pointer-events:none;opacity:0;border-radius:50%;transition:opacity 1.2s ease;
  background:radial-gradient(closest-side,rgba(3,2,3,.82),rgba(3,2,3,.55) 45%,rgba(3,2,3,.18) 75%,rgba(3,2,3,0))}
#film.named .fm-halo{opacity:1}
#film.settling .fm-halo{opacity:0;transition:opacity .6s ease}
#film.named .fm-tag{opacity:1}
#film.settling .fm-tag{opacity:0;transition:opacity .5s ease}
/* the blade: a bright band swept once across APP, clipped to its letters */
#film .fm-mark b{position:relative}
#film .fm-mark b::after{content:attr(data-t);position:absolute;left:0;top:0;color:transparent;text-shadow:none;pointer-events:none;
  background:linear-gradient(105deg,transparent 0,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%,transparent 100%) no-repeat;
  background-size:300% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;opacity:0}
#film.blade .fm-mark b::after{opacity:1;animation:blade .75s cubic-bezier(.4,0,.2,1) forwards}
#film.blade-ff .fm-mark b::after{animation-duration:.45s}
@keyframes blade{from{background-position:120% 0}to{background-position:-20% 0}}
#film.out{opacity:0;transition:opacity .4s ease;pointer-events:none}

/* ── her home ── */
#home{position:relative;z-index:1;max-width:var(--col);margin:0 auto;padding:calc(var(--safe-t) + 8px) var(--pad) calc(var(--safe-b) + 28px);min-height:100%}
body.filming #home{visibility:hidden}
.tb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:52px}
.tb-l,.tb-r{display:flex;gap:10px;align-items:center}
.tb-r{justify-content:flex-end}


/* the bubbles: the same shape, the color says who is listening */
.bub{position:relative;width:40px;height:40px;border-radius:12px 12px 12px 4px;display:grid;place-items:center;flex:none;transition:transform var(--t-fast) var(--ease)}
.bub img{width:92%;height:92%;border-radius:50%}   /* the globe fills its bubble (dM's green rim used to vanish into the green) */
.bub.dm{background:var(--green)}
.bub.dc{background:var(--red)}
.bub .dot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:#ff3b30;border:2px solid var(--night);display:none}
.bub.has .dot{display:block}
.bub:active,.icon:active{transform:scale(.94)}
.icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--tile-edge);transition:transform var(--t-fast) var(--ease)}
.icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.me{font-weight:800;font-size:16px;background:var(--acc);color:#111}

.greet{margin:22px 2px 18px;font-size:clamp(25px,7.2vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.01em}
.greet .nm{color:var(--acc)}

/* ── tiles: solid tinted glass, never live blur (cheap phones, S68) ── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);list-style:none;margin:0;padding:0}
.tile{position:relative;background:var(--tile);border:1px solid var(--tile-edge);border-radius:var(--r-tile);padding:14px 14px 15px;min-height:104px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);text-align:left;width:100%;display:flex;flex-direction:column;gap:10px;transition:transform var(--t-fast) var(--ease)}
.tile.wide{grid-column:1 / -1}
button.tile:active{transform:scale(.985)}
.tl-hd{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tl-hd svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


.tl-cta{align-self:flex-start;font-size:14px;font-weight:700;padding:9px 14px;border-radius:999px;background:#fff;color:var(--ink);
.tl-cta small{margin-left:4px;padding:2px 7px;border-radius:999px;background:#16a34a;color:#fff;font-size:12px;font-weight:800}   /* Nov 11: Thank Jake? +2 */
  box-shadow:0 0 0 1px rgba(255,90,79,.18),0 4px 14px rgba(255,60,50,.28)}
.tile.anim{opacity:0;transform:translateY(10px)}
.tile.anim.in{opacity:1;transform:none;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease)}

/* a row of squircles: her merchants, explore */
.row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:2px 14px 2px;scroll-snap-type:x proximity}
.row::-webkit-scrollbar{display:none}
.mch{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;scroll-snap-align:start}
.sq{display:block;width:60px;height:60px;border-radius:var(--r-sq);overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.35)}
.sq img{width:100%;height:100%;object-fit:cover}
.mch span{font-size:11px;font-weight:600;color:var(--muted);text-align:center;line-height:1.2;max-width:68px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.list{display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.li{display:flex;align-items:center;gap:12px;padding:8px 4px;border-radius:14px;text-align:left;width:100%}
.li .sq{width:44px;height:44px;flex:none}
.li b{display:block;font-size:15px;font-weight:700}
.li small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.li .far{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--acc);white-space:nowrap}

.edit{display:block;margin:20px auto 0;font-size:13px;font-weight:700;color:var(--muted);padding:10px 14px}

/* ── the sheet: everything rises from her thumb ── */
:root{--sb:env(safe-area-inset-bottom,0px)}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,0);pointer-events:none;transition:background var(--t-mid) var(--ease)}
.scrim.in{pointer-events:auto}
.scrim.dim{background:rgba(0,0,0,.5)}
.sh{position:fixed;left:0;right:0;bottom:0;z-index:61;max-width:var(--col);margin:0 auto;height:calc(100% - var(--safe-t) - 10px);display:flex;flex-direction:column;
  background:#160809;border:1px solid var(--tile-edge);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.45);touch-action:none;will-change:transform}
.sh.auto{height:auto;max-height:calc(100% - var(--safe-t) - 10px)}
.sh-top{position:relative;flex:none;padding:10px 0 6px;cursor:grab}
.grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto}
.sh-x{position:absolute;right:12px;top:8px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.sh-x svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.sh-body{flex:1;overflow:hidden;padding:4px 20px calc(var(--sb) + 22px);overscroll-behavior:contain}
.sh.is-full .sh-body{overflow:auto;touch-action:pan-y}
.sh h2{margin:4px 0 6px;font-size:21px;font-weight:800}
.sh p{margin:0 0 14px;color:var(--muted);font-size:14.5px;line-height:1.5}
/* the card: a light sheet. The moment it rises is the moment it lights up */
.sh.light{background:var(--l-bg);color:var(--l-ink);border-color:rgba(0,0,0,.06)}
.sh.light .grab{background:rgba(0,0,0,.18)}
.sh.light .sh-x{background:var(--l-fill);color:var(--l-ink)}
.sh.light p{color:var(--l-sub)}






.sh.light .btn{background:var(--acc-l);color:#fff;box-shadow:none}
.sh.light .btn.ghost{background:var(--l-fill);color:var(--l-ink)}
.sh.light .note{font-size:13px;color:var(--l-sub2);background:var(--l-fill2);border-radius:14px;padding:12px;margin:12px 0 0;line-height:1.45}




/* menu rows, the promise, buttons */
.opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--tile-edge);margin-bottom:10px;text-align:left;font-weight:700;font-size:15px}
.opt small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:3px}
.opt .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--faint);flex:none;display:grid;place-items:center}
.opt.on .rad{border-color:var(--acc)}
.opt.on .rad::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--acc)}
.lock{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45;color:rgba(255,255,255,.8);background:rgba(255,255,255,.05);border-radius:14px;padding:11px 12px;margin:0 0 14px}
.lock svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:var(--acc);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn{display:block;width:100%;padding:15px 18px;border-radius:16px;font-size:16px;font-weight:800;text-align:center;background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,90,79,.20),0 6px 20px rgba(255,60,50,.30);transition:transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.985)}
a.btn{text-decoration:none;box-sizing:border-box}
.btn.quiet{background:none;color:var(--muted);box-shadow:none;font-weight:700;font-size:15px;padding:12px}
.btn.danger{background:none;color:#ff6b61;box-shadow:none}

/* ── his card: a light sheet with tabs ── */
.card-sh .sh-body{padding-top:0}
.card-sh .peek{position:sticky;top:-1px;z-index:2;background:var(--l-bg);margin:0 -20px;padding:0 20px}
.ch-top{display:flex;align-items:center;gap:10px;min-height:44px;padding-right:40px}
.ch-name{flex:1;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--t-fast) ease}
.card-sh.not-disc .ch-name{opacity:1}   /* on Discount the big name is right there; elsewhere the header carries it */
.ch-acts{display:flex;gap:8px;align-items:center}
.ch-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--l-fill);color:var(--l-ink)}
.ch-i svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ch-i.on{color:var(--l-her)}
.ch-i.on svg{fill:currentColor}
.ch-dc{width:38px;height:38px}
.ch-tabs{display:flex;gap:4px;padding:4px;margin:6px 0 10px;border-radius:14px;background:var(--l-fill)}
.ch-tabs button{flex:1;height:36px;border-radius:11px;font-weight:800;font-size:13.5px;color:var(--l-sub)}
.ch-tabs button.on{background:var(--l-on);color:var(--l-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ch-tabs b{color:#1893f8;font-weight:900}   /* digiPLUS Blue */
.hero{display:flex;align-items:center;gap:16px;padding:4px 0 14px}
.hero .sq{width:92px;height:92px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.16)}
.pct{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--l-ink)}
.pct small{font-size:.55em;font-weight:900}
.pct em{font-style:normal;font-size:.42em;font-weight:900;color:var(--l-her);letter-spacing:.04em;vertical-align:.5em}
.pct-team{font-size:24px;letter-spacing:0}
.pct-team .emo{font-size:30px;margin-right:8px;vertical-align:-3px}
.pct-sub{font-size:12.5px;font-weight:700;color:var(--l-sub2);margin-top:6px}
.c-name{font-size:24px;font-weight:800;line-height:1.15;margin:2px 0 4px}
.c-path{font-size:13px;color:var(--l-sub);margin:0 0 10px}
.c-path i{font-style:normal;color:#b0b0b8;margin:0 2px}
.c-tl{display:inline-block;font-size:13.5px;font-weight:700;color:var(--l-ink);background:var(--l-fill2);border-radius:10px;padding:8px 11px;margin:0 0 14px}
.card-sh h4{margin:18px 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--l-sub2)}
.how h4{margin-top:4px}
.how p{margin:0 0 12px;color:#3a3a40;font-size:15px}
.card-sh .btn{margin-bottom:10px}
.btn.ghost{background:var(--l-fill)!important;color:var(--l-ink)!important}
.btn.sm{padding:10px 14px;font-size:14px;width:auto;display:inline-block;margin:0 8px 0 0}
.code{display:flex;align-items:center;gap:10px;border:2px dashed color-mix(in srgb,var(--acc-l) 55%,#ddd);border-radius:16px;padding:12px 12px 12px 16px;margin:0 0 12px}
.code-v{flex:1;font-size:24px;font-weight:900;letter-spacing:.06em;font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
.code-c{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:12px;background:var(--acc-l);color:#fff;font-weight:800;font-size:14px}
.code-c svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.code-c.done{background:#05672a}
.zask{margin:14px 0 4px;padding:14px;border-radius:16px;background:var(--l-fill2)}
.zask p{margin:0 0 10px!important;font-weight:700;color:var(--l-ink)!important}
.terms{margin:0;padding:0 0 0 18px;color:#3a3a40;font-size:15px;line-height:1.6}
.visit-a{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}
.visit-a svg{width:22px;height:22px;flex:none;stroke:var(--l-her);fill:none;stroke-width:2;margin-top:2px}
.visit-a b{display:block;font-size:16px}
.visit-a small{display:block;color:var(--l-sub);font-size:14px;margin-top:2px}
.visit-d{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.visit-d .far{font-weight:800;color:var(--l-her);margin-right:6px}
.bio{font-size:15.5px;line-height:1.55;color:#2a2a30}
.bio.dim{color:var(--l-dim)}
.gal{display:flex;gap:10px;overflow-x:auto;margin:0 -20px 14px;padding:0 20px;scrollbar-width:none}
.gal img{height:150px;border-radius:16px;flex:none}
.lnks{display:flex;flex-direction:column;gap:8px}
.lnk{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--l-fill2);color:var(--l-ink);text-decoration:none;font-weight:700}
.lnk svg{width:16px;height:16px;stroke:var(--l-dim);fill:none;stroke-width:2.4}
.dp-h{font-size:22px!important;letter-spacing:0!important;text-transform:none!important;color:var(--l-ink)!important}
.dp-h b{color:#1893f8;font-weight:900}
.dp-h sup{font-size:.45em}
.dp-h span{display:block;font-size:13px;font-weight:700;color:var(--l-sub2);margin-top:4px}
.lv{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.lv-r{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:var(--l-fill2)}
.lv-n{font-weight:800}
.lv-n small{font-weight:600;color:var(--l-dim);margin-left:6px}
.lv-v{font-size:22px;font-weight:900}
.lv-r.free .lv-v{color:var(--red)}
.lv-r.silver{background:linear-gradient(90deg,#eef0f3,#f7f8fa)}
.lv-r.gold{background:linear-gradient(90deg,#fbf3dc,#fdf9ee)}
.lv-r.diamond{background:linear-gradient(90deg,#e6f3fe,#f3f9ff)}
.lv-r.silver .lv-v{color:#5f6873}.lv-r.gold .lv-v{color:#8a6100}.lv-r.diamond .lv-v{color:#0b65b8}
/* her row (Nov 9, 2026: her level, marked plainly) */
.lv-r.me{box-shadow:inset 0 0 0 2px currentColor}
.lv-r.free.me{color:#cf0202}.lv-r.silver.me{color:#5f6873}.lv-r.gold.me{color:#8a6100}.lv-r.diamond.me{color:#0b65b8}
.lv-r.me .lv-n small{color:inherit}
/* her level's word, in its color (core/config.js LEVELS) */
.lvw{font-weight:900;letter-spacing:.02em}
.code-wait{margin:6px 0 10px;font-weight:600}
.btn.dp{background:#1893f8!important;color:#fff!important}
.seg2{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--l-fill);margin:4px 0 12px}
.seg2 button{flex:1;height:38px;border-radius:11px;font-weight:800;color:var(--l-sub)}
.seg2 button.on{background:var(--l-on);color:var(--l-ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.field.lt{background:var(--l-fill2);color:var(--l-ink);border-color:var(--l-line2);font-size:26px;font-weight:900}
.lt-prev{min-height:22px;font-weight:800;color:var(--l-her);margin:0 0 12px}
/* the staff view: big, plain, with a live clock */
.staff{position:fixed;inset:0;z-index:95;background:#fff;color:var(--ink);display:grid;place-items:center;opacity:0;transition:opacity 220ms ease;padding:24px}
.staff.in{opacity:1}
.st-in{text-align:center;max-width:420px}
.st-in .sq{width:150px;height:150px;margin:0 auto 18px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 12px 30px rgba(0,0,0,.18)}
.st-in h2{font-size:30px;font-weight:900;margin:0 0 10px}
.st-pct{font-size:64px;font-weight:900;color:var(--red);line-height:1}
.st-code{font-size:40px;font-weight:900;letter-spacing:.08em;font-family:ui-monospace,Menlo,monospace}
.st-sub{font-size:16px;font-weight:800;margin:10px 0 6px}
.st-t{font-size:16px;color:#3a3a40;margin:0 0 16px}
.st-clock{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;color:#5a5a62}
.st-tap{font-size:13px;color:#8a8a92;margin-top:20px}

/* ── SAVINGS: full screen, dark, in her color ── */




.sv-places,.pick{display:flex;flex-direction:column;gap:8px}
.sv-pl{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.06);text-align:left;color:inherit}
.sh.light .sv-pl{background:#f5f5f8}
.sv-pl .sq{width:46px;height:46px;flex:none}
.sv-pl-t{flex:1;min-width:0}
.sv-pl-t b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-pl-t small{font-size:12.5px;opacity:.75}
.mine-here{margin:0 0 12px;padding:11px 13px;border-radius:12px;background:color-mix(in srgb,var(--acc-l) 10%,#fff);font-size:14px;color:var(--ink)}

/* ── the odometer ── */
.odo{display:inline-flex;align-items:baseline;font-variant-numeric:tabular-nums}
.od{display:inline-block;height:1.05em;overflow:hidden;vertical-align:bottom}
.od-r{display:flex;flex-direction:column;transform:translateY(0);transition:transform 900ms cubic-bezier(.2,.8,.2,1)}
.od-r.set{transform:translateY(calc(var(--d) * -1.05em))}
.od-r span{height:1.05em;line-height:1.05em}
/* ── her pfp: wilder at every level, all in her color ── */















@keyframes pfSpin{to{transform:rotate(360deg)}}
@keyframes pfGlow{50%{box-shadow:0 0 0 2px #fff,0 0 calc(var(--z) * .55) var(--acc)}}
/* ── the level-up moment ── */








@media (prefers-reduced-motion: reduce){.od-r{transition:none}}

/* ── the dock ── */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sb) + 12px);z-index:45;width:calc(100% - 24px);max-width:calc(var(--col) - 8px);
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:24px;background:rgba(24,9,11,.9);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:opacity var(--t-mid) var(--ease)}
body.filming .dock,body.touring .dock{opacity:0;pointer-events:none}
.dock .bub{width:46px;height:46px}

.dock-s{flex:1;height:46px;display:flex;align-items:center;gap:10px;padding:0 14px 0 8px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-weight:700;font-size:15px;color:rgba(255,255,255,.82)}
.dock-s img{width:30px;height:30px;border-radius:50%}
.dock-s .mark{font-size:15px}
.dock-s .mark b{color:#fff}
body.mark-wait #dsMark{visibility:hidden}
.dock-s img.spin1{animation:spin1 1s cubic-bezier(.2,.7,.2,1)}
@keyframes spin1{to{transform:rotate(360deg)}}
.dock-s:active{transform:scale(.985)}
#home{padding-bottom:calc(var(--sb) + 100px)}

/* ── search ── */
.srch-bar{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin:0 0 12px}
.srch-bar:focus-within{border-color:var(--acc)}
.srch-g{width:32px;height:32px;border-radius:50%;flex:none}
.srch-g.spin{animation:spin .7s cubic-bezier(.4,0,.2,1)}
@keyframes spin{to{transform:rotate(360deg)}}
.srch-bar input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font:inherit;font-size:17px;font-weight:600;padding:8px 0}
.srch-bar input::placeholder{color:var(--faint)}
.mic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.08)}
.mic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.mic.on{background:var(--acc)}
.mic.on svg{stroke:#111}
.mic.on{animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 25%,transparent)}}
.mic[hidden]{display:none}
/* her words, her color: FAVORITES and the FREE inside her home */
.tl-hd .fav{color:var(--acc);letter-spacing:.14em}
.tl-hd .mk{color:rgba(255,255,255,.5)}
.tl-hd .mk{text-transform:none;letter-spacing:0;font-size:13px}   /* the lockup never goes all caps (ESSENTIALS): digiFREE, not DIGIFREE */
.srch-hint{color:var(--muted);font-size:14px;line-height:1.5;padding:8px 2px}
/* her search, as tiles */
.sr-k{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 2px 8px}
.sr-clear{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--acc)}
.chips-r{display:flex;flex-wrap:wrap;gap:8px}
.rchip{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--tile-edge);font-size:14px;font-weight:600}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border-radius:18px;background:var(--tile);border:1px solid var(--tile-edge);text-align:left;min-height:132px}
.mt .sq{width:52px;height:52px}
.mt b{font-size:14.5px;font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mt small{font-size:12px;color:var(--muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mt .far{position:absolute;top:12px;right:12px;font-size:12px;font-weight:800;color:var(--acc)}
.mt:active,.pt:active,.allt:active{transform:scale(.985)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.pt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 12px 13px;border-radius:18px;background:color-mix(in srgb,var(--acc) 12%,rgba(255,255,255,.04));border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);text-align:left}
.pt svg,.allt svg,.drill svg,.sr-map svg{width:20px;height:20px;stroke:var(--acc);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pt b{font-size:15px;font-weight:800;line-height:1.2}
.pt small{font-size:12.5px;color:var(--muted)}
.pt.combo{width:100%;flex-direction:row;align-items:center;gap:10px;background:color-mix(in srgb,var(--acc) 22%,rgba(255,255,255,.04));margin:4px 0 2px}
.pt.combo b{flex:1}
.allt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--tile-edge);font-weight:800;font-size:15px;margin:4px 0 10px}
.drill{display:flex;align-items:center;gap:12px;margin:4px 0 6px}
.drill div{flex:1}
.drill b{display:block;font-size:18px;font-weight:800}
.drill small{font-size:12.5px;color:var(--muted)}
.sr-map{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--tile-edge);font-weight:800;font-size:14px}
.mapv-only{display:flex;align-items:center;gap:8px;height:40px;max-width:52vw;padding:0 10px 0 14px;border-radius:999px;background:var(--acc);color:#111;font-weight:800;font-size:13.5px;margin:0 8px 0 auto}
.mapv-only span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mapv-only svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round}
.mapv-only[hidden]{display:none}

.fly{position:fixed;z-index:71;border-radius:var(--r-sq);overflow:hidden;pointer-events:none;transition:all 380ms var(--ease)}
.fly img{width:100%;height:100%;object-fit:cover}

/* ── the tour ── */
.tour{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;padding:calc(var(--safe-t) + 18px) 22px calc(var(--safe-b) + 18px);
  background:linear-gradient(180deg,rgba(7,2,3,.62),rgba(7,2,3,.9) 60%);opacity:0;transition:opacity var(--t-mid) var(--ease)}
/* her home steps back while she makes it hers: only the globe stays behind the tour */
body.touring #home{opacity:0;transition:opacity var(--t-mid) var(--ease)}
.tour.in{opacity:1}
.tour .in-col{max-width:440px;width:100%;margin:auto;display:flex;flex-direction:column}
.dots{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.dots i.on{background:var(--acc);width:20px;border-radius:4px}
.tour h1{font-size:clamp(27px,8vw,34px);font-weight:800;line-height:1.12;margin:0 0 12px;letter-spacing:-.01em}
.tour h1 .mark{font-size:1em}
.tour p.lead{color:var(--muted);font-size:15.5px;line-height:1.5;margin:0 0 18px}
.field{width:100%;font:inherit;font-size:19px;font-weight:700;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 16px;margin:0 0 14px;outline:none}
.field:focus{border-color:var(--acc)}
select.field{appearance:none;-webkit-appearance:none;font-size:17px}
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 20px}
.sw button{aspect-ratio:1;border-radius:24%;border:3px solid transparent;display:grid;place-items:center;transition:transform var(--t-fast) var(--ease)}
.sw button.on{border-color:#fff;transform:scale(1.04)}
.sw button span{font-size:11px;font-weight:700;color:#111;opacity:0}
.chips{display:flex;flex-direction:column;gap:8px;max-height:38vh;overflow:auto;margin:0 0 14px;padding-right:2px}
.chip{text-align:left;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--tile-edge);font-weight:700;font-size:15px}
.chip.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.preview{font-size:22px;font-weight:800;margin:0 0 14px;min-height:28px}
.preview .nm{color:var(--acc)}
.tour-nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}

.toast{position:fixed;left:50%;bottom:calc(var(--sb) + 92px);pointer-events:none;transform:translate(-50%,20px);z-index:90;background:#fff;color:var(--ink);font-weight:700;font-size:14px;
  padding:12px 16px;border-radius:14px;opacity:0;transition:all var(--t-mid) var(--ease);max-width:90vw;text-align:center}
.toast.in{opacity:1;transform:translate(-50%,0)}

/* ── the ignition (Oct 5, Brian): her app stays dark until digiFREE lands home; then a
   soft wave of her color rises from the globe and lights everything it passes ── */
.rv{opacity:0;transform:translateY(10px);transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.rv.lit{opacity:1;transform:none}
.wave{position:fixed;left:0;right:0;height:46vh;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(to top,transparent,color-mix(in srgb,var(--acc) 30%,transparent) 45%,color-mix(in srgb,var(--acc) 14%,transparent) 70%,transparent)}
.wave.go{animation:wave 620ms cubic-bezier(.3,.6,.3,1) forwards}
@keyframes wave{0%{opacity:0;transform:translateY(0)}15%{opacity:1}100%{opacity:0;transform:translateY(var(--rise))}}

/* the very first open, with no signal at all */
.offline1{position:fixed;inset:0;z-index:100;display:grid;place-content:center;gap:16px;padding:32px;text-align:center;background:var(--night)}
.offline1 p{font-size:17px;font-weight:700;max-width:300px;line-height:1.45;margin:0 auto}

/* ── shooting stars: rare, quick, thin, in her color; behind her home, never over it ── */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;width:150px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 70%,transparent) 55%,#fff);transform-origin:100% 50%}
.star.go{animation:star .95s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes star{0%{opacity:0;transform:translate(0,0) rotate(var(--a))}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--a))}}

/* ── Your digiFREE: the house is hers, so FREE wears her color here ── */
/* (Nov 9, 2026) the mark no longer takes her color: .mark.her is the same white/ink mark */




.sh .field{margin-bottom:10px}

/* ── background picker ── */
.bgs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
.bgs button{aspect-ratio:1;border-radius:18px;border:2px solid transparent;background-size:cover}
.bgs button.on{border-color:#fff}
.bgk{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 0 8px}

/* ── her map ── */
.mapv{position:fixed;inset:0;z-index:40;opacity:0;transition:opacity 500ms ease;background:#0b0405;visibility:hidden;pointer-events:none}   /* built early, parked invisible */
.mapv.shown{visibility:visible;pointer-events:auto}
.mapv.in{opacity:1}
.mapv-map{position:absolute!important;inset:0;width:100%;height:100%}   /* the engine sets its own position: ours wins */
.mapv-bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-t) + 10px) 14px 0;pointer-events:none}
.mapv-bar > *{pointer-events:auto}
.mapv .icon{background:rgba(20,8,10,.82);color:#fff;border-color:rgba(255,255,255,.12)}
.mapv-me{position:absolute;right:14px;bottom:calc(var(--sb) + 92px)}   /* above the dock */
.mapv-sw{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:rgba(20,8,10,.82);border:1px solid rgba(255,255,255,.12);font-weight:700;font-size:14px;color:#fff}
.mapv-sw .k{width:34px;height:20px;border-radius:10px;background:rgba(255,255,255,.18);position:relative;transition:background var(--t-fast) ease}
.mapv-sw .k::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--t-fast) var(--ease)}
.mapv-sw.on .k{background:var(--red)}
.mapv-sw.on .k::after{transform:translateX(14px)}
.mapv.day .icon,.mapv.day .mapv-sw{background:rgba(255,255,255,.94);color:var(--ink);border-color:rgba(0,0,0,.08)}
.mapv.day .mapv-sw .k{background:rgba(0,0,0,.16)}
.mapv-seg{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(20,8,10,.82);border:1px solid rgba(255,255,255,.12)}
.mapv-seg button{height:32px;padding:0 13px;border-radius:999px;font-weight:800;font-size:13px;color:rgba(255,255,255,.75)}
.mapv-seg button.on{background:var(--acc);color:#111}
.mapv.day .mapv-seg{background:rgba(255,255,255,.94);border-color:rgba(0,0,0,.08)}
.mapv.day .mapv-seg button{color:#5a5a62}
.mapv.day .mapv-seg button.on{background:var(--acc-l);color:#fff}
.mapv-face{display:block;transition:transform var(--t-fast) var(--ease)}
.mapv-face .sq{width:44px;height:44px;box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.45),0 0 18px rgba(255,59,47,.55)}
.mapv-face.mine .sq{box-shadow:0 0 0 2.5px var(--acc),0 6px 16px rgba(0,0,0,.45),0 0 20px var(--acc)}
.mapv.day .mapv-face .sq{box-shadow:0 0 0 2px #fff,0 4px 12px rgba(0,0,0,.28)}
.mapv.day .mapv-face.mine .sq{box-shadow:0 0 0 2.5px var(--acc-l),0 4px 12px rgba(0,0,0,.28)}
.mapv-face:active{transform:scale(.94)}
.mapv-you{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 9px rgba(255,59,47,.18)}
.mapv-you img{width:100%;height:100%;border-radius:50%}
.maplibregl-ctrl-attrib{font-family:inherit;font-size:10px}
.mapv .maplibregl-ctrl-attrib{background:rgba(11,4,5,.6)!important;color:rgba(255,255,255,.6)}
.mapv .maplibregl-ctrl-attrib a{color:rgba(255,255,255,.75)}
.mapv.day .maplibregl-ctrl-attrib{background:rgba(255,255,255,.7)!important}
#bg{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}

/* ── HER LOCAL HEROES CARD (Oct 27, 2026; ui/herocard.js) ─────────────────────────── */
.hc-tile{display:block}

.hc-hint{margin:8px 0 0;text-align:center;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55)}
.hc{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom));overflow:auto;
  background:radial-gradient(90% 70% at 50% 40%,color-mix(in srgb,var(--acc) 26%,#08030a) 0%,#050205 70%);opacity:0;transition:opacity .3s ease}
.hc.on{opacity:1}
.hc-in{width:min(100%,380px);text-align:center;color:#fff}
.hc-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.hc-h{margin:6px 0 16px;font-size:26px;font-weight:900;letter-spacing:-.02em}
.hc-s{margin:16px 0 18px;font-size:15px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.75)}
.hc .btn{width:100%}
.hc .btn.quiet{margin-top:10px}
.hc-spin{width:44px;height:44px;margin:18px auto;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:hcSpin .9s linear infinite}
@keyframes hcSpin{to{transform:rotate(360deg)}}
/* her card drops in; then the stub tears off along the perforation, like a ticket at the door */
.hc-card{position:relative;width:min(84%,320px);margin:0 auto;animation:hcDrop .7s cubic-bezier(.2,1.25,.4,1) both}

.hc-card .hc-top,.hc-card .hc-stub{position:absolute;inset:0;opacity:0;pointer-events:none}
.hc-card .hc-top{clip-path:inset(0 0 21% 0)}
.hc-card .hc-stub{clip-path:inset(79% 0 0 0)}
.hc-card.torn .hc-whole{opacity:0}
.hc-card.torn .hc-top{opacity:1}
.hc-card.torn .hc-stub{opacity:1;animation:hcTear 1.1s cubic-bezier(.5,0,.75,.4) .05s forwards}
.hc-card.still{animation:none}
@keyframes hcDrop{from{opacity:0;transform:translateY(-60px) scale(.88) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes hcTear{0%{transform:none}18%{transform:translate(3px,6px) rotate(2deg)}100%{transform:translate(26px,170px) rotate(16deg);opacity:0}}
.hc-code{text-align:center;font:800 22px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.hc-err{min-height:1.2em;color:#ff8a80;font-size:13px;font-weight:700}
@media (prefers-reduced-motion:reduce){.hc,.hc-card{transition:none;animation:none}.hc-spin{animation-duration:2.4s}}

/* ── THANK THE TEAM (Oct 29, 2026, piece 3; ui/thanks.js): a star for whoever helped her. Gold is the star's,
   her color is her choice (selected tiles), his logo tops the sheet. Grown-up words, fun on her tap. ── */
.btn.thx{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;background:#fff8e1!important;color:#7a5200!important;box-shadow:inset 0 0 0 1.5px #f5c542!important}
.btn.thx svg,.tx-go svg{width:20px;height:20px;fill:#f5b301}
.thx-line{margin:6px 2px 0;font-size:13px;color:var(--l-sub2);text-align:center}
.tx{padding:4px 2px 18px}
.tx-top{display:flex;align-items:center;gap:14px;margin:2px 0 6px}
.tx-top .sq{width:52px;height:52px;flex:none;border-radius:var(--r-sq);overflow:hidden}
.tx-top .sq img{width:100%;height:100%;object-fit:cover}
.tx-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--l-sub2)!important}
.tx h2{margin:2px 0 0;font-size:24px;font-weight:900;letter-spacing:-.01em;line-height:1.15}
.tx-sub{margin:8px 0 16px;font-size:14.5px;color:var(--l-sub)!important}
.tx-ppl{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.tx-p{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 14px;border-radius:20px;background:var(--l-fill2);text-align:center;transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
.tx-p:active{transform:scale(.97)}
.tx-p b{font-size:16px;font-weight:800}
.tx-p small{font-size:12.5px;color:var(--l-sub2);min-height:1.2em}
.tx-p.had{opacity:.62}
.tx-p.had small{color:#9a7400;font-weight:700}
/* Nov 11 (One Scan step 2): who scanned her pass, first, gold-edged; her +2 on the Sent screen */
.tx-p.by{box-shadow:inset 0 0 0 2px #e0a800}
.tx-p.by small{color:#9a7400;font-weight:800}
.tx-pts{margin:2px 0 6px;padding:6px 14px;border-radius:999px;background:#16a34a;color:#fff;font-size:15px;font-weight:900}
.tx-av{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(150deg,#ffd35c,#f5a300);color:#5a3a00;font-size:24px;font-weight:900;box-shadow:0 6px 16px -8px rgba(245,163,0,.8)}
.tx-av.big{width:72px;height:72px;font-size:30px}
.tx-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.tx-chip{padding:10px 16px;border-radius:999px;background:var(--l-fill);color:var(--l-ink);font-size:14px;font-weight:700}
.tx-chip.quiet{background:none;color:var(--l-sub2)}
.tx-chip.dark{background:rgba(255,255,255,.1);color:#fff;font-size:13.5px;padding:9px 14px}
.tx-chip.dark.quiet{background:none;color:var(--muted)}
.tx-back{font-size:15px;font-weight:700;color:var(--l-sub);padding:6px 2px;margin-bottom:6px}
.tx-me{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.tx-q{margin:0 0 10px;font-size:15px;font-weight:800;color:var(--l-ink)!important}
.tx-q.sm{margin-top:18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--l-sub2)!important}
.tx-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tx-l{padding:16px 12px;border-radius:18px;background:var(--l-fill2);font-size:15px;font-weight:800;line-height:1.25;text-align:center;transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast)}
.tx-l:active{transform:scale(.97)}
.tx-l.on{background:var(--acc-l);color:#fff}
.tx-lines .tx-l:last-child:nth-child(odd){grid-column:1/-1}
.tx-sign{display:flex;gap:8px}
.tx-sign button{flex:1;padding:12px 10px;border-radius:14px;background:var(--l-fill2);font-size:14px;font-weight:700}
.tx-sign button.on{background:var(--l-ink);color:var(--l-bg)}
.tx-go{display:flex!important;align-items:center;justify-content:center;gap:10px;margin-top:20px}
.tx-go[disabled]{opacity:.45}
.tx-go.busy{opacity:.7}
.tx-go svg{fill:#ffd35c}
.tx-sent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:26px}
.tx-sent .btn{margin-top:10px}
.tx-big svg{width:84px;height:84px;fill:#f5b301;filter:drop-shadow(0 8px 18px rgba(245,163,0,.45))}
@media (prefers-reduced-motion:no-preference){.tx-big{animation:txPop .6s cubic-bezier(.2,.9,.3,1.3) both}}
@keyframes txPop{from{transform:scale(.3) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.tx-burst{position:fixed;z-index:200;width:0;height:0;pointer-events:none}
.tx-burst i{position:absolute;left:-11px;top:-11px;width:22px;height:22px;animation:txStar 1.15s cubic-bezier(.15,.7,.3,1) forwards}
.tx-burst i svg{width:100%;height:100%;fill:#f5b301;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.tx-burst i:nth-child(3n) svg{fill:#ffd35c}
.tx-burst i:nth-child(3n+1) svg{fill:var(--acc)}
@keyframes txStar{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(var(--s)) rotate(var(--r));opacity:0}}
/* her Home: Who helped you? */
.tl-hd .tx-star{color:#f5c542;font-size:14px;margin-right:2px}
.tx-due{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.tx-due + .tx-due{padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.tx-dh{display:flex;align-items:center;gap:12px}
.tx-dh .sq{width:42px;height:42px;flex:none;border-radius:var(--r-sq);overflow:hidden}
.tx-dh .sq img{width:100%;height:100%;object-fit:cover}
.tx-dh b{display:block;font-size:15px}
.tx-dh small{font-size:12.5px;color:var(--muted)}
.tx-db{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ── digiCONNECT, her side (Oct 30, 2026; ui/connect.js). Light sheets like his card. The red bubble is ours (digiFREE Red);
   inside, her words wear HER colour (--acc-l: the house is hers), his are grey, his NEWS a card. ── */
.cxh-t{margin:2px 0 4px!important;font-size:24px!important;font-weight:600!important}
.cxh-t b{font-weight:900;color:var(--red)}
.cxh-sub{font-size:14px!important;margin:0 0 12px!important}
.cxh-s{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:14px;background:var(--l-fill);margin:0 0 12px}
.cxh-s svg{width:18px;height:18px;flex:none;stroke:var(--l-sub2);fill:none;stroke-width:2.2;stroke-linecap:round}
.cxh-s input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:16px;color:var(--l-ink);outline:none}
.cxh-r{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 4px;border-top:1px solid var(--l-line2);text-align:left}
.cxh-r:first-child{border-top:0}
.cxh-r .sq{width:48px;height:48px;flex:none;border-radius:var(--r-sq);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.cxh-r .sq img{width:100%;height:100%;object-fit:cover}
.cxh-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cxh-rt b{font-size:15.5px;font-weight:800;color:var(--l-ink)}
.cxh-rt small{font-size:13.5px;color:var(--l-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxh-r.new .cxh-rt small{color:var(--l-ink);font-weight:700}
.cxh-w{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;font-weight:700;color:var(--l-dim);align-self:flex-start;margin-top:4px}
.cxh-n{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-style:normal;font-size:11.5px;font-weight:800}
.cxh-e{text-align:center;padding:26px 10px}
.cxh-e b{display:block;font-size:18px;font-weight:900;margin:12px 0 6px;color:var(--l-ink)}
.cxh-e p{max-width:32ch;margin:0 auto!important}
.cxh-bb i{display:inline-grid;place-items:center;height:38px;padding:0 15px;border-radius:19px 19px 19px 6px;background:var(--red);color:#fff;font-style:normal;font-weight:800}
.cxh-none{text-align:center;padding:18px 0}

.cxt-sh .sh-body{display:flex;flex-direction:column;padding-bottom:0}
.cxt{display:flex;flex-direction:column;min-height:100%}
.cxt-top{display:flex;align-items:center;gap:12px;padding:0 40px 10px 0;position:sticky;top:-4px;background:var(--l-bg);z-index:2}
.cxt-top .sq{width:46px;height:46px;flex:none;border-radius:var(--r-sq);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.cxt-top .sq img{width:100%;height:100%;object-fit:cover}
.cxt-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cxt-who b{font-size:17px;font-weight:900;color:var(--l-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxt-st{font-size:12.5px;font-weight:700;color:var(--l-sub)}
.cxt-more{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--l-fill);color:var(--l-ink);flex:none}
.cxt-more svg{width:20px;height:20px;fill:currentColor}
.cxt-card{margin:4px 0 12px;padding:14px;border-radius:18px;background:var(--l-fill2)}
.cxt-card h3{margin:0 0 6px;font-size:16px;font-weight:900;color:var(--l-ink)}
.cxt-card p{font-size:13.5px!important;margin:0 0 10px!important}
.cxt-lock{display:flex;gap:9px;align-items:flex-start;font-weight:600}
.cxt-lock svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:var(--red);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.cxt-f{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px;font-size:13px;font-weight:800;color:var(--l-ink)}
.cxt-f i{font-style:normal;font-weight:600;color:var(--l-dim)}
.cxt-f input{height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--l-line2);background:var(--l-bg);font:inherit;font-size:16px;font-weight:600;color:var(--l-ink)}
.cxt-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:6px 0;border-top:1px solid var(--l-line2)}
.cxt-sw span{display:flex;flex-direction:column;gap:2px}
.cxt-sw b{font-size:14.5px;font-weight:800;color:var(--l-ink)}
.cxt-sw small{font-size:12.5px;color:var(--l-sub)}
.cxt-sw input{appearance:none;-webkit-appearance:none;flex:none;width:50px;height:30px;border-radius:15px;background:var(--l-off);position:relative;transition:background .15s}
.cxt-sw input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.cxt-sw input:checked{background:var(--acc-l)}
.cxt-sw input:checked::after{transform:translateX(20px)}
.cxt-sw input:focus-visible{outline:2px solid var(--acc-l);outline-offset:2px}
.cxt-ck{display:flex;align-items:center;gap:10px;min-height:48px;border-top:1px solid var(--l-line2);font-size:14.5px;font-weight:800;color:var(--l-ink)}
.cxt-ck input{width:22px;height:22px;accent-color:var(--acc-l)}
.cxt-fine{font-size:12.5px!important;color:var(--l-sub2)!important;margin:8px 0 0!important}
.cxt-menu button{display:block;width:100%;min-height:48px;text-align:left;border-top:1px solid var(--l-line2);font-size:15px;font-weight:800;color:var(--l-ink)}
.cxt-menu button.red{color:#c40000}
.cxt-why{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.cxt-why button{min-height:44px;padding:0 14px;border-radius:999px;background:var(--l-bg);border:1px solid var(--l-line2);font-size:14px;font-weight:700;color:var(--l-ink)}
.cxt-q{min-height:44px;font-weight:700;color:var(--l-sub)}
.cxt-ms{flex:1;padding:4px 0 10px}
.cxt-m{display:flex;flex-direction:column;align-items:flex-start;margin:6px 0}
.cxt-m.mine{align-items:flex-end}
.cxt-b{max-width:80%;padding:10px 13px;border-radius:18px 18px 18px 6px;background:var(--l-fill);color:var(--l-ink);font-size:15px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.cxt-m.mine .cxt-b{border-radius:18px 18px 6px 18px;background:var(--acc-l);color:#fff}
.cxt-m.wait .cxt-b{opacity:.6}
.cxt-m small{margin-top:4px;padding:0 4px;font-size:11.5px;font-weight:600;color:var(--l-dim)}
.cxt-news{margin:10px 0;padding:11px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--red) 28%,#eee);background:color-mix(in srgb,var(--red) 5%,#fff)}
.cxt-news b{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#a80000}
.cxt-news b svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cxt-news p{margin:4px 0 2px!important;font-size:15px!important;color:var(--l-ink)!important;white-space:pre-line}
.cxt-news small{font-size:11.5px;color:var(--l-dim)}
.cxt-in{position:sticky;bottom:0;background:var(--l-bg);margin:0 -20px;padding:10px 16px calc(var(--sb) + 12px);border-top:1px solid var(--l-line2)}
.cxt-box{display:flex;align-items:flex-end;gap:8px}
.cxt-box textarea{flex:1;min-width:0;resize:none;max-height:120px;padding:11px 15px;border-radius:22px;border:1px solid var(--l-line2);background:var(--l-fill2);font:inherit;font-size:16px;line-height:1.4;color:var(--l-ink)}
.cxt-box textarea:focus{outline:2px solid color-mix(in srgb,var(--acc-l) 50%,transparent);border-color:transparent}
.cxt-go{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--red);color:#fff}
.cxt-go svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cxt-go:disabled{opacity:.5}
.cxt-off{margin:0!important;text-align:center;font-weight:700;color:var(--l-sub)!important}
.cxt-blk{text-align:center;padding:6px 0 4px}
.cxt-blk .sq{width:64px;height:64px;display:inline-block;border-radius:var(--r-sq);overflow:hidden}
.cxt-blk .sq img{width:100%;height:100%;object-fit:cover}

/* ── LOCAL HEROES, THE GAME (Nov 2, 2026, Brian; was Zone It): PLAY and NEAR ME (ui/heroes.js) ── */
.tl-cta.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}

.zi-h{margin:4px 0 12px}
.zi-sub{margin:0 0 12px;color:var(--muted);font-size:14px}
.zi-pick{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:16px 14px;margin-bottom:10px;border-radius:18px;
  background:rgba(255,255,255,.05);border:1px solid var(--tile-edge)}
.zi-pick:active{transform:scale(.985)}
.zi-pick b{display:block;font-size:17px;font-weight:800}
.zi-pick small{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.zi-pick em{display:block;margin-top:6px;font-style:normal;font-size:12.5px;font-weight:700;color:var(--acc)}
.zi-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc)}
.zi-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zi-list{margin-top:14px}
.zi-got{font-style:normal;font-weight:800;color:var(--acc)}

/* the walk: near black (her battery), one slow sweep, big type for a glance */
.zi-walk{position:fixed;inset:0;z-index:80;background:#030102;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--safe-t) + 12px) 22px calc(var(--safe-b) + 24px);opacity:0;transition:opacity var(--t-mid) var(--ease)}
.zi-walk.in{opacity:1}
.zi-top{width:100%;max-width:var(--col);display:flex;align-items:center;justify-content:space-between}

.zi-end{font-size:14px;font-weight:700;padding:9px 14px;border-radius:999px;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}
.zi-radar{position:relative;width:min(70vw,300px);aspect-ratio:1;margin:auto 0 26px}
.zi-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.zi-ring:nth-child(2){inset:18%}.zi-ring:nth-child(3){inset:36%}
.zi-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--acc) 0%,transparent),color-mix(in srgb,var(--acc) 34%,transparent) 22%,transparent 23%);
  animation:ziSweep 4.5s linear infinite}
.zi-me{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent),0 0 24px var(--acc)}
.zi-walk.warm .zi-ring{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.zi-walk.warm .zi-sweep{animation-duration:2.6s}
.zi-walk.paused .zi-sweep,.zi-walk.still .zi-sweep{animation:none;opacity:.35}
@keyframes ziSweep{to{transform:rotate(1turn)}}
.zi-near{margin:0;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.zi-tally{margin:10px 0 0;font-size:15px;color:var(--muted);min-height:1.4em}
.zi-eyes{margin:auto 0 0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.zi-note{margin-top:16px;max-width:360px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:10px;align-items:center}
.zi-note[hidden]{display:none}

/* her moment: rises from her thumb */
.zi-found{position:fixed;left:0;right:0;bottom:0;z-index:81;padding:0 14px calc(var(--safe-b) + 14px);transform:translateY(110%);transition:transform 320ms cubic-bezier(.2,.8,.2,1)}
.zi-found.in{transform:none}
.zi-found[hidden]{display:none}
.zi-card{max-width:var(--col);margin:0 auto;padding:18px 16px 16px;border-radius:24px;background:color-mix(in srgb,var(--acc) 14%,#120708);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  box-shadow:0 -10px 40px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--acc) 26%,transparent)}
.zi-k{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.zi-card.big .zi-k{font-size:15px}
.zi-m{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:6px 0}
.zi-m .sq{width:64px;height:64px;flex:none}
.zi-card.big .zi-m .sq{animation:ziPop .55s cubic-bezier(.2,1.4,.4,1) both}
.zi-m b{display:block;font-size:22px;font-weight:800;line-height:1.15}
.zi-m small{display:block;margin-top:3px;font-size:14px;font-weight:700;color:var(--acc)}
.zi-cbtns{display:flex;gap:8px;margin-top:14px}
@keyframes ziPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.zi-sweep{animation:none}.zi-card.big .zi-m .sq{animation:none}.zi-found,.zi-walk{transition:none}}

/* ── HER SCENES (Nov 2, 2026, Brian; ui/scene.js): digiWORLD, My City, My photo. The skies and the street are the
   website's own (world-page.css), the engines its byte-for-byte copies (ui/vendor). Behind her home, never over it;
   only transforms and opacity move, and only with her Motion switch on. ── */
#scene{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity 700ms ease}
#scene.on{opacity:1}
#scene>div{position:absolute;inset:0}
body.bg-scene #bg{visibility:hidden;transition:visibility 0s 700ms}   /* the globe steps aside once the scene has faded in over it */
/* digiWORLD: the cartoon planet on the blue sky (digi-world.html's sky by night, the street's day sky by day) */
.sc-dw.night{background:
  radial-gradient(1.6px 1.6px at 9% 12%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 23% 5%,rgba(255,255,255,.8) 98%,transparent),
  radial-gradient(1.4px 1.4px at 41% 17%,rgba(255,255,255,.7) 98%,transparent),radial-gradient(1.8px 1.8px at 67% 8%,#fff 98%,transparent),
  radial-gradient(1.2px 1.2px at 82% 20%,rgba(255,255,255,.7) 98%,transparent),radial-gradient(1.4px 1.4px at 94% 6%,rgba(255,255,255,.85) 98%,transparent),
  radial-gradient(1.2px 1.2px at 13% 29%,rgba(255,255,255,.6) 98%,transparent),radial-gradient(1.5px 1.5px at 88% 31%,rgba(255,255,255,.65) 98%,transparent),
  radial-gradient(120% 90% at 50% 40%,#2a1f74 0%,#120d3d 70%)}
.sc-dw.day{background:radial-gradient(70% 40% at 50% 100%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(180deg,#3f8fe8 0%,#62adff 40%,#9fd2ff 78%,#d8eeff 100%)}
.sc-dw canvas{position:absolute;left:0;top:0}
/* the clouds: the street's own two */
#scene .hz-cl{position:absolute;width:clamp(96px,28vw,170px);height:auto;opacity:.95;will-change:transform}
#scene .hz-cl.c1{bottom:calc(30vh + 96px);left:-8%}   /* low in the sky, where her tiles end, never behind her greeting */
#scene .hz-cl.c2{bottom:calc(30vh + 150px);right:-6%;width:clamp(74px,20vw,120px)}
#scene.mo .hz-cl.c1{animation:scDrift 70s linear infinite alternate}
#scene.mo .hz-cl.c2{animation:scDrift 90s linear infinite alternate-reverse}
@keyframes scDrift{from{transform:translateX(0)}to{transform:translateX(14vw)}}
.sc-dw.day .hz-cl path:first-child,#scene .tm-day .hz-cl path:first-child,#scene .tm-morning .hz-cl path:first-child{fill:#fff}
/* My City: the Local Heroes street in her four skies (dusk is the base) */
.sc-city .hz-sky{position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(1.6px 1.6px at 9% 14%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 23% 6%,rgba(255,255,255,.8) 98%,transparent),
    radial-gradient(1.4px 1.4px at 41% 19%,rgba(255,255,255,.7) 98%,transparent),radial-gradient(1.8px 1.8px at 67% 9%,#fff 98%,transparent),
    radial-gradient(1.2px 1.2px at 82% 22%,rgba(255,255,255,.7) 98%,transparent),radial-gradient(1.4px 1.4px at 94% 7%,rgba(255,255,255,.85) 98%,transparent),
    radial-gradient(70% 40% at 50% 100%,rgba(255,170,90,.55),rgba(255,170,90,0) 70%),
    linear-gradient(180deg,#241a6b 0%,#3b2585 34%,#7a3a8e 62%,#d4566f 84%,#ff8a5c 100%)}
.sc-city .hz-sky.tm-night{background:
    radial-gradient(1.6px 1.6px at 9% 14%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 23% 6%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 41% 19%,#fff 98%,transparent),
    radial-gradient(1.8px 1.8px at 67% 9%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 82% 22%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 94% 7%,#fff 98%,transparent),
    radial-gradient(1.2px 1.2px at 15% 32%,rgba(255,255,255,.8) 98%,transparent),radial-gradient(1.5px 1.5px at 33% 38%,rgba(255,255,255,.7) 98%,transparent),
    radial-gradient(1.2px 1.2px at 56% 30%,rgba(255,255,255,.8) 98%,transparent),radial-gradient(1.6px 1.6px at 76% 36%,rgba(255,255,255,.75) 98%,transparent),
    radial-gradient(60% 30% at 50% 100%,rgba(120,110,255,.25),rgba(120,110,255,0) 70%),
    linear-gradient(180deg,#0b0a2b 0%,#15114a 45%,#241a6b 80%,#2f2384 100%)}
.sc-city .hz-sky.tm-day{background:radial-gradient(70% 40% at 50% 100%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),linear-gradient(180deg,#3f8fe8 0%,#62adff 40%,#9fd2ff 78%,#d8eeff 100%)}
.sc-city .hz-sky.tm-morning{background:radial-gradient(60% 45% at 50% 100%,rgba(255,226,150,.85),rgba(255,226,150,0) 70%),linear-gradient(180deg,#5f7fe0 0%,#b9a4e8 38%,#ffb3b8 72%,#ffd6a0 100%)}
.sc-city .hz-st{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 66px);width:100%;height:clamp(190px,30vh,300px);display:block}
/* the road in front of Main Street, under her search: the street stands above it, never behind the dock */
.sc-city .sc-road{position:absolute;left:0;right:0;bottom:0;height:calc(var(--safe-b) + 67px);background:
  repeating-linear-gradient(90deg,#ffd98a 0 26px,transparent 26px 52px) 0 50%/100% 4px no-repeat,#3b3756;border-top:3px solid #14123d}
.sc-city .hz-lit{transition:opacity 1.4s ease}
.sc-city .hz-lit.off{opacity:0}
#scene .hz-fx{position:absolute;pointer-events:none}
/* My photo: her picture, as she framed it; the dim keeps her words readable, the tint is her color, softly */
.sc-ph{background:#000;overflow:hidden}
.sc-ph .ph-k{position:absolute;inset:0;transform-origin:50% 50%}
.sc-ph img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
#scene.mo .sc-ph .ph-k{animation:phDrift 48s ease-in-out infinite alternate}
@keyframes phDrift{from{transform:scale(1)}to{transform:scale(1.07) translate(-1.6%,-1.2%)}}
.sc-ph .ph-tint{position:absolute;inset:0;background:var(--acc);mix-blend-mode:soft-light;opacity:0;transition:opacity 300ms ease}
.sc-ph.tint .ph-tint{opacity:.8}
.sc-ph .ph-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 22%),rgba(0,0,0,var(--dim,.35))}
/* a light sky: her words wear the cartoon's ink edge, like the website's */
body.bg-light .greet{text-shadow:0 2px 0 #14123d,1.5px 0 0 #14123d,-1.5px 0 0 #14123d,0 -1.5px 0 #14123d,1.1px 1.1px 0 #14123d,-1.1px 1.1px 0 #14123d,1.1px -1.1px 0 #14123d,-1.1px -1.1px 0 #14123d}
body.bg-light .edit{text-shadow:0 1px 0 #14123d,1px 0 0 #14123d,-1px 0 0 #14123d,0 -1px 0 #14123d}
body.bg-light .tb .icon{background:rgba(20,18,61,.55);border-color:rgba(255,255,255,.22)}

/* Your digiFREE: the new background rows */





.yd-tg{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--tile-edge);text-align:left;font-weight:700;font-size:15px;margin-bottom:10px}
.yd-tg small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:3px}
.yd-tg .k{width:46px;height:28px;border-radius:14px;background:rgba(255,255,255,.18);position:relative;flex:none;transition:background var(--t-fast) ease}
.yd-tg .k::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform var(--t-fast) var(--ease)}
.yd-tg.on .k{background:var(--acc)}
.yd-tg.on .k::after{transform:translateX(18px)}
.yd-tg[disabled]{opacity:.62;cursor:default}




/* MY PHOTO's frame screen: exactly what her home will show; drag, pinch, dim, tint */
.mp{position:fixed;inset:0;z-index:70;background:#000;opacity:0;transition:opacity 240ms ease;touch-action:none}
.mp.in{opacity:1}
.mp-view{position:absolute;inset:0;touch-action:none;cursor:grab}
.mp-view:active{cursor:grabbing}
.mp-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(var(--safe-t) + 10px) 14px 0;pointer-events:none}
.mp-top>*{pointer-events:auto}
.mp .icon{background:rgba(0,0,0,.55);color:#fff;border-color:rgba(255,255,255,.18)}
.mp-hint{padding:9px 14px;border-radius:999px;background:rgba(0,0,0,.55);font-weight:700;font-size:13px;color:#fff}
.mp-pan{position:absolute;left:0;right:0;bottom:0;max-width:var(--col);margin:0 auto;padding:16px 16px calc(var(--safe-b) + 16px);border-radius:24px 24px 0 0;
  background:rgba(12,7,8,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08)}
.mp-row{display:flex;align-items:center;gap:14px;font-weight:700;font-size:15px;margin:2px 2px 14px}
.mp-row input{flex:1;accent-color:var(--acc);height:28px}
.mp .lock{margin-bottom:12px}

/* ── LOCAL HEROES, THE GAME (Nov 2, 2026, Brian; ui/heroes.js): one tile with her Ticket, PLAY and NEAR ME ── */




/* THE BANNER: the Heroes page's ribbon (world-page.css .hz-hd h1.head), ink edge and folded tails, in her color.
   It drops in once when her home lights up; with Motion on, a shine crosses it now and then. */
.lh-ban{position:relative;align-self:center;margin:4px 30px 12px}
.lh-rb{position:relative;display:block;padding:7px 18px 9px;border-radius:7px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 72%,#fff) 0%,var(--acc) 55%,color-mix(in srgb,var(--acc) 82%,#000) 100%);
  box-shadow:0 0 0 2.5px #14123d,0 5px 0 2.5px #14123d,inset 0 3px 0 rgba(255,255,255,.35)}
.lh-tl,.lh-tr{position:absolute;top:10px;bottom:-10px;width:34px;background:color-mix(in srgb,var(--acc) 62%,#000);box-shadow:0 0 0 2.5px #14123d}
.lh-tl{left:-24px;clip-path:polygon(-10% -10%,110% -10%,110% 110%,-10% 110%,30% 50%)}
.lh-tr{right:-24px;clip-path:polygon(-10% -10%,110% -10%,70% 50%,110% 110%,-10% 110%)}
.lh-ban b{position:relative;display:block;font-size:19px;font-weight:900;letter-spacing:.06em;line-height:1.1;color:#fff;white-space:nowrap;
  text-shadow:0 2.5px 0 #14123d,1.8px 0 0 #14123d,-1.8px 0 0 #14123d,0 -1.8px 0 #14123d,1.2px 1.2px 0 #14123d,-1.2px 1.2px 0 #14123d,1.2px -1.2px 0 #14123d,-1.2px -1.2px 0 #14123d}
.lh-ban b::after{content:attr(data-t);position:absolute;inset:0;color:transparent;text-shadow:none;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text}
body.motion .lh-ban b::after{opacity:1;animation:lhShine 7s ease-in-out 1.6s infinite}
@keyframes lhShine{0%,78%{background-position:120% 0}100%{background-position:-20% 0}}
.tile.anim .lh-ban{animation:lhDrop .9s cubic-bezier(.3,1.5,.5,1) .25s both}
@keyframes lhDrop{0%{opacity:0;transform:translateY(-34px) rotate(-5deg)}60%{opacity:1;transform:translateY(5px) rotate(1.5deg)}100%{opacity:1;transform:none}}
.lh-ban.sh{margin:6px auto 18px;width:fit-content;height:auto}
.lh-ban.sm{margin:0 0 0 24px}
.lh-ban.sm .lh-rb{padding:5px 12px 6px}
.lh-ban.sm b{font-size:13px}
.lh-ban.sm .lh-tl,.lh-ban.sm .lh-tr{width:24px;top:7px;bottom:-7px}
.lh-ban.sm .lh-tl{left:-17px}.lh-ban.sm .lh-tr{right:-17px}
/* the moment she finds one: the words wear the ink edge too */
.zi-card.big .zi-k{color:#fff;font-size:17px;text-shadow:0 2px 0 #14123d,1.4px 0 0 #14123d,-1.4px 0 0 #14123d,0 -1.4px 0 #14123d}
.zi-cbtns{flex-wrap:wrap}
/* Share it: her postcard, her caption */
.lh-pc{display:grid;place-items:center;min-height:200px;margin:0 0 14px;border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden}
.lh-pc img{width:100%;height:auto;display:block}
.lh-wait{font-size:13px;color:var(--muted)}
.lh-cap{white-space:pre-wrap;font:600 13.5px/1.5 'Montserrat',system-ui,sans-serif;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.88)}
.lh-fine{margin:10px 0 0!important;font-size:12.5px!important;color:var(--faint)!important;text-align:center}
@media (prefers-reduced-motion:reduce){.lh-ban b::after{display:none}.tile.anim .lh-ban{animation:none}}
/* while she walks, a sheet opened from her moment (his card, Share it) rises over the walk (Nov 2, 2026: the fix) */
body.walking .scrim{z-index:90}
body.walking .sh{z-index:91}






/* ── MY FINDS (Nov 2, 2026, step 4; ui/heroes.js openBook): her book, city by city ── */



.lh-bh{text-align:center;margin-top:-4px!important}
.lh-bs{text-align:center}
.lh-city{margin:18px 0 6px;padding:14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--tile-edge)}
.lh-ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lh-ch b{font-size:17px;font-weight:800}
.lh-ch span{font-size:13px;font-weight:800;color:var(--acc)}
.lh-meter{height:8px;border-radius:4px;background:rgba(255,255,255,.08);margin:10px 0 12px;overflow:hidden}
.lh-meter i{display:block;height:100%;border-radius:4px;background:var(--acc);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 60%,transparent)}
.lh-done{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;font-size:13.5px;font-weight:800;color:#fff}
.lh-done svg{width:22px;height:22px;flex:none;stroke:var(--acc);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lh-pcd{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:16px;background:#fbf5e6;color:#14123d;box-shadow:0 0 0 2px #14123d,0 4px 0 2px #14123d;text-align:center;min-width:0}
.lh-pcd .lh-f{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0}
.lh-pcd .sq{width:56px;height:56px;box-shadow:0 0 0 2px #14123d}
.lh-pcd b{font-size:12.5px;font-weight:800;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lh-pcd small{font-size:11px;font-weight:700;color:#5b5878}
.lh-sh{font-size:11.5px;font-weight:800;color:color-mix(in srgb,var(--acc) 80%,#000);padding:2px 6px}
.lh-pcd.q{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);color:var(--faint)}
.lh-q{width:56px;height:56px;border-radius:var(--r-sq);display:grid;place-items:center;font-size:28px;font-weight:900;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05)}
.lh-left{margin:12px 2px 0;font-size:13px;color:var(--muted);text-align:center}

/* ── LOCAL HEROES: find it, use it; her miles; her walk card (Nov 2, 2026) ── */
.zi-mi{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--acc);min-height:1.3em}
.lh-pcd{position:relative}
.lh-used{position:absolute;z-index:2;top:8px;right:-4px;transform:rotate(12deg);padding:2px 7px;border-radius:5px;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;
  color:color-mix(in srgb,var(--acc) 85%,#000);border:2px solid currentColor;background:rgba(251,245,230,.85)}
.lh-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 6px}
.lh-stats>div{padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--tile-edge)}
.lh-stats b{display:block;font-size:20px;font-weight:900;color:#fff}
.lh-stats span{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.lh-wk{margin:0;text-align:center;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lh-wn{display:flex;justify-content:center;align-items:baseline;gap:8px;margin:4px 0 0}
.lh-wn b{font-size:64px;font-weight:900;line-height:1;color:#fff;text-shadow:0 3px 0 #14123d,2px 0 0 #14123d,-2px 0 0 #14123d,0 -2px 0 #14123d}
.lh-wn span{font-size:20px;font-weight:800;color:var(--acc)}
.lh-ws{margin:8px 0 14px!important;text-align:center;font-size:15px!important;font-weight:700;color:rgba(255,255,255,.85)!important}
.lh-wf{display:flex;justify-content:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.lh-wf .sq{width:48px;height:48px}

/* ── SNAP YOUR RECEIPT (Nov 2, 2026; ui/receipt.js) ── */
.rc-sub{margin:-2px 0 10px!important}
.rc-cnt{font-size:13px!important;line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);color:var(--muted)!important;margin:0 0 14px!important}
.rc-cnt.ok{color:#fff!important;background:color-mix(in srgb,var(--acc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent)}
.rc-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.rc-two .btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;font-size:14.5px}
.rc-two svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rc-pic{display:grid;place-items:center;margin:4px 0 12px;max-height:38vh;overflow:hidden;border-radius:14px;background:rgba(255,255,255,.04)}
.rc-pic img{max-width:100%;max-height:38vh;display:block}
.rc-step{text-align:center;font-weight:700;margin:0 0 10px!important}
.rc-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:8px}
.rc-bar i{display:block;height:100%;width:3%;background:var(--acc);transition:width .3s ease}
.rc-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.rc-th{width:92px;height:128px;object-fit:cover;border-radius:12px;flex:none;background:rgba(255,255,255,.05)}
.rc-fields{flex:1;display:flex;flex-direction:column;gap:6px}
.rc-fields label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rc-fields .field{margin:4px 0 0!important;font-size:18px;font-weight:800}
.rc-full{width:100%;height:auto;border-radius:14px;margin-bottom:14px;display:block}
.sh.light .rc-go{margin-bottom:8px}
.lt-or{font-size:13px!important;text-align:center;margin:0 0 12px!important}
.tx-rc{display:block;width:100%;margin-top:10px;padding:11px 12px;border-radius:14px;text-align:left;font-weight:800;font-size:14px;color:#fff;
  background:color-mix(in srgb,var(--acc) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 45%,transparent)}
.tx-rc small{display:block;margin-top:2px;font-weight:600;font-size:12px;color:var(--muted)}





/* ── HER STREAK AND IMPACT SCORE (Nov 9, 2026; ui/streak.js; digiAPP_Build 2b: big, plain, a word under every number) ── */
.sk-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 6px}
.sk-n{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:8px 6px;border-radius:16px;background:rgba(255,255,255,.06);color:#fff;text-align:center}
button.sk-n{cursor:pointer}
.sk-v{display:flex;align-items:center;gap:6px;font-size:26px;font-weight:900;line-height:1}
.sk-v svg{width:24px;height:24px;fill:var(--acc)}
.sk-w{margin-top:5px;font-size:13px;font-weight:700;color:rgba(255,255,255,.78)}
/* the streak screen */
.sk{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:28px 22px;opacity:0;transition:opacity 260ms ease;
  background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--acc) 22%,#0b0506),#050203 70%)}
.sk.in{opacity:1}
.sk-in{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.sk-big{position:relative;display:flex;align-items:center;justify-content:center;width:220px;height:220px}
.sk-big svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--acc);opacity:.9;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--acc) 60%,transparent))}
.sk-big span{position:relative;font-size:96px;font-weight:900;line-height:1;color:#fff;-webkit-text-stroke:3px color-mix(in srgb,var(--acc) 70%,#000);paint-order:stroke fill;margin-top:46px}
.sk.in .sk-big{animation:skpop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes skpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.sk-h{margin:6px 0 22px;font-size:30px;font-weight:900;color:var(--acc)}
.sk-week{display:flex;gap:8px;justify-content:center;margin-bottom:22px}
.sk-d{display:flex;flex-direction:column;align-items:center;gap:6px}
.sk-d i{font-style:normal;font-size:16px;font-weight:800;color:var(--acc)}
.sk-d b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.14)}
.sk-d.on b{background:var(--acc);border-color:var(--acc)}
.sk-d.freeze b{background:#8fd3ff;border-color:#8fd3ff}
.sk-d b svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sk-d.now.on b svg{fill:#fff;stroke:none}
.sk-d.freeze b svg{stroke:#06324d}
.sk-p{margin:0 0 10px;font-size:20px;font-weight:700;line-height:1.35}
.sk-next{margin:0 0 26px;font-size:16px;font-weight:600;color:rgba(255,255,255,.75)}
.sk-earn{display:flex;gap:10px;align-items:center;text-align:left;margin:4px 0 24px;padding:12px 14px;border-radius:14px;background:rgba(143,211,255,.12);font-size:16px;font-weight:600}
.sk-earn svg{flex:none;width:26px;height:26px;fill:none;stroke:#8fd3ff;stroke-width:2.4;stroke-linecap:round}
.sk-go{width:100%;min-height:56px;font-size:18px}
.sk-share{margin-top:12px;min-height:56px;padding:0 24px;font-size:18px;font-weight:800;color:var(--acc)}
@media (prefers-reduced-motion: reduce){.sk.in .sk-big{animation:none}}

/* ── LIGHT THE CITY (Nov 9, 2026; ui/city.js; 2b: big squares, a word on every button, Back top left) ── */


.ct{position:fixed;inset:0;z-index:94;overflow-y:auto;opacity:0;transition:opacity 260ms ease;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--acc) 14%,#090405),#040203 75%)}
.ct.in{opacity:1}
.ct-in{max-width:460px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px 40px;color:#fff}
.ct-top{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.ct-back{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 10px 0 2px;font-size:18px;font-weight:800;color:#fff}
.ct-back svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ct-no{font-size:16px;font-weight:800;color:rgba(255,255,255,.7)}
.ct-h{margin:2px 0 4px;font-size:32px;font-weight:900;text-align:center}
.ct-sub{margin:0 0 14px;text-align:center;font-size:18px;font-weight:700;color:var(--acc)}
.ct-wait{margin:40px 0;text-align:center;font-size:18px;color:rgba(255,255,255,.8)}
.ct-rule{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);font-size:17px;font-weight:600;line-height:1.4;text-align:center}
.ct-lv{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--acc) 16%,transparent);text-align:center}
.ct-lv div{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.ct-lv b{font-size:18px;font-weight:900}
.ct-lv p{margin:4px 0 0;font-size:16px;font-weight:600;color:rgba(255,255,255,.85)}
.ct-win{display:inline-flex;gap:4px}.ct-win i{width:12px;height:14px;border-radius:3px;background:rgba(255,255,255,.18)}.ct-win i.on{background:#ffd27a;box-shadow:0 0 6px rgba(255,210,122,.6)}
.ct-c.given{box-shadow:inset 0 0 0 3px rgba(255,210,122,.75)}.ct-c.shop.given span svg{stroke:#ffd27a}
.ct-again{margin:0 0 10px;text-align:center;font-size:16px;font-weight:700;color:var(--acc)}
.ct-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0;width:100%;aspect-ratio:1;border:3px solid #f2ece6;border-radius:10px;overflow:hidden}
.ct-c{position:relative;display:grid;place-items:center;background:var(--hd);border:1px solid rgba(255,255,255,.12);min-height:52px;transition:background .3s ease}
.ct-c.et{border-top:3px solid #f2ece6}.ct-c.er{border-right:3px solid #f2ece6}.ct-c.eb{border-bottom:3px solid #f2ece6}.ct-c.el{border-left:3px solid #f2ece6}
.ct-c span{display:grid;place-items:center;width:100%;height:100%}
.ct-c.dot span::after{content:'';width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.8)}
.ct-c.shop span svg{width:68%;height:68%;fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--acc) 50%,transparent))}
.ct-c.bad{box-shadow:inset 0 0 0 3px #ff4d4d}
.ct-c.hinted span svg{animation:cthint 1s ease}
@keyframes cthint{from{transform:scale(1.5)}to{transform:none}}
/* the win: every window lights up */
.ct-grid.won .ct-c.lit{background:color-mix(in srgb,#ffd27a 55%,var(--hd))}
.ct-grid.won .ct-c.lit.shop{background:#ffe6a6}
.ct-grid.won .ct-c.lit.shop span svg{stroke:#7a4a00;filter:drop-shadow(0 0 10px #ffd27a)}
.ct-grid.won{box-shadow:0 0 50px rgba(255,210,122,.35)}
.ct-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ct-b{min-height:56px;border-radius:16px;background:rgba(255,255,255,.1);font-size:18px;font-weight:800;color:#fff}
.ct-count{min-height:24px;margin:12px 0 0;text-align:center;font-size:16px;font-weight:600;color:rgba(255,255,255,.8)}
.ct-done{margin-top:16px;padding:18px;border-radius:20px;background:rgba(255,255,255,.08);text-align:center;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.ct-done.in{opacity:1;transform:none}
.ct-done h2{margin:0 0 12px;font-size:28px;font-weight:900;color:#ffd27a}
.ct-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ct-stats div{display:flex;flex-direction:column;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.ct-stats b{font-size:30px;font-weight:900}.ct-stats span{font-size:14px;font-weight:700;color:rgba(255,255,255,.75)}
.ct-avg{margin:0 0 6px;font-size:17px;font-weight:700}
.ct-pts{margin:0 0 16px;font-size:16px;font-weight:700;color:var(--acc)}
.ct-go{width:100%;min-height:56px;font-size:18px}
.ct-share{margin-top:10px;min-height:56px;padding:0 24px;font-size:18px;font-weight:800;color:var(--acc)}
/* the first-time steps */
.ct-step{text-align:center}
.ct-step h2{margin:16px 0 8px;font-size:24px;font-weight:800}.ct-step h2 b{color:var(--acc)}
.ct-step p{margin:0 0 20px;font-size:18px;line-height:1.45;color:rgba(255,255,255,.88)}
.ct-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}.ct-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25)}.ct-dots i.on{background:var(--acc)}
.ct-mini{display:grid;grid-template-columns:repeat(4,1fr);width:200px;aspect-ratio:1;margin:0 auto;border:3px solid #f2ece6;border-radius:8px;overflow:hidden}
.ct-m{display:grid;place-items:center;border:1px solid rgba(255,255,255,.12)}
.ct-m.ct-mhl{box-shadow:inset 0 0 0 3px var(--acc)}
.ct-m svg{width:70%;height:70%;fill:none;stroke:var(--acc);stroke-width:2}
@media (prefers-reduced-motion: reduce){.ct-c{transition:none}.ct-done{transition:none}.ct-c.hinted span svg{animation:none}}

/* ── digiGAMES tile and Discount Math (Nov 9, 2026; ui/math.js) ── */
.gm{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;width:100%;min-height:64px;margin-top:10px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.07);text-align:left;color:#fff}
.gm b{font-size:18px;font-weight:900}.gm small{grid-row:2;font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.gm span{grid-row:1 / span 2;grid-column:2;font-size:15px;font-weight:800;color:var(--acc)}
.mt-t{margin:6px 0 18px;font-size:24px;font-weight:800;line-height:1.35;text-align:center}
.mt-cs{display:grid;gap:10px}
.mt-c{min-height:64px;border-radius:16px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.14);font-size:24px;font-weight:900;color:#fff}
.mt-c.ok{background:#1f7a46;border-color:#3ad07a}.mt-c.no{background:#7a1f2a;border-color:#ff6b6b}
.mt-c:disabled{opacity:1}
.qz-trivia .mt-c{font-size:19px;font-weight:800;line-height:1.25;padding:10px 14px}   /* trivia's answers are names and towns */
.qz-trivia .mt-t{font-size:22px}
.mt-v{margin:16px 0 4px;font-size:22px;font-weight:900;text-align:center}.mt-v.ok{color:#3ad07a}.mt-v.no{color:#ff8b8b}
.mt-x{margin:0 0 16px;font-size:18px;line-height:1.45;text-align:center;color:rgba(255,255,255,.9)}
.mt-rev{display:grid;gap:8px;margin:4px 0 16px;text-align:left}
.mt-r{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.mt-r b{font-size:14px;font-weight:900}.mt-r.ok b{color:#3ad07a}.mt-r.no b{color:#ff8b8b}.mt-r span{font-size:15px;line-height:1.4}

/* DAILY QUESTS (Nov 10, 2026; ui/quests.js): big words, a check you can see from across the room */
.qs{margin-top:10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07)}
.qs-hd{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:900;letter-spacing:.02em}
.qs-hd.wk{margin-top:14px}
.qs-hd em{font-style:normal;font-size:14px;font-weight:900;color:#3ad07a;letter-spacing:.06em}
.qs-l{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.qs-r{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;font-size:17px;font-weight:700;line-height:1.3}
.qs-r b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4)}
.qs-r b svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qs-r.on b{background:#1f9a55;border-color:#3ad07a}
.qs-r.on span{color:rgba(255,255,255,.75)}
.qs-r i{font-style:normal;font-size:15px;font-weight:800;color:var(--acc)}
.qs-pts{margin:10px 0 0;font-size:14px;font-weight:700;color:rgba(255,255,255,.75)}
.qs-p{margin:10px 0 0;font-size:17px;font-weight:800;color:#3ad07a}
.qs-hl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(58,208,122,.12);font-size:16px;font-weight:700}
.qs-hl button{flex:none;min-height:36px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:800}
.qs-m .qs-big{display:grid;place-items:center;width:96px;height:96px;margin:0 auto 6px;border-radius:50%;background:#1f9a55;box-shadow:0 0 40px rgba(58,208,122,.55)}
.qs-m .qs-big svg{width:56px;height:56px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qs-m .qs-h{font-size:30px;font-weight:900;letter-spacing:.06em;color:#3ad07a}
.qs-m .qs-l{margin:14px auto 4px;max-width:320px;text-align:left}
.qs-m .qs-hl{justify-content:center;text-align:center}
.qs-m .sk-p{margin-top:16px}.qs-m .qs-hl{margin:14px auto 18px;max-width:320px}
.mt-cr{margin:18px 0 0;font-size:12px;line-height:1.4;text-align:center;color:rgba(255,255,255,.6)}   /* Local Trivia's credit line */

/* THE BOARDS (Nov 10, 2026; ui/boards.js): big words, one tap per switch */


.bd-me{margin:6px 0 4px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);text-align:left}
.bd-mh{margin:0 0 6px;font-size:15px;font-weight:900}
.bd-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-top:1px solid rgba(255,255,255,.08)}
.bd-sw:first-of-type{border-top:0}
.bd-sw b{display:block;font-size:17px;font-weight:800}.bd-sw small{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);line-height:1.35}
.bd-tg{flex:none;position:relative;width:56px;height:32px;border-radius:999px;background:rgba(255,255,255,.22)}
.bd-tg::after{content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s}
.bd-tg[aria-checked="true"]{background:#1f9a55}.bd-tg[aria-checked="true"]::after{transform:translateX(24px)}
.bd-note{margin:8px 0 0;font-size:14px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.75)}
.bd-ctl{display:grid;gap:8px;margin:12px 0 0}
.bd-chips{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08)}
.bd-chips button{flex:1;min-height:42px;border-radius:999px;font-size:15px;font-weight:800;color:rgba(255,255,255,.8)}
.bd-chips button.on{background:#fff;color:#14123d}
.bd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 4px}
.bd-tabs button{min-height:52px;border-radius:14px;font-size:14px;font-weight:900;line-height:1.15;color:#fff;background:rgba(255,255,255,.07);border:2px solid transparent}
.bd-tabs .on.h{border-color:#ff5a4f;color:#ff5a4f}.bd-tabs .on.l{border-color:#3fe08a;color:#3fe08a}.bd-tabs .on.s{border-color:#62adff;color:#62adff}
.bd-body{display:grid;gap:12px;text-align:left}
.bd-c{--c1:#ff5a4f;padding:14px;border-radius:16px;background:rgba(255,255,255,.07)}
.bd-c.l{--c1:#3fe08a}.bd-c.s{--c1:#62adff}
.bd-c h2{margin:0;font-size:19px;font-weight:900;color:var(--c1)}
.bd-w{margin:4px 0 10px;font-size:14px;font-weight:600;line-height:1.4;color:rgba(255,255,255,.7)}
.bd-c ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bd-c li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;min-height:46px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.06);font-size:17px;font-weight:700}
.bd-c li b{font-size:15px;font-weight:900;text-align:center;color:rgba(255,255,255,.6)}.bd-c li:first-child b{color:#ffd98a}
.bd-c li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-c li small{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.6)}
.bd-c li em{font-style:normal;font-weight:900;color:var(--c1)}
.bd-dot{display:inline-block;width:12px;height:12px;margin-right:8px;border-radius:50%;background:var(--dot,#fff)}
.bd-0{margin:4px 0 0;font-size:15px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.75)}
.bd-lv{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.bd-lv button{min-height:40px;border-radius:10px;font-size:12px;font-weight:900;color:rgba(255,255,255,.75);background:rgba(255,255,255,.06);border:2px solid transparent}
.bd-lv button.on{color:#fff;border-color:var(--lv)}

/* THE UPDATE PILL (Nov 10, 2026; ui/update.js): her globe and UPDATE in her color, low and centred, above the dock */
.upd{position:fixed;left:50%;bottom:calc(var(--tabs-h, 118px) + 12px);z-index:60;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 8px;border-radius:999px;background:var(--upd,var(--acc-l));color:#fff;font-size:19px;font-weight:900;letter-spacing:.08em;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px color-mix(in srgb,var(--acc) 55%,transparent);transform:translate(-50%,140%);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s}
.upd.in{transform:translate(-50%,0);opacity:1}




/* LOCAL TRIVIA'S HOME (Nov 10, 2026; ui/quiz.js): Today's Five, the Bonus Round, Pick a topic, her pie */
.tv-today{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:76px;padding:14px 16px;border-radius:18px;background:var(--acc-l);color:#fff;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tv-today b{display:block;font-size:22px;font-weight:900}.tv-today small{display:block;margin-top:2px;font-size:15px;font-weight:700;color:rgba(255,255,255,.88)}
.tv-today i{flex:none;font-style:normal;font-size:16px;font-weight:900;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.22)}
.tv-today.done{background:rgba(255,255,255,.08)}
.tv-bonus{display:grid;gap:2px;width:100%;margin-top:10px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(255,211,94,.2),rgba(255,211,94,.06));border:2px solid #ffd35e;color:#fff;text-align:left}
.tv-bonus b{font-size:19px;font-weight:900;color:#ffd35e}.tv-bonus span{font-size:15px;font-weight:700}
.tv-pick{margin-top:14px;padding:14px;border-radius:18px;background:rgba(255,255,255,.06)}
.tv-ph{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tv-ph b{display:block;font-size:20px;font-weight:900}.tv-ph small{display:block;margin-top:2px;font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.tv-pie{flex:none;width:76px;height:76px}
.tv-set{margin:8px 0 10px;font-size:14px;font-weight:700;color:rgba(255,255,255,.8)}
.tv-tops{display:grid;gap:8px}
.tv-top{position:relative;display:grid;gap:2px;width:100%;min-height:64px;padding:12px 14px 12px 20px;border-radius:14px;background:rgba(255,255,255,.07);color:#fff;text-align:left;overflow:hidden}
.tv-top::before{content:'';position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--tc)}
.tv-top b{font-size:18px;font-weight:900}.tv-top small{font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.tv-top i{position:absolute;right:12px;top:12px;font-style:normal;font-size:13px;font-weight:900;color:var(--tc)}
.tv-top.on{background:color-mix(in srgb,var(--tc) 16%,rgba(255,255,255,.04))}
.tv-full{margin:0 0 14px;font-size:20px;font-weight:900;color:#ffd35e}

/* MERCHANT MEMORY (Nov 10, 2026; ui/memory.js): big tiles in her color, a flip, a glow for a match */
.mm-how{margin:0 0 12px;text-align:center;font-size:17px;font-weight:700;line-height:1.4;color:rgba(255,255,255,.88)}
.mm-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:8px}
.mm-t{aspect-ratio:4/5;perspective:700px;padding:0;background:none}
.mm-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.mm-t.up .mm-in{transform:rotateY(180deg)}
.mm-back,.mm-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mm-back{background:linear-gradient(145deg,var(--acc-l),color-mix(in srgb,var(--acc-l) 55%,#000));border:2px solid rgba(255,255,255,.18)}
.mm-back svg{width:44%;height:44%;fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6}
.mm-face{transform:rotateY(180deg);background:#fdfbf7;color:#1a1a1a;padding:6px;overflow:hidden}
.mm-t.got .mm-face{box-shadow:0 0 0 3px #3ad07a,0 0 18px rgba(58,208,122,.6)}
.mm-logo{display:grid;place-items:center;width:100%;height:100%;border-radius:10px}
.mm-logo img{max-width:86%;max-height:86%;object-fit:contain}
.mm-txt{display:grid;gap:2px;text-align:center;line-height:1.15}
.mm-txt b{font-size:clamp(13px,3.9vw,17px);font-weight:900;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;word-break:normal}   /* whole words; a long one hyphenates, never cut mid-letter */
.mm-txt small{font-size:11px;font-weight:700;color:#5c5c66}
@media (prefers-reduced-motion:reduce){.mm-in{transition:none}}
.mm-wh{margin:6px 0 8px;font-size:17px;font-weight:900;color:var(--acc)}
.mm-who{display:grid;gap:6px;margin-bottom:14px;text-align:left}
.mm-who div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06)}
.mm-who b{display:block;font-size:17px;font-weight:800}.mm-who span{font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}