/* Map: the site's rail, a panel (the map's key, gazetteer and index) and the map out to the window's edge.
   Drawn in Paper as "Maps · v2". Every rule is scoped to .mapMain; the site's tokens, type and title styles apply. */
:root { --amber: #A3601A; --muted: rgba(22, 20, 15, 0.58); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --amber: #F2BF68; --muted: rgba(243, 239, 230, 0.58); }
}
:root[data-theme="dark"] { --amber: #F2BF68; --muted: rgba(243, 239, 230, 0.58); }

.main.mapMain { padding: 0; max-width: none; height: 100dvh; display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  font-size: 15px; line-height: 22px; font-weight: 400; }
.mapMain .panel { overflow-y: auto; border-right: 1px solid var(--hairline); padding: 40px 15px 40px 24px; display: grid; gap: 40px;
  align-content: start; min-width: 0; scrollbar-gutter: stable; }   /* the scrollbar's 9px lane is kept inside the 24px edge */
/* the page's title and subtitle at the system's smaller sizes (as on phones): beside a full-screen map the full sizes overpower it */
.mapMain .panel h1 { font-size: 40px; line-height: 44px; text-wrap: balance; }
.mapMain .panel .lede { margin-top: 16px; font-size: 20px; line-height: 28px; }
.mapMain .map { position: relative; overflow: hidden; touch-action: none; min-width: 0; cursor: grab; }
.mapMain .map.dragging { cursor: grabbing; }
.mapMain .map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scrollbars: a thin square thumb on no track, faint until the pointer is over what scrolls */
.mapMain ::-webkit-scrollbar { width: 9px; height: 9px; }
.mapMain ::-webkit-scrollbar-track, .mapMain ::-webkit-scrollbar-corner { background: transparent; }
.mapMain ::-webkit-scrollbar-thumb { background: var(--hairline); background-clip: padding-box; border: 3px solid transparent; }
.mapMain :hover::-webkit-scrollbar-thumb { background-color: var(--hairline-strong); }
.mapMain ::-webkit-scrollbar-thumb:hover, .mapMain ::-webkit-scrollbar-thumb:active { background-color: var(--muted); }
@supports not selector(::-webkit-scrollbar) { .mapMain * { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; } }

.mapMain .mono { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 13px; line-height: 18px; }
.mapMain .muted { color: var(--muted); }
.mapMain .num { color: var(--ink-2); }
.mapMain .rank { color: var(--muted); }
.mapMain h2 { font-weight: 400; font-size: 15px; line-height: 22px; letter-spacing: 0; margin: 0; }
.mapMain section { display: grid; gap: 10px; min-width: 0; }
.mapMain .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 6px; }
.mapMain button, .mapMain input { font: inherit; color: inherit; }
.mapMain :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* lenses: square-and-name rows; the chosen one shows its key */
.mapMain .lenses { display: grid; }
.mapMain .lens { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; }
.mapMain .lens[hidden] { display: none; }
.mapMain .lens input { position: absolute; opacity: 0; pointer-events: none; }
.mapMain .lens .box { width: 12px; height: 12px; border: 1px solid var(--hairline-strong); margin-top: 3.5px; }   /* on the capitals of the 15/22 name */
.mapMain .lens:has(input:checked) .box { background: var(--fill); border-color: var(--fill); }
.mapMain .lens:has(input:focus-visible) .box { outline: 2px solid var(--signal); outline-offset: 2px; }
.mapMain .lens .what { grid-column: 2; color: var(--muted); }
.mapMain .lens:not(:has(input:checked)) .what, .mapMain .lens:not(:has(input:checked)) .key { display: none; }
.mapMain .key { grid-column: 2; display: flex; gap: 4px 12px; flex-wrap: wrap; margin-top: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mapMain .key span { display: inline-flex; align-items: center; gap: 5px; }
.mapMain .key i { width: 14px; height: 10px; background: var(--signal); display: inline-block; position: relative; top: -0.1em; }
.mapMain .key i.amber { background: var(--amber); }

/* timeline */
.mapMain .time .now { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.mapMain .time .year { font-weight: 300; font-size: 28px; line-height: 34px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.mapMain .bars { position: relative; height: 84px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 2px; }
.mapMain .bars div { --bar: color-mix(in srgb, var(--ink) 28%, var(--ground)); background: var(--bar); min-height: 1px; }
.mapMain .bars div.on { --bar: var(--fill); }
.mapMain .bars div.hi { --bar: var(--signal); }
.mapMain .bars div.soon { --bar: color-mix(in srgb, var(--ink) 55%, var(--ground)); }
.mapMain .bars div.soon.off { --bar: color-mix(in srgb, var(--ink) 28%, var(--ground)); }
/* the slider sits over the bars unseen, with no native track or thumb that an engine might still paint */
.mapMain .bars input { position: absolute; inset: -6px 0; width: 100%; height: calc(100% + 12px); opacity: 0; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: transparent; }
.mapMain .bars input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 1px; background: transparent; }
.mapMain .bars input::-moz-range-thumb { width: 1px; height: 1px; border: 0; background: transparent; }
.mapMain .bars:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 4px; }
.mapMain .axis { display: grid; grid-template-columns: repeat(23, 1fr); gap: 2px; color: var(--muted); }
.mapMain .axis span { white-space: nowrap; justify-self: center; }
.mapMain .axis span:first-child { justify-self: start; }
.mapMain .axis span:last-child { justify-self: end; }
.mapMain .controls { display: grid; gap: 14px; justify-items: start; margin-top: 6px; }
.mapMain .btn { border: 1px solid var(--hairline-strong); background: var(--ground); padding: calc(6px + 0.1em) 12px calc(6px - 0.1em); cursor: pointer; font-size: 15px; line-height: 20px; }   /* capitals centred */
.mapMain .btn:hover { border-color: var(--ink); }
.mapMain .panel .btn { background: transparent; }
.mapMain .checks { display: flex; gap: 6px 20px; flex-wrap: wrap; flex-direction: row; border: 0; padding: 0; margin: 0; }
.mapMain .check { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; line-height: 22px; cursor: pointer; }
.mapMain .check input { width: auto; height: auto; accent-color: var(--fill); margin: 0; position: relative; top: -0.1em; }

/* find a game: the site's search field */
.mapMain .find .search { margin-top: 0; max-width: none; }
.mapMain .results { display: grid; }
.mapMain .results button, .mapMain .gl button { all: unset; display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); cursor: pointer; min-width: 0; }
.mapMain .results button:hover, .mapMain .gl button:hover, .mapMain .results button.active { background: var(--raised); }
.mapMain .results button:focus-visible, .mapMain .gl button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.mapMain .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mapMain .try { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); }
.mapMain .try[hidden] { display: none; }
.mapMain .try button { all: unset; cursor: pointer; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mapMain .try button:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* a game or a region */
.mapMain .detail { gap: 14px; }
.mapMain .detail:empty { display: none; }
.mapMain .detail h3 { font-weight: 350; font-size: 24px; line-height: 26px; letter-spacing: -0.02em; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.mapMain .facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 16px; margin: 0; }
.mapMain .facts dt { color: var(--muted); }
.mapMain .facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mapMain .gl { display: grid; }
.mapMain .gl button { grid-template-columns: 22px 1fr auto auto; }
.mapMain .crumbs { display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.mapMain .crumbs button { all: unset; cursor: pointer; }
.mapMain .crumbs button:hover { color: var(--ink); }
.mapMain .store { justify-self: start; text-decoration: underline 1px; text-underline-offset: 3px; }
.mapMain .note { color: var(--muted); margin: 0; text-wrap: pretty; }
.mapMain .about { border-top: 1px solid var(--hairline-strong); }
.mapMain .about summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 0; cursor: pointer; color: var(--muted); }
.mapMain .about summary::-webkit-details-marker { display: none; }
.mapMain .about summary::after { content: "+"; font-family: var(--mono); font-size: 13px; }
.mapMain .about[open] summary::after { content: "\2212"; }
.mapMain .about summary:hover, .mapMain .about[open] summary { color: var(--ink); }
.mapMain .about .note { margin-top: 10px; }

/* on the map */
.mapMain .tip { position: absolute; pointer-events: none; background: var(--ground); border: 1px solid var(--hairline-strong); padding: 6px 10px; max-width: 280px; display: grid; gap: 1px; z-index: 3; }
.mapMain .tip b { font-weight: 400; overflow-wrap: anywhere; }
.mapMain .tip span { font-variant-numeric: tabular-nums; }
.mapMain .mapTop { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; gap: 8px; }
.mapMain .sq { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: var(--ground); border: 1px solid var(--hairline-strong); font-size: 18px; line-height: 20px; cursor: pointer; }
.mapMain .sq:hover { border-color: var(--ink); }
.mapMain .reading { display: flex; padding: 3px; background: var(--ground); border: 1px solid var(--hairline-strong); }
.mapMain .reading[hidden] { display: none; }
/* the chosen reading is a solid fill; the capitals sit in the middle of each box */
.mapMain .reading button { all: unset; cursor: pointer; color: var(--muted); white-space: nowrap; font-size: 15px; line-height: 20px; padding: calc(6px + 0.1em) 12px calc(6px - 0.1em); }
.mapMain .reading button:hover { color: var(--ink); }
.mapMain .reading button[aria-pressed="true"] { background: var(--fill); color: var(--ground); cursor: default; }
.mapMain .reading button[aria-busy="true"] { background: var(--raised); }
.mapMain .zoom { position: absolute; right: 14px; bottom: 14px; display: grid; grid-auto-flow: column; z-index: 2; }
.mapMain .zoom .btn { min-width: 40px; text-align: center; padding: calc(6px + 0.1em) 10px calc(6px - 0.1em); }
.mapMain .zoom .btn + .btn { border-left: 0; }
.mapMain .scale { position: absolute; left: 14px; bottom: 16px; z-index: 2; pointer-events: none; }
.mapMain .status { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; padding: 24px; z-index: 4; background: var(--ground); }
.mapMain .status .bar { width: 220px; height: 1px; background: var(--hairline-strong); margin: 0 auto; }
.mapMain .status .bar i { display: block; height: 1px; width: 0; background: var(--ink); }

/* the full map: the rail becomes a spine (the arrow back, the wordmark turned), the panel folds away */
.side .spine { display: none; }
.shell.mapFull { grid-template-columns: 56px minmax(0, 1fr); }
.mapFull .side { padding: 14px 7px; align-items: center; }
.mapFull .side > :not(.spine) { display: none; }
.mapFull .side .spine { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spine .sq { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--hairline-strong); font-size: 18px; line-height: 20px; cursor: pointer; }
.spine .sq:hover { border-color: var(--ink); }
.spine .sq:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.spineMark { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 350; font-size: 26px; line-height: 30px; letter-spacing: -0.02em; color: var(--ink-2); }
.mapFull .main.mapMain { grid-template-columns: minmax(0, 1fr); }
.mapFull .mapMain .panel { display: none; }
.mapFull .mapMain .collapse { display: none; }

@media (max-width: 900px) {
  .main.mapMain { display: flex; flex-direction: column; height: auto; }
  .mapMain .map { height: 64vh; min-height: 360px; order: -1; border-bottom: 1px solid var(--hairline); }
  .mapMain .panel { border-right: 0; overflow: visible; padding: 28px 20px 80px; }
  .mapMain .collapse { display: none; }
}
@media (max-width: 640px) { .mapMain .panel { padding: 24px 16px 80px; } }