/* The choice map. Reuses the game's colours from ../style.css. */
html, body.mapbody { height: auto; min-height: 100%; }
body.mapbody { overflow-y: auto; overscroll-behavior: auto; background: var(--ink); }
.mappage { max-width: 720px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
.map-back { display: inline-block; min-height: 36px; line-height: 36px; font: 600 13px/36px var(--ui); color: var(--dim); text-decoration: none; }
.map-back:hover { color: var(--text); }
.map-kicker { margin: 12px 0 4px; font: 600 12px/1.4 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--sys); }
.map-title { margin: 0 0 8px; font: 700 28px/1.15 var(--prose); color: var(--text); text-wrap: balance; }
.map-lede { margin: 0 0 6px; font: 500 15px/1.45 var(--ui); color: var(--dim); }
.map-status { margin: 0 0 18px; font: 500 13px/1.4 var(--ui); color: var(--dim); }
.map-status.warn { color: var(--lamp); }
.map-wrap { position: relative; }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-path path { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.map { position: relative; }
.map-scene { margin: 0 0 6px; }
.map-scene h2 { margin: 18px 0 8px; font: 700 11.5px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); }
.map-row { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.map-q { font: 600 13px/1.3 var(--ui); color: var(--dim); }
.map-row.kind-choice .map-q { color: var(--text); font-size: 14px; }
.map-row.off .map-q { opacity: .5; }
.map-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.map-opt { position: relative; z-index: 1; min-height: 40px; padding: 8px 12px; border-radius: 20px; border: 1px solid rgba(239,233,221,.16); background: #121110; font: 500 13.5px/1.25 var(--prose); color: rgba(239,233,221,.45); cursor: pointer; text-align: left; max-width: 100%; }
.map-row.kind-choice .map-opt { min-height: 44px; font-size: 15px; }
.map-opt.taken { border-color: var(--lamp); background: #2a1f10; color: var(--text); box-shadow: 0 0 0 3px rgba(233,162,59,.14); }
.map-opt.waited::after { content: ' · countdown'; font: 600 11px/1 var(--ui); letter-spacing: .04em; color: var(--dim); }
.map-opt:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; }
.map-off { font: 500 12.5px/1.3 var(--ui); color: rgba(168,160,146,.6); }
.map-detail { position: sticky; bottom: 12px; z-index: 3; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--lamp); border-radius: 10px; background: rgba(18,16,14,.97); }
.map-detail .q { margin: 0 0 6px; font: 600 13px/1.35 var(--ui); color: var(--dim); }
.map-detail .a { margin: 0 0 6px; font: 600 17px/1.35 var(--prose); color: var(--text); }
.map-detail .n { margin: 4px 0 0; font: italic 500 15px/1.4 var(--prose); color: var(--lamp); }
.map-detail .close { float: right; min-height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--rule); background: transparent; color: var(--dim); font: 600 12px/1 var(--ui); cursor: pointer; }
.map-ending { margin: 26px 0 8px; }
.map-api { margin: 14px 0 18px; font: 500 13px/1.45 var(--ui); color: var(--dim); }
.map-api a { color: var(--text); }
@media (max-width: 480px) {
  .map-row { grid-template-columns: 1fr; gap: 6px; }
  .map-title { font-size: 24px; }
}

/* Chapter tabs (Milestone 5) */
.map-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.map-chapters:empty { display: none; }
.map-chapters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(239,233,221,.2); font: 600 13.5px/1.2 var(--ui); color: var(--dim); text-decoration: none; }
.map-chapters a[aria-current="page"] { border-color: var(--lamp); color: var(--text); background: #2a1f10; }

/* Locked chapters and the way back to the game (fōmz, 2026-11-12) */
.map-chapters .locked { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 16px; border-radius: 22px; border: 1px dashed rgba(239,233,221,.16); font: 600 13.5px/1.2 var(--ui); color: rgba(168,160,146,.6); }
.map-chapters .locked small { font: 500 11.5px/1.3 var(--ui); color: rgba(168,160,146,.55); }
.map-locked { margin: 8px 0 24px; padding: 22px 18px; border: 1px dashed rgba(239,233,221,.16); border-radius: 10px; font: 600 16px/1.4 var(--ui); color: var(--dim); text-align: center; }
.map-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 10px; }
.map-btn { flex: 1 1 220px; display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 18px; border-radius: 26px; border: 1px solid rgba(239,233,221,.22); background: #121110; font: 600 15px/1.25 var(--ui); color: var(--text); text-decoration: none; text-align: center; }
.map-btn.next { border-color: var(--lamp); background: #2a1f10; }
.map-btn:hover { border-color: var(--lamp); }
.map-btn:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; }