/* Citadot site, look E · LIVE MAPS MIX
   A live city behind the whole page (one map per section), the page colours follow the map in view,
   game-style dialog boxes tell the story, B's title screen at the top, and pixel life everywhere.
   Builds on pixel.css (buttons, panels, icons, logo, fonts). */

:root {
  --font-ui: "Silkscreen", "Press Start 2P", ui-monospace, Menlo, Consolas, monospace;
  --font-body: "Pixelify Sans", ui-monospace, Menlo, Consolas, monospace;
  --font-game: "Press Start 2P", "Silkscreen", ui-monospace, Menlo, monospace;
  --barh: 52px;
  --roadh: 10px;
  --ws: 2;                                   /* walker pixel size (set by life.js) */
}
@media (min-width: 760px) { :root { --barh: 64px; } }

/* ---------- colours per map and time of day (D's colour change) ---------- */
body {
  --sky: #8fd0ff; --panel: #fff6dc; --panel2: #ffe9b8; --panel-hi: #ffffff; --panel-lo: #f0dcb0; --text: #2a2032; --mute: #5d5470; --line: #2a2032;
  --accent: #ffcc4d; --acc-hi: #fff0a8; --acc-lo: #e39a1c; --on-acc: #2a2032; --accent2: #ff6b81; --bar: #2a2032; --bar2: #3b2f4a; --barline: #ffffff;
}
body[data-map="classic"][data-time="night"] { --sky: #1b1846; --panel: #2e2862; --panel2: #3b3480; --panel-hi: #433c8a; --panel-lo: #221d4c; --text: #fff4e0; --mute: #c3badf; --line: #0f0c2a; --accent2: #ff8fb6; --bar: #15102f; --bar2: #2a2456; }
body[data-map="sakura"] { --sky: #ffc9de; --panel: #fff4f7; --panel2: #ffdbe8; --panel-hi: #ffffff; --panel-lo: #f6c6d8; --text: #3b1d30; --mute: #7a4a62; --line: #3b1d30;
  --accent: #ff8fb6; --acc-hi: #ffd0e2; --acc-lo: #d66c94; --on-acc: #3b1d30; --accent2: #e0507a; --bar: #3b1d30; --bar2: #5a2c48; }
body[data-map="sakura"][data-time="night"] { --sky: #2a1838; --panel: #3a2148; --panel2: #4d2c5e; --panel-hi: #57346a; --panel-lo: #2a1636; --text: #ffe8f0; --mute: #dcb6cc; --line: #1a0c22; --accent2: #ffd84d; --bar: #1f0f29; --bar2: #3a2148; }
body[data-map="oasis"] { --sky: #f3cf86; --panel: #fff4dc; --panel2: #ffe4b0; --panel-hi: #ffffff; --panel-lo: #f0d29a; --text: #3a2410; --mute: #6e5230; --line: #3a2410;
  --accent: #f2c14e; --acc-hi: #ffe9a0; --acc-lo: #c98f1a; --on-acc: #3a2410; --accent2: #2f8f9d; --bar: #3a2410; --bar2: #5a3a1c; }
body[data-map="oasis"][data-time="night"] { --sky: #1c1a3a; --panel: #2a2446; --panel2: #3a3260; --panel-hi: #433a6c; --panel-lo: #1e1a36; --text: #ffeccc; --mute: #d2c0a2; --line: #120e24; --accent2: #5ee6ff; --bar: #17122b; --bar2: #2a2446; }
body[data-map="neon"] { --sky: #cfe4ff; --panel: #f4f9ff; --panel2: #dcecff; --panel-hi: #ffffff; --panel-lo: #c8daf4; --text: #1a1040; --mute: #4a4a80; --line: #1a1040;
  --accent: #3df0ff; --acc-hi: #b8fbff; --acc-lo: #1fb0c8; --on-acc: #1a1040; --accent2: #ff4fd8; --bar: #1a1040; --bar2: #2e2470; }
body[data-map="neon"][data-time="night"] { --sky: #120c34; --panel: #221a58; --panel2: #2e2470; --panel-hi: #3a2e88; --panel-lo: #150f3c; --text: #f4efff; --mute: #c0b6f2; --line: #06040e;
  --accent: #ff4fd8; --acc-hi: #ffa8ee; --acc-lo: #b8309a; --on-acc: #ffffff; --accent2: #3df0ff; --bar: #0c0826; --bar2: #221a58; }
body[data-map="snow"] { --sky: #bfe0f7; --panel: #f6fbff; --panel2: #dcebf8; --panel-hi: #ffffff; --panel-lo: #c6d8ec; --text: #1f3550; --mute: #4a6a8a; --line: #1f3550;
  --accent: #8fd6ff; --acc-hi: #d6f0ff; --acc-lo: #4a9ad8; --on-acc: #14203a; --accent2: #e8453f; --bar: #1f3550; --bar2: #2f4a70; }
body[data-map="snow"][data-time="night"] { --sky: #141b33; --panel: #2b3a5e; --panel2: #364a76; --panel-hi: #40568a; --panel-lo: #1e2a46; --text: #f2f6ff; --mute: #bccae8; --line: #0e1428;
  --accent: #ffcc4d; --acc-hi: #fff0a8; --acc-lo: #e39a1c; --on-acc: #14203a; --accent2: #3fe3a0; --bar: #0e1428; --bar2: #2b3a5e; }
body[data-map="mars"] { --sky: #c9603a; --panel: #ffe3d0; --panel2: #ffc9a8; --panel-hi: #fff2e8; --panel-lo: #f0b896; --text: #2a1420; --mute: #6e3a28; --line: #2a1420;
  --accent: #ffb347; --acc-hi: #ffe0b0; --acc-lo: #d87024; --on-acc: #2a1420; --accent2: #2aa89c; --bar: #2a1420; --bar2: #4a2430; }
body[data-map="mars"][data-time="night"] { --sky: #1e0e1c; --panel: #3a1c2a; --panel2: #4e2636; --panel-hi: #5a2e40; --panel-lo: #2a1220; --text: #ffe3d0; --mute: #dcb09a; --line: #160a10; --accent2: #a6e04a; --bar: #1e0e0c; --bar2: #3a1c2a; }

/* stepped colour changes (pixel style, 4 steps) */
body, .pbox, .pbtn, .mapbar, .tagline span, .who, .day, .site-footer { transition: background-color .48s steps(4), color .48s steps(4), box-shadow .48s steps(4); }

html { background: #2a2032; }
body { margin: 0; background: var(--sky); color: var(--text); font: 400 19px/1.45 var(--font-body); overflow-x: hidden; }
h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; line-height: 1.15; margin: 0; text-transform: uppercase; letter-spacing: .02em; }
.skip { position: absolute; left: 8px; top: 8px; z-index: 99; background: #fff; color: #000; padding: 8px 10px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- layers ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.city { position: absolute; inset: 0; overflow: hidden; background: var(--sky); }
.city-wait { position: absolute; right: 16px; bottom: 16px; margin: 0; padding: 8px 12px; background: rgba(21,15,31,.85); color: #fff; font: 400 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.city.is-live .city-wait { display: none; }
@media (pointer: fine) { html { cursor: var(--cur-arrow, auto); } a, button, .phone, .day, .mbtn { cursor: var(--cur-hand, pointer); } }
.tts, .trynight { position: relative; }
.wx, .fx { position: fixed; left: 0; top: 0; display: block; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; }
.wx { position: absolute; }
.fx { z-index: 60; }
.title, main, .site-footer { position: relative; z-index: 1; }

/* ---------- the map bar ---------- */
.mapbar { position: sticky; top: 0; z-index: 40; background: var(--bar); color: #fff; padding-top: env(safe-area-inset-top, 0px); box-shadow: 0 3px 0 0 var(--barline), 0 8px 0 0 rgba(0,0,0,.18); }
.mb-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 1180px; height: var(--barh); margin: 0 auto; padding: 0 16px; }
.mb-home { display: none; text-decoration: none; line-height: 0; flex: none; }
@media (min-width: 1080px) { .mb-home { display: block; } }
.maps { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 3px; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mthumb { display: block; width: 28px; height: 28px; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 2px #0b0812, 0 0 0 4px rgba(255,255,255,.18); }
.mname { display: none; font: 400 10px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; opacity: .8; }
.mbtn:hover .mthumb, .mbtn:focus-visible .mthumb { transform: translateY(-2px); }
.mbtn[aria-current="true"] .mthumb { box-shadow: 0 0 0 2px #0b0812, 0 0 0 5px var(--accent); transform: translateY(-2px); }
.mbtn[aria-current="true"] .mname { opacity: 1; color: var(--accent); }
.mbtn[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px; width: 8px; height: 5px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.mbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mbtn.hop .mthumb { animation: mhop .45s steps(4); }
@keyframes mhop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 70% { transform: translateY(-3px); } }
@media (min-width: 760px) { .maps { gap: 8px; } .mthumb { width: 40px; } }
@media (min-width: 960px) { .mname { display: block; } .mbtn { padding: 4px 6px 2px; } .mb-in { height: calc(var(--barh) + 10px); } }
@media (max-width: 340px) { .maps { gap: 2px; } .mthumb { width: 26px; height: 26px; } .mb-in { padding: 0 12px; } }

.dn { display: flex; flex: none; background: #0b0812; padding: 3px; gap: 3px; box-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff; margin: 3px; }
.dn button { font: 400 12px var(--font-ui); text-transform: uppercase; letter-spacing: .05em; color: #cfc6e6; background: transparent; border: 0; padding: 6px 7px; display: flex; align-items: center; gap: 6px; cursor: pointer; min-height: 36px; -webkit-tap-highlight-color: transparent; }
.dn button span { display: none; }
.dn button[aria-pressed="true"] { background: var(--accent); color: var(--on-acc); box-shadow: inset 3px 3px 0 var(--acc-hi), inset -3px -3px 0 var(--acc-lo); }
.dn button:not([aria-pressed="true"]):hover { color: #fff; }
@media (min-width: 560px) { .dn button span { display: inline; } .dn button { padding: 6px 10px; } }
@media (max-width: 340px) { .dn button { padding: 6px 5px; } }

.road { position: relative; height: var(--roadh); overflow: hidden; pointer-events: none; background: #1b1524 repeating-linear-gradient(90deg, transparent 0 10px, #ffd84d 10px 18px) 0 4px / 100% 2px no-repeat; }
.roadcar { position: absolute; left: 0; top: 0; width: 24px; height: 10px; background-size: 100% 100%; image-rendering: pixelated; will-change: transform; }
.mb-tip { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); margin: 0; padding: 8px 12px; background: #fff; color: #2a2032; font: 400 12px/1.2 var(--font-ui); text-transform: uppercase; white-space: nowrap;
  box-shadow: -3px 0 0 #2a2032, 3px 0 0 #2a2032, 0 -3px 0 #2a2032, 0 3px 0 #2a2032; opacity: 0; pointer-events: none; }
.mb-tip::before { content: ""; position: absolute; left: 50%; bottom: 100%; margin-left: -6px; width: 12px; height: 8px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mb-tip.show { opacity: 1; animation: tip .35s steps(4); }
@keyframes tip { 0% { transform: translateX(-50%) translateY(10px); } 100% { transform: translateX(-50%) translateY(0); } }

/* ---------- the title screen (B) ---------- */
.title { min-height: calc(100vh - var(--barh) - var(--roadh)); min-height: calc(100svh - var(--barh) - var(--roadh)); display: flex; }
.t-in { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 22px 16px 64px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; text-align: center; }
.t-logo { margin: 8px 0 0; filter: drop-shadow(0 calc(var(--ls, 6) * 1px) 0 rgba(20,14,30,.45)); }
.tagline { margin: 0; }
.tagline span { display: inline-block; background: var(--accent); color: var(--on-acc); font: 700 19px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: .02em; padding: 9px 14px 8px;
  box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line), inset 0 -3px 0 var(--acc-lo), 0 9px 0 rgba(20,14,30,.3); }
.start { display: flex; flex-direction: column; align-items: center; min-height: 92px; justify-content: center; }
.tts { display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer; padding: 14px 18px 14px 14px; background: rgba(21,15,31,.92); color: #fff; font: 400 14px/1.4 var(--font-game); text-transform: uppercase;
  box-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, 0 9px 0 rgba(20,14,30,.3); -webkit-tap-highlight-color: transparent; }
.tts .blink { animation: blink 1.1s steps(1) infinite; }
.tts .ico { animation: nudge .8s steps(2) infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 55% { opacity: 0; } }
@keyframes nudge { 0% { transform: translateX(0); } 100% { transform: translateX(6px); } }
.tts:hover .blink { animation-duration: .5s; }
body.menu-open .tts { display: none; }
.menu { width: 260px; max-width: 100%; padding: 10px 10px; background: rgba(21,15,31,.94); box-shadow: -3px 0 0 #fff, 3px 0 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, 0 9px 0 rgba(20,14,30,.3); animation: popin .3s steps(4); }
.menu[hidden] { display: none; }
@keyframes popin { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.mi { position: relative; display: flex; align-items: center; width: 100%; gap: 12px; background: none; border: 0; color: #fff; padding: 9px 6px 9px 40px; font: 400 18px/1 var(--font-game); text-transform: uppercase; text-align: left; cursor: pointer; text-shadow: 3px 3px 0 #000; -webkit-tap-highlight-color: transparent; }
.mi .ico { position: absolute; left: 8px; top: 50%; margin-top: -13px; visibility: hidden; }
.mi:hover, .mi:focus-visible, .mi.on { color: var(--accent); }
.mi:hover .ico, .mi:focus-visible .ico, .mi.on .ico { visibility: visible; animation: nudge .6s steps(2) infinite; }
.mi:focus-visible { outline: none; }
.mi:active { transform: translateY(3px); }
.sign { --face: rgba(30,22,42,.95); --edge: #ffffff; --hi: #3b2f4a; --lo: #1b1524; color: #fff4e0; width: 100%; max-width: 560px; padding: calc(var(--px) * 4) calc(var(--px) * 4) calc(var(--px) * 3); }
.sign .pbtn { width: calc(100% - var(--px) * 2); }
.scroll-cue { position: absolute; left: 50%; bottom: 14px; margin-left: -18px; line-height: 0; padding: 6px; animation: bob 1.2s steps(2) infinite; }
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(6px); } }

/* ---------- buttons, panels, price ---------- */
.pbox { --face: var(--panel); --edge: var(--line); --hi: var(--panel-hi); --lo: var(--panel-lo); color: var(--text); }
.sign.pbox { --face: rgba(30,22,42,.95); --edge: #ffffff; --hi: #3b2f4a; --lo: #1b1524; color: #fff4e0; }
.pbtn { --face: var(--accent); --hi: var(--acc-hi); --lo: var(--acc-lo); --fg: var(--on-acc); --edge: var(--line); }
.sign .pbtn { --edge: #0b0812; }
.cta { font-size: 16px; }
.ct { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ct .sep { display: none; }
.ct .l2 { font-size: 24px; }
@media (min-width: 640px) { .ct { flex-direction: row; gap: 0; } .ct .sep { display: inline; white-space: pre; } .ct .l2 { font-size: inherit; } }
.cta .ico { margin-right: 2px; }
.ctawrap { position: relative; display: block; }
.cta-note { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); width: max-content; max-width: 92%; background: #fff; color: #2a2032; font: 400 13px/1.3 var(--font-ui); text-transform: uppercase; padding: 10px 14px; z-index: 3;
  box-shadow: -3px 0 0 #2a2032, 3px 0 0 #2a2032, 0 -3px 0 #2a2032, 0 3px 0 #2a2032; opacity: 0; pointer-events: none; }
.cta-note::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; width: 12px; height: 9px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.cta-note.show { opacity: 1; animation: pop .35s steps(4); }
@keyframes pop { 0% { transform: translateX(-50%) translateY(10px); } 60% { transform: translateX(-50%) translateY(-4px); } 100% { transform: translateX(-50%) translateY(0); } }
.trust { margin: 10px 0 2px; font: 600 18px/1.5 var(--font-body); }
.trust span { white-space: nowrap; }
.trust .ico { margin: 0 5px 0 0; transform: translateY(-1px); }
@media (max-width: 360px) { .trust { font-size: 16px; } .trust .ico { display: none; } }

/* ---------- map sections ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sec.map { scroll-margin-top: calc(var(--barh) + var(--roadh)); padding: 18vh 0 10vh; padding: 18svh 0 10svh; }
.sec.map.last { padding-bottom: 6vh; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; }
.col { min-width: 0; }
.col > * + * { margin-top: clamp(64px, 26vh, 240px); margin-top: clamp(64px, 26svh, 240px); }
.shotcol { display: flex; justify-content: center; margin-top: clamp(64px, 26vh, 240px); }
@media (min-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr) 346px; gap: 64px; }
  .grid.flip { grid-template-columns: 346px minmax(0, 1fr); }
  .grid.flip .shotcol { order: -1; }
  .grid > .col:not(.shotcol) { width: 100%; max-width: 600px; justify-self: start; }
  .grid.flip > .col:not(.shotcol) { justify-self: end; }
  .shotcol { margin-top: 0; }
  .col > * + * { margin-top: 18vh; }
  .sec.map { padding: 22vh 0 18vh; }
}

.card { padding: calc(var(--px) * 5) calc(var(--px) * 5) calc(var(--px) * 4); }
.card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.thumb { flex: none; display: block; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--line), 5px 6px 0 0 rgba(0,0,0,.18); }
.kick { margin: 0 0 6px; font: 400 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.card h2 { font-size: clamp(26px, 7.4vw, 38px); }
.mood { margin: 0 0 12px; font-size: 20px; }
.pets { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; }
.pets li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: var(--panel2); font: 400 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .03em; margin: 3px;
  box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line); }
.pets canvas, .looks canvas { display: block; image-rendering: pixelated; }

/* dialog boxes (C) */
.dlg { padding: calc(var(--px) * 5) calc(var(--px) * 5) calc(var(--px) * 6); box-shadow: inset 0 0 0 var(--px) var(--panel), inset 0 0 0 calc(var(--px) * 2) var(--line), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge), 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * 3) calc(var(--px) * 3) 0 0 rgba(0,0,0,.2); }
.who { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 10px 5px 6px; background: var(--accent); color: var(--on-acc); font: 400 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line); margin-left: 3px; }
.dlg h3 { font-size: clamp(21px, 5.8vw, 28px); margin: 0 0 10px; }
.type { margin: 0; font-size: 20px; line-height: 1.4; }
.type .tr { visibility: hidden; }
.nxt { position: absolute; right: calc(var(--px) * 4); bottom: calc(var(--px) * 3); width: 14px; height: 9px; background: var(--text); clip-path: polygon(0 0, 100% 0, 100% 33%, 85% 33%, 85% 66%, 66% 66%, 66% 100%, 33% 100%, 33% 66%, 15% 66%, 15% 33%, 0 33%); opacity: 0; }
.dlg.done .nxt { opacity: 1; animation: nxt .9s steps(2) infinite; }
@keyframes nxt { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } }
.needs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.needs span { display: block; background-repeat: no-repeat; image-rendering: pixelated; }
.needs span.pop { animation: needpop .5s steps(4); }
@keyframes needpop { 0% { transform: translateY(0); } 40% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.looks { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 14px 0 0; padding: 0; }
.looks li { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 400 11px/1 var(--font-ui); text-transform: uppercase; }
.trynight { margin-top: 16px; }
.spr { display: inline-block; flex: none; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; }

/* pixel phones with real screenshots (A) */
.phone { --bz: 8px; position: relative; display: block; width: calc(330px + var(--bz) * 2); max-width: 100%; padding: var(--bz); border: 0; background: #1b1524; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: -4px 0 0 #000, 4px 0 0 #000, 0 -4px 0 #000, 0 4px 0 #000, inset 0 0 0 3px #3b3150, 12px 14px 0 rgba(0,0,0,.28); animation: bobslow 4s steps(4) infinite; }
@media (max-width: 699px) { .phone { --bz: 6px; width: calc(220px + var(--bz) * 2); } }   /* 2/3 size on phones: exactly 2 screen pixels per picture pixel on 3x iPhones */
@media (max-width: 699px) and (min-resolution: 2.9dppx) { .phone .pimg { image-rendering: pixelated; } }
.phone .pimg { display: block; width: 100%; }
.phone:hover { animation: none; transform: translateY(-6px); }
.phone:active { transform: translateY(0); }
.phone.flash::after { content: ""; position: absolute; inset: var(--bz); background: #fff; animation: flash .3s steps(3) forwards; pointer-events: none; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes bobslow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* daily challenge week strip (A) */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 16px 0 12px; }
.day { font: 400 11px/1.1 var(--font-ui); text-transform: uppercase; background: var(--panel2); color: var(--text); border: 0; padding: 8px 0 6px; cursor: pointer; display: grid; gap: 6px; justify-items: center; min-width: 0;
  box-shadow: -3px 0 0 var(--line), 3px 0 0 var(--line), 0 -3px 0 var(--line), 0 3px 0 var(--line); margin: 3px; -webkit-tap-highlight-color: transparent; }
.day:hover { transform: translateY(-3px); }
.day[aria-pressed="true"] { background: var(--accent); color: var(--on-acc); }
.day .stars { display: flex; gap: 1px; min-height: 12px; }
.day .tag { font-size: 8px; letter-spacing: 0; opacity: .85; }
.day-cap { font: 400 14px/1.3 var(--font-ui); text-transform: uppercase; background: var(--line); color: var(--accent); padding: 10px 12px; margin: 6px 3px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.day-cap .today { background: var(--accent2); color: #fff; font-size: 10px; padding: 3px 5px; }
.day-bar { display: flex; gap: 3px; margin: 8px 3px 0; }
.day-bar i { flex: 1; height: 8px; background: color-mix(in srgb, var(--line) 22%, transparent); }
.day-bar i.on { background: var(--accent2); }
@media (max-width: 360px) { .days { gap: 2px; } .day { font-size: 10px; } }

/* the final call + support */
.final { padding-top: clamp(64px, 24vh, 220px); }
.fin { text-align: center; max-width: 660px; margin: 0 auto; padding: calc(var(--px) * 6) calc(var(--px) * 4) calc(var(--px) * 5); }
.appicon { width: 96px; height: 96px; margin: 4px auto 0; box-shadow: 0 0 0 4px var(--line), 7px 8px 0 4px rgba(0,0,0,.22); }
.fin h2 { font-size: clamp(24px, 7vw, 36px); margin: 18px 0 8px; }
.fin-sub { margin: 0 0 20px; color: var(--mute); }
.fine { margin: 10px 0 0; font-size: 17px; color: var(--mute); }
.help { display: grid; gap: clamp(56px, 14vh, 120px); margin: clamp(64px, 18vh, 180px) auto 0; max-width: 980px; }
@media (min-width: 800px) { .help { grid-template-columns: 1fr 1fr; gap: 40px; } }
.helpbox h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin-bottom: 10px; }
.helpbox p { margin: 0 0 12px; }
.mail { text-transform: none; font-size: 13px; }

/* ---------- footer ---------- */
.site-footer { margin-top: clamp(80px, 18vh, 180px); background: transparent; color: #fff4e0; border-top: 0; padding: 0; }
.street { position: relative; display: block; width: 100%; }        /* the footer starts with a little street, standing on the live city */
.f-in { background: var(--bar); padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.site-footer a:hover { color: var(--accent); }
.site-footer .logo { margin-bottom: 8px; }

/* walkers on the top edge of panels (drawn by life.js) */
.walk { position: absolute; left: 0; bottom: 100%; margin-bottom: var(--px); display: block; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; z-index: 2; }
.phone .walk { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tts .blink, .tts .ico, .phone, .scroll-cue, .dlg.done .nxt { animation: none !important; }
}