/* The pause card and its corner glyph (pause.js, menus-ux-06, 2026-10-08).
   Built from the concept in worldhopper-art-archive/glow-polish-2026-10-08/
   concepts/polish-menu-nav/pause-card-concept.png with the door's own tokens:
   the Settings rows (front-identity.css .hold-setting), the one gold recipe,
   the serif heading over a brass rule. It sits outside #hold, so the tokens it
   borrows are restated here under the same names. */
#pause, #pausebtn {
  --ui-ink: #f2e6bd;
  --ui-muted: #a9b79e;
  --ui-brass: #c6a85b;
  --ui-focus: #f2e6bd;
  --ui-danger: #e77d72;
  --ui-gold-a: #f1d27d;
  --ui-gold-b: #c99443;
  --ui-gold-edge: #7a5f38;
  --ui-gold-ink: #22170e;
  --ui-lamp: #f0b054;
  --ui-lamp-core: #fff3de;
  --ui-cold-ink: #8b98a8;
  --id-ink: rgba(7, 11, 19, .92);
  --pz-serif: "Glow Serif", "PT Serif", Georgia, "Times New Roman", serif;
  --pz-body: "Glow Condensed", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
}

/* The corner glyph. Top LEFT: the kill feed owns the top right, and the control
   crib that used to own the top left moves down under it (index.html #help). */
#pausebtn {
  position: fixed; top: 14px; left: 14px; z-index: 9;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: rgba(9, 12, 16, .78);
  border: 0; box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .55);
  color: var(--ui-ink);
  cursor: pointer;
}
#pausebtn[hidden] { display: none; }
#pausebtn svg { width: 18px; height: 18px; }
#pausebtn:hover { box-shadow: inset 0 0 0 1px var(--ui-brass); background: rgba(16, 23, 34, .9); }
#pausebtn:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
@media (pointer: coarse) { #pausebtn { width: 44px; height: 44px; } }
body:has(#pausebtn:not([hidden])) #help { top: 64px; }

/* The card. The match runs on under it (online), so it dims rather than hides
   it: a glance at the round is still a glance at the round. */
#pause {
  position: fixed; inset: 0; z-index: 13;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 16px; box-sizing: border-box;
  background: rgba(4, 6, 11, .62);
  color: var(--ui-ink);
  font: 400 15px/1.3 var(--pz-body);
}
#pause[hidden] { display: none; }
#pause .pz-card {
  display: grid; gap: 10px;
  width: min(520px, 100%);
  padding: 22px 20px 20px; box-sizing: border-box;
  background: var(--id-ink);
  box-shadow: inset 0 0 0 1px var(--ui-brass), 0 16px 48px rgba(0, 0, 0, .55);
}
#pause h2 {
  margin: 0 0 6px; padding-bottom: 12px; text-align: center;
  font: 700 clamp(28px, 4vw, 40px)/1 var(--pz-serif); letter-spacing: .3em; text-indent: .3em;
  color: var(--ui-ink);
  background: linear-gradient(90deg, rgba(198, 168, 91, 0), var(--ui-brass) 30%, var(--ui-brass) 70%, rgba(198, 168, 91, 0)) bottom center / 100% 1px no-repeat;
}
/* menus-ux-32: the match runs on under the card; said in lamp colour. */
#pause .pz-live { margin: -8px 0 4px; text-align: center; font-size: 15px; color: var(--ui-lamp); }
#pause .pz-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 62px; padding: 10px 18px; box-sizing: border-box;
  background: rgba(16, 23, 34, .9);
  border: 0; box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .35);
  color: var(--ui-ink); text-align: left; font: inherit; cursor: pointer;
}
#pause .pz-row[hidden] { display: none; }
#pause .pz-row:hover { background: rgba(26, 36, 50, .95); box-shadow: inset 0 0 0 1px var(--ui-brass); }
#pause .pz-row:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
#pause .pz-row svg { flex: none; width: 24px; height: 24px; color: var(--ui-brass); }
#pause .pz-row > span { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
#pause .pz-row b { font: 700 20px/1.1 var(--pz-serif); letter-spacing: .12em; text-transform: uppercase; }
#pause .pz-row em { font-style: normal; font-size: 14px; color: var(--ui-muted); }
/* The one gold. */
#pause .pz-gold { background: linear-gradient(var(--ui-gold-a), var(--ui-gold-b)); box-shadow: inset 0 0 0 1px var(--ui-gold-edge); color: var(--ui-gold-ink); }
#pause .pz-gold svg { color: var(--ui-gold-ink); width: 18px; height: 18px; }
#pause .pz-gold:hover { background: linear-gradient(#f6dc94, #d5a04c); box-shadow: inset 0 0 0 1px var(--ui-gold-edge); }
#pause .pz-gold b { font-size: 22px; letter-spacing: .18em; }
/* The sound switch: the Settings row's, by state. */
#pause .pz-switch { flex: none; position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(240, 176, 84, .85); box-shadow: inset 0 0 0 1px var(--ui-gold-edge); }
#pause .pz-switch u { position: absolute; top: 2px; left: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--ui-lamp-core); transition: left 140ms linear; }
#pause #pause-sound[aria-pressed="false"] .pz-switch { background: rgba(139, 152, 168, .3); box-shadow: inset 0 0 0 1px rgba(139, 152, 168, .5); }
#pause #pause-sound[aria-pressed="false"] .pz-switch u { left: 2px; background: var(--ui-cold-ink); }
#pause #pause-sound[aria-pressed="false"] .pz-waves, #pause #pause-sound[aria-pressed="true"] .pz-slash { display: none; }
/* Leave, asked once in place. */
#pause .pz-quiet b { font-size: 18px; }
#pause .pz-sure[hidden] { display: none; }
#pause .pz-sure p { margin: 2px 0 8px; text-align: center; font-size: 15px; color: var(--ui-ink); }
#pause .pz-sure-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#pause .pz-sure-row .pz-row { justify-content: center; }
#pause .pz-sure-row .pz-row > span { flex: none; }
#pause .pz-danger { color: var(--ui-danger); }
#pause .pz-danger svg { color: var(--ui-danger); }
/* menus-ux-25: inside the card's foot, so it can never print over the round
   break's card underneath. */
