/*
 * pause-pop.css — pop-style, one-screen pause menu (docs/no-scroll-2026-09-19.md
 * §設計1). Owns #pause-overlay's look AND the no-scroll structural layout
 * (unlike market-pop.css/dialog-pop.css, which only skin an existing
 * structure — the pause overlay's old structure itself grew scroll bugs, see
 * the doc's audit table, so this file also carries flex/grid rules).
 *
 * Sizes/spacing/colors/fonts come ONLY from src/pop-tokens.css's --pop-*
 * tokens (loaded before this file — see index.html's <link> order; same
 * "later selector wins" convention orderbox.css/dialog-pop.css already use
 * for overriding style.css's old #pause-* rules without editing style.css).
 *
 * Structure: #pause-header (見出し + 「ホームに戻る」, the latter built/
 * mounted by src/settings.js) → #pause-tabs (住人/図鑑/実績/設定 pill tabs on
 * a turquoise strip, plus the 「巨人の王に今夜挑む」 toggle when unlocked) →
 * #pause-content, ONE flex-column area that holds all four *-wrap panes
 * (hud.js toggles `.hidden` on whichever isn't the active tab) — every pane
 * is `overflow: hidden`, no scrollbars, ever.
 *
 * §nested-selector pitfall (see pop-tokens.css's own note): inside
 * `body.touch { @media (...) { ... } }`, a bare `:root` would silently become
 * `body.touch :root` and never match — every rule below either uses `&`
 * (= body.touch itself) or a concrete selector, never bare `:root`.
 */

/* ---------------------------------------------------------------- overlay + panel */
#pause-overlay {
  background: rgba(10, 60, 80, 0.28);
}

#pause-overlay .overlay-panel,
#pause-panel {
  width: min(var(--pop-modal-w), 92vw, calc(100% - var(--pop-modal-inset)));
  max-width: var(--pop-modal-w);
  max-height: var(--pop-modal-max-h);
  display: flex;
  flex-direction: column;
  background: var(--pop-cream);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: initial;
  font-weight: initial;
  cursor: default;
  backdrop-filter: none;
}
body.touch #pause-overlay .overlay-panel,
body.touch #pause-panel { backdrop-filter: none; }

/* ---------------------------------------------------------------- header */
#pause-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pop-space-3);
  padding: var(--pop-space-3) var(--pop-space-4);
  height: var(--pop-header-h);
  background: var(--pop-yellow);
  border-bottom: var(--pop-border) solid var(--pop-ink);
}
#pause-title {
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-title);
  color: var(--pop-ink);
  margin: 0;
}
/* §no-scroll: "ホームに戻る" — built/inserted by settings.js's
   mountHomeButton() right after #pause-title (so it lands in this header
   row); only the look moves here (see settings.js's injectCss() comment on
   why it stopped carrying pop styling for these two ids). */
#ff-home-btn {
  flex: none;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-btn);
  background: var(--pop-coral);
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 4px 0 var(--pop-ink);
  padding: var(--pop-space-2) var(--pop-space-4);
  min-height: 36px;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#ff-home-btn:hover { filter: brightness(1.05); }
#ff-home-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }
body.touch #ff-home-btn { min-height: 44px; }

/* ---------------------------------------------------------------- tab strip */
#pause-tabs {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pop-space-2);
  padding: var(--pop-space-2) var(--pop-space-4);
  height: var(--pop-tab-h);
  background: var(--pop-turq);
  border-bottom: var(--pop-border) solid var(--pop-ink);
}
#pause-tabs-list {
  display: flex;
  align-items: center;
  gap: var(--pop-tab-gap);
  flex-wrap: nowrap;
  min-width: 0;
}
.pause-tab-btn {
  flex: none;
  font-family: var(--pop-font-body);
  font-weight: 800;
  font-size: var(--pop-fs-tab);
  padding: var(--pop-space-1) var(--pop-space-3);
  min-height: 32px;
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: 999px;
  background: var(--pop-paper);
  color: var(--pop-ink);
  opacity: 0.85;
  box-shadow: 0 2px 0 var(--pop-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.06s, box-shadow 0.06s, background 0.12s, opacity 0.12s;
}
/* §fix: style.css's old `.pause-tab-btn:hover{color:#e8f0ff}` and
   `.pause-tab-btn.active{color:#ffd27a}` are each MORE specific (class+
   pseudo-class / two classes) than the plain `.pause-tab-btn{color:...}`
   base rule above, so they silently out-rank it regardless of load order —
   restate `color` explicitly in both states here (near-invisible ink-on-
   yellow/cream text otherwise, this is exactly the bug that made 住人/実績's
   tab labels disappear during headless verification). */
.pause-tab-btn:hover { opacity: 1; color: var(--pop-ink); }
.pause-tab-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }
.pause-tab-btn.active {
  background: var(--pop-yellow);
  opacity: 1;
  color: var(--pop-ink);
  box-shadow: 0 3px 0 var(--pop-ink);
}
body.touch .pause-tab-btn { min-height: 44px; }

