/* screens-pop — no-scroll pop layout (2026-09-19). see docs/no-scroll-2026-09-19.md
 *
 * Skins + relayouts three screens owned by this pass: the result/game-over
 * screen (#result-screen / #result-plate, filled by hud.js's showResult()),
 * the title screen (#title-screen / .title-panel), and the co-op lobby
 * panel on the title (#coop-panel, src/lobby.js). Loaded last (index.html)
 * so equal-specificity selectors here win over style.css's legacy rules;
 * a few also raise specificity or override structural properties (flex/
 * grid/width) outright, per this pass's brief: "override old style.css
 * rules by specificity instead of editing style.css".
 *
 * Uses ONLY --pop-* tokens (src/pop-tokens.css) for color/spacing/radius/
 * font/type-scale — see that file for the touch/narrow profile these
 * tokens already carry (same 2-condition gate reused below for the
 * layout-level overrides that pop-tokens.css itself can't express).
 */

/* ================================================================
   §1 Result / game-over screen (#result-screen)
   ================================================================ */
#result-screen {
  align-items: center;
  padding-bottom: 0;
  background: rgba(35, 32, 28, 0.55);
}
#result-plate {
  width: min(420px, 92vw);
  max-height: 94vh;
  overflow: visible; /* designed to fit — no scroll fallback needed */
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--pop-paper);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-lg);
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
  clip-path: none;
  text-align: center;
}
body.touch #result-plate { max-height: 94vh; }
body.reduced-motion #result-plate { box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45); }

#result-header-band {
  flex: none;
  padding: var(--pop-space-3) var(--pop-space-4);
  background: var(--pop-yellow);
  border-bottom: var(--pop-border) solid var(--pop-ink);
  border-radius: calc(var(--pop-radius-lg) - var(--pop-border)) calc(var(--pop-radius-lg) - var(--pop-border)) 0 0;
}
#result-headline {
  font-family: var(--pop-font-display);
  font-size: var(--pop-fs-title);
  font-weight: 800;
  color: var(--pop-ink);
  text-shadow: none;
}
#result-screen.result-mode-clear #result-headline {
  display: block;
  color: var(--pop-ink);
  padding-bottom: 0;
  border-bottom: none;
}
#result-cause {
  margin-top: 2px;
  font-family: var(--pop-font-body);
  font-size: var(--pop-fs-name);
  font-weight: 600;
  color: var(--pop-muted);
}

/* ≤4 numbers, one row of equal cells. */
#result-numbers {
  flex: none;
  display: flex;
  align-items: stretch;
  gap: var(--pop-space-2);
  margin: 0;
  padding: var(--pop-space-3) var(--pop-space-4) 0;
  border-top: none;
}
.result-num {
  flex: 1;
  min-width: 0;
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  padding: var(--pop-space-2) var(--pop-space-1);
  gap: 2px;
}
.result-num-icon { width: 16px; height: 16px; color: var(--pop-ink); opacity: 0.6; }
.result-num-value {
  font-family: var(--pop-font-display);
  font-size: var(--pop-fs-name);
  font-weight: 800;
  color: var(--pop-ink);
}
.result-num-label {
  font-family: var(--pop-font-body);
  font-size: var(--pop-fs-meta);
  color: var(--pop-muted);
}
.result-num-new {
  top: -6px;
  right: -2px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--pop-ink);
  background: var(--pop-coral);
  border: 1px solid var(--pop-ink);
  border-radius: 99px;
  padding: 0 4px;
}

/* 1-2 single lines, NEW/自己ベスト badges inline. */
#result-highlights {
  flex: none;
  margin: 0;
  padding: var(--pop-space-2) var(--pop-space-4) 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: var(--pop-space-1);
}
.result-highlight-row {
  gap: 6px;
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  padding: 4px 10px;
}
.result-highlight-icon { width: 15px; height: 15px; color: var(--pop-ink); opacity: 0.75; }
.result-highlight-name {
  font-family: var(--pop-font-body);
  font-size: var(--pop-fs-meta);
  font-weight: 700;
  color: var(--pop-ink);
}
.result-highlight-value {
  font-family: var(--pop-font-display);
  font-size: var(--pop-fs-meta);
  color: #a34a00;
}
.result-highlight-new {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--pop-ink);
  background: var(--pop-yellow);
  border: 1px solid var(--pop-ink);
  border-radius: 99px;
  padding: 0 4px;
  margin-left: 2px;
}