#pause .pz-hint { margin: 2px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 13px/1 var(--pz-body); letter-spacing: .2em; color: var(--ui-ink); }
#pause .pz-hint kbd { min-width: 28px; padding: 5px 7px; text-align: center; font: 600 12px/1 var(--pz-body); letter-spacing: 0; color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgba(198, 168, 91, .7); }
@media (pointer: coarse) { #pause .pz-hint { display: none; } }
@media (max-width: 600px) {
  #pause .pz-card { padding: 18px 14px 14px; }
  #pause .pz-row { min-height: 56px; padding: 8px 14px; }
  #pause .pz-row b { font-size: 18px; }
}

/* audio-09: the four volume sliders (mixer.js), under the switch. */
/* Tracks on one line: each row a subgrid of the mix (front-identity.css). */
#pause .pz-mix { display: grid; grid-template-columns: 18px max-content minmax(0, 1fr) 44px 18px max-content minmax(0, 1fr) 38px; gap: 6px 8px; padding: 8px 18px 10px; background: rgba(16, 23, 34, .9); box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .35); }
#pause .pz-level { grid-column: span 4; display: grid; grid-template-columns: 18px minmax(max-content, 6.6em) 1fr 38px; grid-template-columns: subgrid; align-items: center; gap: 8px; min-height: 36px; font: 700 13px/1 var(--pz-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ui-ink); }
#pause .pz-level svg { width: 18px; height: 18px; color: var(--ui-brass); }
#pause .pz-level output { font: 400 12px/1 var(--pz-body); color: var(--ui-muted); text-align: right; font-variant-numeric: tabular-nums; }
#pause .pz-level input, #hold .hold-level input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
#pause .pz-level input::-webkit-slider-runnable-track, #hold .hold-level input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ui-brass) var(--fill, 100%), rgba(139, 152, 168, .3) var(--fill, 100%)); }
#pause .pz-level input::-moz-range-track, #hold .hold-level input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(139, 152, 168, .3); }
#pause .pz-level input::-moz-range-progress, #hold .hold-level input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ui-brass); }
#pause .pz-level input::-webkit-slider-thumb, #hold .hold-level input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--ui-lamp-core); box-shadow: 0 0 0 1px var(--ui-gold-edge); }
#pause .pz-level input::-moz-range-thumb, #hold .hold-level input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ui-lamp-core); box-shadow: 0 0 0 1px var(--ui-gold-edge); }
#pause .pz-level input:focus-visible, #hold .hold-level input:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
@media (max-width: 460px) { #pause .pz-mix { grid-template-columns: 18px max-content minmax(0, 1fr) 38px; } }
/* menus-ux-24: a thumb needs 44 px to land on; the track and thumb stay drawn
   the same size in the middle of it. */
@media (pointer: coarse) { #pause .pz-level input, #hold .hold-level input { height: 44px; } }