/* §no-scroll: 「巨人の王に今夜挑む」 — lives in the tab strip (not inside the
   実績 content pane) so it never eats into that pane's tight height budget.
   hud.js shows it only while the 実績 tab itself is active AND the challenge
   is unlocked (updateGiantKingVisibility()). */
#giant-king-toggle-wrap {
  flex: none;
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
#giant-king-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--pop-space-2);
  padding: var(--pop-space-1) var(--pop-space-3);
  min-height: 32px;
  background: var(--pop-coral);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--pop-ink);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  font-weight: 800;
  font-size: var(--pop-fs-meta);
  cursor: pointer;
  white-space: nowrap;
}
#giant-king-toggle { width: 16px; height: 16px; accent-color: var(--pop-ink); cursor: pointer; flex: none; }
body.touch #giant-king-toggle-label { min-height: 44px; }

/* ---------------------------------------------------------------- content (ONE area, no scroll) */
#pause-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--pop-space-3) var(--pop-space-4);
  background: var(--pop-cream);
}
#pause-residents-wrap,
#pause-dex-wrap,
#pause-achievements-wrap,
#pause-settings-wrap {
  flex: 1;
  min-height: 0;
  max-height: none; /* cancel style.css's old max-height:90px touch rule */
  margin-top: 0;    /* cancel style.css's old margin-top:8px/14px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* ---------------------------------------------------------------- 住人: 2×2 grid */
#pause-residents-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--pop-grid-gap);
}
.resident-tile {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--pop-space-1);
  padding: var(--pop-space-3);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  box-shadow: 0 3px 0 var(--pop-ink);
  overflow: hidden;
}
.resident-tile-name {
  font-family: var(--pop-font-body);
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: var(--pop-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resident-tile-title {
  font-size: var(--pop-fs-meta);
  font-weight: 800;
  color: #a34a00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resident-tile-step {
  font-size: var(--pop-fs-meta);
  font-weight: 700;
  color: var(--pop-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resident-tile-unmet {
  align-items: center;
  justify-content: center;
  opacity: 0.55;
}
.resident-tile-silhouette {
  font-family: var(--pop-font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pop-muted);
}

/* ---------------------------------------------------------------- 図鑑: 13-tile grid + detail strip */
#pause-dex-wrap { gap: var(--pop-space-2); }
#pause-dex-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--pop-space-2);
}
.dex-tile {
  min-width: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--pop-space-1);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 2px 0 var(--pop-ink);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.dex-tile:hover { filter: brightness(1.03); }
.dex-tile:active { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }
.dex-tile.active { border-color: var(--pop-coral); box-shadow: 0 3px 0 var(--pop-coral); background: #fff8e2; }
.dex-tile.dex-undiscovered { opacity: 0.55; }
.dex-tile.dex-shiny { border-color: #d99a00; }
.dex-tile.dex-tile-nushi { background: #e4f7f5; }
.dex-tile-name {
  font-size: var(--pop-fs-meta);
  font-weight: 800;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dex-tile-silhouette {
  font-size: var(--pop-fs-meta);
  font-weight: 800;
  color: var(--pop-muted);
  letter-spacing: 0.04em;
}
.dex-tile-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--pop-muted);
  font-variant-numeric: tabular-nums;
}
.dex-tile-shiny-mark {
  font-size: 8px;
  font-weight: 800;
  color: #a3760a;
}
#pause-dex-detail {
  flex: none;
  padding: var(--pop-space-1) var(--pop-space-3);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  font-size: var(--pop-fs-meta);
  font-weight: 700;
  color: var(--pop-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- 実績: 1 row per axis + detail strip */
#pause-achievements-wrap { gap: var(--pop-space-1); }
#pause-achievements-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pop-space-1);
}
.achievement-row {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: var(--pop-space-2);
}
.achievement-axis-label {
  flex: none;
  width: 52px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-meta);
  color: var(--pop-ink);
  background: var(--pop-turq);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
}
.achievement-tiles {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pop-space-2);
}
.achievement-tile {
  min-width: 0;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px var(--pop-space-1);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 2px 0 var(--pop-ink);
  color: var(--pop-muted);
  font-family: var(--pop-font-body);
  font-weight: 700;
  font-size: var(--pop-fs-meta);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.achievement-tile-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.achievement-tile:hover { filter: brightness(1.03); }
.achievement-tile:active { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }
.achievement-tile.active { border-color: var(--pop-coral); box-shadow: 0 3px 0 var(--pop-coral); }
.achievement-tile.achievement-done {
  background: var(--pop-lime);
  color: var(--pop-ink);
  font-weight: 800;
}
.achievement-tile-check { font-weight: 800; color: #245a2b; }
.achievement-tile.achievement-hidden:not(.achievement-done) { font-style: italic; opacity: 0.7; }
#pause-achievements-detail {
  flex: none;
  padding: var(--pop-space-1) var(--pop-space-3);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  font-size: var(--pop-fs-meta);
  font-weight: 700;
  color: var(--pop-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- 設定: 2×2 grid */
#pause-settings-wrap { overflow: hidden; }
#ff-settings-block {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--pop-space-2);
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  font-size: initial;
  text-align: left;
  cursor: default;
}
#ff-settings-block .ff-row {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pop-space-2);
  padding: var(--pop-space-3);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  box-shadow: 0 3px 0 var(--pop-ink);
}
#ff-settings-block .ff-row + .ff-row { border-top: var(--pop-border-thin) solid var(--pop-ink); } /* cancel style.css's old stacked-list divider */
#ff-settings-block .ff-label {
  font-family: var(--pop-font-body);
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: var(--pop-ink);
  white-space: nowrap;
}
#ff-settings-block .ff-toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  padding: 0;
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: 999px;
  background: var(--pop-cream);
  cursor: pointer;
  transition: background 0.15s ease;
}
#ff-settings-block .ff-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pop-ink);
  transition: transform 0.15s ease;
}
#ff-settings-block .ff-toggle.on { background: var(--pop-lime); }
#ff-settings-block .ff-toggle.on::after { transform: translateX(18px); background: #245a2b; }
/* §fix(review item4): the pill stays 40x22 visually (matches the row's
   compact height) but gets a >=44px tap target via ::before — `.ff-toggle`
   is a real <button> (settings.js), so ::before renders fine on it (unlike
   the native range/text inputs below, which are replaced elements and don't
   support generated content). */
body.touch #ff-settings-block .ff-toggle { position: relative; }
body.touch #ff-settings-block .ff-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
#ff-settings-block .ff-sens-slider {
  flex: 1;
  min-width: 0;
  max-width: 100px;
  accent-color: var(--pop-turq);
}
/* §fix(review item4): a native <input type=range> is a replaced element —
   ::before/::after never render on it — so the hit area has to grow via the
   box itself instead. Padding enlarges the actual clickable/draggable box
   (browsers hit-test the whole element, not just the drawn track) while the
   matching negative margin cancels it back out of the row's layout, so the
   thin track still looks exactly the same and the row doesn't grow. */