/* one row at the bottom. */
#result-buttons {
  flex: none;
  margin: 0;
  padding: var(--pop-space-3) var(--pop-space-4) var(--pop-space-4);
  gap: var(--pop-space-2);
}
.result-btn, #result-buttons button {
  min-height: 44px;
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  font-family: var(--pop-font-display);
  font-size: var(--pop-fs-btn);
  color: var(--pop-ink);
  box-shadow: 0 4px 0 var(--pop-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#result-buttons button:hover { filter: brightness(1.05); }
#result-buttons button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }
#result-again-btn, #result-continue-btn { background: var(--pop-turq); }
#result-title-btn, #result-restart-btn { background: var(--pop-cream); }

/* Compact: short/narrow (same 2-condition gate as pop-tokens.css). */
@media (max-width: 700px) {
  #result-header-band { padding: var(--pop-space-2) var(--pop-space-3); }
  #result-numbers { padding: var(--pop-space-2) var(--pop-space-3) 0; gap: var(--pop-space-1); }
  #result-highlights { padding: var(--pop-space-1) var(--pop-space-3) 0; }
  #result-buttons { padding: var(--pop-space-2) var(--pop-space-3) var(--pop-space-3); }
}
body.touch {
  @media (max-height: 480px) {
    #result-header-band { padding: var(--pop-space-1) var(--pop-space-3); }
    #result-numbers { padding: var(--pop-space-1) var(--pop-space-3) 0; gap: var(--pop-space-1); }
    #result-highlights { padding: var(--pop-space-1) var(--pop-space-3) 0; gap: 4px; }
    .result-highlight-row { padding: 3px 8px; }
    #result-buttons { padding: var(--pop-space-1) var(--pop-space-3) var(--pop-space-2); }
    /* §fix(review item4): was 40px, under the 44px touch floor. */
    #result-buttons button { min-height: 44px; }
  }
}

/* ================================================================
   §2 Title screen (#title-screen / .title-panel)
   ================================================================ */
.title-panel {
  max-width: 460px;
  width: 90%;
  max-height: 92vh;
  overflow: visible; /* designed to fit — no internal scroll */
  padding: var(--pop-space-5) var(--pop-space-6);
  background: var(--pop-paper);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-lg);
  backdrop-filter: none;
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
}
body.touch .title-panel { backdrop-filter: none; }

.title-heading {
  font-family: var(--pop-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--pop-ink);
  text-shadow: none;
}
.title-tagline {
  color: #a34a00;
  font-family: var(--pop-font-body);
  font-weight: 700;
}
.title-divider { color: var(--pop-turq); }
.divider-line { background: linear-gradient(90deg, transparent, var(--pop-ink), transparent); opacity: 0.25; }

.flow-vignette { border: var(--pop-border-thin) solid var(--pop-ink); border-radius: var(--pop-radius-sm); }
.flow-label { font-family: var(--pop-font-body); color: var(--pop-ink); }
.flow-label-sub { color: var(--pop-muted); }

/* "?" popover: pop plate, anchored to the button, never grows/scrolls. */
.title-controls summary {
  color: var(--pop-ink);
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  box-shadow: 0 2px 0 var(--pop-ink);
  transition: transform 0.06s, box-shadow 0.06s;
}
.title-controls summary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }
.title-controls[open] summary { color: var(--pop-ink); background: var(--pop-yellow); border-color: var(--pop-ink); }
/* §fix(review item4): style.css's base circle is a fixed 36x36 at every
   viewport — below the 44px touch floor. `<summary>` isn't a replaced
   element, so a ::before hit box works here (keeps the circle's visual size
   the same instead of ballooning the "?" button itself). */
