/* ================= Pause: the button and the overlay (js/pause.js) ================= */

/* The button: gameplay only (body.can-pause). Top-right on wide screens, with the RTX switch
   moved to its left; on narrow screens top-right beside the market strip, which shifts left. */
.pause-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: rgba(8, 12, 16, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #e9f3ee;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, box-shadow 0.15s;
}

body.can-pause:not(.paused) .pause-btn { display: inline-flex; }
.pause-btn:hover { background: rgba(20, 28, 34, 0.9); box-shadow: inset 0 0 0 1px rgba(47, 224, 122, 0.7); }
.pause-btn:focus-visible { outline: 2px solid var(--gold, #ffd21a); outline-offset: 2px; }
.pause-btn svg { width: 20px; height: 20px; fill: currentColor; }
.pause-btn .pb-label { display: none; font-family: "Michroma", Arial, sans-serif; font-size: 9px; letter-spacing: 0.18em; }

@media (min-width: 980px) {
  .pause-btn { padding: 0 12px 0 10px; }
  .pause-btn .pb-label { display: inline; }
  body.can-pause .rtx-toggle:not(.docked) { right: calc(max(12px, env(safe-area-inset-right)) + 112px); top: calc(max(12px, env(safe-area-inset-top)) + 7px); }
}

@media (max-width: 979px) {
  .pause-btn { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 48px; height: 48px; }
  .pause-btn svg { width: 22px; height: 22px; }
  /* The market strip makes room for the button. */
  body.can-pause .market {
    width: min(420px, calc(100vw - 76px));
    left: calc(50% - 28px);
  }
}

/* The overlay: the game stays visible behind, dimmed and blurred. */
.pause {
  position: fixed;
  inset: 0;
  z-index: 43;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 40%, rgba(4, 8, 10, 0.55), rgba(2, 3, 4, 0.88));
  -webkit-backdrop-filter: blur(8px) saturate(0.7);
  backdrop-filter: blur(8px) saturate(0.7);
  color: #e9f3ee;
  user-select: none;
  -webkit-user-select: none;
}

.pause[hidden] { display: none; }
.pause.in { animation: ps-fade 0.25s ease-out both; }
.pause.in .ps-box { animation: ps-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes ps-fade { from { opacity: 0; } }
@keyframes ps-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }

.ps-box {
  width: min(460px, 100%);
  padding: 22px 0 16px;
  background: linear-gradient(160deg, rgba(14, 20, 24, 0.94), rgba(5, 8, 10, 0.97));
  border-top: 2px solid var(--pump, #2fe07a);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.pause[data-view="settings"] .ps-box { width: min(720px, 100%); }

.ps-head { padding: 0 24px 14px; }
.ps-kicker { font-family: "Michroma", Arial, sans-serif; font-size: 9.5px; letter-spacing: 0.28em; color: var(--gold, #ffd21a); }

.ps-title {
  margin: 4px 0 6px;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 7vw, 52px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 30px rgba(47, 224, 122, 0.3);
}

.ps-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: "Oswald", sans-serif; font-size: 14px; letter-spacing: 0.06em; color: #b9c6bf; }
.ps-meta span { display: inline-flex; align-items: center; }
.ps-ast { color: var(--gold, #ffd21a); }
.ps-pure { color: var(--pump, #2fe07a); }

.ps-view[hidden] { display: none; }
.ps-main { display: flex; flex-direction: column; padding: 4px 0 6px; }

.ps-item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 8px 24px 8px 28px;
  border: 0;
  background: none;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.08em;
  text-align: left;
  color: rgba(232, 240, 236, 0.6);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: color 0.15s;
}

.ps-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(47, 224, 122, 0.24), rgba(47, 224, 122, 0.04) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ps-mark {
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 4px;
  background: var(--gold, #ffd21a);
  box-shadow: 0 0 12px rgba(255, 210, 26, 0.8);
  transform: scaleY(0);
  transition: transform 0.2s;
}

.ps-label { position: relative; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ps-item.sel { color: #fff; }
.ps-item.sel::before { transform: scaleX(1); }
.ps-item.sel .ps-mark { transform: scaleY(1); }
.ps-item.sel .ps-label { transform: translateX(8px); text-shadow: 0 0 18px rgba(47, 224, 122, 0.45); }
.ps-item.quit { font-size: 19px; }
.ps-item.quit.sel::before { background: linear-gradient(90deg, rgba(255, 59, 74, 0.25), transparent); }
.ps-item.quit .ps-mark { background: var(--dump, #ff3b4a); box-shadow: 0 0 12px rgba(255, 59, 74, 0.8); }

.ps-settings { padding: 0 16px; }
.ps-set { max-height: min(56vh, 520px); margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.ps-back {
  min-height: 40px;
  padding: 6px 12px 6px 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  font-family: "Michroma", Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #cfe0d7;
  cursor: pointer;
}

.ps-back:hover { background: rgba(255, 255, 255, 0.12); }

.ps-confirm { padding: 6px 24px 8px; text-align: center; }
.ps-warn { width: 48px; height: 48px; filter: drop-shadow(0 0 12px rgba(255, 59, 74, 0.45)); }
.ps-ctitle { margin-top: 8px; font-family: "Archivo Black", "Arial Black", sans-serif; font-size: 22px; line-height: 1.1; }
.ps-ctext { margin: 10px 0 18px; font-size: 14px; line-height: 1.45; color: #b9c6bf; }
.ps-cbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ps-cbtns .hub-btn { min-width: 150px; }

.ps-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 14px 24px 0;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: "Michroma", Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: #8a9a92;
}

.pause kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

@media (hover: none) and (pointer: coarse) {
  .ps-hints { display: none; }
}

@media (max-width: 600px) {
  .ps-box { padding-top: 18px; }
  .ps-head { padding: 0 18px 12px; }
  .ps-item { padding-left: 22px; font-size: 22px; }
  .ps-settings { padding: 0 10px; }
}