/* ==========================================================================
   Drainy — Flood Resilience App
   Design source of truth: Drainage-Services-Department/DESIGN.md
   Mobile-first. No build step. Plain CSS custom properties only.
   ========================================================================== */

:root {
  /* Palette (DESIGN.md) */
  --bg: #ffffff;
  --surface: #f0f0f0;
  --fg: #212529;
  --muted: #6c757d;
  --border: #cccccc;
  --accent: #126e82;
  --accent-hover: #2b808f;
  --accent-active: #084a5c;
  --link: #04669f;
  --link-hover: #207dab;
  --link-active: #004878;
  --rule: #00afcc;

  /* Semantic extensions kept inside the documented palette */
  --success: #1e7e34;
  --success-bg: #d1ecd9;
  --warning-bg: #fff6d9;
  --warning-fg: #6b4a00;
  --danger: #c1121f;
  --danger-bg: #fdecec;

  /* Vibrant accents for the public-facing surfaces. Gold marks points,
     sky and mint tint the cards, rose marks an incorrect outcome. */
  --gold: #f2b01e;
  --gold-deep: #c8850c;
  --gold-soft: #fff3d1;
  --sky-soft: #e6f4ff;
  --sky-tint: #d6ecfb;
  --mint-soft: #e2f6ec;
  --mint-deep: #1e8e5a;
  --rose-soft: #ffe8ef;
  --rose-deep: #c2185b;
  --pill: 999px;

  /* Type */
  --font: Roboto, "Microsoft JhengHei", "PingFang HK", "Noto Sans HK", system-ui,
    -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 26px;
  --lh-body: 1.57;
  --lh-heading: 1.25;

  /* Space — 8px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 10px;
  --tap: 44px;

  --shadow: 0 1px 3px rgba(33, 37, 41, 0.16);
  --shadow-lg: 0 6px 24px rgba(33, 37, 41, 0.2);

  --font-numeric: "Roboto", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-heading); font-weight: 700; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding-left: var(--s5); }
a { color: var(--link); }

/* Default icon size. Component rules below override this where an icon
   needs to be larger. */
svg.icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- app bar -- */

/* The current weather notice, shown under the app bar on every screen. */
.noticebar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px var(--s4);
  background: #fdf3dd;
  border-bottom: 1px solid #e0bd76;
  color: #6b4200;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.noticebar__signal {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(33, 37, 41, 0.12);
}
.noticebar__text { flex: 1 1 auto; }
.noticebar[hidden] { display: none; }


.appbar {
  flex: none;
  position: relative;
  z-index: 30;
  background: var(--bg);
  color: var(--fg);
  padding-top: env(safe-area-inset-top);
  border-top: 4px solid var(--accent);
  border-bottom: 5px solid var(--rule);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-left: var(--s4);
  padding-right: var(--s4);
}

.appbar__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  min-width: 0;
  flex: 1 1 auto;
}

.appbar__logo {
  width: 176px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
  min-width: 0;
}

.appbar__divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex: none;
}
.appbar__app { display: flex; flex-direction: column; line-height: 1.2; flex: none; }
.appbar__appname { font-weight: 700; font-size: var(--fs-md); color: var(--accent); white-space: nowrap; }

.langswitch {
  display: flex;
  gap: var(--s1);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 2px;
  margin-left: auto;
  flex: none;
}

.langswitch button {
  min-width: 44px;
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.langswitch button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.langswitch button:hover { background: var(--surface); }
.langswitch button[aria-pressed="true"]:hover { background: var(--accent-hover); }

/* ------------------------------------------------------------- main/tab -- */

/* The screen area holds a horizontal deck of pages. Each page is one
   screenful, so the app never scrolls as a whole and every screen
   presents its content without a long scroll. */
.appmain {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
}
.appmain:focus { outline: none; }

.deck {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.deck::-webkit-scrollbar { display: none; }
.deck__page {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-align: start;
  padding: var(--s4) var(--s4) 34px;
}
.deck__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  z-index: 25;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.deck__dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}
.deck__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.deck__dot[aria-current="true"]::after { background: var(--accent); }
.deck__dot:hover::after { background: var(--muted); }

.tabbar {
  flex: none;
  display: flex;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(33, 37, 41, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab {
  flex: 1 1 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s2) var(--s1);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: none;
}
.tab svg { width: 24px; height: 24px; }
.tab__iconwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 28px;
  border-radius: var(--pill);
  transition: background-color 0.18s ease-in-out;
}
.tab[aria-current="page"] { color: var(--accent); font-weight: 700; }
.tab:hover { color: var(--accent-hover); }

/* ---------------------------------------------------------------- cards -- */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--s4);
  margin-bottom: var(--s4);
  box-shadow: 0 2px 10px rgba(33, 37, 41, 0.06);
}
.card--surface { background: var(--surface); }
.card--flush { padding: 0; overflow: hidden; }