body.touch #ff-settings-block .ff-sens-slider {
  padding: 14px 0;
  margin: -14px 0;
}
#ff-settings-block .ff-sens-value {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--pop-muted);
  min-width: 34px;
  text-align: right;
  font-size: var(--pop-fs-meta);
}
#ff-settings-block .ff-name-cell {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--pop-space-1);
}
#ff-settings-block .ff-name-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pop-space-2);
}
#ff-settings-block .ff-name-input {
  flex: 1;
  min-width: 0;
  max-width: 110px;
  padding: 4px var(--pop-space-2);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  background: var(--pop-cream);
  color: var(--pop-ink);
  font-size: var(--pop-fs-meta);
  font-family: inherit;
  text-align: right;
}
#ff-settings-block .ff-name-input:focus { outline: none; border-color: var(--pop-turq); }
/* §fix(review item4): plenty of headroom in this cell (2x2 settings grid,
   ~98px-tall cells even at 667x375 — see docs/no-scroll-2026-09-19.md's
   budget) to just grow the field itself rather than fake a hit box. */
body.touch #ff-settings-block .ff-name-input { min-height: 44px; }
#ff-settings-block .ff-hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--pop-muted);
  text-align: right;
}

/* ---------------------------------------------------------------- body.touch + short-height (844×390 / 667×375) */
body.touch {
  @media (max-height: 480px) {
    & #pause-panel { max-height: 88vh; }
    & #pause-content { padding: var(--pop-space-2) var(--pop-space-3); }
    & #pause-residents-grid { gap: var(--pop-space-2); }
    & .resident-tile { padding: var(--pop-space-2); }
    & #pause-dex-grid { grid-template-columns: repeat(7, 1fr); gap: var(--pop-space-1); }
    /* §fix(review item4): was shrunk to 36px to reclaim height, dropping
       below the 44px touch floor — restore it and reclaim the height some
       other way instead (tighter grid/axis-label/tile gaps just below). */
    & .dex-tile { min-height: 44px; }
    & #pause-achievements-list { gap: var(--pop-space-1); }
    & .achievement-row { gap: var(--pop-space-1); }
    & .achievement-tiles { gap: var(--pop-space-1); }
    & .achievement-axis-label { width: 40px; font-size: 9px; }
    & .achievement-tile { min-height: 44px; font-size: 9.5px; }
    & #ff-settings-block .ff-row { padding: var(--pop-space-2) var(--pop-space-3); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #pause-overlay *, #pause-overlay *::before, #pause-overlay *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
body.reduced-motion #pause-overlay *,
body.reduced-motion #pause-overlay *::before,
body.reduced-motion #pause-overlay *::after {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}