body.touch .title-controls summary { position: relative; }
body.touch .title-controls summary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}
.title-controls-panel {
  max-height: min(260px, calc(100vh - 32px));
  overflow: visible;
  background: var(--pop-cream);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  box-shadow: 0 6px 0 rgba(20, 18, 14, 0.45);
  clip-path: none;
}
.title-controls-panel ul { color: var(--pop-ink); }
.title-controls-panel ul b { color: #a34a00; }

#title-start-btn {
  font-family: var(--pop-font-display);
  border-radius: var(--pop-radius-md);
  background: var(--pop-turq);
  color: var(--pop-ink);
  box-shadow: 0 4px 0 var(--pop-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#title-start-btn:hover { transform: none; filter: brightness(1.05); box-shadow: 0 4px 0 var(--pop-ink); }
#title-start-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }

#title-continue-btn,
#title-coop-btn {
  font-family: var(--pop-font-display);
  border-radius: var(--pop-radius-md);
  background: var(--pop-cream);
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  box-shadow: 0 4px 0 var(--pop-ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#title-continue-btn:hover,
#title-coop-btn:hover { transform: none; background: var(--pop-cream); border-color: var(--pop-ink); filter: brightness(1.05); }
#title-continue-btn:active,
#title-coop-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }

/* Compact: shrink the flow vignettes and the vertical rhythm so heading +
   tagline + 3 flow cards + controls + buttons fit a 375px-tall viewport
   with no scroll (設計2: "flow vignettes shrink or sit in one row with the
   buttons" — here they shrink: icon-only row, description already dropped
   by the existing max-height:480px rule below). */
@media (max-width: 700px) {
  .title-panel { padding: var(--pop-space-4) var(--pop-space-5); }
  .title-heading { font-size: 18px; margin-bottom: 4px; }
  .title-tagline { margin-bottom: 6px; }
  .title-divider { margin-bottom: 10px; }
  .title-flow { margin-bottom: 8px; gap: 6px; }
  .flow-vignette { max-height: 34px; }
  .title-controls { margin-bottom: 8px; }
  #title-start-btn { padding: 10px 30px; }

  /* §fix: install.js's iOS "add to home screen" card and settings.js's
     "友達に送る" share button are both dynamically inserted right after
     #title-start-btn (neither module may edit style.css/screens-pop.css's
     own files — settings.js injects its own <style> at runtime instead, see
     its injectCss() comment), and on a real iPhone landscape both are
     present at once (isIOS + isTouch), which used to push #title-coop-btn
     past the viewport bottom with no way to scroll to it. Higher-specificity
     overrides here (`.title-panel #id` beats settings.js's bare `#id` even
     though its <style> is appended after this stylesheet) compact both, and
     the share button — redundant with the install card's own Share-sheet
     instructions — is dropped while the card is showing. */
  .title-panel.has-install-ui #ff-title-share-wrap { display: none; }
  .title-panel .install-tip { margin-top: 8px; padding: 8px 20px 6px 10px; }
  .title-panel .install-tip-heading { margin: 0 18px 4px 0; font-size: 11px; }
  .title-panel .install-tip-step { font-size: 10px; gap: 5px; margin-bottom: 3px; }
  .title-panel .install-tip-icon { width: 18px; height: 18px; }
  .title-panel .install-tip-icon .icon { width: 12px; height: 12px; }
  .title-panel .install-tip-note { margin-top: 3px; font-size: 9.5px; }
  .title-panel .install-tip-btn { margin-top: 8px; padding: 8px 14px; font-size: 12px; }
  .title-panel #ff-title-share-wrap { margin-top: 6px; }
  .title-panel #ff-title-share-btn { padding: 6px 16px; font-size: 11.5px; }
  .title-panel #ff-title-share-label { margin-top: 3px; font-size: 10px; }
}
body.touch {
  @media (max-height: 480px) {
    .title-panel { padding: var(--pop-space-3) var(--pop-space-4); }
    .title-heading { font-size: 16px; margin-bottom: 2px; }
    .title-tagline { margin-bottom: 4px; }
    .title-divider { margin-bottom: 6px; }
    .title-flow { margin-bottom: 6px; gap: 5px; }
    .flow-vignette { max-height: 28px; }
    .title-controls { margin-bottom: 6px; }
    /* §fix(review item4): the compact padding here (needed to fit heading +
       tagline + flow cards + these buttons in one screen) drops the actual
       button height well under 44px — style.css's font-size is all that's
       left contributing to it. Pin it back up explicitly. */
    #title-start-btn { padding: 9px 26px; margin-bottom: 4px; min-height: 44px; }
    #title-continue-btn,
    #title-coop-btn { padding: 8px 26px; margin-top: 6px; min-height: 44px; }

    /* Same install-tip/share-button budget problem as the max-width branch
       above (see its own comment) — this is the branch that actually covers
       844×390 (width 844 misses the max-width:700 gate above). */
    .title-panel.has-install-ui #ff-title-share-wrap { display: none; }
    .title-panel .install-tip { margin-top: 5px; padding: 5px 16px 4px 8px; }
    .title-panel .install-tip-close { width: 18px; height: 18px; font-size: 13px; }
    .title-panel .install-tip-heading { margin: 0 16px 2px 0; font-size: 10px; }
    .title-panel .install-tip-step { font-size: 9px; gap: 4px; margin-bottom: 2px; }
    .title-panel .install-tip-icon { width: 14px; height: 14px; }
    .title-panel .install-tip-icon .icon { width: 10px; height: 10px; }
    .title-panel .install-tip-note { display: none; }
    .title-panel .install-tip-btn { margin-top: 5px; padding: 6px 12px; font-size: 11px; }
    .title-panel #ff-title-share-wrap { margin-top: 4px; }
    .title-panel #ff-title-share-btn { padding: 5px 14px; font-size: 11px; }
    .title-panel #ff-title-share-label { margin-top: 2px; font-size: 9.5px; }
  }
}

/* ================================================================
   §3 Co-op lobby (#coop-panel, src/lobby.js)
   ================================================================ */
#coop-back-btn { color: var(--pop-ink); font-family: var(--pop-font-body); }
#coop-back-btn:hover { color: #a34a00; }
#coop-heading { font-family: var(--pop-font-display); color: var(--pop-ink); }
#coop-intro { font-family: var(--pop-font-body); color: var(--pop-muted); }

.coop-field label { font-family: var(--pop-font-body); color: var(--pop-muted); }
#coop-name-input,
#coop-code-input {
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
}
#coop-name-input:focus,
#coop-code-input:focus { border-color: var(--pop-ink); outline: 2px solid var(--pop-turq); outline-offset: 1px; }

#coop-create-btn,
#coop-start-btn {
  font-family: var(--pop-font-display);
  border-radius: var(--pop-radius-md);
  background: var(--pop-turq);
  color: var(--pop-ink);
  box-shadow: 0 4px 0 var(--pop-ink);
}
#coop-create-btn:active,
#coop-start-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }

/* Buttons row (was a vertical stack in style.css) — matches the result
   screen's single bottom button row. */
#coop-start-row { display: flex; flex-direction: row; gap: var(--pop-space-2); }
#coop-start-row button { flex: 1; }

#coop-join-btn,
#coop-copy-btn,
#coop-share-btn,
#coop-continue-btn {
  font-family: var(--pop-font-display);
  border-radius: var(--pop-radius-md);
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  color: var(--pop-ink);
  box-shadow: 0 3px 0 var(--pop-ink);
}
#coop-join-btn:active,
#coop-copy-btn:active,
#coop-share-btn:active,
#coop-continue-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--pop-ink); }