.card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--s2);
}
.card__lede { color: var(--muted); margin-bottom: var(--s4); }

.section-title {
  font-size: var(--fs-lg);
  margin: var(--s5) 0 var(--s3);
}
.section-title:first-child { margin-top: 0; }
.section-note { color: var(--muted); font-size: var(--fs-xs); margin-bottom: var(--s3); }

.stack > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--s3) var(--s5);
  border-radius: var(--pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, transform 0.12s ease-in-out;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { background: var(--accent-active); border-color: var(--accent-active); transform: scale(0.985); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lg svg { width: 22px; height: 22px; }

.btn--secondary {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--accent);
}
.btn--secondary:hover { background: var(--surface); color: var(--accent-hover); border-color: var(--accent-hover); }

.btn--plain {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--fg);
}
.btn--plain:hover { background: var(--surface); }

.btn--link {
  background: none;
  border-color: transparent;
  color: var(--link);
  padding-left: var(--s2);
  padding-right: var(--s2);
}
.btn--link:hover { background: none; color: var(--link-hover); text-decoration: underline; }

.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: 52px; font-size: var(--fs-md); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.btn-row > .btn { flex: 1 1 160px; }

/* ---------------------------------------------------------------- chips -- */

.chipset {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Signal that the row continues past the edge. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}
.chipset::-webkit-scrollbar { height: 4px; }
.chipset::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chipset::after {
  content: "";
  flex: none;
  width: 16px;
}

