/* ============================================================
   New Austin 100% — Red Dead Redemption completion checklist
   Dark game-HUD aesthetic. No gradients, hairline borders.
   ============================================================ */

:root {
  --bg:        #111214;
  --panel:     #1A1C20;
  --panel-2:   #1F2126;
  --text:      #EDEAE2;
  --muted:     #868D98;
  --accent:    #C93B50;
  --accent-hi: #E8556B;
  --accent-rgb: 201,59,80;
  --line:      #2A2D33;

  /* One neutral steel stands in for every region. Red Dead Redemption's
     checklist spans twelve regions — too many to hand each an identity hue
     without the HUD reading as a paint chart — so the label does the
     identifying. --steel-t is the lifted text tint used on the dark panel;
     the base is the chip dot / border colour. */
  --steel:   #5B6270;
  --steel-t: #A7AFBC;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Anton", "Arial Narrow", Impact, var(--sans);

  --radius: 6px;
  --wrap: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute must win over any `display` this file sets. The UA's
   `[hidden] { display: none }` is a user-agent rule, so any author rule setting
   `display` on the same element beats it regardless of specificity; that is how
   an undismissable modal shipped on the hub. `.results[hidden]` and
   `.mbar-n[hidden]` below are the narrow patches this replaces. */
[hidden] { display: none !important; }


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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--accent); color: #111214; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius); transition: top .15s;
}
.skip-link:focus { top: 12px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hi); }

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

/* ---------------- HUD ---------------- */

.hud {
  position: sticky; top: 0; z-index: 40;
  background: rgba(17,18,20,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.hud-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; padding-top: 14px; padding-bottom: 14px;
  flex-wrap: wrap;
}

.hud-main { display: flex; align-items: center; gap: 18px; min-width: 0; }

.hud-pct {
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 68px);
  line-height: .9;
  color: var(--accent);
  transform: skewX(-6deg);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  text-align: left;
}

.hud-meta { min-width: 0; }

.hud-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: .085em;
  text-transform: uppercase;
  margin: 0 0 2px;
  transform: skewX(-6deg);
}