#coop-status { font-family: var(--pop-font-body); color: #a34a00; }

#coop-code-box {
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
}
#coop-code-label { font-family: var(--pop-font-body); color: var(--pop-muted); }
#coop-code-value { font-family: var(--pop-font-display); color: var(--pop-ink); text-shadow: none; }
#coop-stage-note { font-family: var(--pop-font-body); color: var(--pop-muted); }

/* §no-scroll(設計6): each player as its own compact pop chip (built by
   lobby.js's refreshPlayersPreview() — one .coop-player-row per player,
   name + optional ホスト tag) instead of one long joined text line. */
#coop-players-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin-bottom: var(--pop-space-3);
  font-size: inherit;
  color: inherit;
}
.coop-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  background: var(--pop-cream);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  font-family: var(--pop-font-body);
  font-size: var(--pop-fs-name);
  color: var(--pop-ink);
}
.coop-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-player-tag {
  flex: none;
  font-family: var(--pop-font-display);
  font-size: var(--pop-fs-meta);
  font-weight: 800;
  color: var(--pop-ink);
  background: var(--pop-yellow);
  border: 1px solid var(--pop-ink);
  border-radius: 99px;
  padding: 1px 7px;
}

/* §fix(review item4): style.css's base sizing for these (small padding +
   12.5-14px text) lands well under 44px tall at every viewport — not gated
   by width/height like the 2-column relayout below, since a touch device
   needs >=44px targets whatever the window size. Each is a real <button>
   (index.html) so a plain min-height (join/copy/share/create/start/
   continue — already padded pill buttons, fine to grow a little) or a
   ::before hit box (back — a slim corner link that should stay visually
   small) both work. */