.chip {
  flex: none;
  min-height: 40px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--fg);
  border-radius: 40px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover { background: var(--surface); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.badge--accent { background: var(--accent); color: #fff; }
.badge--link { background: transparent; color: var(--link); border: 1px solid var(--link); }
.badge--warn { background: var(--warning-bg); color: var(--warning-fg); }
.badge--ok { background: var(--success-bg); color: var(--success); }
.badge--danger { background: var(--danger-bg); color: var(--danger); }

/* ------------------------------------------------------------- segments -- */

.segmented {
  display: inline-flex;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  overflow: hidden;
}
.segmented button {
  min-height: 40px;
  padding: var(--s2) var(--s4);
  border: 0;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.segmented button + button { border-left: 1px solid var(--fg); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 700; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--s5) var(--s4);
  margin-bottom: var(--s4);
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
}
.hero__text { flex: 1 1 auto; min-width: 0; }
.hero__title { font-size: var(--fs-xl); margin-bottom: var(--s2); }
.hero__body { font-size: var(--fs-sm); margin-bottom: var(--s4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero .btn--secondary { background: transparent; color: #fff; border-color: #fff; }
.hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero__mascot { width: 76px; height: auto; flex: none; }

/* ------------------------------------------------------- home sky panel -- */

.sky {
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, #0a5f8c 0%, #1b7fab 38%, #4fb4e2 72%, #79cbea 100%);
  padding: var(--s5) var(--s4) var(--s7);
  color: #fff;
  overflow: visible;
}
.sky__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 20px;
}
.sky__copy { position: relative; z-index: 1; max-width: 68%; }
.sky__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(10, 60, 90, 0.35);
}
.sky__sub {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: #fff;
  text-shadow: 0 1px 2px rgba(10, 60, 90, 0.3);
}
.sky__mascot {
  position: absolute;
  right: var(--s3);
  bottom: -26px;
  width: 112px;
  z-index: 3;
  filter: drop-shadow(0 6px 10px rgba(10, 60, 90, 0.28));
}

/* ------------------------------------------------------- page header -- */

.phead {
  position: relative;
  border-radius: 20px;
  padding: var(--s4) var(--s4) var(--s5);
  margin-bottom: var(--s4);
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, #0a5f8c 0%, #4fb4e2 100%);
}
.phead--teal { background: linear-gradient(135deg, #0c5c63 0%, #43b5b0 100%); }
.phead--green { background: linear-gradient(135deg, #14663f 0%, #52b98c 100%); }
.phead--amber { background: linear-gradient(135deg, #8a5410 0%, #f0b64a 100%); }
.phead--violet { background: linear-gradient(135deg, #4a2a7a 0%, #9a7ad6 100%); }
.phead--rose { background: linear-gradient(135deg, #8a2a52 0%, #e8779f 100%); }
.phead--cyan { background: linear-gradient(135deg, #0a5f6a 0%, #46c3d4 100%); }
.phead--indigo { background: linear-gradient(135deg, #253a78 0%, #7d92e0 100%); }
.phead__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 20px;
}
.phead__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.phead__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phead__icon svg { width: 24px; height: 24px; }
.phead__text { flex: 1 1 auto; min-width: 0; }
.phead__title { font-size: var(--fs-xl); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.phead__sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: #fff;
  opacity: 0.94;
}
.phead__mascot {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  object-position: top center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------------------ home tiles -- */

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: 32px;
  position: relative;
  z-index: 2;
}
.tile {
  display: block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: var(--s4) var(--s2);
  text-align: center;
  text-decoration: none;
  color: var(--fg);
  box-shadow: 0 4px 14px rgba(33, 37, 41, 0.09);
  min-height: var(--tap);
}
.tile:hover { background: #f7fbfe; border-color: var(--link); }
.tile__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--s2);
  border-radius: 16px;
  background: #e6f4ff;
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile__icon svg { width: 28px; height: 28px; }
.tile__label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--link);
  line-height: 1.3;
}
.tile__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* --------------------------------------------------------------- points -- */

.pointgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.pointcard {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--s4);
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(33, 37, 41, 0.06);
}
.pointcard--resilience { border-top: 4px solid var(--accent); }
.pointcard--game { border-top: 4px solid var(--link); }
.pointcard__label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s1); }
.pointcard__value {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
}
.pointcard__note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); }

/* ----------------------------------------------------------------- list -- */

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.list > li { border-bottom: 1px solid var(--border); }
.listrow {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.listrow:hover { background: var(--surface); }
.listrow__main { flex: 1 1 auto; min-width: 0; }
.listrow__title { font-weight: 700; }
.listrow__meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; }
.listrow__aside { flex: none; text-align: right; font-size: var(--fs-xs); color: var(--muted); }

/* Mission rows: more air around the title and a vertically centred action. */
.list--tasks .listrow {
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  gap: var(--s4);
  align-items: center;
}
.list--tasks .listrow__title { line-height: 1.35; }
.listrow__meta--tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
}
.listrow__pts { font-variant-numeric: tabular-nums; }

/* Summary card on the Challenge tab. */
.card--summary .card__progress {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.card--summary .btn { margin-top: var(--s4); }

/* Filter row sits between the summary and the list. */
.chipset--sticky { margin-top: var(--s4); }
.list--tasks { margin-top: var(--s4); }

/* A plain list inside a page, without the surrounding card. */
.list--plain {
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.list--plain > li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------ map -- */

.maptoolbar { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }

.searchfield { position: relative; flex: 1 1 auto; }
.searchfield svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.searchfield input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3) var(--s3) var(--s3) 40px;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  background: var(--bg);
}

.mapwrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #a8d9ef;
  box-shadow: 0 2px 10px rgba(33, 37, 41, 0.12);
}
/* Only the drawing of Hong Kong that sits directly in the wrapper is
   sized here. The Leaflet map lives inside the same wrapper and sizes
   its own drawing, so it is left alone. */
.mapwrap > svg { width: 100%; height: auto; display: block; }
.map__district {
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.map__district--rural { fill: #cbe3ab; }
.map__district--town { fill: #eee0bd; }
.map__district--urban { fill: #e5dfd3; }
.map__water { fill: #a5d8ef; }
.map__label {
  fill: #3f4e57;
  font-size: 30px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.map__area {
  fill: #2f4048;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.5px;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 7px;
  stroke-linejoin: round;
}
/* The dense central districts are too small to label on a phone screen.
   Their shapes are drawn and their names appear in the facility list. */
.map__label--minor { display: none; }

.marker {
  position: absolute;
  transform: translate(-50%, -100%);
  min-height: var(--tap);
  min-width: var(--tap);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.marker__pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.2s ease-in-out;
}
.marker__pin img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.marker__score {
  margin-top: 2px;
  background: #f5a623;
  color: #ffffff;
  border-radius: 40px;
  padding: 0 6px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.marker:hover { z-index: 3; }.marker:hover .marker__pin { transform: scale(1.08); }
.marker[aria-pressed="true"] { z-index: 4; }
.marker[aria-pressed="true"] .marker__pin {
  border-color: var(--link);
  transform: scale(1.14);
}
.marker[aria-pressed="true"] .marker__score { background: var(--link); }

/* The visitor's own position, once location has been granted. */
.myloc {
  position: absolute;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--success);
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(30, 126, 52, 0.25), 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 5;
}
.mapwrap.is-recentred { box-shadow: 0 0 0 3px var(--success); }

/* The visitor's position on the Leaflet map, in the same style as the
   marker on the offline map. */
.flood-visitor { background: none; border: 0; }
.flood-visitor .myloc { position: static; display: block; }

/* On a small phone the score bubbles crowd the map, so they are shown
   for the selected marker only. The accessible name always carries the
   points, and the facility card repeats them. */
@media (max-width: 480px) {
  .marker__pin { width: 32px; height: 32px; }
  .marker__score { display: none; }
  .marker[aria-pressed="true"] .marker__score { display: block; }
}

.map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  padding: var(--s3);
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.map__legend span { display: inline-flex; align-items: center; gap: 6px; }
.map__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ------------------------------------------------------------ facilities -- */

.facilcard { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--s3); }

.facilityshot {
  margin: 0 0 var(--s4);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.facilityshot img { width: 100%; aspect-ratio: 605 / 399; object-fit: cover; display: block; }
.facilityshot__credit {
  margin: 0;
  padding: 7px var(--s3);
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.facilcard__head { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); }
.facilcard__body { flex: 1 1 auto; min-width: 0; }
.facilcard__title { font-size: var(--fs-md); }
.facilcard__meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.facilcard__actions {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ---------------------------------------------------------------- sheet -- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(33, 37, 41, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheetfade 0.2s ease-in-out;
}
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
  animation: sheetup 0.25s ease-out;
}
.sheet__handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--border);
  margin: 0 auto var(--s4);
}
.sheet__head { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.sheet__title { flex: 1 1 auto; font-size: var(--fs-xl); }
.sheet__close {
  flex: none;
  width: var(--tap); height: var(--tap);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}
.sheet__close:hover { background: var(--surface); }
.sheet__actions { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.sheet__actions .btn { width: 100%; }

/* The weather alert: the notice in force, opened as a pop-up at launch.
   Its width follows the app column so it never overhangs the app bar. */
.sheet--alert { border-top: 4px solid #d17c00; max-width: 430px; }
.alert__signals { display: flex; gap: var(--s3); margin-bottom: var(--s3); }
.alert__signal {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px rgba(33, 37, 41, 0.12);
}
.alert__statement { font-size: var(--fs-md); font-weight: 700; }
.alert__text { font-size: var(--fs-md); }
.alert__advice {
  margin: var(--s3) 0 0;
  padding-left: 1.15em;
  display: grid;
  gap: var(--s2);
  font-size: var(--fs-sm);
}
.alert__source {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}

@keyframes sheetfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetup { from { transform: translateY(16px); } to { transform: translateY(0); } }

/* ---------------------------------------------------------------- toast -- */

.toast-root {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  pointer-events: none;
  padding: 0 var(--s4);
}
.toast {
  background: var(--fg);
  color: #fff;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-lg);
  max-width: 460px;
  animation: sheetup 0.2s ease-out;
}

/* ---------------------------------------------------------------- forms -- */

.field { margin-bottom: var(--s4); }
.field__label { display: block; font-weight: 700; margin-bottom: var(--s2); }
.field__help { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); }
.input, .textarea, select.input {
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  background: var(--bg);
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }

.radiolist { display: grid; gap: var(--s2); }
.radiolist label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg);
}
.radiolist label:hover { background: var(--surface); }
.radiolist input { width: 20px; height: 20px; accent-color: var(--accent); }
.radiolist label:has(input:checked) { border-color: var(--accent); background: var(--surface); }

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  font-size: var(--fs-sm);
}
.notice--warn { border-left-color: var(--danger); background: var(--danger-bg); color: #7a0c14; }
.notice--ok { border-left-color: var(--success); background: var(--success-bg); color: #14532a; }
.notice strong { display: block; margin-bottom: var(--s1); }

/* Report confirmation: submission status and the award are separate rows. */
.awardrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.awardrow:last-of-type { border-bottom: 0; }
.awardrow__label { font-size: var(--fs-sm); color: var(--muted); }
.awardrow__value {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.awardrow__value svg { width: 16px; height: 16px; color: var(--accent); }
.awardrow__value--ok { color: var(--success); }

.photopick {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 96px;
  padding: var(--s4);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.photopick:hover { background: var(--surface); border-color: var(--accent); }
.photopick svg { width: 32px; height: 32px; color: var(--accent); flex: none; }
.photopick__preview { width: 100%; border-radius: var(--radius); }
.photopick__preview img { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius); }

.stepbar {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.stepbar__item { flex: 1 1 0; height: 4px; border-radius: 4px; background: var(--border); }
.stepbar__item[data-state="done"], .stepbar__item[data-state="current"] { background: var(--accent); }
.stepbar__item[data-state="current"] { opacity: 0.55; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 0; }
.steps__num {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.steps__title { font-weight: 700; }
.steps__body { font-size: var(--fs-sm); color: var(--fg); }

/* Progress indicator across the three reporting steps. */
.steps--progress {
  display: flex;
  gap: var(--s2);
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
}
.steps__progress { flex: 1 1 0; }
.steps__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.steps__step:disabled { cursor: default; }
.steps__num {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
}
.steps__num svg { width: 15px; height: 15px; }
.steps__label { line-height: 1.25; }
.steps__progress[data-state="current"] .steps__num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.steps__progress[data-state="current"] .steps__label { color: var(--fg); font-weight: 700; }
.steps__progress[data-state="done"] .steps__num {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.steps__progress[data-state="done"] .steps__label { color: var(--fg); }

/* ------------------------------------------------------------- how to -- */

.howto { background: var(--surface); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); }
.howto__title { font-size: var(--fs-xl); margin-bottom: var(--s1); }
.howto__sub { color: var(--muted); margin-bottom: var(--s4); }

.speech {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
}
.speech::after {
  content: "";
  position: absolute;
  left: 28px; bottom: -9px;
  width: 14px; height: 14px;
  background: var(--bg);
  border-right: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ AR -- */

.journey {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--s4);
  background: #dbeaf3;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.journey__scene { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.journey--compact .journey__scene { aspect-ratio: 5 / 4; }
.journey__photo { width: 100%; height: 100%; object-fit: cover; }
.journey__scene::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(33, 37, 41, 0.12);
}
.journey__mascot {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 128px;
  height: auto;
  z-index: 2;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}
.journey__bubble {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  /* Clear the Map control in the top-right corner. */
  right: 64px;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  padding: var(--s3);
  text-align: center;
  font-weight: 700;
}
.journey__tools {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.journey__tool {
  width: var(--tap); height: var(--tap);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.journey__tool:hover { background: var(--surface); }
.journey__tool svg { width: 22px; height: 22px; }

.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.path {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 0 var(--s2);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  color: inherit;
}
.path:hover { background: var(--surface); }
.path__art { width: 100%; aspect-ratio: 1 / 1; display: block; background: #dbeaf3; }
.path__label { font-size: var(--fs-xs); font-weight: 700; padding: var(--s2) var(--s1) 0; line-height: 1.3; }
.path[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.path[aria-pressed="true"] .path__label { color: var(--accent); }

/* --------------------------------------------------------------- result -- */

.result { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: var(--s4); }
.result__head { padding: var(--s5) var(--s4); text-align: center; }
.result--correct .result__head { background: var(--success-bg); color: #14532a; }
.result--wrong .result__head { background: var(--danger-bg); color: #7a0c14; }
.result__icon { width: 56px; height: 56px; margin: 0 auto var(--s3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.result--correct .result__icon { background: var(--success); }
.result--wrong .result__icon { background: var(--danger); }
.result__icon svg { width: 30px; height: 30px; color: #fff; }
.result__title { font-size: var(--fs-xl); }
.result__score {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.result__body { padding: var(--s4); background: var(--bg); }
.result__body p { font-size: var(--fs-sm); }

/* ----------------------------------------------------------------- shop -- */
.shopgroup {
  margin-top: var(--s5);
}
.shopgroup__head {
  border-left: 4px solid var(--accent);
  padding: var(--s1) 0 var(--s1) var(--s3);
  margin-bottom: var(--s3);
}
.shopgroup:last-of-type .shopgroup__head { border-left-color: var(--link); }
.shopgroup__title { font-size: var(--fs-lg); }
.shopgroup__note { font-size: var(--fs-sm); color: var(--muted); margin: 2px 0 0; }
.shopgroup__balance {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin: var(--s1) 0 0;
}

.shopgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.shopitem {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--bg);
}
.shopitem__art {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shopitem__art svg { width: 60%; height: 60%; }
.shopitem__art img { width: 100%; height: 100%; object-fit: contain; }
.shopitem__name { font-weight: 700; font-size: var(--fs-sm); }
.shopitem__note { font-size: var(--fs-xs); color: var(--muted); }
.shopitem__cost {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}
.shopitem__cost--resilience { color: var(--accent); }
.shopitem__cost--game { color: var(--link); }
.shopitem .btn { width: 100%; }

/* ----------------------------------------------------------- collection -- */

.collectgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.collectcard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--s2);
  text-align: center;
  position: relative;
}
.collectcard__art {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--s2);
}
.collectcard__art img { width: 100%; height: 100%; object-fit: contain; }
.collectcard__name { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; }
.collectcard[data-locked="true"] .collectcard__art { background: #e3e5e7; }
.collectcard[data-locked="true"] .collectcard__art::after {
  content: "?";
  position: absolute;
  font-size: 28px;
  font-weight: 700;
  color: var(--muted);
}
.collectcard__lock {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  width: 22px; height: 22px;
  color: var(--muted);
}

.stylegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

/* Large preview of the selected character. */
.stylepreview {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.stylepreview__art {
  position: relative;
  width: 132px;
  height: 132px;
  flex: none;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stylepreview__art img { width: 108px; height: auto; }
.stylepreview__art[data-tone="rain"]::after,
.stylepreview__art[data-tone="lantern"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.stylepreview__art[data-tone="rain"]::after { background: rgba(4, 102, 159, 0.22); }
.stylepreview__art[data-tone="lantern"]::after { background: rgba(193, 18, 31, 0.16); }
.stylepreview__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.stylepreview__overlay svg { width: 62px; height: auto; margin-top: 4px; }
.stylepreview__meta { flex: 1 1 auto; min-width: 0; }
.stylepreview__label { font-size: var(--fs-xs); color: var(--muted); }
.stylepreview__name { font-size: var(--fs-lg); font-weight: 700; }
.stylecard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--s2);
  text-align: center;
  position: relative;
}
.stylecard__art {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--s2);
  position: relative;
}
.stylecard__art img { width: 78%; height: 78%; object-fit: contain; }
.stylecard__overlay { position: absolute; inset: 0; }
.stylecard__overlay svg { position: absolute; width: 44%; height: auto; }
.stylecard__overlay .ov-top { top: 2%; left: 28%; }
.stylecard__name { font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; }
.stylecard[data-locked="true"] { opacity: 0.6; }

.progress {
  height: 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress__bar { height: 100%; background: var(--accent); }

/* ----------------------------------------------------------- info corner -- */

.infocorner { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.infocorner__img { width: 100%; aspect-ratio: 605 / 399; object-fit: cover; }
.infocorner__body { padding: var(--s4); }
.infocorner__title { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.infocorner__facts { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.infocorner__facts li {
  display: flex;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.infocorner__facts li::before { content: "•"; color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------------- win-win -- */

.winin { display: grid; gap: var(--s3); }
.winin__col { background: var(--surface); border-radius: var(--radius); padding: var(--s4); }
.winin__col h3 { font-size: var(--fs-md); margin-bottom: var(--s2); }

/* ---------------------------------------------------------------- misc -- */

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--tap);
  border: 0;
  background: none;
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--s2);
  cursor: pointer;
}
.breadcrumb:hover { color: var(--link-hover); text-decoration: underline; }

.pagetitle { font-size: var(--fs-2xl); margin-bottom: var(--s2); }
.pagelede { color: var(--muted); margin-bottom: var(--s4); }

.empty {
  text-align: center;
  padding: var(--s6) var(--s4);
  color: var(--muted);
}

.footer {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.footer img { width: 150px; height: 25px; object-fit: contain; object-position: left center; margin-bottom: var(--s2); background: #fff; border-radius: 2px; padding: 2px 4px; }

.tick { width: 22px; height: 22px; color: var(--success); flex: none; }
.cross { width: 22px; height: 22px; color: var(--danger); flex: none; }

.pin { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* --------------------------------------------------------- vibrant pass -- */

/* Compact pill chips, as in the concept screens. */
.chip {
  min-height: 34px;
  padding: var(--s1) var(--s4);
  border-radius: var(--pill);
  border-color: var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--fg);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(18, 110, 130, 0.28);
}

/* Gold coin for every point figure. */
.coin { width: 18px; height: 18px; flex: none; }
.pointcard__value { display: flex; align-items: center; gap: var(--s2); }
.pointcard__value .coin { width: 24px; height: 24px; }

.result__score {
  background: var(--gold-soft);
  border-color: #f0cf87;
  color: #7a5300;
}
.result__score .coin { width: 20px; height: 20px; }

.shopitem__cost {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  background: var(--gold-soft);
  color: #7a5300;
  border-radius: var(--pill);
  padding: 2px var(--s2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shopitem__cost svg { width: 16px; height: 16px; }

/* Product cards: pale tinted art tiles, rounded like the concept. */
.shopitem {
  border-radius: 18px;
  border-color: #dbe6ee;
  box-shadow: 0 3px 12px rgba(33, 37, 41, 0.07);
}
.shopitem__art {
  background: linear-gradient(180deg, var(--sky-soft) 0%, var(--sky-tint) 100%);
  border-radius: 14px;
}
/* Product photographs sit on a white tile so the merchandise reads cleanly
   next to the tinted art used by the drawn items. */
.shopitem__art--photo {
  background: #fff;
  padding: 6px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.shopitem .btn { border-radius: var(--pill); }

/* Outcome cards carry a soft colour wash, correct in mint, wrong in rose. */
.result { border-radius: 20px; }
.result--correct .result__head {
  background: linear-gradient(160deg, #d8f3e3 0%, #b9e8cd 100%);
  color: #14603a;
}
.result--wrong .result__head {
  background: linear-gradient(160deg, #ffe3ec 0%, #ffc9da 100%);
  color: #8c1338;
}
.result--correct .result__icon { background: var(--mint-deep); }
.result--wrong .result__icon { background: var(--rose-deep); }
.result__title { font-size: var(--fs-2xl); }

/* Collection tiles. */
.collectcard { border-radius: 16px; border-color: #dbe6ee; }
.collectcard__art { background: linear-gradient(180deg, var(--sky-soft) 0%, var(--sky-tint) 100%); }
.collectcard[data-locked="true"] .collectcard__art {
  background: #eef1f4;
  position: relative;
}
.stylecard { border-radius: 16px; border-color: #dbe6ee; }
.stylecard__art { background: linear-gradient(180deg, #f4fbff 0%, var(--sky-soft) 100%); }

/* Active tab reads as a filled pill, as in the concept navigation. */
.tab[aria-current="page"] .tab__iconwrap {
  background: var(--accent);
  color: #fff;
}

/* Working progress bars get a gradient fill. */
.progress__bar {
  background: linear-gradient(90deg, var(--accent) 0%, #43b5b0 100%);
  border-radius: var(--pill);
}

/* Speech bubble used for Drainy's prompts. */
.bubble {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--s4);
}
.bubble::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  background: var(--bg);
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* Large character plate, as on the concept home and collection screens. */
.heroplate {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: linear-gradient(160deg, #f2fbff 0%, var(--sky-soft) 100%);
  border: 1px solid #d7e9f6;
  border-radius: 20px;
  padding: var(--s4);
  margin-bottom: var(--s4);
}
.heroplate img { width: 84px; height: auto; flex: none; }
.heroplate__text { flex: 1 1 auto; min-width: 0; }
.heroplate__title { font-size: var(--fs-lg); }
.heroplate__sub { font-size: var(--fs-sm); color: var(--muted); }

/* --------------------------------------------------------- larger view -- */

/* The application is a mobile interface. On a wider screen it is shown as a
   centred phone-width column rather than being re-laid out for desktop. */
@media (min-width: 560px) {
  body {
    background: #dfe8ec;
    align-items: center;
  }
  .appbar {
    width: 100%;
    max-width: 430px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  /* The notice bar is a child of the centred column like the app bar, so it
     is held to the same width instead of stretching to its text. */
  .noticebar {
    width: 100%;
    max-width: 430px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
  .appmain {
    max-width: 430px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: var(--bg);
  }
  .tabbar {
    max-width: 430px;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

/* --------------------------------------------------------------- chat -- */

.chat__launcher {
  position: fixed;
  right: var(--s4);
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 45;
  width: 56px;
  height: 56px;
  padding: 5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(33, 37, 41, 0.3);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Contain rather than crop, so the whole character fits the circle. */
.chat__launcher img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.chat__launcher:hover { background: var(--accent-hover); }
.chat__launcher[aria-expanded="true"] { background: var(--link); }
/* The launcher floats above the page, so it steps aside while a sheet is
   open instead of covering the sheet's actions. */
body.sheet-open .chat__launcher { visibility: hidden; }

.chat__panel {
  position: fixed;
  right: var(--s4);
  bottom: calc(138px + env(safe-area-inset-bottom));
  z-index: 45;
  width: min(340px, calc(100vw - 32px));
  height: min(440px, calc(100dvh - 190px));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(33, 37, 41, 0.28);
  overflow: hidden;
}
.chat__panel[hidden] { display: none; }

.chat__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  background: var(--accent);
  color: #fff;
}
.chat__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  object-position: top center;
  flex: none;
}
.chat__head div { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.chat__head strong { display: block; font-size: var(--fs-sm); }
.chat__head span { font-size: var(--fs-xs); opacity: 0.9; }
.chat__close {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat__close:hover { background: rgba(255, 255, 255, 0.3); }
.chat__close svg { width: 18px; height: 18px; }

.chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.chat__msg { display: flex; }
.chat__msg--user { justify-content: flex-end; }
.chat__bubble {
  max-width: 84%;
  padding: var(--s2) var(--s3);
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-line;
}
.chat__msg--user .chat__bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chat__bubble--typing { color: var(--muted); font-style: italic; }

.chat__suggest { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.chat__chip {
  min-height: 36px;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--accent);
  border-radius: 40px;
  background: var(--bg);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.chat__chip:hover { background: var(--accent); color: #fff; }

.chat__compose {
  flex: none;
  display: flex;
  gap: var(--s2);
  padding: var(--s3);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat__compose input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  background: var(--bg);
}
.chat__send {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat__send:hover { background: var(--accent-hover); }
.chat__send svg { width: 20px; height: 20px; }

/* --------------------------------------------------- flood information -- */

/* The map can show drainage facilities or flood locations, not both at
   once — the pins would crowd a phone screen. */
.segmented--mapmode { margin-bottom: var(--s3); }

/* The flood map fills the screen, like a mapping app. */
.deck__page--map { padding: 0; }
.mapwrap--full {
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The basemap is the government's own map service, drawn by Leaflet. */
.floodmap { position: absolute; inset: 0; z-index: 1; background: #e6e2d6; }
.floodmap .leaflet-container {
  background: transparent;
  font-family: var(--font);
  outline: none;
}
.flood-pin { background: none; border: 0; }
.flood-pin__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.flood-pin__dot svg { width: 16px; height: 16px; color: #fff; }

/* The layer switch floats over the map, like the chips in a mapping app. */
.mapchips {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  display: flex;
  gap: 8px;
}
.mapchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 40px;
  background: #ffffff;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.24);
  cursor: pointer;
}
.mapchip svg { width: 17px; height: 17px; flex: none; }
.mapchip--on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Zoom and location, stacked on the right as in a mapping app. */
.mapctl {
  position: absolute;
  right: 12px;
  top: 64px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(33, 37, 41, 0.3);
}
.mapctl button {
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: #ffffff;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mapctl button + button { border-top: 1px solid var(--border); }
.mapctl button:hover { background: var(--surface); }
.mapctl svg { width: 20px; height: 20px; }

/* The area the map is showing, and where the basemap comes from. */
.mapfoot {
  position: absolute;
  left: 12px;
  bottom: 16px;
  z-index: 1000;
  max-width: 62%;
}
/* The key to the pins, tucked under the layer switch. */
.mapkey {
  position: absolute;
  top: 62px;
  left: 12px;
  z-index: 1000;
  margin: 0;
  padding: 8px 11px;
  list-style: none;
  display: grid;
  gap: 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.24);
}
.mapkey__row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.mapkey__row i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
.mapattr {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Shown when the basemap tiles cannot be reached. */
.mapnotice {
  position: absolute;
  top: 124px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  max-width: 84%;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: #7a0c14;
  font-size: var(--fs-xs);
  text-align: center;
}

/* The place card for the location that was tapped. It stops short of the
   floating assistant button in the corner of the screen, and sits above
   the area label and the map credit. */
.mapcard {
  position: absolute;
  left: 12px;
  right: 84px;
  bottom: 58px;
  z-index: 1002;
  padding: var(--s3) var(--s4) var(--s4);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(33, 37, 41, 0.28);
}
.mapcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
}
.mapcard__title { font-size: var(--fs-md); }
.mapcard__close {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  margin: -10px -10px 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mapcard__close:hover { background: var(--surface); }
.mapcard__close svg { width: 18px; height: 18px; }
.mapcard__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--muted);
}
.mapcard__meta i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.mapcard__note { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}