.hud-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.page-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; }
.page-nav a, .page-nav span {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;
  white-space: nowrap;
}
.page-nav a:hover { color: var(--text); border-color: #3A3E46; }
.page-nav .here { color: #111214; background: var(--accent); border-color: var(--accent); font-weight: 600; }

.hud-sub {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hud-sub .dot { color: var(--line); }
.hud-sub .num { color: var(--text); font-weight: 600; }

.hud-bar {
  width: min(280px, 46vw); height: 4px;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.hud-bar > span {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  transition: width .28s ease;
}

.hud-counters { display: flex; gap: 10px; flex-wrap: wrap; }

.counter {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--line));
  border-radius: var(--radius);
  padding: 8px 12px 8px 11px;
  min-width: 158px;
}
.counter-label {
  display: block;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.counter-val {
  font-family: var(--display);
  font-size: 19px; line-height: 1.15;
  letter-spacing: .04em;
  transform: skewX(-6deg);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.counter-val .of { color: var(--muted); }
.counter.full .counter-val { color: var(--accent); }
.counter-pip {
  width: 10px; height: 10px; flex: none;
  background: var(--ct, var(--muted));
  box-shadow: 0 0 0 3px rgba(255,255,255,.03);
}

.counter.tick { animation: tick .5s ease; }
@keyframes tick {
  0%   { background: rgba(var(--accent-rgb),.22); border-color: var(--accent); }
  40%  { background: rgba(var(--accent-rgb),.12); border-color: var(--accent); }
  100% { background: var(--panel); border-color: var(--line); }
}
.counter.tick .counter-val { animation: tickval .5s ease; }
@keyframes tickval {
  0%   { color: var(--accent); transform: skewX(-6deg) translateY(-2px); }
  100% { color: var(--text); transform: skewX(-6deg) translateY(0); }
}

/* ---------------- Panels ---------------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 20px 0;
}

main.wrap { padding-bottom: 40px; }

/* ---------------- Controls ---------------- */

.controls { padding: 4px 0 0; }

.toolrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.field { position: relative; display: flex; align-items: center; }

.search-field { flex: 1 1 260px; min-width: 200px; }
.search-ico {
  position: absolute; left: 11px; color: var(--muted); display: flex; pointer-events: none;
}

input[type="search"], select {
  width: 100%;
  background: #141518;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  padding: 9px 12px;
  border-radius: var(--radius);
}
input[type="search"] { padding-left: 34px; }
input[type="search"]::placeholder { color: #6C737D; }
input[type="search"]:focus, select:focus { border-color: var(--accent); }
select { padding-right: 28px; cursor: pointer; }

.sort-mobile { display: none; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 38px; height: 21px; background: #26282D; border: 1px solid var(--line);
  border-radius: 4px; position: relative; transition: background .15s, border-color .15s;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
  background: var(--muted); border-radius: 2px; transition: transform .15s, background .15s;
}
.switch input:checked + .switch-track { background: rgba(var(--accent-rgb),.2); border-color: var(--accent); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(17px); background: var(--accent); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.switch input:checked ~ .switch-label { color: var(--text); }

.tool-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.btn {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text);
  background: #202329;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: #282C33; border-color: #3A3E46; }
.btn-danger:hover { color: #FF8A75; border-color: #6E3A31; }
.btn-accent { background: var(--accent); color: #111214; border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #111214; }

/* chips */
.chipgroup { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chipgroup:last-child { border-bottom: 0; }

.chipgroup-head {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap;
}
.chipgroup-title {
  margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.chipgroup-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase;
}
.linkbtn:hover { color: var(--accent); }
.sep { color: var(--line); font-size: 11px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #17181C;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--sans); font-size: 13px;
  padding: 7px 11px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.chip:hover { background: var(--panel-2); color: var(--text); }
.chip[aria-pressed="true"] { color: var(--text); background: var(--panel-2); border-color: #3A3E46; }
.chip[aria-pressed="false"] { opacity: .5; }
.chip[aria-pressed="false"] .chip-count { opacity: .8; }

.chip-count {
  font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums;
  color: var(--muted); letter-spacing: -.01em;
}
.chip.done .chip-count { color: var(--accent); }
.chip-dot { width: 8px; height: 8px; flex: none; background: var(--ct, var(--muted)); }

.chipgroup[data-group="region"] .chip { --ct: var(--steel); }
.chipgroup[data-group="region"] .chip[aria-pressed="true"] { --ct: var(--steel-t); }

/* Twelve region chips run well past two rows on a narrow window. Cap the list
   at roughly three rows and let it scroll rather than push the table
   off-screen — kept from San Andreas, it costs nothing when they all fit. */
.chipgroup[data-group="region"] .chips {
  max-height: 122px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3A3E46 transparent;
  padding-right: 2px;
}
.chipgroup[data-group="region"] .chips::-webkit-scrollbar { width: 8px; }
.chipgroup[data-group="region"] .chips::-webkit-scrollbar-thumb {
  background: #3A3E46; border-radius: 4px;
}
.chipgroup[data-group="region"] .chips::-webkit-scrollbar-track { background: transparent; }

/* ---------------- Table ---------------- */

.table-panel { padding: 0; overflow: hidden; }

.table-meta {
  display: flex; align-items: baseline; gap: 6px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.table-meta .num { color: var(--text); font-size: 13px; }

.table-scroll { overflow-x: auto; }

.checklist-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.checklist-table th {
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #16181B;
}
.checklist-table th.c-found { padding: 12px 8px 12px 18px; }
.checklist-table th.c-info  { padding: 12px 18px 12px 14px; }

.c-found { width: 76px; }
.c-name  { width: 24%; }
.c-cat   { width: 15%; }
.c-reg   { width: 13%; }

.sortbtn {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 12px 14px;
  text-align: left;
}
.sortbtn:hover { color: var(--text); }
.arrow { width: 8px; opacity: 0; }
.arrow::before { content: "\25B2"; font-size: 7px; }
th[aria-sort="ascending"]  .sortbtn { color: var(--accent); }
th[aria-sort="descending"] .sortbtn { color: var(--accent); }
th[aria-sort="ascending"]  .arrow { opacity: 1; }
th[aria-sort="descending"] .arrow { opacity: 1; transform: rotate(180deg); }

.checklist-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background .12s, opacity .12s;
}
.checklist-table tbody tr:last-child { border-bottom: 0; }
.checklist-table tbody tr:hover { background: var(--panel-2); }
.checklist-table tbody tr.is-hidden { display: none; }

.checklist-table td {
  padding: 14px;
  vertical-align: top;
}
.checklist-table td.c-found { padding-left: 18px; padding-right: 8px; }
.checklist-table td.c-info  { padding-right: 18px; }

/* checkbox */
.cb-wrap { display: inline-flex; align-items: center; }
.cb {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.5px solid #3D424B;
  border-radius: 3px;
  background: #141518;
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.cb:hover { border-color: var(--muted); }
.cb:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14), 0 0 10px rgba(var(--accent-rgb),.25);
}
.cb:checked::after {
  content: "";
  position: absolute; left: 6.5px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid #111214;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(43deg);
}

tr.done { opacity: .62; }
tr.done:hover { opacity: .85; }
tr.done .item-title { text-decoration: line-through; color: var(--muted); text-decoration-thickness: 1px; }

.item-title { font-weight: 500; line-height: 1.4; }

.pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px;
  vertical-align: -5px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted);
  opacity: 0;
  transition: color .12s, border-color .12s, opacity .12s;
}
.pin:hover { color: var(--accent); border-color: #3A3E46; }
tr:hover .pin, .pin:focus-visible { opacity: 1; }
@media (hover: none) { .pin { opacity: 1; } }
tr.done .pin { opacity: 0; }
tr.done:hover .pin, tr.done .pin:focus-visible { opacity: 1; }

.tag {
  display: inline-block;
  font-size: 12px; line-height: 1.35;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #17181C;
  white-space: nowrap;
}
.tag-cat { color: #B9BEC7; }

.tag-region { color: var(--steel-t); background: rgba(91,98,112,.16); border-color: rgba(91,98,112,.5); }

/* info cell */
.info-cell { display: flex; gap: 10px; align-items: flex-start; }
.info-body { flex: 1 1 auto; min-width: 0; color: #C7CBD2; font-size: 13.5px; }
.info-body.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.2em; /* fallback clamp for engines without -webkit-line-clamp */
}
.info-body > *:first-child { margin-top: 0; }
.info-body > *:last-child  { margin-bottom: 0; }
.info-body p { margin: 0 0 .55em; }
.info-body ul, .info-body ol { margin: .35em 0 .7em; padding-left: 1.2em; }
.info-body li { margin: .18em 0; }
.info-body strong { color: var(--text); font-weight: 600; }
.info-body em { color: #D6D9DE; }
.info-body a { color: var(--accent); }
.info-body br { line-height: 1; }
.info-empty { color: #5F656E; font-family: var(--mono); font-size: 13px; }

.chev {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); cursor: pointer;
  transition: color .12s, border-color .12s, transform .15s;
}
.chev:hover { color: var(--accent); border-color: #3A3E46; }
.chev svg { transition: transform .15s ease; }
tr.expanded .chev svg { transform: rotate(90deg); }

/* empty state */
.empty { padding: 44px 18px 50px; text-align: center; }
.empty p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(14px);
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  color: var(--text); padding: 11px 16px; border-radius: var(--radius);
  font-size: 13.5px; z-index: 70;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* footer */
.foot {
  color: #666C75; font-size: 12.5px;
  padding: 8px 2px 0;
}
.foot p { margin: 0 0 4px; }
.foot code { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .hud-inner { gap: 16px; }
  .counter { min-width: 0; flex: 1 1 auto; }
  .hud-counters { width: 100%; }
}

@media (max-width: 820px) {

  /* These chips wrapped into a stack at phone widths, which on Vice City made the
     sticky header 571px of a 667px screen. One scrollable row instead - nothing is
     lost, and the clipped next chip is the affordance. */
  .hud-counters {
    flex: 1 1 100%;
    min-width: 0;              /* without this the row overflows the page instead of scrolling */
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .counter { flex: 0 0 auto; }
  .hud-counters::-webkit-scrollbar { height: 3px; }
  .hud-counters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  body { font-size: 14.5px; }
  .wrap { padding: 0 12px; }
  .sort-mobile { display: flex; flex: 1 1 150px; }
  .tool-actions { margin-left: 0; width: 100%; }
  .tool-actions .btn { flex: 1 1 auto; }

  .table-scroll { overflow-x: visible; }
  .checklist-table, .checklist-table tbody, .checklist-table tr, .checklist-table td { display: block; width: auto; }
  .checklist-table thead { display: none; }
  .checklist-table { table-layout: auto; }

  .checklist-table tbody tr {
    position: relative;
    padding: 14px 14px 14px 52px;
    border-bottom: 1px solid var(--line);
  }
  .checklist-table td { padding: 0; }
  .checklist-table td.c-found {
    /* offset by half the 44px pad so the 22px box still sits at 14/15 */
    position: absolute; left: 3px; top: 4px; padding: 0;
  }
  /* the 22px checkbox alone is far under the 44px minimum tap target */
  .cb-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; cursor: pointer;
  }
  .checklist-table td.c-name { font-size: 15px; margin-bottom: 8px; }
  .checklist-table td.c-cat  { display: inline-block; margin: 0 6px 8px 0; }
  .checklist-table td.c-reg  { display: inline-block; margin: 0 0 8px 0; }
  .checklist-table td.c-info { padding: 0; }

  /* iOS Safari zooms the page on focus for any field under 16px */
  input[type="search"], select { font-size: 16px; }

  /* 11.5px text is a ~15px tap target */
  .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
}

@media (max-width: 480px) {
  .hud-pct { font-size: 40px; }
  .counter { padding: 7px 9px; }
  .counter-label { font-size: 9.5px; letter-spacing: .08em; }
  .counter-val { font-size: 16px; }
}

/* ---------------- Mobile shell ---------------- */

/* The bar, scrim and sheets are built by mobile.js and live at the end of
   <body>. Hidden by default so desktop is byte-for-byte unaffected. */
.mobile-shell { display: none; }

/* Deliberately after the 480px block: the condensed header has to win over
   the .hud-pct font-size set there. Everything below is mobile-only. */
@media (max-width: 820px) {

  :root { --mbar-h: 68px; }

  /* --- condensed header: two rows, ~70px instead of 171px --- */
  .hud-inner {
    padding-top: 8px; padding-bottom: 8px;
    gap: 4px 10px;
    align-items: center;
    justify-content: flex-start;
  }
  /* Flatten the wrappers so title/nav/count/percent/bar become siblings that
     can be ordered into two rows. Nothing is moved in the DOM to do this. */
  .hud-main, .hud-meta, .page-nav { display: contents; }

  .hud-title-row { order: 1; flex: 1 1 100%; flex-wrap: nowrap; gap: 8px; min-width: 0; }
  .hud-title {
    order: 0; flex: 1 1 auto; min-width: 0;
    margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: .07em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .page-nav > :first-child { order: -1; }  /* back link, ahead of the title */
  .page-nav .here { display: none; }       /* you are already on this page */
  .page-nav a { padding: 3px 7px; font-size: 10px; }

  .hud-sub { order: 2; flex: 0 0 auto; margin: 0; gap: 0; }
  .hud-sub > span:not(.num) { display: none; }  /* separator and game name */
  .hud-sub .num { font-size: 12.5px; }
  .hud-pct { order: 3; flex: 0 0 auto; font-size: 15px; line-height: 1.2; min-width: 0; }
  .hud-bar { order: 4; flex: 1 1 auto; width: auto; }

  /* The per-borough numbers are already on the region chips, and this strip is
     what made the header tall. Desktop still uses it — hidden, never removed. */
  .hud-counters { display: none; }

  /* --- controls panel, once the sheet has taken its contents --- */
  body.mobile-ui .controls { padding: 0; }
  body.mobile-ui .controls .toolrow { border-bottom: 0; }

  /* --- bottom bar --- */
  .mobile-shell { display: block; }
  /* Scoped to the class so the page still ends sensibly if mobile.js is absent. */
  body.mobile-ui main.wrap { padding-bottom: calc(var(--mbar-h) + 18px); }

  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 56;
    display: flex; align-items: center; gap: 10px;
    background: rgba(17,18,20,.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    padding: 10px 12px max(14px, env(safe-area-inset-bottom));
  }
  .mbar-search, .mbar-filter {
    min-height: 44px; display: flex; align-items: center;
    background: #141518; border: 1px solid var(--line); border-radius: 22px;
    padding: 0 15px; font-family: var(--sans); cursor: pointer;
  }
  .mbar-search { flex: 1 1 auto; min-width: 0; gap: 9px; color: #6C737D; font-size: 15px; text-align: left; }
  .mbar-search-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbar-filter {
    flex: none; gap: 8px; color: var(--text);
    font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  }
  .mbar-search[aria-expanded="true"], .mbar-filter[aria-expanded="true"] {
    color: var(--accent); border-color: var(--accent);
  }
  .mbar-n {
    font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.5;
    background: var(--accent); color: #111214; border-radius: 8px; padding: 0 5px;
  }
  .mbar-n[hidden] { display: none; }

  /* --- scrim + sheets --- */
  .mscrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
    touch-action: none;  /* iOS will scroll the page through a plain overlay */
  }
  .mscrim.on { opacity: 1; pointer-events: auto; }

  .msheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 74%;                 /* the list stays visible behind it */
    display: flex; flex-direction: column;
    background: var(--panel);
    border-top: 1px solid #3A3E46;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 44px rgba(0,0,0,.6);
    transform: translateY(101%);
    visibility: hidden;
    /* visibility flips only once the slide-out has finished, which is also
       what keeps a closed sheet's controls out of the tab order. */
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;
  }
  .msheet.on {
    transform: translateY(0); visibility: visible;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s;
  }

  .msheet-grab { flex: none; width: 36px; height: 4px; border-radius: 2px; background: #3A3E46; margin: 9px auto 4px; }
  .msheet-head {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 2px 14px 6px; border-bottom: 1px solid var(--line);
  }
  .msheet-title {
    flex: 1 1 auto; margin: 0;
    font-family: var(--display); font-weight: 400; font-size: 15px;
    letter-spacing: .11em; text-transform: uppercase; transform: skewX(-6deg);
  }
  .msheet-done {
    flex: none; min-height: 44px; padding: 0 6px;
    display: inline-flex; align-items: center;
    background: none; border: 0; cursor: pointer;
    color: var(--muted); font-family: var(--sans);
    font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  }
  .msheet-done:hover { color: var(--accent); }
  .msheet-body {
    /* min-height:0 is load-bearing: without it this flex item refuses to
       shrink below its content height and shoves .msheet-foot off screen. */
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 12px 14px 18px;
  }
  /* Pinned actions row — never scrolls, so Reset is on screen for any pane. */
  .msheet-foot {
    flex: none; border-top: 1px solid var(--line);
    padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  }
  .mnote { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
  .mrule { height: 1px; background: var(--line); margin: 14px 0; }

  /* Sticky, because the switcher has to stay reachable while a long chip pane
     scrolls — 12 categories already overflow this body, Vice City has 21, and
     scrolling the pane used to carry the tabs off the top with no way back.
     Sticky rather than a pinned sibling: it costs none of the body's height.
     The background must be the opaque sheet surface (chips pass under it), and
     the 14px gap below moves onto the panes so no transparent strip is pinned
     along with it. */
  .mseg {
    display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
    position: sticky; top: 0; z-index: 1; background: var(--panel);
  }
  .mseg ~ .mpane { margin-top: 14px; }
  .mseg button {
    flex: 1 1 0; min-height: 44px;
    background: none; border: 0; cursor: pointer;
    color: var(--muted); font-family: var(--sans);
    font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  }
  .mseg button[aria-selected="true"] { background: #23262C; color: var(--text); }

  /* Re-parented controls: drop the panel chrome they were laid out with. */
  .msheet .search-field { width: 100%; }
  .msheet .chipgroup { padding: 0; border-bottom: 0; }
  /* Any desktop height-cap on a chip list becomes a scroller inside the sheet's
     own scroller once the group is re-parented. Neutralise every variant - the
     folders express the cap with different selectors. Kept identical in all five
     folders even where it is currently a no-op, so the guard travels with the
     pattern when one is ported from another. */
  .msheet .chipgroup[data-group="region"] .chips,
  .msheet .chipgroup[data-group="category"] .chips,
  .msheet .chips-scroll {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  .msheet .chipgroup-title {
    /* the segmented control already names the group */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .msheet .chip { min-height: 44px; padding: 0 12px; }
  .msheet .switch { min-height: 44px; }
  .msheet .switch-label { font-size: 14px; }
  .msheet .tool-actions { width: 100%; margin-left: 0; gap: 8px; }
  .msheet .tool-actions .btn { flex: 1 1 0; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .counter.tick { outline: 2px solid var(--accent); }
}

/* ---------------- Account sync indicator (spec 10.1) ---------------- */

/* SITE CHROME, NOT THE GAME. Waypoint's violet, never var(--accent): colour
   alone should tell you whether you are looking at Waypoint or at a game.
   Declared on the element rather than in :root so the game's token block stays
   the game's and nothing else in the sheet can pick these up by accident. */
.wp-sync {
  --wp: #8A7CFF;
  --wp-problem: #FF8A75;          /* the tint .btn-danger:hover already uses */
  display: none;
}

/* The PRESENCE of data-state is what reveals the row, and sync.js sets it only
   when there is something to say. Under file:// there is no account to sign in
   to, so it is never set and the page keeps exactly the height it has today. */
.wp-sync[data-state] {
  display: flex;
  align-items: center;
  min-height: 22px;   /* CONSTANT in all four states. Synced, Syncing, Problem
                         and Sign in are different lengths; inline they moved
                         the head by ~20px on one extra character, which is why
                         this is its own row. Do not make the height content-led. */
  margin-top: 8px;
}

.wp-sync-face {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 22px; padding: 0;
  background: none; border: 0;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
/* The 44px touch target is grown OUTSIDE layout so the visible box stays 22px:
   -11px on each of four sides of a 22px box is 44px. Same arithmetic CLAUDE.md
   already records for td.c-found. Do not tidy it back. */
.wp-sync-face::after { content: ""; position: absolute; inset: -11px; }

/* Interactive only when actionable: sync.js emits a <button> in Problem and a
   plain <span> in the two states that offer nothing. */
button.wp-sync-face { cursor: pointer; }
button.wp-sync-face:hover, a.wp-sync-face:hover { color: var(--text); }

.wp-sync-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wp); }
.wp-sync[data-state="problem"] .wp-sync-dot { background: var(--wp-problem); }
/* Signed out reads as an outline: present, but nothing is being carried. */
.wp-sync[data-state="signedout"] .wp-sync-dot {
  background: none; box-shadow: inset 0 0 0 1.5px var(--wp);
}

/* THE ONLY ANIMATED PROPERTY ON A GAME PAGE, on one 7px dot. No will-change:
   map.css spends a paragraph explaining that the marker pane is the single
   element in this site allowed to take one, and a second promoted layer would
   be paid on every frame of every gesture. prefers-reduced-motion is already
   handled by the global block earlier in this file. */
@keyframes wp-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
.wp-sync[data-state="syncing"] .wp-sync-dot {
  animation: wp-sync-pulse 1.1s ease-in-out infinite;
}

/* Deliberately last in the file, after both the 480px block and the mobile
   shell's own 820px block. Those flatten .hud-meta to display:contents, which
   turns this row into an unordered flex child of .hud-inner and drops it ABOVE
   the title -- the same trap the .hud-note rule was written for. An explicit
   order puts it back after the progress bar and keeps it INLINE on the second
   row, which costs the condensed 63px header about 3px instead of 30. */
@media (max-width: 820px) {
  .wp-sync[data-state] { order: 5; flex: 0 0 auto; margin-top: 0; }
}