/* Battle pause menu (P0-5, work/art-direction/review-2026-10-09.md).
   One panel, light hairline frame (the heavy painted frame is reserved for the board), settings as rows,
   one gold primary (Resume), quiet text actions, danger-tone Return to map with a confirm step. */

#game .panel.pause-panel {
  position: relative; width: 100%; max-width: 360px; max-height: none; overflow: visible;
  margin: auto; padding: 20px 20px 12px;
  border: 1px solid var(--line-strong); border-image: none; border-radius: 4px; background-clip: border-box;
  background: radial-gradient(ellipse at 50% 0, #c9a86a1f, transparent 55%), linear-gradient(180deg, #1b1f1a, #0d1210);
  box-shadow: inset 0 1px #ffe2a214, 0 18px 60px #000d;
  color: var(--tx); font: 400 14px/1.4 var(--ff-body); text-align: left;
}
#game .pause-panel [hidden] { display: none !important; }
#game .pause-panel .pm-title {
  margin: 0 0 14px; font: 700 var(--fs-h1)/1.15 var(--ff-head); letter-spacing: .06em;
  color: var(--tx-hi); text-align: center; text-wrap: balance;
}

/* ---- settings rows: 48 px, separated by 1 px rules, no boxes */
#game .pause-panel .pm-settings { border-top: 1px solid var(--line); }
#game .pause-panel .pm-row {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; margin: 0; padding: 0 2px;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  color: var(--tx); font: 500 14px/1.2 var(--ff-body); letter-spacing: 0; text-align: left; text-transform: none;
}
#game .pause-panel .pm-label { flex: 1 1 auto; min-width: 0; font: 500 14px/1.2 var(--ff-body); color: var(--tx); white-space: nowrap; }
#game .pause-panel .pm-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#game .pause-panel .pm-toggle:hover .pm-label { color: var(--tx-hi); }

/* 44 x 26 switch; state is carried by knob position + fill, not hue alone */
#game .pause-panel .pm-switch {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; box-sizing: border-box;
  background: #ffffff12; border: 1px solid var(--line-strong); transition: background-color 140ms ease, border-color 140ms ease;
}
#game .pause-panel .pm-switch i {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tx-dim); box-shadow: 0 1px 2px #0009; transition: transform 140ms ease, background-color 140ms ease;
}
#game .pause-panel .pm-toggle[aria-checked="true"] .pm-switch { background: linear-gradient(180deg, #e8c582, #b88d4b); border-color: #f4d99e; }
#game .pause-panel .pm-toggle[aria-checked="true"] .pm-switch i { transform: translateX(18px); background: #1d1a12; box-shadow: 0 0 0 1px #00000040; }

/* ---- music volume slider row */
#game .pause-panel .pm-volume { cursor: default; }
#game .pause-panel .pm-volume .pm-label { flex: 0 0 auto; }
#game .pause-panel .pm-range {
  --fill: 40%;
  -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 72px; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: none;
}
#game .pause-panel .pm-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--fill), #ffffff1f var(--fill));
}
#game .pause-panel .pm-range::-moz-range-track { height: 4px; border-radius: 2px; background: #ffffff1f; }
#game .pause-panel .pm-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
#game .pause-panel .pm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1bf, #d9b56f 55%, #9c7338); border: 1px solid #3a2a12; box-shadow: 0 1px 3px #000a;
}
#game .pause-panel .pm-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #3a2a12;
  background: radial-gradient(circle at 35% 30%, #fff1bf, #d9b56f 55%, #9c7338); box-shadow: 0 1px 3px #000a;
}
#game .pause-panel .pm-range:focus { outline: none; }
#game .pause-panel .pm-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #e3bf7866, 0 1px 3px #000a; }
#game .pause-panel .pm-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #e3bf7866, 0 1px 3px #000a; }
#game .pause-panel .pm-volume.is-off .pm-range, #game .pause-panel .pm-volume.is-off .pm-vol-value { opacity: .45; }
#game .pause-panel .pm-vol-value {
  -webkit-appearance: none; appearance: none; flex: none; min-width: 44px; height: 44px; margin: 0 -2px 0 0; padding: 0 2px;
  background: none; border: 0; box-shadow: none; color: var(--tx-dim); cursor: pointer;
  font: 600 14px/1 var(--ff-body); font-variant-numeric: tabular-nums; text-align: right;
}