body.touch #coop-join-btn,
body.touch #coop-copy-btn,
body.touch #coop-share-btn,
body.touch #coop-continue-btn,
body.touch #coop-create-btn,
body.touch #coop-start-btn { min-height: 44px; }
body.touch #coop-back-btn { position: relative; }
body.touch #coop-back-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* Compact/touch-narrow: 2 columns (left = room code + share/status, right =
   player list + start/leave — 設計6) so up to 4 player rows never need to
   scroll. Also drops heading/intro/name-field (redundant once a room is
   open — coop-result-active, toggled by lobby.js's showResultView()/
   resetToChoiceView()) and the decorative stage note to reclaim height. */
@media (max-width: 700px) {
  #coop-panel.coop-result-active #coop-heading,
  #coop-panel.coop-result-active #coop-intro,
  #coop-panel.coop-result-active .coop-field { display: none; }
  #coop-panel.coop-result-active #coop-stage-note { display: none; }

  #coop-result { display: flex; flex-direction: column; gap: var(--pop-space-2); }
  #coop-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pop-space-3);
    align-items: start;
  }
  #coop-result-left,
  #coop-result-right { display: flex; flex-direction: column; gap: var(--pop-space-2); min-width: 0; }
  #coop-code-box { margin: 0; padding: var(--pop-space-2); }
  #coop-code-value { font-size: 22px; }
  #coop-share-row { margin-bottom: 0; }
  #coop-players-preview { margin-bottom: 0; gap: 4px; }
  .coop-player-row { padding: 4px 8px; }
  #coop-start-row { margin-top: 0; }
}
body.touch {
  @media (max-height: 480px) {
    #coop-panel.coop-result-active #coop-heading,
    #coop-panel.coop-result-active #coop-intro,
    #coop-panel.coop-result-active .coop-field { display: none; }
    #coop-panel.coop-result-active #coop-stage-note { display: none; }

    #coop-result { display: flex; flex-direction: column; gap: var(--pop-space-1); }
    #coop-result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--pop-space-3);
      align-items: start;
    }
    #coop-result-left,
    #coop-result-right { display: flex; flex-direction: column; gap: var(--pop-space-1); min-width: 0; }
    #coop-code-box { margin: 0; padding: var(--pop-space-1) var(--pop-space-2); }
    #coop-code-value { font-size: 20px; }
    #coop-share-row { margin-bottom: 0; }
    .coop-player-row { padding: 3px 8px; }
    #coop-players-preview { margin-bottom: 0; gap: 3px; }
    #coop-start-row { margin-top: 0; }
    /* §fix(review item4): was 40px, under the 44px touch floor — the plain
       body.touch rule above already sets 44px on #coop-start-btn/
       #coop-continue-btn individually, so this is now redundant with them
       rather than contradicting them. */
    #coop-start-row button { min-height: 44px; }
    #coop-heading { font-size: 15px; }
    #coop-intro { font-size: 11px; }
  }
}

/* §2026-09-20 review残り: タイトルの小さな操作も指で押せる 44px の当たりを持たせる */
body.touch .install-tip-close,
body.touch #ff-title-name-display { position: relative; }
body.touch .install-tip-close::before,
body.touch #ff-title-name-display::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px);
  transform: translate(-50%, -50%);
}