/* Hallmark · component: game pause dialog · genre: atmospheric · theme: Canal Scroll
 * pre-emit critique: P4 H5 E4 S5 R5 V4
 * states: default · hover · focus · active · disabled · loading · error · success */
.game-pause.game-pause {
  box-sizing:border-box;width:min(860px,calc(100vw - 40px));max-width:none;
  max-height:calc(100dvh - 40px);padding:0;border:1px solid var(--pause-line);
  background:var(--pause-paper) var(--pause-paper-texture) repeat;
  color:var(--pause-ink);font-family:var(--pause-body);text-shadow:none;
  box-shadow:0 18px 70px var(--pause-shadow);overflow:auto;pointer-events:auto;
}
.game-pause::backdrop {background:var(--pause-backdrop);backdrop-filter:blur(4px)}
.pause-layout {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:500px}
.pause-voyage {padding:36px 32px;background:var(--pause-deep);color:var(--pause-light);display:flex;flex-direction:column;min-width:0}
.pause-brand {font:25px var(--pause-font);letter-spacing:.26em}
.pause-boat {height:195px;display:grid;place-items:center;flex:1}
.pause-boat svg {width:100%;height:180px;max-width:240px;stroke:var(--pause-gold);stroke-width:1.3;opacity:.7}
.pause-chapter-label {font-size:11px;letter-spacing:.18em;color:var(--pause-gold);padding-top:20px;border-top:1px solid var(--pause-dark-line)}
.pause-voyage h3 {font:23px/1.7 var(--pause-font);font-style:normal;overflow-wrap:anywhere;margin:10px 0 6px}
.pause-voyage p {font-size:12px;line-height:1.9;margin:0;opacity:.85}
.pause-main {padding:36px 38px 22px;min-width:0}
.pause-kicker {font:12px var(--pause-body);color:var(--pause-muted);letter-spacing:.2em}
.pause-main header h2 {font:36px/1.4 var(--pause-font);font-style:normal;letter-spacing:.1em;margin:9px 0}
.game-pause .pause-description {font:13px/1.8 var(--pause-body);color:var(--pause-muted);margin:0}
.pause-options {display:grid;gap:12px;margin:28px 0}
.game-pause .pause-button.pause-button {
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:52px;margin:0;padding:12px 18px;
  border:1px solid var(--pause-line);border-radius:0;
  font:17px/1.5 var(--pause-font);text-align:left;text-decoration:none;white-space:nowrap;
  cursor:pointer;pointer-events:auto;
  transition:background-color var(--pause-duration) var(--pause-ease),color var(--pause-duration) var(--pause-ease);
}
.game-pause .pause-primary.pause-primary {background:var(--pause-deep);color:var(--pause-light);border-color:var(--pause-deep)}
.game-pause .pause-secondary.pause-secondary {background:transparent;color:var(--pause-ink)}
.pause-button>span {font:20px var(--pause-body);opacity:.8}
.game-pause .pause-button:focus-visible,.game-pause .pause-button.is-focus {outline:2px solid var(--pause-focus);outline-offset:4px}
.game-pause .pause-button:active,.game-pause .pause-button.is-active {transform:translateY(1px)}
.game-pause .pause-button:disabled {opacity:.45;cursor:not-allowed;pointer-events:none}
.game-pause .pause-button[data-state="loading"] {cursor:progress;opacity:.65}
.game-pause .pause-button[data-state="error"] {border-color:var(--pause-error);color:var(--pause-error)}
.game-pause .pause-button[data-state="success"] {border-color:var(--pause-success);background:var(--pause-success);color:var(--pause-light)}
.game-pause .pause-primary.is-hover {background:var(--pause-deep-hover)}
.game-pause .pause-secondary.is-hover {background:var(--pause-wash)}
@media(hover:hover) and (pointer:fine) {
  .game-pause .pause-primary:hover {background:var(--pause-deep-hover)}
  .game-pause .pause-secondary:hover {background:var(--pause-wash)}
}
.pause-controls {padding-top:20px;border-top:1px solid var(--pause-line)}
.game-pause .pause-audio,.game-pause .pause-audio[open] {position:static;inset:auto;max-width:none;padding:0;margin:0 0 22px;border:1px solid var(--pause-line);background:transparent;color:var(--pause-ink);line-height:1.6}
.game-pause .pause-audio summary {min-height:44px;box-sizing:border-box;padding:12px 16px;text-align:left;cursor:pointer;font:15px var(--pause-font)}
.pause-audio summary>span {float:right;color:var(--pause-muted)}
.pause-audio-controls {padding:0 16px 12px;border-top:1px solid var(--pause-line)}
.pause-audio-controls label {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font:12px var(--pause-body)}
.pause-audio-controls label>span {display:flex;align-items:center;gap:6px;max-width:65%}
.pause-audio-controls input {accent-color:var(--pause-deep);cursor:pointer}
.pause-audio-controls input[type=checkbox] {width:20px;height:20px}
.pause-audio-controls input[type=range] {width:100%;min-width:0;height:32px}
.pause-audio-controls output {min-width:32px;text-align:right;font-size:11px}
.game-pause .pause-audio-controls p {margin:8px 0 0;font:11px/1.7 var(--pause-body);color:var(--pause-muted)}
.pause-audio :focus-visible {outline:2px solid var(--pause-focus);outline-offset:3px}
.pause-controls h3 {font:13px var(--pause-body);font-style:normal;color:var(--pause-muted);margin:0 0 17px;letter-spacing:.1em}
.pause-controls dl {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0}
.pause-controls dl>div {display:flex;gap:10px;align-items:center;min-width:0}
.pause-controls dt {margin:0;flex-shrink:0;min-width:28px;font-size:12px}
.pause-controls dd {margin:0;font-size:11px;color:var(--pause-muted);line-height:1.6}
.game-pause kbd {font:11px/1.4 var(--pause-body);padding:4px 6px;border:1px solid var(--pause-line);border-bottom-width:2px;display:inline-block;white-space:nowrap}
.pause-main footer {display:flex;align-items:center;gap:10px;margin-top:28px;color:var(--pause-muted);font:10px/1.8 var(--pause-body)}
@media(max-width:700px) {
 .game-pause.game-pause {width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
 .pause-layout {grid-template-columns:minmax(0,1fr);min-height:0}
 .pause-voyage {padding:20px 24px}
 .pause-brand {font-size:20px}
 .pause-boat {display:none}
 .pause-chapter-label {padding-top:14px;margin-top:14px}
 .pause-voyage h3 {font-size:19px;margin-top:6px}
 .pause-voyage p {font-size:11px}
 .pause-main {padding:22px 24px}
 .pause-main header h2 {font-size:30px}
 .pause-options {margin:22px 0}
 .pause-controls dl {gap:14px 10px}
 .pause-main footer {margin-top:22px}
}
@media(prefers-reduced-motion:reduce) {.game-pause .pause-button.pause-button {transition:none}}

/* Leave the lifted city view visible: pause actions sit at the map's edge. */
.pause-overview .game-pause.game-pause {
 width:min(340px,calc(100vw - 32px));margin:auto 3vw auto auto;
 max-height:calc(100dvh - 48px);box-shadow:0 12px 45px var(--pause-shadow);
}
.pause-overview .game-pause::backdrop {background:linear-gradient(90deg,#102b2b08,#102b2b38);backdrop-filter:none}
.pause-overview .pause-layout {display:block;min-height:0}
.pause-overview .pause-voyage {padding:20px 25px}
.pause-overview .pause-brand {font-size:20px}
.pause-overview .pause-boat {display:none}
.pause-overview .pause-chapter-label {margin-top:15px;padding-top:12px}
.pause-overview .pause-voyage h3 {font-size:18px}
.pause-overview .pause-main {padding:22px 25px}
.pause-overview .pause-main header h2 {font-size:28px}
.pause-overview .pause-options {margin:20px 0}
.pause-overview .pause-main footer {margin-top:20px}
@media(max-width:600px){.pause-overview .game-pause.game-pause{width:280px;margin:auto 12px auto auto}.pause-overview .pause-voyage p,.pause-overview .pause-controls{display:none}}
body.explore-pause-overview #pause-dialog {width:min(340px,calc(100vw - 32px));margin:auto 3vw auto auto}
body.explore-pause-overview #pause-dialog::backdrop {background:linear-gradient(90deg,#102b2b08,#102b2b38);backdrop-filter:none}