/* ---- quiet secondary actions: one row of text buttons */
#game .pause-panel .pm-links { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 6px -8px 0; }
#game .pause-panel .pm-link {
  -webkit-appearance: none; appearance: none; position: relative; flex: 0 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 7px;
  background: none; border: 0; border-radius: 3px; box-shadow: none; cursor: pointer;
  color: var(--accent); font: 600 14px/1.1 var(--ff-head); letter-spacing: .01em; white-space: nowrap; text-transform: none;
}
#game .pause-panel .pm-links .pm-link + .pm-link::before {
  content: "·"; position: absolute; left: -4px; top: 50%; transform: translate(-50%, -52%); color: var(--tx-faint); font-family: var(--ff-body); pointer-events: none;
}
#game .pause-panel .pm-link:hover { color: var(--accent-hi); }

/* ---- the one gold primary, lower half (thumb zone) */
#game .pause-panel .btn.gold.pm-resume {
  display: block; width: 100%; height: 48px; min-height: 48px; margin: 10px 0 0; padding: 0 16px;
  font: 700 16px/1 var(--ff-head); letter-spacing: .08em; white-space: nowrap;
  border: 1px solid #f4d99e; border-radius: 3px; color: #1d170c; text-shadow: 0 1px #fff4;
  background: radial-gradient(ellipse at 50% 0, #fff1bf8c, transparent 65%), linear-gradient(110deg, #b4823f, #e8c582 45%, #f2d99d 53%, #c0904a);
  box-shadow: inset 0 1px #fff6, 0 4px 14px #0009; /* single rim: no double inset line inside a framed panel */
}

/* ---- destructive: separated, last, danger tone, confirm step */
#game .pause-panel .pm-leave { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 2px; text-align: center; }
#game .pause-panel .pm-danger { color: var(--bad); }
#game .pause-panel .pm-danger:hover { color: #ffab90; }
#game .pause-panel .pm-confirm-text { margin: 10px 0 0; font: 400 14px/1.4 var(--ff-body); color: var(--tx); text-wrap: balance; }
#game .pause-panel .pm-confirm-actions { display: flex; justify-content: center; gap: 8px; }
#game .pause-panel .pm-confirm-actions .pm-danger { font-weight: 700; }

/* ---- press + keyboard focus (no default outline boxes) */
#game .pause-panel .pm-link, #game .pause-panel .pm-vol-value, #game .pause-panel .pm-resume, #game .pause-panel .pm-toggle .pm-switch {
  transition: transform 80ms ease, filter 80ms ease;
}
#game .pause-panel .pm-link:active, #game .pause-panel .pm-vol-value:active, #game .pause-panel .btn.gold.pm-resume:active { transform: scale(.94); filter: brightness(.85); }
#game .pause-panel .pm-toggle:active .pm-switch { transform: scale(.94); filter: brightness(.85); }
#game .pause-panel button:focus { outline: none; }
#game .pause-panel .pm-link:focus-visible, #game .pause-panel .pm-vol-value:focus-visible { box-shadow: inset 0 -2px var(--accent); }
#game .pause-panel .pm-toggle:focus-visible .pm-switch { box-shadow: 0 0 0 3px #e3bf7866; }
#game .pause-panel .btn.gold.pm-resume:focus-visible { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  #game .pause-panel *, #game .pause-panel *::before { transition: none !important; }
  #game .pause-panel .pm-link:active, #game .pause-panel .pm-vol-value:active,
  #game .pause-panel .btn.gold.pm-resume:active, #game .pause-panel .pm-toggle:active .pm-switch { transform: none; }
}