/* Graveyard Shift — overlay UI (menus + HUD).
   Everything is scoped under .gsui (added to #ui by UI's constructor).
   Look: liminal 3 AM big-box store with gothic / art-deco occult trim (brass, teal, amber) and deadpan
   corporate dread. Round 2 adds: employee handbook card, PA / payphone subtitles, night-curse chips,
   buff chip, the 4-tab Supply-O-Matic (item pictures, staff, management), the VEND-O-MATIC and the pink slip. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Courier+Prime:wght@400;700&family=Creepster&family=Permanent+Marker&family=Rubik:wght@400;500;600;700;800;900&family=VT323&display=swap');

.gsui {
  --gs-green: #7cfc3a;
  --gs-green-dk: #2f8a12;
  --gs-pumpkin: #ff8c1a;
  --gs-purple-deep: #2a1240;
  --gs-purple: #9b5de5;
  --gs-magenta: #f15bb5;
  --gs-brass: #c9a227;
  --gs-brass-lt: #f0d57a;
  --gs-brass-dim: rgba(201, 162, 39, 0.45);
  --gs-bone: #f2e6c9;
  --gs-bone-dim: rgba(242, 230, 201, 0.65);
  --gs-teal: #2ee6c8;
  --gs-amber: #ffb547;
  --gs-red: #ff3b4a;
  --gs-ink: #12081c;
  --gs-panel-a: rgba(42, 18, 64, 0.93);
  --gs-panel-b: rgba(16, 7, 26, 0.93);
  --gs-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);

  --gs-font-title: 'Creepster', 'Chiller', Impact, fantasy;
  --gs-font-deco: 'Cinzel', 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --gs-font-ui: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gs-font-crt: 'VT323', Consolas, 'Courier New', monospace;
  --gs-font-receipt: 'Courier Prime', 'Courier New', Courier, monospace;
  --gs-font-marker: 'Permanent Marker', 'Comic Sans MS', 'Segoe Print', cursive;

  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--gs-font-ui);
  font-size: 15px;
  line-height: 1.35;
  color: var(--gs-bone);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
.gsui *, .gsui *::before, .gsui *::after { box-sizing: border-box; }
.gsui [hidden] { display: none !important; }
.gsui button { font: inherit; color: inherit; }
.gsui h2, .gsui h4, .gsui h5, .gsui p, .gsui ul, .gsui ol { margin: 0; padding: 0; }
.gsui ul, .gsui ol { list-style: none; }
.gsui .gs-layer { position: absolute; inset: 0; }
.gsui :focus-visible { outline: 2px solid var(--gs-teal); outline-offset: 2px; }

/* ------------------------------------------------------------------ shared bits */

.gsui .gs-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 0.5em;
  margin: 0 0.18em;
  font: 800 0.78em/1 var(--gs-font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #1d1226;
  background: linear-gradient(180deg, #fffaf0 0%, #eadcb8 100%);
  border: 1px solid #fff8e8;
  border-radius: 5px;
  box-shadow: 0 3px 0 #8f7a52, 0 4px 8px rgba(0, 0, 0, 0.5);
  vertical-align: 0.12em;
  transform: translateY(-1px);
  text-shadow: none;
}

/* Art-deco frame: brass corner brackets, double inner line, diamond ornaments */
.gsui .gs-frame {
  position: relative;
  border: 1px solid var(--gs-brass-dim);
  background:
    linear-gradient(var(--gs-brass) 0 0) top left / 22px 2px,
    linear-gradient(var(--gs-brass) 0 0) top left / 2px 22px,
    linear-gradient(var(--gs-brass) 0 0) top right / 22px 2px,
    linear-gradient(var(--gs-brass) 0 0) top right / 2px 22px,
    linear-gradient(var(--gs-brass) 0 0) bottom left / 22px 2px,
    linear-gradient(var(--gs-brass) 0 0) bottom left / 2px 22px,
    linear-gradient(var(--gs-brass) 0 0) bottom right / 22px 2px,
    linear-gradient(var(--gs-brass) 0 0) bottom right / 2px 22px,
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(155, 93, 229, 0.18), transparent 70%),
    linear-gradient(180deg, var(--gs-panel-a), var(--gs-panel-b));
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.28),
    inset 0 0 0 6px rgba(201, 162, 39, 0.16),
    var(--gs-shadow);
}
.gsui .gs-frame::before,
.gsui .gs-frame::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--gs-ink);
  border: 1px solid var(--gs-brass);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.5);
  pointer-events: none;
}
.gsui .gs-frame::before { top: -6px; }
.gsui .gs-frame::after { bottom: -6px; }

.gsui .gs-deco-title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font: 700 13px/1 var(--gs-font-deco);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gs-brass-lt);
  white-space: nowrap;
}
.gsui .gs-deco-title::before,
.gsui .gs-deco-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gs-brass));
}
.gsui .gs-deco-title::after { background: linear-gradient(270deg, transparent, var(--gs-brass)); }

/* Buttons */
.gsui .gs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  font: 800 15px/1 var(--gs-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-bone);
  background: linear-gradient(180deg, #43216a 0%, #26113a 100%);
  border: 1px solid var(--gs-brass);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 3px rgba(240, 213, 122, 0.22),
    0 4px 0 #0c0512,
    0 8px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease-out, filter 0.15s, box-shadow 0.15s;
}
.gsui .gs-btn:hover:not(:disabled) { filter: brightness(1.15) saturate(1.1); transform: translateY(-1px); }
.gsui .gs-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 0 0 3px rgba(240, 213, 122, 0.22), 0 1px 0 #0c0512;
}
.gsui .gs-btn:disabled { cursor: default; filter: grayscale(0.5) brightness(0.8); opacity: 0.75; }
.gsui .gs-btn--primary {
  color: #0d2405;
  background: linear-gradient(180deg, #c4ff96 0%, #7cfc3a 45%, #3fae15 100%);
  border-color: #e6ffd2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.25),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 4px 0 #1b4a08,
    0 0 26px rgba(124, 252, 58, 0.45),
    0 10px 22px rgba(0, 0, 0, 0.5);
}
.gsui .gs-btn--primary:active:not(:disabled) {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 1px 0 #1b4a08, 0 0 20px rgba(124, 252, 58, 0.4);
}
.gsui .gs-btn--pumpkin {
  color: #2a1200;
  background: linear-gradient(180deg, #ffd29a 0%, #ff8c1a 50%, #c45a00 100%);
  border-color: #ffe2bf;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22), 0 4px 0 #5a2600, 0 0 22px rgba(255, 140, 26, 0.4);
}
.gsui .gs-btn--danger {
  color: #ffd9dc;
  background: linear-gradient(180deg, #6e1424 0%, #3c0814 100%);
  border-color: #ff5a68;
}
.gsui .gs-btn--danger.is-armed {
  background: linear-gradient(180deg, #ff4a5a 0%, #b3122b 100%);
  color: #fff;
  animation: gs-armed 0.6s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------------ title / join */

.gsui .gs-title {
  z-index: 20;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  background:
    linear-gradient(0deg, rgba(124, 252, 58, 0.1), transparent 28%),
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(14, 5, 24, 0.2), rgba(8, 2, 14, 0.84));
  animation: gs-fade 0.5s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-brass-dim) transparent;
}
.gsui .gs-title-inner {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(880px, 100%);
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.gsui .gs-logo { text-align: center; line-height: 0.82; }
.gsui .gs-plaque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  padding: 7px 18px;
  font: 700 12px/1 var(--gs-font-deco);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gs-brass-lt);
  background: rgba(16, 7, 26, 0.75);
  border: 1px solid var(--gs-brass-dim);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(201, 162, 39, 0.2);
}
.gsui .gs-plaque::before,
.gsui .gs-plaque::after { content: '◆'; font-size: 8px; color: var(--gs-brass); letter-spacing: 0; }
.gsui .gs-logo-a {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
  font-family: var(--gs-font-title);
  font-weight: 400;
  font-size: clamp(64px, min(10.5vw, 15vh), 150px);
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(180deg, #ecffd9 0%, #b2ff7d 28%, #7cfc3a 52%, #3fae15 78%, #1f6a08 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 4px 0 #0b1d04)
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 22px rgba(124, 252, 58, 0.5));
}
.gsui .gs-drips { position: absolute; left: 3%; right: 3%; top: 70%; height: 0; pointer-events: none; }
.gsui .gs-drip {
  position: absolute;
  top: 0;
  width: 8px;
  height: var(--h, 20px);
  background: linear-gradient(180deg, #4fc21d, #7cfc3a 70%, #a8ff74);
  border-radius: 0 0 5px 5px;
  transform-origin: 50% 0;
  animation: gs-drip 5s ease-in-out infinite;
}
.gsui .gs-drip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background: radial-gradient(circle at 35% 35%, #e3ffcc, #7cfc3a 45%, #4fc21d);
}
.gsui .gs-logo-b {
  margin-top: -0.06em;
  font-family: var(--gs-font-title);
  font-weight: 400;
  font-size: clamp(50px, min(7.6vw, 11vh), 112px);
  letter-spacing: 0.16em;
  padding-left: 0.16em;
  color: transparent;
  background: linear-gradient(180deg, #fff0cf 0%, #ffbf5e 30%, #ff8c1a 58%, #b84f00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 4px 0 #3a1500)
    drop-shadow(0 0 1px #000)
    drop-shadow(0 0 20px rgba(255, 140, 26, 0.45));
}
.gsui .gs-tagline {
  min-height: 1.3em;
  font: 600 clamp(15px, 1.35vw, 19px)/1.3 var(--gs-font-ui);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--gs-bone);
  text-shadow: 0 2px 8px #000, 0 0 2px #000;
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}
.gsui .gs-tagline.is-swap { opacity: 0; transform: translateY(5px); filter: blur(3px); }

/* CCTV overlay on the title screen (the store films you before you clock in) */
.gsui .gs-cctv {
  position: fixed;
  inset: 14px 18px;
  z-index: 0;
  pointer-events: none;
  font: 22px/1 var(--gs-font-crt);
  letter-spacing: 0.06em;
  color: rgba(236, 244, 240, 0.72);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 1px #000;
}
.gsui .gs-cctv-c { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(236, 244, 240, 0.4); }
.gsui .gs-cctv-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.gsui .gs-cctv-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.gsui .gs-cctv-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.gsui .gs-cctv-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.gsui .gs-cctv-rec { position: absolute; top: 12px; left: 16px; display: flex; align-items: center; gap: 9px; }
.gsui .gs-cctv-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff2a3a; box-shadow: 0 0 8px #ff2a3a; animation: gs-blink 1.2s steps(2) infinite; }
.gsui .gs-cctv-cam { margin-left: 10px; opacity: 0.7; }
.gsui .gs-cctv-time { position: absolute; bottom: 12px; right: 16px; font-variant-numeric: tabular-nums; }
/* (top-left under REC: at the bottom it ran under the 'How to work here' bar on 1080p screens) */
.gsui .gs-cctv-note { position: absolute; top: 44px; left: 16px; font-size: 15px; opacity: 0.45; }

.gsui .gs-join {
  width: 100%;
  padding: 22px 26px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex-shrink: 0; /* (p13: the panel grows with its two rows of monsters; nothing clips into the bar below) */
}
.gsui .gs-nametag {
  display: flex;
  align-items: stretch;
  width: min(450px, 100%);
  border-radius: 10px;
  overflow: hidden;
  transform: rotate(-1.2deg);
  box-shadow: 0 0 0 3px #fff6, 0 8px 22px rgba(0, 0, 0, 0.5);
  cursor: text;
  transition: box-shadow 0.15s, transform 0.15s;
}
.gsui .gs-nametag:focus-within { box-shadow: 0 0 0 3px var(--gs-green), 0 0 24px rgba(124, 252, 58, 0.35), 0 8px 22px rgba(0, 0, 0, 0.5); transform: rotate(-0.4deg); }
.gsui .gs-nametag-hd {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  padding: 6px 14px;
  color: #fff;
  background: linear-gradient(180deg, #ea3d55, #b3152d);
}
.gsui .gs-nametag-hd b { font: 900 22px/1 var(--gs-font-ui); letter-spacing: 0.08em; }
.gsui .gs-nametag-hd small { font: 600 11px/1.3 var(--gs-font-ui); letter-spacing: 0.06em; }
.gsui .gs-name-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px 8px;
  font: 400 28px/1.1 var(--gs-font-marker);
  color: #23122e;
  background: #fbf6ea;
  border: 0;
  outline: 0;
  user-select: text;
  -webkit-user-select: text;
}
.gsui .gs-name-input::placeholder { color: rgba(35, 18, 46, 0.3); }

.gsui .gs-monsters {
  /* (p9) a centred, wrapping row: up to --mcols cards a row, a short last row stays in the middle */
  --mcols: 5; /* (p13: 10 monsters, two even rows of 5) */
  --mgap: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--mgap) + 6px) var(--mgap); /* (p13: room under a row for the "Hired!" tag) */
  width: 100%;
  padding-bottom: 6px;
}
.gsui .gs-monsters > .gs-mcard { flex: 0 0 calc((100% - (var(--mcols) - 1) * var(--mgap)) / var(--mcols)); min-width: 0; }
.gsui .gs-mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 4px 12px;
  cursor: pointer;
  pointer-events: auto;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(155, 93, 229, 0.32), transparent 72%),
    linear-gradient(180deg, #2e1546 0%, #170a24 100%);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 50% 50% 8px 8px / 46px 46px 8px 8px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(201, 162, 39, 0.12), 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease-out, border-color 0.15s, box-shadow 0.15s;
}
.gsui .gs-mcard:hover { transform: translateY(-4px); border-color: var(--gs-brass); }
.gsui .gs-mcard:hover .gs-mcard-portrait { animation: gs-wiggle 0.5s ease-in-out; }
.gsui .gs-mcard.is-selected {
  transform: translateY(-6px);
  border-color: var(--gs-green);
  background:
    radial-gradient(ellipse 75% 60% at 50% 40%, rgba(124, 252, 58, 0.34), transparent 72%),
    linear-gradient(180deg, #23361f 0%, #12091c 100%);
  box-shadow: 0 0 0 2px var(--gs-green), 0 0 26px rgba(124, 252, 58, 0.45), inset 0 0 0 3px rgba(0, 0, 0, 0.3);
}
.gsui .gs-mcard.is-selected::after {
  content: 'Hired!';
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) rotate(-3deg);
  padding: 3px 9px;
  font: 900 10px/1 var(--gs-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0d2405;
  background: var(--gs-green);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.gsui .gs-mcard-portrait { display: block; width: 64px; height: 64px; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.5)); }
.gsui .gs-mcard-portrait svg { display: block; width: 100%; height: 100%; }
.gsui .gs-mcard.is-selected .gs-mcard-portrait { animation: gs-bob 1.6s ease-in-out infinite; }
.gsui .gs-mcard-name {
  font: 700 12px/1.15 var(--gs-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gs-bone);
}
.gsui .gs-mcard.is-selected .gs-mcard-name { color: #d4ffb3; }
.gsui .gs-mblurb { min-height: 1.3em; font: italic 500 14px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); text-align: center; }
.gsui .gs-join-foot { display: flex; justify-content: center; width: 100%; }

.gsui .gs-howto { width: 100%; padding: 0; flex-shrink: 0; }
.gsui .gs-howto::before { display: none; }
.gsui .gs-howto-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  font: 700 14px/1 var(--gs-font-deco);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-brass-lt);
}
.gsui .gs-howto-toggle:hover { color: #fff3c4; }
.gsui .gs-howto-lbl { flex: 1; text-align: left; }
.gsui .gs-howto-ico { font-size: 18px; letter-spacing: 0; }
.gsui .gs-howto-chev { transition: transform 0.2s; }
.gsui .gs-howto.is-open .gs-howto-chev { transform: rotate(180deg); }
.gsui .gs-howto-body {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 24px;
  padding: 2px 22px 20px;
  animation: gs-fade 0.25s ease-out;
}
.gsui .gs-howto-col h4 {
  margin-bottom: 10px;
  padding-bottom: 6px;
  font: 700 12px/1 var(--gs-font-deco);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gs-brass);
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}
.gsui .gs-howto-restock { grid-column: 1 / -1; }
.gsui .gs-howto-h4b { margin-top: 16px; }
.gsui .gs-job-list { display: flex; flex-direction: column; gap: 8px; }
.gsui .gs-job-list li { display: flex; align-items: flex-start; gap: 10px; font: 500 13.5px/1.3 var(--gs-font-ui); }
.gsui .gs-job-ico { flex: none; font-size: 16px; line-height: 1.1; }
.gsui .gs-job-note { margin-top: 12px; font: italic 500 12.5px/1.35 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-mode-list { display: flex; flex-direction: column; gap: 8px; }
.gsui .gs-mode-li { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; font: 500 12.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); background: rgba(0, 0, 0, 0.25); border-left: 3px solid var(--gs-teal); border-radius: 2px; }
.gsui .gs-mode-li b { font: 800 12px/1.2 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-teal); }
.gsui .gs-mode-li--roguelike { border-left-color: var(--gs-red); }
.gsui .gs-mode-li--roguelike b { color: #ff6b77; }

/* Controls lists (handbook card, pause menu, title). Grouped, keys right-aligned against the action. */
.gsui .gs-ctrls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: start; }
.gsui .gs-ctrl-gtitle {
  margin-bottom: 7px;
  padding-bottom: 5px;
  font: 700 10.5px/1 var(--gs-font-deco);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gs-brass);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
}
.gsui .gs-ctrl-list { display: flex; flex-direction: column; gap: 6px; }
.gsui .gs-ctrl-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: 10px; font: 500 13.5px/1.25 var(--gs-font-ui); }
.gsui .gs-ctrl-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; row-gap: 4px; min-width: 0; }
.gsui .gs-ctrl-keys .gs-kbd { margin: 0 0 0 3px; font-size: 11px; }
.gsui .gs-kplus { margin: 0 0 0 3px; font: 800 11px/1 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-ctrl-act { padding-top: 3px; color: var(--gs-bone); }
.gsui .gs-ctrl-note { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-ctrl-note.is-key { color: #a8f5e8; }

/* "How to restock" strip */
.gsui .gs-restock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.gsui .gs-restock-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 9px 12px 9px 10px;
  background: linear-gradient(180deg, rgba(46, 230, 200, 0.08), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(46, 230, 200, 0.32);
  border-radius: 4px;
}
.gsui .gs-restock-step + .gs-restock-step::before {
  content: '▸';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: var(--gs-brass);
}
.gsui .gs-restock-n {
  position: absolute;
  top: -8px;
  left: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font: 900 10.5px/1 var(--gs-font-ui);
  color: var(--gs-ink);
  background: var(--gs-teal);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(46, 230, 200, 0.6);
}
.gsui .gs-restock-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 34px; font-size: 24px; }
.gsui .gs-restock-ico .gs-kbd { font-size: 14px; }
.gsui .gs-restock-t { font: 700 13px/1.2 var(--gs-font-ui); color: var(--gs-bone); }
.gsui .gs-restock-s { font: 500 11.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-restock .gs-kbd { font-size: 10px; height: 1.7em; }
.gsui .gs-glowshelf {
  display: block;
  width: 32px;
  height: 26px;
  border: 2px solid var(--gs-teal);
  border-radius: 2px;
  background: linear-gradient(transparent 44%, var(--gs-teal) 44% 56%, transparent 56%);
  box-shadow: 0 0 10px var(--gs-teal), inset 0 0 8px rgba(46, 230, 200, 0.5);
  animation: gs-glow 1.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------ connecting / error */

.gsui .gs-connecting {
  z-index: 30;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(10, 4, 18, 0.45), rgba(6, 2, 10, 0.8));
  animation: gs-fade 0.3s ease-out;
}
.gsui .gs-conn-box { min-width: 300px; padding: 28px 44px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.gsui .gs-conn-spin { position: relative; width: 76px; height: 76px; }
.gsui .gs-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--gs-brass); animation: gs-rot 7s linear infinite; }
.gsui .gs-ring-b {
  inset: 11px;
  border: 3px solid transparent;
  border-top-color: var(--gs-green);
  border-bottom-color: var(--gs-green);
  filter: drop-shadow(0 0 6px rgba(124, 252, 58, 0.8));
  animation: gs-rot 1.1s linear infinite reverse;
}
.gsui .gs-conn-eye { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; animation: gs-blink-eye 3.2s infinite; }
.gsui .gs-conn-text {
  font: 700 15px/1.3 var(--gs-font-deco);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gs-brass-lt);
}

.gsui .gs-error {
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at center, rgba(30, 4, 12, 0.55), rgba(6, 1, 6, 0.86));
  animation: gs-fade 0.3s ease-out;
}
.gsui .gs-err-box {
  width: min(460px, calc(100vw - 32px));
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  border-color: rgba(255, 59, 74, 0.6);
  animation: gs-pop 0.25s ease-out;
}
.gsui .gs-err-ico { font-size: 46px; line-height: 1; animation: gs-bob 2s ease-in-out infinite; }
.gsui .gs-err-title { font: 900 20px/1.2 var(--gs-font-deco); letter-spacing: 0.06em; color: #ff6b77; }
.gsui .gs-err-text { margin-bottom: 8px; font: 500 15px/1.4 var(--gs-font-ui); color: var(--gs-bone); user-select: text; -webkit-user-select: text; }

/* ------------------------------------------------------------------ HUD */

.gsui .gs-hud { z-index: 2; }
.gsui.gs-has-modal .gs-xhair,
.gsui.gs-has-modal .gs-prompt,
.gsui.gs-has-modal .gs-hint,
.gsui.gs-is-ko .gs-xhair,
.gsui.gs-is-ko .gs-prompt { opacity: 0; }

.gsui .gs-topbar {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  padding: 8px 30px 11px;
  isolation: isolate;
  white-space: nowrap;
}
.gsui .gs-topbar::before,
.gsui .gs-topbar::after {
  content: '';
  position: absolute;
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
}
.gsui .gs-topbar::before {
  inset: 0 -2px -2px;
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.35), var(--gs-brass) 70%, var(--gs-brass-lt));
}
.gsui .gs-topbar::after {
  inset: 0;
  background:
    linear-gradient(180deg, transparent calc(100% - 4px), rgba(201, 162, 39, 0.22) calc(100% - 4px) calc(100% - 3px), transparent calc(100% - 3px)),
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(155, 93, 229, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(34, 13, 52, 0.94), rgba(14, 6, 22, 0.92));
}
.gsui .gs-topbar.is-purge::before { background: linear-gradient(180deg, rgba(255, 59, 74, 0.4), #ff3b4a 70%, #ff9aa3); }
.gsui .gs-topbar.is-purge::after {
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(255, 40, 60, 0.3), transparent 70%),
    linear-gradient(180deg, rgba(52, 8, 18, 0.95), rgba(20, 4, 10, 0.93));
}
.gsui .gs-seg {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
}
.gsui .gs-seg + .gs-seg::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 162, 39, 0.55), transparent);
}
.gsui .gs-seg-l {
  margin-bottom: 4px;
  font: 700 9.5px/1 var(--gs-font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gs-brass);
}
.gsui .gs-seg-v {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 800 21px/1 var(--gs-font-ui);
  font-variant-numeric: tabular-nums;
  color: var(--gs-bone);
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(0, 0, 0, 0.6);
}
.gsui .gs-seg-night .gs-seg-v {
  font: 900 26px/0.9 var(--gs-font-deco);
  color: var(--gs-brass-lt);
  text-shadow: 0 0 12px rgba(201, 162, 39, 0.6), 0 1px 0 #000;
}
.gsui .gs-night-pre {
  align-self: center;
  margin-right: -1px;
  font: 700 10px/1 var(--gs-font-deco);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gs-brass);
  text-shadow: none;
}
.gsui .gs-seg-night.is-run .gs-seg-l { color: #ff6b77; text-shadow: 0 0 8px rgba(255, 59, 74, 0.6); }
.gsui .gs-seg-night.is-run .gs-seg-v { color: #ffd0d4; text-shadow: 0 0 12px rgba(255, 59, 74, 0.55), 0 1px 0 #000; }
.gsui .gs-moon { font-size: 18px; color: var(--gs-amber); text-shadow: 0 0 10px rgba(255, 181, 71, 0.8); }
.gsui .gs-cust-ico { font-size: 16px; }
.gsui .gs-seg-bank .gs-seg-v { color: var(--gs-bone); min-width: 4.2em; justify-content: center; }
.gsui .gs-delta {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  font: 900 15px/1 var(--gs-font-ui);
  white-space: nowrap;
  pointer-events: none;
  animation: gs-delta 1.25s ease-out forwards;
}
.gsui .gs-delta.is-up { color: var(--gs-green); text-shadow: 0 0 8px rgba(124, 252, 58, 0.8), 0 1px 0 #000; }
.gsui .gs-delta.is-down { color: var(--gs-red); text-shadow: 0 0 8px rgba(255, 59, 74, 0.8), 0 1px 0 #000; }

.gsui .gs-seg-quota { padding: 0 16px; }
.gsui .gs-qbar {
  position: relative;
  width: 178px;
  height: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-radius: 3px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.gsui .gs-qfill {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.12) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, #ffc46b, #ff8c1a 55%, #c45a00);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.gsui .gs-qtick { position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--gs-brass-lt); opacity: 0.6; }
/* (2026-10-10, w18-checkout; JUICE_MAP.md MN2, MN3) the quota bar's notches, lit as the fill passes; the MET stamp */
.gsui .gs-qnotch { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.18); pointer-events: none; transition: background 0.3s, box-shadow 0.3s; }
.gsui .gs-qnotch.is-lit { background: #fff1c2; box-shadow: 0 0 5px rgba(255, 210, 120, 0.9); }
.gsui .gs-seg-quota { position: relative; }
.gsui .gs-qmet {
  position: absolute; right: 6px; bottom: -3px; padding: 1px 5px 0; pointer-events: none;
  font: 900 11px/1.15 var(--gs-font-ui); letter-spacing: 0.14em; color: #7cfc3a;
  border: 2px solid #7cfc3a; border-radius: 3px; background: rgba(10, 30, 4, 0.55);
  transform: rotate(-9deg); text-shadow: 0 0 6px rgba(124, 252, 58, 0.6);
}
.gsui.gs-touch .gs-qmet { font-size: 9px; right: 2px; }
.gsui .gs-qtext {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 12.5px/1 var(--gs-font-ui);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
.gsui .gs-seg-quota.is-met .gs-seg-l { color: var(--gs-green); text-shadow: 0 0 8px rgba(124, 252, 58, 0.6); }
.gsui .gs-seg-quota.is-met .gs-qbar { border-color: var(--gs-green); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 12px rgba(124, 252, 58, 0.5); }
.gsui .gs-seg-quota.is-met .gs-qfill {
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px) 0 0 / 34px 100%,
    linear-gradient(180deg, #c4ff96, #7cfc3a 55%, #2f8a12);
  animation: gs-stripes 0.8s linear infinite;
}

.gsui .gs-chips {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.gsui .gs-phase,
.gsui .gs-modechip {
  --c: var(--gs-purple);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  font: 700 12.5px/1 var(--gs-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c);
  background: rgba(14, 6, 22, 0.85);
  border: 1px solid var(--c);
  border-radius: 999px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 18%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
  animation: gs-pop 0.25s ease-out;
}
.gsui .gs-phase-ico { font-size: 14px; text-shadow: none; }
.gsui .gs-phase--prep { --c: var(--gs-pumpkin); animation: gs-pop 0.25s ease-out, gs-chip-pulse 1.6s ease-in-out infinite; }
.gsui .gs-phase--open { --c: var(--gs-green); }
.gsui .gs-phase--open .gs-phase-ico {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gs-green);
  box-shadow: 0 0 8px var(--gs-green);
  animation: gs-blink 1.4s steps(2) infinite;
}
.gsui .gs-phase--closing { --c: var(--gs-magenta); animation: gs-pop 0.25s ease-out, gs-chip-pulse 0.9s ease-in-out infinite; }
.gsui .gs-phase--summary { --c: var(--gs-purple); }
.gsui .gs-modechip { --c: var(--gs-teal); }
.gsui .gs-mode--purge { --c: var(--gs-red); animation: gs-pop 0.25s ease-out, gs-chip-pulse 0.7s ease-in-out infinite; }

/* Buff chip (☕ 27s) with a draining ring */
.gsui .gs-buff {
  --c: #e0a060;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 13px 3px 3px;
  font: 800 12.5px/1 var(--gs-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe3c2;
  background: linear-gradient(180deg, rgba(48, 24, 10, 0.92), rgba(20, 9, 4, 0.9));
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent);
  animation: gs-pop 0.25s ease-out;
  transition: opacity 0.4s, transform 0.4s;
}
.gsui .gs-buff.is-out { opacity: 0; transform: scale(0.85); }
.gsui .gs-buff.is-low { animation: gs-chip-pulse 0.6s ease-in-out infinite; }
.gsui .gs-buff.is-low .gs-buff-secs { color: #ff9a6b; }
.gsui .gs-buff-ring {
  --p: 100%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(var(--c) var(--p), rgba(255, 255, 255, 0.1) 0);
}
.gsui .gs-buff-ico {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  border-radius: 50%;
  background: #1f0f06;
}
.gsui .gs-buff-name { font-size: 10.5px; letter-spacing: 0.16em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.gsui .gs-buff-secs { min-width: 2.2em; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; text-transform: none; color: #fff; }

/* Night modifier chips (Graveyard Run curses), a row under the phase chips */
.gsui .gs-mods {
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  width: min(980px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px 8px;
}
.gsui .gs-mods-lbl {
  align-self: center;
  margin-right: 2px;
  font: 700 10px/1 var(--gs-font-deco);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #c9a0ff;
  text-shadow: 0 0 8px rgba(155, 93, 229, 0.8), 0 1px 0 #000;
}
.gsui .gs-mod {
  --c: #b98aff;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 300px;
  padding: 4px 12px 4px 4px;
  color: #efe4ff;
  background: linear-gradient(180deg, rgba(30, 12, 44, 0.92), rgba(12, 5, 20, 0.9));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--c) 22%, transparent);
  pointer-events: auto;
  animation: gs-pop 0.3s ease-out both;
}
.gsui .gs-mod:nth-of-type(2) { animation-delay: 0.08s; }
.gsui .gs-mod:nth-of-type(3) { animation-delay: 0.16s; }
.gsui .gs-mod-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 32%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent);
}
.gsui .gs-mod-tx { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.gsui .gs-mod-name { font: 800 11.5px/1.15 var(--gs-font-ui); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--c) 45%, #fff); }
.gsui .gs-mod-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font: 500 11.5px/1.3 var(--gs-font-ui);
  color: var(--gs-bone-dim);
  transition: max-height 0.45s ease, opacity 0.45s ease, margin 0.45s ease;
}
.gsui .gs-mods.is-intro .gs-mod-desc,
.gsui .gs-mods.is-prep .gs-mod-desc,
.gsui .gs-mod:hover .gs-mod-desc { max-height: 4.2em; margin: 3px 0 2px; opacity: 1; }
.gsui .gs-hb-staffrow { --c: var(--gs-teal); } /* (2026-10-10, w195-trouble: the Handbook's Night staff rows, the staff teal) */
.gsui .gs-mod--blackout { --c: #8a8fa8; }
.gsui .gs-mod--slime { --c: #7cfc3a; }
.gsui .gs-mod--rush { --c: #ffb547; }
.gsui .gs-mod--grumpy { --c: #ffd84a; }
.gsui .gs-mod--heavy { --c: #c9a227; }
.gsui .gs-mod--purge { --c: #ff3b4a; }
.gsui .gs-mod--restless { --c: #2ee6c8; }
.gsui .gs-mod--thieves { --c: #f15bb5; }
.gsui .gs-mod--fog { --c: #b9c4cc; }
.gsui .gs-mod--sticky { --c: #e8a35a; } /* (2026-10-08, w4-events: Five-Finger Discount) */
/* (w4-events) the Handbook's twist list: two columns of tag + line, in the chip colours (each twist's .gs-mod--<id> rule sets --c) */
.gsui .gs-hb-twists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.gsui .gs-hb-twist { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.gsui .gs-hb-twist-tx { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; }
.gsui .gs-hb-twist-name { font: 800 11px/1.15 var(--gs-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 45%, #fff); }
.gsui .gs-hb-twist-line { margin-top: 2px; font: 500 11.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
@media (max-width: 560px) { .gsui .gs-hb-twists { grid-template-columns: 1fr; } }

/* Crosshair */
.gsui .gs-xhair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity 0.15s; }
.gsui .gs-xhair i {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  transition: width 0.12s ease-out, height 0.12s ease-out, opacity 0.12s, border-color 0.12s, background 0.12s;
}
.gsui .gs-x-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gs-bone);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.5);
}
.gsui .gs-x-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid transparent; opacity: 0; }
.gsui .gs-x-dia { width: 10px; height: 10px; border: 2px solid transparent; opacity: 0; transform: translate(-50%, -50%) rotate(45deg); }
.gsui .gs-xhair[data-mode='grab'] .gs-x-dot { width: 5px; height: 5px; background: var(--gs-green); }
.gsui .gs-xhair[data-mode='grab'] .gs-x-ring {
  width: 28px;
  height: 28px;
  opacity: 1;
  border: 2px dashed var(--gs-green);
  filter: drop-shadow(0 0 4px rgba(124, 252, 58, 0.9)) drop-shadow(0 0 1px #000);
  animation: gs-spin-c 5s linear infinite;
}
.gsui .gs-xhair[data-mode='holding'] .gs-x-dot { width: 8px; height: 8px; background: var(--gs-pumpkin); box-shadow: 0 0 0 1.5px #000, 0 0 10px var(--gs-pumpkin); }
.gsui .gs-xhair[data-mode='holding'] .gs-x-ring {
  width: 20px;
  height: 20px;
  opacity: 1;
  border: 3px solid var(--gs-pumpkin);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 140, 26, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.gsui .gs-xhair[data-mode='use'] .gs-x-dot { width: 4px; height: 4px; background: var(--gs-teal); }
.gsui .gs-xhair[data-mode='use'] .gs-x-dia {
  width: 18px;
  height: 18px;
  opacity: 1;
  border-color: var(--gs-teal);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 12px rgba(46, 230, 200, 0.8);
  animation: gs-dia-pulse 1s ease-in-out infinite;
}
/* (2026-10-10, w18-beam; JUICE_MAP.md GR6) the beam under strain: the held dot goes amber, then shivers a pixel (the
   individual `translate` property, so the dot's own centring transform stays); GR7 / GR8: the beam lost its hold, the
   crosshair flashes amber for 150 ms */
.gsui .gs-xhair[data-mode='holding'][data-strain] .gs-x-dot { background: #ffc21a; box-shadow: 0 0 0 1.5px #000, 0 0 12px #ffc21a; }
.gsui .gs-xhair[data-mode='holding'][data-strain='2'] .gs-x-dot { animation: gs-x-shiver 0.09s steps(2, jump-none) infinite; }
@keyframes gs-x-shiver { 0% { translate: -1px 0; } 100% { translate: 1px 0; } }
.gsui .gs-xhair[data-flash='1'] .gs-x-dot { background: #ffc21a; box-shadow: 0 0 0 1.5px #000, 0 0 12px #ffc21a; }
.gsui .gs-xhair[data-flash='1'] .gs-x-ring { width: 24px; height: 24px; opacity: 1; border: 2px solid #ffc21a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 14px rgba(255, 194, 26, 0.85); transition: none; }

/* Interaction prompt */
.gsui .gs-prompt {
  position: absolute;
  left: 50%;
  bottom: 17vh;
  transform: translateX(-50%);
  /* max-content + pre-wrap: keeps the double spaces in "[E] Restock  Eyeball Soda" but long hints
     ("Box of Eyeball Soda (8): aim at a glowing shelf and press [E] to stock it") wrap instead of running off-screen */
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 20px;
  font: 700 17px/1.25 var(--gs-font-ui);
  text-align: center;
  white-space: pre-wrap;
  color: var(--gs-bone);
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(180deg, rgba(38, 15, 58, 0.92), rgba(16, 6, 26, 0.9));
  border: 1px solid var(--gs-brass-dim);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(240, 213, 122, 0.2);
  animation: gs-prompt-in 0.16s ease-out;
  transition: opacity 0.15s;
}

/* Tutorial hint */
.gsui .gs-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: min(480px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  font: 500 14px/1.35 var(--gs-font-ui);
  color: var(--gs-bone);
  background: linear-gradient(90deg, rgba(36, 14, 56, 0.9), rgba(18, 8, 28, 0.82));
  border: 1px solid rgba(155, 93, 229, 0.5);
  border-left: 3px solid var(--gs-purple);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.gsui .gs-hint-tag {
  flex: none;
  padding: 5px 7px;
  font: 900 10px/1 var(--gs-font-ui);
  letter-spacing: 0.16em;
  color: var(--gs-ink);
  background: var(--gs-purple);
  border-radius: 3px;
}
.gsui .gs-hint-text .gs-kbd { font-size: 11px; }

/* Scoreboard (crew list) */
.gsui .gs-score {
  position: absolute;
  left: 50%;
  top: 112px;
  transform: translateX(-50%);
  width: min(540px, calc(100vw - 32px));
  padding: 18px 18px 14px;
  animation: gs-pop 0.15s ease-out;
}
.gsui .gs-score-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.gsui .gs-score-head .gs-deco-title { font-size: 15px; }
.gsui .gs-score-count { flex: none; font: 600 12px/1 var(--gs-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gs-bone-dim); }
.gsui .gs-crew { display: flex; flex-direction: column; gap: 6px; }
.gsui .gs-crew-row {
  --pc: var(--gs-purple);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 26%, transparent), rgba(14, 6, 22, 0.55) 65%);
  border-left: 4px solid var(--pc);
  border-radius: 3px;
}
.gsui .gs-crew-row.is-you { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.45); }
.gsui .gs-crew-portrait {
  width: 46px;
  height: 46px;
  padding: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.45));
  box-shadow: 0 0 0 2px var(--pc), 0 0 10px color-mix(in srgb, var(--pc) 50%, transparent);
}
.gsui .gs-crew-portrait svg { display: block; width: 100%; height: 100%; }
.gsui .gs-crew-who { display: flex; flex-direction: column; min-width: 0; }
.gsui .gs-crew-name {
  overflow: hidden;
  font: 700 16px/1.2 var(--gs-font-ui);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--gs-bone);
}
.gsui .gs-you {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  font: 900 9.5px/1.2 var(--gs-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--gs-ink);
  background: var(--pc);
  border-radius: 3px;
}
.gsui .gs-crew-mon { font: 500 12px/1.2 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-crew-status { font: 800 11px/1 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-green); }
.gsui .gs-crew-row.is-ko .gs-crew-status { color: var(--gs-red); animation: gs-blink 1s steps(2) infinite; }
.gsui .gs-crew-row.is-ko .gs-crew-portrait { filter: grayscale(1) brightness(0.7); }
.gsui .gs-crew-row.is-ko .gs-crew-name { color: var(--gs-bone-dim); }
.gsui .gs-crew-empty { padding: 14px; text-align: center; font-style: italic; color: var(--gs-bone-dim); }
.gsui .gs-score-foot { margin-top: 12px; font: 500 12px/1.4 var(--gs-font-ui); text-align: center; color: var(--gs-bone-dim); }
.gsui .gs-score-foot .gs-kbd { font-size: 10px; }

/* ------------------------------------------------------------------ damage / KO */

.gsui .gs-dmg {
  z-index: 1;
  opacity: 0;
  background: radial-gradient(ellipse 75% 70% at center, transparent 45%, rgba(255, 30, 50, 0.35) 72%, rgba(190, 0, 20, 0.85) 100%);
}

.gsui .gs-ko {
  z-index: 3;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse 70% 65% at center, rgba(24, 6, 34, 0) 25%, rgba(24, 6, 34, 0.6) 70%, rgba(8, 2, 14, 0.94) 100%);
  -webkit-backdrop-filter: grayscale(1) brightness(0.72) contrast(1.05);
  backdrop-filter: grayscale(1) brightness(0.72) contrast(1.05);
  animation: gs-fade 0.5s ease-out;
}
.gsui .gs-ko-box { position: relative; text-align: center; }
.gsui .gs-ko-title {
  font-family: var(--gs-font-title);
  font-size: clamp(60px, 8.5vw, 128px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gs-bone);
  text-shadow: 0 0 2px #000, 0 5px 0 #3a0d2a, 0 0 34px rgba(241, 91, 181, 0.6);
  animation: gs-woozy 2.6s ease-in-out infinite;
}
.gsui .gs-ko-sub {
  margin-top: 10px;
  font: 600 clamp(15px, 1.4vw, 19px)/1.3 var(--gs-font-ui);
  letter-spacing: 0.04em;
  color: var(--gs-bone);
  text-shadow: 0 2px 6px #000;
}
.gsui .gs-ko-stars { position: absolute; left: 50%; top: -6px; width: 0; height: 0; }
.gsui .gs-star-x {
  position: absolute;
  animation: gs-orbit-x 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.56s);
}
.gsui .gs-star-y {
  display: block;
  font-size: 26px;
  color: #ffe14d;
  text-shadow: 0 0 10px rgba(255, 225, 77, 0.9), 0 0 2px #000;
  animation: gs-orbit-y 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.56s - 0.7s);
}

/* ------------------------------------------------------------------ banners */

.gsui .gs-banners { z-index: 4; }
.gsui .gs-banners.is-purge::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px 50px rgba(255, 20, 40, 0.55);
  animation: gs-siren-pulse 0.55s ease-in-out infinite alternate;
}
.gsui .gs-banner {
  position: absolute;
  top: 19%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: gs-banner-in 0.55s cubic-bezier(0.2, 1.35, 0.4, 1) both;
  transition: opacity 0.45s, transform 0.45s;
}
.gsui .gs-banner.is-out { opacity: 0; transform: translateY(-18px) scale(0.98); }
.gsui .gs-banner-title {
  position: relative;
  padding: 0 0.3em;
  font-family: var(--gs-font-title);
  font-weight: 400;
  font-size: clamp(54px, 7vw, 112px);
  line-height: 1.05;
  letter-spacing: 0.04em;
  white-space: nowrap; /* UI._fitBanner() shrinks long titles to fit 800 px / phones; wraps only as a last resort */
  color: var(--gs-bone);
}
.gsui .gs-banner-title.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.gsui .gs-banner-sub { max-width: calc(100vw - 32px); }
.gsui .gs-banner-sub {
  margin-top: 12px;
  padding: 7px 22px;
  font: 700 clamp(14px, 1.4vw, 20px)/1.3 var(--gs-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gs-bone);
  text-shadow: 0 2px 6px #000;
  background: linear-gradient(90deg, transparent, rgba(12, 4, 20, 0.78) 15%, rgba(12, 4, 20, 0.78) 85%, transparent);
  border-top: 1px solid var(--bc, var(--gs-brass-dim));
  border-bottom: 1px solid var(--bc, var(--gs-brass-dim));
  border-image: linear-gradient(90deg, transparent, var(--bc, var(--gs-brass)), transparent) 1;
}

.gsui .gs-banner--purge { --bc: #ff3b4a; }
.gsui .gs-siren {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(clamp(54px, 7vw, 112px) * -0.12);
  height: calc(clamp(54px, 7vw, 112px) * 1.3);
  background: repeating-linear-gradient(-45deg, #e3162b 0 28px, #16020a 28px 56px);
  background-size: 79px 79px;
  opacity: 0.88;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  box-shadow: 0 0 40px rgba(255, 30, 50, 0.6);
  animation: gs-siren-move 0.6s linear infinite;
}
.gsui .gs-banner--purge .gs-banner-title {
  padding: 0.02em 0.5em 0.06em;
  color: #ff4152;
  background: #12020a;
  border: 3px solid #ff3b4a;
  box-shadow: 0 0 0 3px #12020a, 0 0 36px rgba(255, 40, 60, 0.7), inset 0 0 26px rgba(255, 40, 60, 0.35);
  text-shadow: 0 0 18px rgba(255, 50, 70, 0.9), 0 3px 0 #000;
  animation: gs-shake 0.35s linear infinite;
}

.gsui .gs-banner--shift { --bc: var(--gs-green); }
.gsui .gs-banner--shift .gs-banner-title {
  color: var(--gs-green);
  text-shadow: 0 0 22px rgba(124, 252, 58, 0.85), 0 3px 0 #08230a, 0 0 2px #000;
  animation: gs-flicker 2.2s steps(1) infinite;
}
.gsui .gs-banner--shift .gs-banner-title::before,
.gsui .gs-banner--shift .gs-banner-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: 0 0.3em;
  pointer-events: none;
  text-shadow: none;
}
.gsui .gs-banner--shift .gs-banner-title::before {
  color: var(--gs-magenta);
  opacity: 0.85;
  clip-path: inset(10% 0 60% 0);
  transform: translate(-4px, 0);
  animation: gs-glitch-a 1.3s steps(1) infinite;
}
.gsui .gs-banner--shift .gs-banner-title::after {
  color: var(--gs-teal);
  opacity: 0.85;
  clip-path: inset(60% 0 12% 0);
  transform: translate(4px, 0);
  animation: gs-glitch-b 1.05s steps(1) infinite;
}

.gsui .gs-banner--good { --bc: var(--gs-brass-lt); }
.gsui .gs-banner--good .gs-banner-title {
  font-family: var(--gs-font-deco);
  font-weight: 900;
  font-size: clamp(44px, 5.6vw, 92px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(100deg, #b8860b 0%, #f0d57a 30%, #fff8d6 45%, #f0d57a 60%, #c9a227 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 3px 0 #3a2a00) drop-shadow(0 0 22px rgba(240, 213, 122, 0.55));
  animation: gs-shine 2.6s linear infinite;
}

.gsui .gs-banner--bad { --bc: var(--gs-red); }
.gsui .gs-banner--bad .gs-banner-title {
  color: #ff4152;
  text-shadow: 0 0 20px rgba(255, 50, 70, 0.75), 0 4px 0 #3a0008, 0 0 2px #000;
  animation: gs-droop 2.4s ease-in-out infinite;
}

.gsui .gs-banner--info { --bc: var(--gs-purple); }
.gsui .gs-banner--info .gs-banner-title {
  font-family: var(--gs-font-deco);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 82px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 24px rgba(155, 93, 229, 0.95), 0 0 6px rgba(155, 93, 229, 0.8), 0 3px 0 #1b0a2c;
}

/* ------------------------------------------------------------------ toasts */

.gsui .gs-toasts {
  position: absolute;
  z-index: 12; /* above modals, so "not enough money" etc. shows while the Supply-O-Matic is open */
  top: 14px;
  right: 14px;
  width: 290px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.gsui .gs-toast {
  --tc: var(--gs-purple);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 12px 8px 8px;
  font: 600 14px/1.25 var(--gs-font-ui);
  color: var(--gs-bone);
  background: linear-gradient(90deg, rgba(38, 15, 58, 0.95), rgba(16, 7, 26, 0.92));
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  border-left: 3px solid var(--tc);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), -4px 0 14px color-mix(in srgb, var(--tc) 25%, transparent);
  animation: gs-toast-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
  transition: opacity 0.35s, transform 0.35s;
}
.gsui .gs-toast.is-out { opacity: 0; transform: translateX(26px); }
.gsui .gs-toast-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font: 900 12px/1 var(--gs-font-ui);
  color: var(--gs-ink);
  background: var(--tc);
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 60%, transparent);
}
.gsui .gs-toast-text { min-width: 0; overflow-wrap: anywhere; }
.gsui .gs-toast-text .gs-kbd { font-size: 10px; height: 1.7em; }
.gsui .gs-toast-count { flex: none; margin-left: 4px; font: 900 12px/1 var(--gs-font-ui); color: var(--tc); }
.gsui .gs-toast--good { --tc: var(--gs-green); }
.gsui .gs-toast--bad { --tc: var(--gs-red); }
.gsui .gs-toast--money { --tc: var(--gs-brass-lt); }
.gsui .gs-toast--money .gs-toast-text { color: #ffe9a8; }
.gsui .gs-toast--money .gs-toast-ico { font-size: 14px; background: radial-gradient(circle at 35% 30%, #fff5c8, #f0d57a 45%, #b8860b); }

/* ------------------------------------------------------------------ modal layers */

.gsui .gs-modal {
  z-index: 10;
  display: grid;
  place-items: center;
  place-items: safe center;
  overflow: auto;
  overflow-x: hidden; /* the vw-sized panels would otherwise scroll sideways by a scrollbar width */
  pointer-events: auto;
  animation: gs-fade 0.25s ease-out;
}

/* ------------------------------------------------------------------ order terminal (green CRT) */

.gsui .gs-term-wrap { background: radial-gradient(ellipse at center, rgba(4, 12, 6, 0.4), rgba(4, 2, 8, 0.78)); }
.gsui .gs-term {
  position: relative;
  width: min(880px, calc(100vw - 24px));
  margin: 12px;
  padding: 20px 20px 10px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #3d342a 0%, #2a231c 55%, #1d1813 100%);
  box-shadow:
    0 0 0 2px #0b0806,
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 7px #2b241d,
    inset 0 0 0 8px rgba(201, 162, 39, 0.55),
    0 30px 70px rgba(0, 0, 0, 0.7);
  animation: gs-pop 0.22s ease-out;
}
.gsui .gs-term-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: min(680px, calc(100vh - 96px));
  padding: 16px 22px 12px;
  overflow: hidden;
  outline: none;
  font: 22px/1.1 var(--gs-font-crt);
  color: #8dff5a;
  text-shadow: 0 0 6px rgba(124, 252, 58, 0.7);
  background: radial-gradient(ellipse 85% 80% at 50% 45%, #0e3a14 0%, #072009 60%, #020b03 100%);
  border-radius: 18px / 24px;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.85), inset 0 0 8px rgba(124, 252, 58, 0.35), 0 0 0 3px #0b0806;
  animation: gs-crt-on 0.4s ease-out, gs-crt-flicker 5s steps(1) infinite 0.5s;
}
.gsui .gs-term-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 4px);
}
.gsui .gs-term-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(141, 255, 90, 0.07), transparent) 0 -40% / 100% 35% no-repeat,
    radial-gradient(ellipse 60% 40% at 18% 8%, rgba(255, 255, 255, 0.09), transparent 70%);
  animation: gs-roll 7s linear infinite;
}
.gsui .gs-term-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gsui .gs-term-title {
  font-size: 30px;
  letter-spacing: 0.06em;
  color: #c4ff9e;
  text-shadow: 0 0 10px rgba(124, 252, 58, 0.9);
}
.gsui .gs-term-x {
  padding: 0 6px;
  font: 24px/1 var(--gs-font-crt);
  color: #8dff5a;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: inherit;
}
.gsui .gs-term-x:hover { color: #062008; background: #8dff5a; text-shadow: none; }
.gsui .gs-term-bal { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 26px; color: #c4ff9e; }
.gsui .gs-term-bal-l { white-space: nowrap; }
.gsui .gs-term-status { overflow: hidden; font-size: 19px; white-space: nowrap; text-overflow: ellipsis; color: rgba(141, 255, 90, 0.7); }
.gsui .gs-term-status.is-open { color: #ffd27a; text-shadow: 0 0 6px rgba(255, 181, 71, 0.7); }
.gsui .gs-term-money { color: #e6ffb8; }
/* 2026-10-04: the loading dock line (when the truck comes, what's on order, what's waiting on the dock) */
.gsui .gs-term-dock { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; border: 1px dashed rgba(124, 252, 58, 0.45); font-size: 18px; line-height: 1.15; color: rgba(141, 255, 90, 0.85); }
.gsui .gs-term-dock-status.is-coming { color: #ffd27a; text-shadow: 0 0 6px rgba(255, 181, 71, 0.7); }
.gsui .gs-term-dock-list { font-size: 16px; color: rgba(196, 255, 158, 0.75); }
.gsui .gs-cursor { margin-left: 2px; animation: gs-blink 1s steps(2) infinite; }
.gsui .gs-term-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; border-bottom: 2px solid rgba(124, 252, 58, 0.45); }
.gsui .gs-term-tab {
  padding: 3px 14px 1px;
  font: 22px/1.1 var(--gs-font-crt);
  letter-spacing: 0.04em;
  color: #8dff5a;
  background: transparent;
  border: 1px dashed rgba(124, 252, 58, 0.55);
  cursor: pointer;
  pointer-events: auto;
  text-shadow: inherit;
}
.gsui .gs-term-tab:hover { border-style: solid; }
.gsui .gs-term-tab.is-active { color: #052006; background: #8dff5a; border-style: solid; text-shadow: none; box-shadow: 0 0 12px rgba(124, 252, 58, 0.6); }
.gsui .gs-term-tab.is-locked { color: rgba(141, 255, 90, 0.4); border-color: rgba(124, 252, 58, 0.25); text-shadow: none; }
.gsui .gs-term-tab.is-locked.is-active { color: #0b2a0d; background: rgba(141, 255, 90, 0.45); }
.gsui .gs-term-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #4fc21d transparent;
}
.gsui .gs-trow {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 76px 116px;
  align-items: center;
  gap: 12px;
  padding: 6px 6px;
  border-bottom: 1px dashed rgba(124, 252, 58, 0.22);
}
.gsui .gs-trow-head { padding: 2px 6px; font-size: 18px; color: rgba(141, 255, 90, 0.55); border-bottom-style: solid; }
.gsui .gs-trow-info { display: flex; flex-direction: column; min-width: 0; }
.gsui .gs-trow-name { font-size: 25px; line-height: 1; color: #c4ff9e; }
.gsui .gs-trow-sub { overflow: hidden; font-size: 18px; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; color: rgba(141, 255, 90, 0.62); }
.gsui .gs-trow-price { font-size: 25px; text-align: right; color: #e6ffb8; }
.gsui .gs-trow.is-poor .gs-trow-price { color: rgba(255, 120, 120, 0.85); text-shadow: 0 0 6px rgba(255, 60, 60, 0.6); }
.gsui .gs-swatch {
  justify-self: center;
  width: 20px;
  height: 20px;
  background: var(--sw);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 10px var(--sw), inset 0 0 4px rgba(0, 0, 0, 0.4);
}
.gsui .gs-term-ico {
  justify-self: center;
  font-size: 22px;
  text-shadow: none;
  filter: grayscale(1) sepia(1) hue-rotate(55deg) saturate(4) brightness(1.1) drop-shadow(0 0 4px rgba(124, 252, 58, 0.7));
}
.gsui .gs-tbtn {
  padding: 3px 0 1px;
  font: 22px/1.1 var(--gs-font-crt);
  letter-spacing: 0.06em;
  text-align: center;
  color: #8dff5a;
  background: rgba(124, 252, 58, 0.06);
  border: 1px solid #7cfc3a;
  cursor: pointer;
  pointer-events: auto;
  text-shadow: inherit;
}
.gsui .gs-tbtn:hover:not(:disabled):not(.is-fake) { color: #052006; background: #8dff5a; text-shadow: none; box-shadow: 0 0 14px rgba(124, 252, 58, 0.7); }
.gsui .gs-tbtn:active:not(:disabled) { transform: translateY(1px); }
.gsui .gs-tbtn:disabled { color: rgba(141, 255, 90, 0.32); border-color: rgba(124, 252, 58, 0.25); background: transparent; cursor: not-allowed; text-shadow: none; }
.gsui .gs-tbtn.is-fake { color: rgba(141, 255, 90, 0.3); border-color: rgba(124, 252, 58, 0.2); background: transparent; cursor: default; text-shadow: none; }
.gsui .gs-term-locked { padding: 10px 2px; color: rgba(141, 255, 90, 0.55); }
.gsui .gs-term-locked > div:first-child + div { margin-bottom: 12px; font-size: 20px; }
.gsui .gs-term-locked-big { margin: 6px 0 4px; font-size: 28px; color: rgba(196, 255, 158, 0.7); animation: gs-blink 2s steps(2) infinite; }
/* locked rows (round 3: "Requires: Break Room", "Requires store tier 2"): the item dims, the reason stays readable */
.gsui .gs-trow.is-locked .gs-ticon,
.gsui .gs-trow.is-locked .gs-trow-name,
.gsui .gs-trow.is-locked .gs-trow-desc,
.gsui .gs-trow.is-locked .gs-trow-price { opacity: 0.45; }
.gsui .gs-term-log { min-height: 1.1em; font-size: 21px; color: #e6ffb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsui .gs-term-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  font-size: 19px;
  color: rgba(141, 255, 90, 0.7);
  border-top: 1px solid rgba(124, 252, 58, 0.3);
}
.gsui .gs-term-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 9px;
  font: 700 9.5px/1 var(--gs-font-ui);
  letter-spacing: 0.32em;
  color: rgba(240, 213, 122, 0.7);
  text-shadow: 0 1px 0 #000;
}
.gsui .gs-term-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7cfc3a;
  box-shadow: 0 0 8px #7cfc3a, 0 0 2px #fff inset;
  animation: gs-blink 2.4s steps(2) infinite;
}
.gsui .gs-term-screw {
  position: absolute;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e9d48a, #8a6b15 70%);
  box-shadow: 0 1px 1px #000;
}
.gsui .gs-term-screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 4px; height: 1px; background: #3a2c08; transform: rotate(35deg); }
.gsui .gs-term-screw:nth-of-type(2) { left: 6px; }
.gsui .gs-term-screw:nth-of-type(3) { right: 6px; }

/* Round 2 terminal: item pictures, sections, staff, management */
.gsui .gs-ticon {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(124, 252, 58, 0.2), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #0a2a0e, #031006);
  border: 1px solid rgba(124, 252, 58, 0.5);
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85), 0 0 8px rgba(124, 252, 58, 0.22);
}
.gsui .gs-ticon::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 40%);
}
.gsui .gs-ticon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s ease-out;
}
.gsui .gs-ticon > svg { display: block; width: 84%; height: 84%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.gsui .gs-ticon .gs-swatch { width: 26px; height: 26px; }
.gsui .gs-ticon .gs-term-ico { font-size: 26px; }
.gsui .gs-ticon.is-staff { border-radius: 50%; border-color: rgba(46, 230, 200, 0.6); }
.gsui .gs-ticon.is-staff > svg { width: 92%; height: 92%; margin-top: 6%; }
.gsui .gs-ticon.is-unlock { border-color: rgba(255, 210, 122, 0.55); }
.gsui .gs-trow:hover .gs-ticon img { transform: scale(1.14) rotate(-5deg); }
.gsui .gs-ticon--sm { width: 40px; height: 40px; }
/* Stock tab: the item pictures were the playtest ask ("an image of the actual item"), so they get a bigger frame */
.gsui .gs-term-pane--stock .gs-trow { grid-template-columns: 70px minmax(0, 1fr) 76px 116px; }
.gsui .gs-term-pane--stock .gs-ticon { width: 64px; height: 64px; }
.gsui .gs-trow-desc { font-size: 19px; line-height: 1.05; color: rgba(214, 255, 186, 0.86); }
.gsui .gs-trow-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 0 6px;
  font-size: 19px;
  line-height: 1.05;
  vertical-align: 2px;
  color: #052006;
  background: rgba(141, 255, 90, 0.75);
  text-shadow: none;
}
.gsui .gs-trow.is-maxed .gs-trow-badge { background: #ffb547; }
.gsui .gs-trow.is-owned .gs-tbtn:disabled {
  color: #052006;
  background: rgba(141, 255, 90, 0.6);
  border-color: #8dff5a;
  cursor: default;
}
.gsui .gs-trow.is-owned .gs-trow-price { text-decoration: line-through; color: rgba(141, 255, 90, 0.45); }
.gsui .gs-trow.is-maxed .gs-tbtn:disabled { color: #ffb547; border-color: rgba(255, 181, 71, 0.55); text-shadow: 0 0 6px rgba(255, 181, 71, 0.6); }
.gsui .gs-trow-price small { font-size: 16px; opacity: 0.7; }
.gsui .gs-trow--crew { grid-template-columns: 58px minmax(0, 1fr) 76px 116px; padding: 4px 6px; }
.gsui .gs-trow--crew .gs-trow-name { font-size: 23px; }
.gsui .gs-tbtn--fire { color: #ffb0a0; border-color: rgba(255, 120, 100, 0.7); background: rgba(255, 90, 70, 0.06); }
.gsui .gs-tbtn--fire:hover:not(:disabled) { color: #200604 !important; background: #ff8a7a !important; box-shadow: 0 0 14px rgba(255, 110, 90, 0.7) !important; }
.gsui .gs-tbtn.is-armed {
  color: #1d1000;
  background: #ffb547;
  border-color: #ffd27a;
  text-shadow: none;
  box-shadow: 0 0 16px rgba(255, 181, 71, 0.75);
  animation: gs-armed-crt 0.5s steps(2) infinite;
}
.gsui .gs-tsec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  font-size: 21px;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: #c4ff9e;
}
.gsui .gs-tsec::before,
.gsui .gs-tsec::after { content: ''; flex: 1; border-top: 2px dashed rgba(124, 252, 58, 0.4); }
.gsui .gs-tsec::before { flex: 0 0 18px; }
.gsui .gs-tnote { margin: 10px 2px 4px; font-size: 18px; line-height: 1.1; color: rgba(141, 255, 90, 0.55); }
.gsui .gs-tnote.is-warn { color: #ffb547; text-shadow: 0 0 6px rgba(255, 181, 71, 0.6); }
.gsui .gs-tempty { padding: 10px 6px; font-size: 20px; color: rgba(141, 255, 90, 0.5); animation: gs-blink 2.4s steps(2) infinite; }
.gsui .gs-tstats { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.gsui .gs-tstat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 2px 10px 0;
  border: 1px solid rgba(124, 252, 58, 0.45);
  background: rgba(124, 252, 58, 0.06);
}
.gsui .gs-tstat-k { font-size: 17px; color: rgba(141, 255, 90, 0.6); }
.gsui .gs-tstat-v { font-size: 22px; color: #e6ffb8; }
.gsui .gs-tstat.is-full .gs-tstat-v { color: #ffb547; }

.gsui .gs-mgmt { padding: 2px 2px 8px; }
.gsui .gs-mgmt-top { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.gsui .gs-mgmt-cur {
  padding: 10px 14px 12px;
  border: 2px solid rgba(124, 252, 58, 0.6);
  background: rgba(124, 252, 58, 0.06);
  box-shadow: inset 0 0 18px rgba(124, 252, 58, 0.12);
}
.gsui .gs-mgmt-cur.is-run { border-color: #ffb547; background: rgba(255, 140, 40, 0.07); box-shadow: inset 0 0 18px rgba(255, 140, 40, 0.15); }
.gsui .gs-mgmt-k { font-size: 17px; letter-spacing: 0.18em; color: rgba(141, 255, 90, 0.6); }
.gsui .gs-mgmt-mode { font-size: 34px; line-height: 1; letter-spacing: 0.06em; color: #e6ffb8; text-shadow: 0 0 12px rgba(124, 252, 58, 0.8); }
.gsui .gs-mgmt-cur.is-run .gs-mgmt-mode { color: #ffd27a; text-shadow: 0 0 12px rgba(255, 160, 60, 0.8); }
.gsui .gs-mgmt-desc { margin-top: 2px; font-size: 20px; line-height: 1.05; color: rgba(214, 255, 186, 0.85); }
.gsui .gs-mgmt-rows { display: flex; flex-direction: column; gap: 1px; margin: 0 2px; }
.gsui .gs-mrow { display: flex; align-items: baseline; gap: 8px; font-size: 20px; line-height: 1.1; }
.gsui .gs-mrow-k { flex: none; color: rgba(141, 255, 90, 0.7); }
.gsui .gs-mrow-dots { flex: 1; min-width: 14px; border-bottom: 2px dotted rgba(124, 252, 58, 0.28); transform: translateY(-5px); }
.gsui .gs-mrow-v { min-width: 0; text-align: right; color: #e6ffb8; }
.gsui .gs-mrow.is-curse .gs-mrow-v { color: #ffb547; }
.gsui .gs-mrow.is-best .gs-mrow-v { color: #fff3b0; }
.gsui .gs-mgmt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gsui .gs-mgmt-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
  border: 1px dashed rgba(124, 252, 58, 0.55);
}
.gsui .gs-mgmt-card--roguelike { border-color: rgba(255, 181, 71, 0.6); }
.gsui .gs-mgmt-card.is-armed { border-style: solid; border-color: #ffb547; background: rgba(255, 140, 40, 0.08); }
.gsui .gs-mgmt-cname { font-size: 25px; line-height: 1; color: #c4ff9e; }
.gsui .gs-mgmt-card.is-current { box-shadow: inset 0 0 14px rgba(124, 252, 58, 0.14); }
.gsui .gs-mgmt-card--roguelike.is-current { box-shadow: inset 0 0 14px rgba(255, 140, 40, 0.16); }
.gsui .gs-mgmt-curtag {
  display: inline-block;
  margin-left: 10px;
  padding: 0 6px;
  font-size: 17px;
  line-height: 1.1;
  vertical-align: 3px;
  letter-spacing: 0.1em;
  color: #052006;
  background: rgba(141, 255, 90, 0.75);
  text-shadow: none;
}
.gsui .gs-mgmt-card--roguelike .gs-mgmt-curtag { background: #ffb547; color: #1d1000; }
.gsui .gs-mgmt-card--roguelike .gs-mgmt-cname { color: #ffd27a; }
.gsui .gs-mgmt-cdesc { flex: 1; font-size: 18px; line-height: 1.05; color: rgba(141, 255, 90, 0.7); }
.gsui .gs-mgmt-btn { margin-top: 6px; padding: 5px 8px 3px; font-size: 21px; white-space: normal; }

/* ------------------------------------------------------------------ end-of-night receipt */

.gsui .gs-sum-wrap { background: radial-gradient(ellipse at center, rgba(12, 4, 20, 0.45), rgba(6, 2, 10, 0.84)); }
.gsui .gs-sum-col { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px; }
.gsui .gs-receipt {
  --paper: #f7f1e2;
  position: relative;
  width: min(430px, calc(100vw - 32px));
  margin: 12px 0;
  color: #2a2230;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.05)),
    var(--paper);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
  transform: rotate(-0.8deg);
  animation: gs-print 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.gsui .gs-receipt::before,
.gsui .gs-receipt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(-135deg, var(--paper) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.gsui .gs-receipt::before { top: -10px; transform: scaleY(-1); }
.gsui .gs-receipt::after { bottom: -10px; }
.gsui .gs-receipt-scroll {
  position: relative;
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  padding: 16px 28px 14px;
  font: 400 14.5px/1.32 var(--gs-font-receipt);
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 34, 48, 0.35) transparent;
}
.gsui .gs-r-logo {
  font: 900 34px/1 var(--gs-font-deco);
  letter-spacing: 0.16em;
  text-align: center;
  color: #1d1424;
}
.gsui .gs-r-logo::before,
.gsui .gs-r-logo::after { content: '✦'; margin: 0 10px; font-size: 14px; vertical-align: 8px; color: #8a6b15; }
.gsui .gs-r-small { margin-top: 2px; font-size: 12px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; opacity: 0.72; }
.gsui .gs-r-center { margin-top: 0; letter-spacing: 0.2em; }
.gsui .gs-r-big { font: 700 21px/1.2 var(--gs-font-receipt); letter-spacing: 0.06em; text-align: center; }
.gsui .gs-r-rule { margin: 8px 0; border-top: 2px dashed rgba(42, 34, 48, 0.45); }
.gsui .gs-r-rule.is-double { border-top: 4px double rgba(42, 34, 48, 0.6); }
.gsui .gs-r-row { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.gsui .gs-r-dots { flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(42, 34, 48, 0.3); transform: translateY(-4px); }
.gsui .gs-r-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.gsui .gs-r-row.is-bad { color: #b3122b; }
.gsui .gs-r-row.is-total { font-size: 18px; font-weight: 700; }
.gsui .gs-r-mvp {
  margin: 2px 0 2px;
  font: 400 28px/1.15 var(--gs-font-marker);
  text-align: center;
  color: #5b1aa6;
  transform: rotate(-2deg);
  overflow-wrap: anywhere;
}
.gsui .gs-stamp-wrap { display: flex; justify-content: center; margin: 8px 0 4px; }
.gsui .gs-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px 5px;
  color: #1f8f36;
  border: 4px solid currentColor;
  border-radius: 8px;
  outline: 2px solid currentColor;
  outline-offset: 3px;
  opacity: 0.86;
  mix-blend-mode: multiply;
  --rot: -6deg;
  transform: rotate(var(--rot));
  pointer-events: none;
  animation: gs-stamp 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) 0.75s both;
}
.gsui .gs-stamp.is-missed { --rot: 4deg; color: #cc1430; }
.gsui .gs-stamp-big { font: 900 32px/1 var(--gs-font-ui); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.gsui .gs-stamp-small { margin-top: 4px; font: 800 11px/1 var(--gs-font-ui); letter-spacing: 0.12em; white-space: nowrap; }
.gsui .gs-barcode {
  height: 38px;
  margin: 10px 24px 2px;
  background:
    repeating-linear-gradient(90deg,
      #241b2a 0 2px, transparent 2px 4px, #241b2a 4px 7px, transparent 7px 8px, #241b2a 8px 9px,
      transparent 9px 12px, #241b2a 12px 13px, transparent 13px 15px, #241b2a 15px 18px, transparent 18px 19px);
}
.gsui .gs-r-thanks { margin-top: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-align: center; }
.gsui .gs-sum-next { padding: 15px 40px; font-size: 20px; letter-spacing: 0.2em; }
.gsui .gs-sum-ready {
  min-height: 1.2em;
  font: 700 13px/1.2 var(--gs-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-brass-lt);
  text-shadow: 0 1px 4px #000;
}
.gsui .gs-sum-next.is-fired {
  color: #fff1f2;
  background: linear-gradient(180deg, #ff6a78 0%, #d61c34 50%, #8a0a1c 100%);
  border-color: #ffc2c8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 0 #4a0410, 0 0 26px rgba(255, 40, 60, 0.45), 0 10px 22px rgba(0, 0, 0, 0.5);
}
.gsui .gs-sum-papers { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 4px 22px; }
.gsui .gs-r-mode {
  margin: 0 auto 4px;
  width: fit-content;
  padding: 2px 10px;
  font: 700 12px/1.3 var(--gs-font-receipt);
  letter-spacing: 0.18em;
  text-align: center;
  color: #f7f1e2;
  background: #2a2230;
}
.gsui .gs-r-mode.is-run { background: #8a0f22; }
.gsui .gs-r-curses {
  margin: 8px 0 2px;
  padding: 5px 10px 6px;
  text-align: center;
  border: 2px solid rgba(42, 34, 48, 0.55);
  border-radius: 3px;
}
.gsui .gs-r-curses-t { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; opacity: 0.7; }
.gsui .gs-r-curse { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: #6a1030; }
/* (2026-10-09, w75-bricked) the bricked line: Corporate's note, the New Campaign button and KEEP GOING */
.gsui .gs-r-bricked .gs-r-small { margin-top: 3px; }
.gsui .gs-r-bricked-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.gsui .gs-r-bricked-btns .gs-btn { font-size: 12px; padding: 5px 10px; }
.gsui .gs-r-best { margin-top: 4px; font-weight: 700; letter-spacing: 0.12em; text-align: center; color: #8a6b15; }
/* Management's verdict, scrawled on the receipt in ballpoint (red pen when it's bad news) */
.gsui .gs-r-review {
  margin: 4px 6px 2px;
  font: 400 16px/1.3 var(--gs-font-marker);
  text-align: center;
  color: #26267a;
  transform: rotate(-1.4deg);
  overflow-wrap: anywhere;
}
.gsui .gs-r-review.is-bad { color: #b3122b; }
.gsui .gs-stamp.is-fired { --rot: -9deg; padding: 6px 22px 5px; color: #cc1430; }
.gsui .gs-stamp.is-fired .gs-stamp-big { font-size: 50px; letter-spacing: 0.2em; padding-left: 0.2em; }

/* Pink slip (Graveyard Run over) */
.gsui .gs-pinkslip {
  position: relative;
  width: min(300px, calc(100vw - 40px));
  margin-top: 46px;
  padding: 20px 20px 16px;
  color: #3a0f20;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 22%),
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(170, 40, 90, 0.16) 21px 22px),
    #ffc6d4;
  font: 400 13px/1.35 var(--gs-font-receipt);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(170, 40, 90, 0.12);
  transform: rotate(3deg);
  animation: gs-slip 0.6s cubic-bezier(0.2, 1.25, 0.4, 1) 1.2s both;
}
.gsui .gs-slip-staple {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 46px;
  height: 7px;
  transform: translateX(-50%) rotate(-4deg);
  border: 2px solid #9aa0a8;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.gsui .gs-slip-dept { font-size: 10px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; opacity: 0.7; }
.gsui .gs-slip-title {
  margin: 4px 0 2px;
  padding-bottom: 4px;
  font: 900 18px/1.1 var(--gs-font-ui);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: #a3123a;
  border-bottom: 3px double #a3123a;
}
.gsui .gs-slip-form { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.08em; text-align: center; opacity: 0.65; }
.gsui .gs-slip-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 6px; margin: 3px 0; }
.gsui .gs-slip-k { font-weight: 700; text-transform: uppercase; font-size: 11px; padding-top: 2px; }
.gsui .gs-slip-v { overflow-wrap: anywhere; }
.gsui .gs-slip-best { margin-top: 6px; font-weight: 700; color: #8a6b15; }
.gsui .gs-slip-note { margin-top: 8px; font-style: italic; opacity: 0.85; }
.gsui .gs-slip-sign { margin-top: 6px; font: 400 26px/1 var(--gs-font-marker); text-align: right; color: #26267a; transform: rotate(-5deg); }

/* ------------------------------------------------------------------ pause / settings */

.gsui .gs-pause-wrap {
  background: radial-gradient(ellipse at center, rgba(14, 5, 24, 0.5), rgba(6, 2, 10, 0.82));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.gsui .gs-pause {
  width: min(980px, calc(100vw - 32px));
  margin: 16px;
  padding: 26px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: gs-pop 0.2s ease-out;
}
.gsui .gs-pause-head { text-align: center; }
.gsui .gs-pause-title {
  font: 900 36px/1.05 var(--gs-font-deco);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff3c4, #f0d57a 45%, #a37d12);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 #2a1a00) drop-shadow(0 0 14px rgba(201, 162, 39, 0.4));
}
.gsui .gs-pause-sub { margin-top: 6px; font: italic 500 13.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-pause-resume { width: min(420px, 100%); align-self: center; padding: 14px; font-size: 17px; }
/* (2026-10-09, pt-stores: Leave shift sits at the top, in the head, for everyone; a code lobby moves it into the store's row) */
.gsui .gs-pause-leave { padding: 8px 16px; font-size: 12.5px; letter-spacing: 0.12em; }
.gsui .gs-pause-head > .gs-pause-leave { margin-top: 10px; }
.gsui.gs-touch .gs-pause-leave { min-height: 44px; }
.gsui .gs-pause-cols { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.gsui .gs-pause-hb { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.gsui .gs-pause-hb .gs-ctrls { gap: 12px 18px; }
.gsui .gs-pause-hb .gs-ctrl-list li { grid-template-columns: 110px minmax(0, 1fr); font-size: 13px; }
.gsui .gs-pause-tip { font: italic 500 12.5px/1.4 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-pause-tip .gs-kbd { font-size: 10px; }
.gsui .gs-set-lbl .gs-kbd { font-size: 10px; margin-left: 6px; }
.gsui .gs-set-row.gs-set-row--toggle { grid-template-columns: 112px minmax(0, 1fr); }
.gsui .gs-set-row--toggle .gs-seg-toggle.gs-seg-toggle { grid-column: 2; }
.gsui .gs-set-row--toggle .gs-seg-btn { padding: 8px 4px; letter-spacing: 0.1em; }
.gsui .gs-set-note { margin-top: -4px; font: italic 500 12px/1.35 var(--gs-font-ui); color: var(--gs-bone-dim); }
/* (2026-10-10, w18-foundation) the Comfort group's heading (JUICE_MAP.md R5), and the debug panel's juice multiplier */
.gsui .gs-set-group { margin-top: 4px; font: 700 11px/1 var(--gs-font-deco); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gs-brass-lt); }
.gsui .gs-debug-juice { grid-column: 1 / -1; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; font: 600 11px/1 var(--gs-font-ui); color: var(--gs-bone); }
.gsui .gs-settings { display: flex; flex-direction: column; gap: 11px; padding: 6px 0 4px; }
.gsui .gs-settings .gs-deco-title { margin-bottom: 2px; }
.gsui .gs-set-reset { align-self: flex-start; margin-top: 2px; padding: 7px 16px; font-size: 13px; }
.gsui .gs-set-row { display: grid; grid-template-columns: 138px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.gsui .gs-set-lbl { font: 600 13.5px/1.2 var(--gs-font-ui); color: var(--gs-bone); }
.gsui .gs-set-val { font: 800 13px/1 var(--gs-font-ui); font-variant-numeric: tabular-nums; text-align: right; color: var(--gs-amber); }
.gsui .gs-range {
  --p: 50%;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}
.gsui .gs-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gs-pumpkin) 0 var(--p), rgba(242, 230, 201, 0.16) var(--p) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 162, 39, 0.3);
}
.gsui .gs-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gs-pumpkin) 0 var(--p), rgba(242, 230, 201, 0.16) var(--p) 100%);
}
.gsui .gs-range::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  background: var(--gs-bone);
  border: 2px solid var(--gs-pumpkin);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(255, 140, 26, 0.7);
  -webkit-appearance: none;
  appearance: none;
}
.gsui .gs-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--gs-bone);
  border: 2px solid var(--gs-pumpkin);
  border-radius: 2px;
  transform: rotate(45deg);
}
.gsui .gs-range:focus-visible { outline: none; }
.gsui .gs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--gs-teal); }
.gsui .gs-seg-toggle { grid-column: 2 / 4; display: flex; overflow: hidden; border: 1px solid var(--gs-brass-dim); border-radius: 4px; }
.gsui .gs-seg-btn {
  flex: 1;
  padding: 8px;
  white-space: nowrap;
  font: 800 12px/1 var(--gs-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gs-bone-dim);
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}
.gsui .gs-seg-btn + .gs-seg-btn { border-left: 1px solid var(--gs-brass-dim); }
.gsui .gs-seg-btn:hover { color: var(--gs-bone); }
.gsui .gs-seg-btn.is-on { color: var(--gs-ink); background: linear-gradient(180deg, #fff0b8, var(--gs-brass-lt) 40%, var(--gs-brass)); }
/* (2026-10-09, pt-phonesprint) the phone Sprint setting's longer option names may take two lines */
.gsui .gs-seg-toggle--wrap .gs-seg-btn { white-space: normal; line-height: 1.15; letter-spacing: 0.06em; }
/* (2026-10-10, pt-fpscap) the Frame cap row: the label, then its six buttons across the column (Unlimited the widest) */
.gsui .gs-set-row.gs-set-framecap { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.gsui .gs-set-framecap .gs-seg-btn { padding: 8px 2px; letter-spacing: 0.08em; }
.gsui .gs-set-framecap .gs-seg-btn:last-child { flex: 2.4; }

/* ------------------------------------------------------------------ employee handbook (controls card, [H]) */

/* Sits under the HUD layer (z 2) so prompts / chips / the crew list stay readable on top of it.
   It is read while the pointer is locked, so short screens scale it; the mouse wheel scrolls it (pt-fixes: ui.wheelHandbook). */
.gsui .gs-hb-layer { z-index: 1; }
.gsui.gs-controls-open .gs-hint { opacity: 0; }
/* Menus have their own copy of the controls (pause) or no use for them: don't let the card ghost through the backdrop */
.gsui.gs-has-modal .gs-hb-layer { visibility: hidden; }
.gsui .gs-handbook {
  position: absolute;
  left: 16px;
  top: 176px;
  width: min(590px, calc(100vw - 32px));
  padding: 0;
  transform-origin: 0 0;
  animation: gs-hb-in 0.24s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.gsui .gs-hb-inner {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: calc(100vh - 192px);
  overflow-y: auto;
  padding: 16px 22px 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--gs-brass-dim) transparent;
}
.gsui .gs-hb-head { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(201, 162, 39, 0.3); }
.gsui .gs-hb-punch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #05020a;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(201, 162, 39, 0.35);
}
.gsui .gs-hb-titles { flex: 1; min-width: 0; }
.gsui .gs-hb-kicker { font: 700 10px/1.3 var(--gs-font-deco); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gs-brass); }
.gsui .gs-hb-title {
  font: 900 24px/1.1 var(--gs-font-deco);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #fff3c4, #f0d57a 45%, #a37d12);
  -webkit-background-clip: text;
  background-clip: text;
}
.gsui .gs-hb-close { flex: none; font: 700 11px/1 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-bone-dim); }
.gsui .gs-hb-close .gs-kbd { font-size: 11px; }
.gsui .gs-hb-sub { margin-top: 2px; font-size: 11px; }
.gsui .gs-hb-foot { display: flex; align-items: center; justify-content: center; gap: 8px; font: italic 600 12px/1.2 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-hb-eye { display: inline-block; font-style: normal; animation: gs-blink-eye 4s infinite; }
.gsui .gs-hb-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 56%, rgba(255, 255, 255, 0.045) 56% 63%, transparent 63% 70%, rgba(255, 255, 255, 0.03) 70% 73%, transparent 73%);
}

/* ------------------------------------------------------------------ PA intercom + payphone subtitles */

.gsui .gs-subs { z-index: 11; pointer-events: none; }
/* p17: Management's everyday lines are a radio box in the bottom-left corner, never over the crosshair (the tips card
   steps aside while it talks). The center of the screen is kept for big story moments (.gs-story below). */
.gsui .gs-subs-stack {
  position: absolute;
  left: 16px;
  bottom: 16px;
  transform-origin: 0 100%;
  width: min(460px, 36vw, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: bottom 0.3s ease;
}
@media (min-width: 1180px) {
  /* handbook open on the left: subtitles move to the right so neither covers the other */
  .gsui.gs-controls-open .gs-subs-stack {
    left: auto;
    right: 16px;
    bottom: 96px; /* above the ability ring */
    transform: none;
    transform-origin: 100% 100%;
    width: min(520px, calc(100vw - 640px));
  }
}
/* A menu is open (Supply-O-Matic, VEND-O-MATIC, receipt, pause): subtitles shrink into the bottom-left corner,
   clear of the centered buttons ("Start night N", "Resume shift", VEND). They stay click-through. */
.gsui.gs-has-modal .gs-subs-stack {
  left: 16px;
  right: auto;
  bottom: 16px;
  transform: none;
  transform-origin: 0 100%;
  width: min(380px, calc(100vw - 32px));
}
.gsui.gs-has-modal .gs-sub { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 8px 14px 9px 9px; }
.gsui.gs-has-modal .gs-sub-spk { width: 34px; height: 34px; }
.gsui.gs-has-modal .gs-sub-text { font-size: 14px; }
.gsui .gs-sub-lane { display: flex; flex-direction: column; gap: 6px; }
.gsui .gs-sub-lane:empty { display: none; }
.gsui .gs-sub {
  --sc: var(--gs-brass-lt);
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 20px 12px 12px;
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sc) 13%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(11, 12, 17, 0.93), rgba(4, 5, 9, 0.9));
  border: 1px solid color-mix(in srgb, var(--sc) 42%, transparent);
  border-left: 3px solid var(--sc);
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 18px color-mix(in srgb, var(--sc) 12%, transparent);
  animation: gs-sub-in 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  transition: opacity 0.3s, transform 0.3s;
}
.gsui .gs-sub.is-out { opacity: 0; transform: translateY(10px); }
.gsui .gs-sub-spk {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #0a0a0e 0 1.5px, transparent 2px) 0 0 / 6px 6px,
    radial-gradient(circle at 50% 35%, #4a4a56, #15151c 70%);
  box-shadow: inset 0 0 0 2px #8f8f9c, inset 0 0 0 4px #0b0b0f, inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6);
}
.gsui .gs-sub-bars { display: flex; align-items: center; gap: 2px; height: 18px; }
.gsui .gs-sub-bars i { width: 3px; height: 28%; border-radius: 2px; background: var(--sc); box-shadow: 0 0 6px var(--sc); opacity: 0.45; }
.gsui .gs-sub.is-talking .gs-sub-bars i { opacity: 1; animation: gs-eq 0.46s ease-in-out infinite alternate; }
.gsui .gs-sub.is-talking .gs-sub-bars i:nth-child(2) { animation-duration: 0.34s; animation-delay: -0.2s; }
.gsui .gs-sub.is-talking .gs-sub-bars i:nth-child(3) { animation-duration: 0.52s; animation-delay: -0.1s; }
.gsui .gs-sub.is-talking .gs-sub-bars i:nth-child(4) { animation-duration: 0.4s; animation-delay: -0.3s; }
.gsui .gs-sub-body { min-width: 0; }
.gsui .gs-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font: 800 10.5px/1 var(--gs-font-ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sc); }
.gsui .gs-sub-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #ff8a94;
  border: 1px solid rgba(255, 59, 74, 0.5);
  border-radius: 2px;
}
.gsui .gs-sub-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff3b4a; box-shadow: 0 0 6px #ff3b4a; animation: gs-blink 1s steps(2) infinite; }
.gsui .gs-sub-text { font: 700 17px/1.38 var(--gs-font-receipt); color: #eef2f5; text-shadow: 0 1px 2px #000; overflow-wrap: anywhere; user-select: none; }
.gsui .gs-sub-rest { color: transparent; text-shadow: none; }
.gsui .gs-sub-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin: 0 1px;
  vertical-align: -0.16em;
  background: currentColor;
  opacity: 0.85;
  animation: gs-blink 0.7s steps(2) infinite;
}
.gsui .gs-sub.is-done .gs-sub-caret { visibility: hidden; animation: none; }
.gsui .gs-sub--warning {
  --sc: #ff3b4a;
  background:
    linear-gradient(90deg, rgba(255, 40, 60, 0.24), transparent 52%),
    linear-gradient(180deg, rgba(38, 4, 10, 0.94), rgba(14, 2, 6, 0.92));
  animation: gs-sub-in 0.32s cubic-bezier(0.2, 1.2, 0.4, 1) both, gs-sub-alarm 0.9s ease-in-out infinite alternate;
}
.gsui .gs-sub--warning .gs-sub-text { color: #ffe1e4; }
.gsui .gs-sub--warning .gs-sub-live { color: #fff; background: #c8142a; border-color: #ff6b77; }
.gsui .gs-sub--warning .gs-sub-live::before { background: #fff; box-shadow: 0 0 6px #fff; }
.gsui .gs-sub--phone { --sc: var(--gs-teal); }
.gsui .gs-sub--phone .gs-sub-text { font-weight: 400; font-style: italic; color: #d4fff6; }
.gsui .gs-sub--phone .gs-sub-live { color: #9ff5e6; border-color: rgba(46, 230, 200, 0.45); }
.gsui .gs-sub--phone .gs-sub-live::before { background: var(--gs-teal); box-shadow: 0 0 6px var(--gs-teal); }
.gsui .gs-sub--phone::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(200, 255, 245, 0.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  animation: gs-static 0.18s steps(3) infinite;
}
.gsui .gs-sub--phone.is-talking .gs-sub-text { animation: gs-crackle 2.3s steps(1) infinite; }

/* ------------------------------------------------------------------ VEND-O-MATIC (break room upgrades) */

.gsui .gs-vend-wrap { background: radial-gradient(ellipse at center, rgba(40, 6, 26, 0.45), rgba(4, 2, 8, 0.84)); }
.gsui .gs-vend {
  position: relative;
  width: min(860px, calc(100vw - 24px));
  margin: 12px;
  padding: 0 18px 14px;
  outline: none;
  border-radius: 26px 26px 12px 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 6%, transparent 94%, rgba(0, 0, 0, 0.3)),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 120, 160, 0.18), transparent 70%),
    linear-gradient(180deg, #8f1430 0%, #5e0a1e 48%, #3a0512 100%);
  box-shadow:
    0 0 0 3px #12020a,
    inset 0 0 0 5px #2a0410,
    inset 0 0 0 7px rgba(220, 220, 230, 0.55),
    inset 0 0 0 9px #2a0410,
    0 34px 80px rgba(0, 0, 0, 0.75),
    0 0 70px rgba(255, 50, 130, 0.2);
  animation: gs-pop 0.22s ease-out;
}
.gsui .gs-vend-marquee {
  position: relative;
  margin: 0 -18px 14px;
  padding: 16px 64px 24px;
  overflow: hidden;
  text-align: center;
  border-radius: 26px 26px 0 0;
  background:
    radial-gradient(ellipse 60% 90% at 50% 50%, rgba(255, 60, 150, 0.25), transparent 70%),
    linear-gradient(180deg, #1c0412, #2c0619);
  border-bottom: 4px solid #c8c8d2;
}
.gsui .gs-vend-logo {
  font: italic 900 clamp(40px, 6vw, 64px)/1 var(--gs-font-ui);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #fff5fb;
  -webkit-text-stroke: 1px rgba(255, 180, 220, 0.6);
  text-shadow: 0 0 4px #fff, 0 0 10px #ff4fa3, 0 0 22px #ff2d8a, 0 0 44px #ff2d8a, 0 3px 0 #5a0030;
}
.gsui .gs-vend-flk { animation: gs-neon-flk 4.2s steps(1) infinite; }
.gsui .gs-vend-tag {
  margin-top: 8px;
  font: 700 11px/1 var(--gs-font-deco);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9ff5e6;
  text-shadow: 0 0 8px rgba(46, 230, 200, 0.8);
}
.gsui .gs-vend-bulbs { position: absolute; left: 24px; right: 24px; bottom: 7px; display: flex; justify-content: space-between; }
.gsui .gs-vend-bulbs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 6px #ffcf4a, 0 0 12px #ff9a1a;
  animation: gs-bulb 0.66s steps(1) infinite;
  animation-delay: calc(var(--i) * -0.22s);
}
.gsui .gs-vend-x {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font: 900 18px/1 var(--gs-font-ui);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #d61c34 55%, #7a0614);
  border: 2px solid #f0c0c8;
  border-radius: 50%;
  box-shadow: 0 3px 0 #4a0410, 0 0 14px rgba(255, 40, 60, 0.5);
  cursor: pointer;
  pointer-events: auto;
}
.gsui .gs-vend-x:hover { filter: brightness(1.2); }
.gsui .gs-vend-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #4a0410; }
.gsui .gs-vend-body { display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 16px; }
.gsui .gs-vend-glass {
  position: relative;
  padding: 14px 12px 14px;
  border-radius: 8px;
  background: linear-gradient(180deg, #0d0b15, #15101f 60%, #0a0810);
  box-shadow: inset 0 0 0 3px #b8b8c4, inset 0 0 0 6px #17171f, inset 0 0 50px rgba(0, 0, 0, 0.9), 0 2px 0 rgba(255, 255, 255, 0.15);
}
.gsui .gs-vend-glass::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 8px;
  height: 4px;
  border-radius: 2px;
  background: #e8fffb;
  box-shadow: 0 0 10px #bdfff4, 0 0 26px rgba(150, 255, 240, 0.6);
  animation: gs-tube 6s steps(1) infinite;
}
.gsui .gs-vend-glass::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 3;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0 14%, transparent 14% 26%, rgba(255, 255, 255, 0.05) 26% 30%, transparent 30%);
}
.gsui .gs-vend-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.gsui .gs-vslot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 158px; /* round 3: room for the effect strip above the price tag */
  padding: 10px 6px 50px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(150, 255, 240, 0.05), transparent 40%), #18131f;
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -10px 18px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow 0.15s;
}
.gsui .gs-vslot:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 -10px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 120, 190, 0.25); }
.gsui .gs-vslot.is-selected { box-shadow: inset 0 0 0 2px #ff7ab8, inset 0 -10px 18px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 80, 160, 0.55); }
.gsui .gs-vslot-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255, 130, 200, 0.22), transparent 70%);
  transition: opacity 0.2s;
}
.gsui .gs-vslot.is-selected .gs-vslot-light { opacity: 1; }
.gsui .gs-vpack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 76px;
  height: 84px;
  padding: 8px 4px;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 26%, rgba(255, 255, 255, 0.28) 46%, transparent 58%, rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, var(--c1, #ccc), var(--c2, #555));
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease-out, opacity 0.2s;
}
.gsui .gs-vpack::before,
.gsui .gs-vpack::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 2px, rgba(0, 0, 0, 0.25) 2px 4px);
}
.gsui .gs-vpack::before { top: 0; border-radius: 5px 5px 0 0; }
.gsui .gs-vpack::after { bottom: 0; }
.gsui .gs-vpack-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
.gsui .gs-vpack-name {
  font: 900 9px/1.05 var(--gs-font-ui);
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.6);
}
.gsui .gs-vslot:hover .gs-vpack { transform: translateY(-3px) rotate(-2deg); }
.gsui .gs-vcoil {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 49px;
  z-index: 2;
  height: 14px;
  border-radius: 7px;
  background: repeating-linear-gradient(105deg, transparent 0 4px, #d8d8e2 4px 6px, #6a6a78 6px 7px, transparent 7px 11px);
  filter: drop-shadow(0 2px 2px #000);
  opacity: 0.92;
}
.gsui .gs-vtag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 26px;
  font: 21px/1 var(--gs-font-crt);
  color: #ffe9a8;
  background: linear-gradient(180deg, #2e2b3a, #1a1822);
  border-top: 2px solid #9a9aa8;
}
.gsui .gs-vtag b { font-weight: 400; color: #ff8ac4; text-shadow: 0 0 6px rgba(255, 80, 160, 0.8); }
.gsui .gs-vslot.is-poor .gs-vtag-p { color: #ff9a9a; }
.gsui .gs-vsold {
  display: none;
  position: absolute;
  top: 42px;
  left: 50%;
  z-index: 4;
  padding: 4px 9px 3px;
  font: 900 12px/1 var(--gs-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ff3b4a;
  background: rgba(24, 2, 8, 0.85);
  border: 2px solid #ff3b4a;
  box-shadow: 0 0 10px rgba(255, 40, 60, 0.45);
  transform: translateX(-50%) rotate(-11deg);
}
.gsui .gs-vslot.is-sold .gs-vsold,
.gsui .gs-vslot.is-decoy .gs-vsold { display: block; }
.gsui .gs-vslot.is-sold .gs-vpack { opacity: 0; transform: none; }
.gsui .gs-vslot.is-decoy .gs-vpack { filter: grayscale(0.45) brightness(0.72); transform: rotate(9deg) translateY(12px); }
.gsui .gs-vslot.is-decoy .gs-vsold { color: #ffb547; border-color: #ffb547; box-shadow: 0 0 10px rgba(255, 181, 71, 0.4); transform: translateX(-50%) rotate(7deg); }
.gsui .gs-vslot.is-decoy .gs-vtag-p { color: rgba(255, 233, 168, 0.5); }
.gsui .gs-vslot.is-vending .gs-vcoil { animation: gs-coil 0.3s linear infinite; }
.gsui .gs-vslot.is-vending .gs-vpack { animation: gs-vnudge 0.45s ease-in-out infinite alternate; }
.gsui .gs-vslot.is-dropping .gs-vpack { animation: gs-vfall 0.5s cubic-bezier(0.5, 0, 0.9, 0.5) forwards; }
.gsui .gs-vsticker {
  position: absolute;
  z-index: 4;
  padding: 3px 8px;
  font: 900 10px/1 var(--gs-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1400;
  background: #ffd21a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.gsui .gs-vsticker--a { right: 12px; top: -7px; transform: rotate(-3deg); }
.gsui .gs-vsticker--b { left: 10px; top: -6px; color: #3a1020; background: #f2e6c9; transform: rotate(3deg); }

.gsui .gs-vend-panel {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #33333e, #1d1d25);
  box-shadow: inset 0 0 0 2px #9a9aa8, inset 0 0 0 4px #101016, 0 2px 0 rgba(255, 255, 255, 0.12);
}
.gsui .gs-vend-lcd {
  min-height: 156px;
  padding: 9px 11px;
  font: 20px/1.02 var(--gs-font-crt);
  color: #ff9d3c;
  text-shadow: 0 0 6px rgba(255, 140, 40, 0.85);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #2a1204, #120602);
  border-radius: 4px;
  box-shadow: inset 0 0 16px #000, 0 0 0 2px #060606, 0 0 0 3px #55555f;
}
.gsui .gs-vlcd-code { font-size: 36px; line-height: 0.9; color: #ffc27a; }
.gsui .gs-vlcd-name { margin-top: 2px; color: #ffd8a8; }
.gsui .gs-vlcd-desc { margin-top: 4px; font-size: 18px; line-height: 1; color: rgba(255, 157, 60, 0.78); }
.gsui .gs-vlcd-stat { margin-top: 6px; padding-top: 4px; border-top: 1px dashed rgba(255, 157, 60, 0.4); color: #ffe0b0; }
.gsui .gs-vlcd-stat.is-ok { color: #b8ff8a; text-shadow: 0 0 6px rgba(124, 252, 58, 0.8); }
.gsui .gs-vlcd-stat.is-bad { color: #ff6b6b; text-shadow: 0 0 6px rgba(255, 60, 60, 0.8); }
.gsui .gs-vlcd-stat.is-busy { color: #fff3b0; animation: gs-blink 0.5s steps(2) infinite; }
.gsui .gs-vlcd-stat.is-sold { color: #ff9aa6; }
.gsui .gs-vend-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #0b0b10;
  border-radius: 4px;
  box-shadow: inset 0 0 8px #000, 0 0 0 1px #55555f;
}
.gsui .gs-vend-credit-l { font: 800 10px/1 var(--gs-font-ui); letter-spacing: 0.2em; text-transform: uppercase; color: #a8a8b8; }
.gsui .gs-vend-money { font: 26px/1 var(--gs-font-crt); color: #8dff5a; text-shadow: 0 0 6px rgba(124, 252, 58, 0.8); }
.gsui .gs-vkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gsui .gs-vkey {
  height: 38px;
  font: 900 17px/1 var(--gs-font-ui);
  color: #23232b;
  background: linear-gradient(180deg, #fbfbfd, #c4c4ce);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 4px 0 #62626e, 0 6px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.06s, box-shadow 0.06s;
}
.gsui .gs-vkey:hover { filter: brightness(1.06); }
.gsui .gs-vkey:active { transform: translateY(3px); box-shadow: 0 1px 0 #62626e, 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff; }
.gsui .gs-vkey--clr { color: #fff; background: linear-gradient(180deg, #74747f, #3e3e48); box-shadow: 0 4px 0 #1e1e26, 0 6px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.gsui .gs-vkey--vend {
  grid-column: span 2;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(180deg, #ff7ab8, #d61c63);
  box-shadow: 0 4px 0 #6a0830, 0 0 16px rgba(255, 60, 140, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.gsui .gs-vkey--vend:active { box-shadow: 0 1px 0 #6a0830, 0 0 16px rgba(255, 60, 140, 0.45); }
.gsui .gs-vcoin { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.gsui .gs-vcoin-slot { flex: none; width: 10px; height: 36px; border-radius: 3px; background: #050507; box-shadow: 0 0 0 3px #a8a8b4, 0 0 0 5px #2a2a32, inset 0 0 4px #000; }
.gsui .gs-vcoin-lbl { flex: 1; display: flex; flex-direction: column; gap: 3px; font: 700 9.5px/1.1 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: #a8a8b8; }
.gsui .gs-vcoin-lbl b { font-size: 11.5px; color: #ffe9a8; }
.gsui .gs-vcoin-ret { flex: none; width: 32px; height: 20px; border-radius: 3px; background: #0b0b10; box-shadow: inset 0 4px 6px #000, 0 0 0 2px #8a8a96; }
.gsui .gs-vend-owned { font: 700 10px/1 var(--gs-font-ui); letter-spacing: 0.18em; text-align: center; text-transform: uppercase; color: #9ff5e6; }
.gsui .gs-vend-tray {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, #050407, #0d0b12);
  box-shadow: inset 0 10px 18px #000, 0 0 0 3px #a8a8b4, 0 0 0 5px #2a050d;
}
.gsui .gs-vend-push { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font: 900 10px/1 var(--gs-font-ui); letter-spacing: 0.4em; color: rgba(200, 200, 215, 0.35); }
.gsui .gs-vdrop { display: block; transform: rotate(84deg) scale(0.62); animation: gs-vdrop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.gsui .gs-vdrop .gs-vpack { animation: none; opacity: 1; transform: none; }
.gsui .gs-vend-plate {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 0 4px;
  font: 700 9.5px/1.3 var(--gs-font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 210, 220, 0.55);
}
.gsui .gs-vend-plate .gs-kbd { font-size: 9px; }

/* ------------------------------------------------------------------ debug */

.gsui .gs-debug {
  position: absolute;
  z-index: 50;
  right: 12px;
  bottom: 12px;
  width: 270px; /* (2026-10-10, w16-debugmenu: was 230px; the forms want a little more) */
  pointer-events: auto;
  font: 12px/1.2 var(--gs-font-ui);
  background: rgba(8, 3, 14, 0.9);
  border: 1px solid rgba(124, 252, 58, 0.45);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.gsui .gs-debug-head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  font: 800 11px/1 ui-monospace, Consolas, monospace;
  letter-spacing: 0.14em;
  color: var(--gs-green);
  background: none;
  border: 0;
  cursor: pointer;
}
.gsui .gs-debug-chev { transition: transform 0.15s; }
.gsui .gs-debug.is-collapsed .gs-debug-chev { transform: rotate(-90deg); }
.gsui .gs-debug.is-collapsed .gs-debug-grid { display: none; }
.gsui .gs-debug-grid { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 8px; }
.gsui .gs-debug-btn {
  padding: 6px 7px;
  font: 600 11px/1.15 var(--gs-font-ui);
  text-align: left;
  color: var(--gs-bone);
  background: rgba(124, 252, 58, 0.08);
  border: 1px solid rgba(124, 252, 58, 0.3);
  border-radius: 3px;
  cursor: pointer;
}
.gsui .gs-debug-btn:hover { background: rgba(124, 252, 58, 0.22); }
/* (2026-10-10, w16-debugmenu) the search box, the folders and the forms (client/js/debugmenu.js) */
.gsui .gs-debug [hidden] { display: none !important; }
.gsui .gs-dm-search {
  position: sticky; top: 0; z-index: 1;
  width: 100%; box-sizing: border-box; padding: 6px 8px;
  font: 600 12px/1.2 var(--gs-font-ui); color: var(--gs-bone);
  background: #14091f; border: 1px solid rgba(124, 252, 58, 0.45); border-radius: 3px;
}
.gsui .gs-dm-search:focus { outline: 1px solid var(--gs-green); }
.gsui .gs-dm-none { padding: 4px 2px; font: 600 11px/1.3 var(--gs-font-ui); color: var(--gs-bone); opacity: 0.7; }
.gsui .gs-dm-list { display: flex; flex-direction: column; gap: 3px; }
.gsui .gs-dm-fhead {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 4px;
  font: 800 10px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gs-green); background: rgba(124, 252, 58, 0.05); border: 0; border-top: 1px solid rgba(124, 252, 58, 0.25); cursor: pointer; text-align: left;
}
.gsui .gs-dm-fhead:hover { background: rgba(124, 252, 58, 0.14); }
.gsui .gs-dm-fname { flex: 1; }
.gsui .gs-dm-n { opacity: 0.6; letter-spacing: 0.04em; }
.gsui .gs-dm-chev { transition: transform 0.15s; transform: rotate(-90deg); }
.gsui .gs-dm-folder.is-open .gs-dm-chev { transform: none; }
.gsui .gs-dm-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 0 2px; }
.gsui .gs-dm-wide, .gsui .gs-dm-form { grid-column: 1 / -1; }
.gsui .gs-dm-form { display: grid; gap: 4px; padding: 5px; border: 1px dashed rgba(124, 252, 58, 0.3); border-radius: 3px; }
.gsui .gs-dm-ftitle { font: 700 11px/1.2 var(--gs-font-ui); color: var(--gs-bone); }
.gsui .gs-dm-fields { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gsui .gs-dm-in { flex: 1 1 60px; min-width: 0; box-sizing: border-box; cursor: text; }
.gsui select.gs-dm-in { cursor: pointer; background: #14091f; }
.gsui .gs-dm-in-wide { flex-basis: 100%; }
.gsui .gs-dm-check { display: flex; align-items: center; gap: 4px; font: 600 11px/1 var(--gs-font-ui); color: var(--gs-bone); cursor: pointer; }
.gsui .gs-dm-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.gsui .gs-dm-go { flex: 1 1 auto; text-align: center; }

/* ================================================================== round 3 (the store grows)
   Store tier + rating ribbon, strikes, chaos alerts, the hold-to-use ring, VEND-O-MATIC effect strips,
   locked / expansion rows in the Supply-O-Matic, the Management tab, the store report card on the receipt
   and the Wardrobe (employee lockers). */

/* ---- (2026-10-08, x4-satisfaction) Customer Satisfaction: a thin bar (rep x 20 %) with a tick at the next Regional
   Inspection's target (green once passed), on the HUD ribbon, the Management tab and the receipt. (The stars are the tier's: pt-stars.) */
.gsui .gs-satbar {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 6px;
  vertical-align: middle;
  background: rgba(240, 213, 122, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: 3px;
}
.gsui .gs-satbar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: 2px;
  background: linear-gradient(90deg, #c9a227, #ffd84a);
  box-shadow: 0 0 5px rgba(255, 200, 60, 0.55);
}
.gsui .gs-satbar-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  background: #efe6d0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
.gsui .gs-satbar-tick.is-met { background: #7cfc3a; box-shadow: 0 0 6px rgba(124, 252, 58, 0.95); }
.gsui .gs-sat-trend { font-size: 8px; }
.gsui .gs-sat-trend.is-up { color: #7cfc3a; }
.gsui .gs-sat-trend.is-down { color: #ff5a6a; }
.gsui .gs-satbar--mgmt { display: block; width: auto; height: 10px; margin: 1px 0 5px; background: rgba(141, 255, 90, 0.1); border-color: rgba(141, 255, 90, 0.55); }
.gsui .gs-satbar--mgmt .gs-satbar-fill { background: linear-gradient(90deg, #4fae28, #b8ff8a); box-shadow: 0 0 8px rgba(124, 252, 58, 0.7); }
.gsui .gs-satbar--mgmt .gs-satbar-tick { background: #ffb547; box-shadow: 0 0 6px rgba(255, 181, 71, 0.9); }
.gsui .gs-satbar--mgmt .gs-satbar-tick.is-met { background: #e6ffb8; box-shadow: 0 0 8px rgba(230, 255, 184, 1); }

/* ---- stars: the store tier (HUD ribbon, Management tab, receipt, the PROMOTED! banner): five glyphs with a clipped
   gold fill, one per tier. (2026-10-09, pt-stars: the pre-x4 stars, back; they were the rating, they are the tier now,
   and x4's brass tier badge is gone) */
.gsui .gs-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: -0.05em; }
.gsui .gs-stars-bg { color: rgba(240, 213, 122, 0.22); }
.gsui .gs-stars-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #ffd84a;
  text-shadow: 0 0 6px rgba(255, 200, 60, 0.7);
}
.gsui .gs-banner.has-stars .gs-banner-stars { display: block; width: max-content; margin: 8px auto 2px; font-size: 26px; letter-spacing: 3px; }

/* ---- HUD: the night segment names the tier; the rating hangs under it like a ribbon */
.gsui .gs-seg-night.has-tier .gs-seg-l { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.gsui .gs-seg-night[data-tier='2'] .gs-seg-l { color: #d9e2e8; text-shadow: 0 0 6px rgba(200, 220, 235, 0.5); }
.gsui .gs-seg-night[data-tier='3'] .gs-seg-l { color: #ffd84a; text-shadow: 0 0 8px rgba(255, 200, 60, 0.6); }
.gsui .gs-seg-night[data-tier='4'] .gs-seg-l { color: #7dffe0; text-shadow: 0 0 8px rgba(46, 230, 200, 0.7); }
.gsui .gs-seg-night[data-tier='5'] .gs-seg-l { color: #e9c8ff; text-shadow: 0 0 10px rgba(190, 120, 255, 0.9); }
.gsui .gs-rating {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 3px;
  font: 800 10px/1 var(--gs-font-ui);
  white-space: nowrap;
  background: linear-gradient(180deg, #2a1a08, #120902);
  border: 1px solid rgba(201, 162, 39, 0.75);
  border-top-color: rgba(201, 162, 39, 0.25);
  border-radius: 0 0 7px 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* (2026-10-09, pt-fixes3, AMENDMENTS 78) the tier's stars beside its name over NIGHT n, off the satisfaction ribbon */
.gsui .gs-night-tier { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; margin-bottom: 4px; }
.gsui .gs-night-tier .gs-seg-l { margin-bottom: 0; min-width: 0; white-space: nowrap; }
.gsui .gs-night-tier .gs-stars { flex: none; font-size: 9.5px; letter-spacing: 0.5px; }
.gsui .gs-rating-n { color: var(--gs-bone); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #000; }

/* ---- HUD: strikes beside the quota label */
.gsui .gs-qlabel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.gsui .gs-qlabel .gs-seg-l { margin-bottom: 0; }
.gsui .gs-strikes { display: inline-flex; gap: 3px; }
.gsui .gs-strikes i {
  position: relative;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 59, 74, 0.5);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
}
.gsui .gs-strikes i.is-on { background: #c8142a; border-color: #ff9aa3; box-shadow: 0 0 6px rgba(255, 59, 74, 0.8); }
.gsui .gs-strikes i.is-on::after {
  content: '✕';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 8px/1 var(--gs-font-ui);
  color: #fff;
}
.gsui .gs-strikes.is-last { animation: gs-strike-pulse 0.8s ease-in-out infinite alternate; }

/* ---- HUD: chaos alerts. Desktop: a column top-left, under the top bar's corner (toasts own the right).
   Narrower windows: the column starts under the phase chips and the curse chips step down below it.
   Phones: a centred row under the chips (see the touch section). */
.gsui .gs-alerts {
  position: absolute;
  top: 70px;
  left: 16px;
  width: min(var(--gs-alerts-w, 276px), calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  pointer-events: none;
}
.gsui .gs-alert {
  --ac: var(--gs-amber);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  overflow: hidden;
  color: var(--gs-bone);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ac) 24%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(26, 10, 38, 0.94), rgba(10, 4, 16, 0.92));
  border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent);
  border-left: 4px solid var(--ac);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px color-mix(in srgb, var(--ac) 28%, transparent);
  animation: gs-alert-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both, gs-alert-glow 1.4s ease-in-out 0.45s infinite alternate;
  transition: opacity 0.3s, transform 0.3s;
}
.gsui .gs-alert.is-out { opacity: 0; transform: translateY(-10px) scale(0.96); }
.gsui .gs-alert-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac) 30%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 70%, transparent), 0 0 10px color-mix(in srgb, var(--ac) 40%, transparent);
}
.gsui .gs-alert-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.gsui .gs-alert-t {
  overflow: hidden;
  font: 900 12.5px/1.1 var(--gs-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--ac) 45%, #fff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--ac) 60%, transparent), 0 1px 0 #000;
}
.gsui .gs-alert-s { font: 500 12px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-alert-s .gs-kbd { font-size: 9.5px; height: 1.7em; }
.gsui .gs-alert--power { --ac: #ffd21a; }
.gsui .gs-alert--power .gs-alert-ico { animation: gs-flicker 1.6s steps(1) infinite; }
.gsui .gs-alert--leak { --ac: #4fa3ff; }
.gsui .gs-alert--leak .gs-alert-ico { animation: gs-bob 1.4s ease-in-out infinite; }
.gsui .gs-alert--inspector { --ac: #f0d57a; animation: gs-alert-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.gsui .gs-alert--inspection { --ac: #c79bff; animation: gs-alert-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.gsui .gs-alert--deli { --ac: #ff7a8a; }
.gsui .gs-alert--deli .gs-alert-ico { animation: gs-bob 1.4s ease-in-out infinite; }
/* the inspector is still walking in: no grade yet, the box waits */
.gsui .gs-alert--inspector.is-arriving .gs-alert-grade { opacity: 0.6; border-style: dashed; }
.gsui .gs-alert-bar { display: block; height: 4px; margin-top: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
.gsui .gs-alert-bar i {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #c9a227, #fff3c4);
  transition: transform 0.6s ease-out;
}
.gsui .gs-alert-grade {
  --g: var(--gs-bone);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--g);
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid var(--g);
  border-radius: 4px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--g) 45%, transparent);
}
.gsui .gs-alert-grade small { font: 800 7.5px/1 var(--gs-font-ui); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.gsui .gs-alert-grade b { font: 900 22px/1 var(--gs-font-deco); text-shadow: 0 0 8px color-mix(in srgb, var(--g) 70%, transparent); }
.gsui .gs-alert-grade.is-a { --g: #7cfc3a; }
.gsui .gs-alert-grade.is-b { --g: #c4f05a; }
.gsui .gs-alert-grade.is-c { --g: #ffd84a; }
.gsui .gs-alert-grade.is-d { --g: #ff9a3c; }
.gsui .gs-alert-grade.is-f { --g: #ff3b4a; }
.gsui .gs-alert--inspector.is-done .gs-alert-grade { transform: rotate(-8deg); animation: gs-stamp-hud 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both; }

/* ---- hold-to-use ring around the crosshair */
.gsui .gs-hold {
  --p: 0%;
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(var(--gs-teal) var(--p), rgba(255, 255, 255, 0.16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 1px #000);
  pointer-events: none;
}
.gsui .gs-hold.is-full { background: var(--gs-green); animation: gs-hold-done 0.35s ease-out; }
.gsui .gs-hold-arc { display: none; }

/* ================================================================== round 4: Purge combat feedback */

/* ---- directional hit flash (UI.setDamage(amount, angle)): the edge the hit came from + an arc round the crosshair */
.gsui .gs-hitdir { z-index: 1; }
.gsui .gs-hit { position: absolute; inset: 0; opacity: 0; }
.gsui .gs-hit-edge {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 0%), rgba(255, 40, 60, 0.9) 0, rgba(225, 0, 32, 0.55) 13vmin, rgba(170, 0, 24, 0.18) 30vmin, rgba(170, 0, 24, 0) 44vmin);
}
.gsui .gs-hit-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 156px;
  height: 156px;
  margin: -78px 0 0 -78px;
  border: 6px solid transparent;
  border-top-color: #ff2a3d;
  border-radius: 50%;
  transform: rotate(var(--ha, 0rad));
  filter: drop-shadow(0 0 6px rgba(255, 30, 50, 0.95)) drop-shadow(0 0 1px #000);
}
/* the point of the arc: a little arrowhead aimed at whoever did it */
.gsui .gs-hit-arc::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -22px;
  border: 9px solid transparent;
  border-bottom: 12px solid #ff2a3d;
  border-top: 0;
  transform: translateX(-50%);
}

/* ---- (2026-10-10, w18-impacts; JUICE_MAP.md FI4) a wind-up aimed at you from off screen: a thin red glow on that edge
   (UI.telegraphEdge). Thinner and dimmer than a hit's edge; the middle of the screen stays clear. */
.gsui .gs-tele {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 0%), rgba(255, 50, 64, 0.5) 0, rgba(220, 0, 32, 0.2) 9vmin, rgba(200, 0, 30, 0) 20vmin);
}

/* ---- KO card: the incident report slip ("Knocked out by …") */
.gsui .gs-ko-cause {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 9px;
  max-width: min(560px, calc(100vw - 32px));
  margin-top: 14px;
  padding: 7px 16px 8px 12px;
  font: 600 clamp(14px, 1.3vw, 18px)/1.25 var(--gs-font-ui);
  color: #2b1d12;
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(80, 110, 170, 0.18) 21px 22px),
    linear-gradient(180deg, #f6ecd4, #e6d7b4);
  border-left: 5px solid #c41e2e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.6deg);
  animation: gs-pop 0.35s ease-out;
}
.gsui .gs-ko-cause-k {
  padding: 2px 6px 1px;
  font: 800 9.5px/1.2 var(--gs-font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a3121f;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: rotate(1.6deg);
}
.gsui .gs-ko-cause-by { color: #4a3a2a; }
.gsui .gs-ko-cause-v {
  min-width: 0;
  overflow-wrap: anywhere;
  font: 400 1.18em/1.15 var(--gs-font-marker);
  color: #8e0d1b;
}

/* ---- health: the screen-edge vignette (UI.setHealth, playtest 4; replaced the crosshair pips). Under the HUD (z 2)
   and the hit flashes; the middle of the screen always stays clear. --hpv = the rim (0 at full health), --hpv-deep =
   the heavier band from about half health down. Opacity only, so it costs nothing on a phone. */
.gsui .gs-hpvig { z-index: 1; pointer-events: none; }
.gsui .gs-hpvig-rim,
.gsui .gs-hpvig-deep,
.gsui .gs-hpvig-deep::after { position: absolute; inset: 0; }
.gsui .gs-hpvig-rim {
  opacity: var(--hpv, 0);
  background: radial-gradient(ellipse 80% 76% at 50% 50%, transparent 60%, rgba(160, 0, 22, 0.26) 80%, rgba(125, 0, 16, 0.6) 100%);
  box-shadow: inset 0 0 3.2vmin rgba(205, 12, 34, 0.42);
  transition: opacity 0.22s ease-out;
}
.gsui .gs-hpvig-deep {
  opacity: var(--hpv-deep, 0);
  background: radial-gradient(ellipse 74% 68% at 50% 50%, transparent 46%, rgba(130, 0, 18, 0.26) 72%, rgba(85, 0, 10, 0.72) 100%);
  transition: opacity 0.3s ease-out;
}
/* the last HP: a slow double thump on the deep band (a separate layer, so only its opacity animates) */
.gsui .gs-hpvig-deep::after {
  content: '';
  opacity: 0;
  background: radial-gradient(ellipse 76% 70% at 50% 50%, transparent 52%, rgba(210, 0, 28, 0.32) 80%, rgba(170, 0, 22, 0.55) 100%);
}
.gsui .gs-hpvig.is-low .gs-hpvig-deep::after { animation: gs-hpvig-thump 1.15s ease-out infinite; }
/* during a Purge / the Uprising the rim's edge burns a little brighter (readable mid-brawl) */
.gsui .gs-hpvig.is-fight .gs-hpvig-rim { box-shadow: inset 0 0 4.2vmin rgba(235, 22, 44, 0.55); }
/* healing / a revive: it drains away instead of snapping off */
.gsui .gs-hpvig.is-healing .gs-hpvig-rim,
.gsui .gs-hpvig.is-healing .gs-hpvig-deep { transition: opacity 1.6s ease-out; }
@keyframes gs-hpvig-thump { 0% { opacity: 0; } 10% { opacity: 1; } 24% { opacity: 0.15; } 34% { opacity: 0.7; } 60%, 100% { opacity: 0; } }
@keyframes gs-hp-low { from { filter: none; } to { filter: brightness(1.7); box-shadow: 0 0 10px rgba(255, 40, 60, 0.95); } }

/* ---- hit marker: your throw / cart / roar landed (UI.hitMarker) */
.gsui .gs-x-hit { width: 28px; height: 28px; opacity: 0; --hc: #fff; }
.gsui .gs-x-hit[data-kind='down'] { --hc: #ff3b4a; width: 34px; height: 34px; }
.gsui .gs-x-hit[data-kind='boss'] { --hc: #ffd84a; width: 36px; height: 36px; }
.gsui .gs-x-hit::before,
.gsui .gs-x-hit::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: linear-gradient(90deg, var(--hc) 0 34%, transparent 34% 66%, var(--hc) 66%);
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
  transform: rotate(45deg);
}
.gsui .gs-x-hit::after { transform: rotate(-45deg); }

/* ---- the Purge chip: countdown, BOSS PURGE, Mannequin Uprising */
.gsui .gs-mode-t {
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: #fff;
  background: color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 999px;
}
.gsui .gs-modechip.is-final .gs-mode-t { background: var(--c); text-shadow: 0 1px 0 #000; animation: gs-blink 0.5s steps(2) infinite; }
/* (2026-10-08, w7-preptimers) the prep countdown on the PREP chip: the last 10 s blink; paused, the chip stops pulsing */
.gsui .gs-phase.is-final .gs-prep-t { background: var(--c); text-shadow: 0 1px 0 #000; animation: gs-blink 0.5s steps(2) infinite; }
.gsui .gs-phase.is-paused { animation: none; }
.gsui .gs-phase.is-paused .gs-prep-t { opacity: 0.6; }
.gsui .gs-mode--boss {
  --c: #ff4fa3;
  color: #ffe14d;
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(255, 59, 74, 0.55), 0 0 18px rgba(255, 79, 163, 0.6), inset 0 0 12px rgba(255, 79, 163, 0.3);
  text-shadow: 0 0 8px rgba(255, 79, 163, 0.8), 0 1px 0 #000;
}
.gsui .gs-mode--uprising {
  --c: #e8dcc6;
  color: #f4ecdc;
  background: rgba(20, 16, 14, 0.88);
  animation: gs-pop 0.25s ease-out, gs-twitch 3.2s steps(1) infinite;
}
.gsui .gs-topbar.is-boss::before { background: linear-gradient(180deg, rgba(255, 79, 163, 0.45), #ff3b4a 55%, #ff4fa3 80%, #ffd84a); }
.gsui .gs-topbar.is-uprising::before { background: linear-gradient(180deg, rgba(232, 220, 198, 0.3), #b9ab92 70%, #efe4d0); }
.gsui .gs-topbar.is-uprising::after {
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(232, 220, 198, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(30, 26, 24, 0.95), rgba(12, 10, 10, 0.93));
}

/* ---- banners: BOSS PURGE (the Purge banner, escalated) and the Mannequin Uprising */
.gsui .gs-banner-kick {
  position: absolute;
  bottom: calc(100% + clamp(54px, 7vw, 112px) * 0.16);
  left: 50%;
  translate: -50% 0;
  padding: 5px 14px 4px;
  font: 800 clamp(11px, 1vw, 14px)/1.1 var(--gs-font-ui);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--kc, #ffd84a);
  background: rgba(14, 3, 10, 0.92);
  border: 1px solid currentColor;
  box-shadow: 0 0 16px color-mix(in srgb, var(--kc, #ffd84a) 40%, transparent);
}
.gsui .gs-banner--boss { --bc: #ff4fa3; }
.gsui .gs-banner--boss .gs-siren { background: repeating-linear-gradient(-45deg, #e3162b 0 28px, #2a0638 28px 56px); }
.gsui .gs-banner--boss .gs-banner-title {
  color: #ffe14d;
  border-color: #ff4fa3;
  box-shadow: 0 0 0 3px #12020a, 0 0 0 6px #ff3b4a, 0 0 44px rgba(255, 79, 163, 0.75), inset 0 0 26px rgba(255, 79, 163, 0.35);
  text-shadow: 0 0 18px rgba(255, 79, 163, 0.95), 0 3px 0 #000;
}
.gsui .gs-banners.is-boss::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 220px 70px rgba(176, 30, 220, 0.45);
  animation: gs-siren-pulse 0.55s ease-in-out infinite alternate-reverse;
}
.gsui .gs-banner--uprising { --bc: #cbbda2; --kc: #e8dcc6; }
.gsui .gs-banner--uprising .gs-banner-title {
  font-family: var(--gs-font-deco);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #efe4d0;
  text-shadow: 0 0 2px #000, 0 4px 0 #3b3128, 0 0 30px rgba(232, 220, 198, 0.45);
  animation: gs-twitch 3.2s steps(1) infinite;
}
.gsui .gs-banners.is-uprising::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 200px 60px rgba(214, 204, 186, 0.28);
}
/* a mannequin holds a pose, then it is suddenly in a different one */
@keyframes gs-twitch {
  0%, 100% { transform: none; }
  58% { transform: rotate(-2.5deg); }
  59% { transform: rotate(-2.5deg) translateX(3px); }
  60% { transform: rotate(-2.5deg); }
  86% { transform: rotate(1.5deg) translateY(-1px); }
}

/* ---- HUD alert: a shoplifter is making a run for it */
.gsui .gs-alert--thief { --ac: #f15bb5; }
.gsui .gs-alert--thief .gs-alert-ico { animation: gs-bob 0.9s ease-in-out infinite; }

/* ---- screen-edge markers (UI.setMarkers): shoplifters. A tag over them; an arrow on the edge when off screen */
.gsui .gs-marks { z-index: 1; transition: opacity 0.2s; }
.gsui.gs-has-modal .gs-marks { opacity: 0; }
.gsui .gs-mark { --mc: #f15bb5; position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.gsui .gs-mark-tag {
  position: absolute;
  left: 0;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 2px;
  transform: translateX(-50%);
  font: 800 11px/1 var(--gs-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffe3f3;
  background: rgba(40, 6, 30, 0.86);
  border: 1px solid var(--mc);
  border-radius: 999px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--mc) 55%, transparent), 0 2px 6px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 0 #000;
  animation: gs-mark-bob 0.8s ease-in-out infinite alternate;
}
.gsui .gs-mark-ico {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-size: 11px;
  background: color-mix(in srgb, var(--mc) 70%, #000);
  border-radius: 50%;
}
.gsui .gs-mark-arrow { display: none; }
.gsui .gs-mark.is-off .gs-mark-tag { bottom: auto; top: 0; padding: 2px; transform: translate(-50%, -50%); }
.gsui .gs-mark.is-off .gs-mark-lbl { display: none; }
.gsui .gs-mark.is-off .gs-mark-arrow {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(var(--rot, 0rad));
}
.gsui .gs-mark.is-off .gs-mark-arrow::before {
  content: '';
  position: absolute;
  left: 13px;
  top: -8px;
  border: 8px solid transparent;
  border-left: 13px solid var(--mc);
  border-right: 0;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mc) 80%, transparent)) drop-shadow(0 0 1px #000);
  animation: gs-mark-poke 0.6s ease-in-out infinite alternate;
}
@keyframes gs-mark-bob { to { translate: 0 -4px; } }
@keyframes gs-mark-poke { to { translate: 4px 0; } }

/* ---- VEND-O-MATIC: every slot prints what it does */
.gsui .gs-vfx {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 29px;
  z-index: 3;
  height: 17px;
  display: block;
  overflow: hidden;
  padding: 0 3px;
  text-align: center;
  font: 800 10.5px/15px var(--gs-font-ui);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #b8ff8a;
  text-shadow: 0 0 6px rgba(124, 252, 58, 0.75);
  background: linear-gradient(180deg, rgba(10, 34, 12, 0.94), rgba(4, 16, 6, 0.94));
  border: 1px solid rgba(124, 252, 58, 0.45);
  border-radius: 2px;
}
.gsui .gs-vslot.is-sold:not(.is-decoy) .gs-vfx { color: #0d2405; background: rgba(124, 252, 58, 0.82); border-color: #c4ff96; text-shadow: none; }
.gsui .gs-vslot.is-sold:not(.is-decoy) .gs-vfx::before { content: '✓ '; }
.gsui .gs-vslot.is-decoy .gs-vfx { color: #ffcf7a; background: rgba(34, 20, 4, 0.92); border-color: rgba(255, 181, 71, 0.4); text-shadow: 0 0 6px rgba(255, 181, 71, 0.55); }
.gsui .gs-vslot.is-poor:not(.is-sold) .gs-vfx { color: #d9ffc2; }

/* ---- Supply-O-Matic: the store's name in the title, locked rows, break room parts, frozen goods */
.gsui .gs-term-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gsui .gs-trow-sub.is-lock { white-space: normal; color: #ffb547; text-shadow: 0 0 6px rgba(255, 181, 71, 0.55); }
.gsui .gs-trow-sub.is-lock::before { content: '🔒 '; filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(-20deg) saturate(3); }
.gsui .gs-trow.is-locked .gs-tbtn:disabled { color: rgba(255, 181, 71, 0.7); border: 1px dashed rgba(255, 181, 71, 0.45); text-shadow: none; font-size: 19px; }
.gsui .gs-trow--part { position: relative; margin-left: 26px; }
.gsui .gs-trow--part::before {
  content: '';
  position: absolute;
  left: -17px;
  top: -4px;
  width: 12px;
  height: calc(50% + 4px);
  border-left: 2px dotted rgba(124, 252, 58, 0.5);
  border-bottom: 2px dotted rgba(124, 252, 58, 0.5);
}
.gsui .gs-ticon.is-frozen {
  border-color: rgba(150, 220, 255, 0.65);
  background: radial-gradient(circle at 50% 38%, rgba(140, 210, 255, 0.28), rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, #0a2230, #03101a);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85), 0 0 10px rgba(120, 200, 255, 0.35);
}
.gsui .gs-ticon.is-frozen .gs-term-ico { filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(3) brightness(1.2) drop-shadow(0 0 4px rgba(120, 200, 255, 0.8)); }
.gsui .gs-trow--frozen .gs-trow-name { color: #c8f0ff; text-shadow: 0 0 8px rgba(120, 200, 255, 0.7); }

/* Management tab (campaign only): store file, rename, start over */
.gsui .gs-mgmt-info { margin-bottom: 4px; }
.gsui .gs-mgmt-mode { overflow-wrap: anywhere; }
.gsui .gs-mgmt-tier { margin-top: 4px; font-size: 20px; line-height: 1.05; letter-spacing: 0.05em; color: #ffd27a; text-shadow: 0 0 8px rgba(255, 181, 71, 0.6); }
/* (2026-10-09, pt-stars) the tier's stars under its name, as before x4 */
.gsui .gs-mgmt-stars { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.gsui .gs-mgmt-stars .gs-stars { font-size: 20px; }
.gsui .gs-mgmt-stars .gs-stars-bg { color: rgba(141, 255, 90, 0.22); }
.gsui .gs-mgmt-stars .gs-stars-fill { color: #e6ffb8; text-shadow: 0 0 8px rgba(124, 252, 58, 0.9); }
.gsui .gs-mgmt-rep { font-size: 20px; color: rgba(214, 255, 186, 0.85); }
.gsui .gs-mgmt-new .gs-mgmt-card { gap: 6px; }
.gsui .gs-mgmt-new .gs-mgmt-btn { align-self: flex-start; min-width: min(420px, 100%); }
.gsui .gs-rename { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 4px 10px; align-items: center; }
.gsui .gs-rename-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #7cfc3a;
  background: rgba(124, 252, 58, 0.06);
  cursor: text;
}
.gsui .gs-rename-field:focus-within { background: rgba(124, 252, 58, 0.12); box-shadow: 0 0 14px rgba(124, 252, 58, 0.5); }
.gsui .gs-rename-pre { flex: none; color: rgba(141, 255, 90, 0.7); }
.gsui .gs-rename-input {
  flex: 1;
  min-width: 0;
  padding: 5px 0 3px;
  font: 26px/1.1 var(--gs-font-crt);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e6ffb8;
  caret-color: #8dff5a;
  text-shadow: 0 0 6px rgba(124, 252, 58, 0.7);
  background: transparent;
  border: 0;
  outline: 0;
  user-select: text;
  -webkit-user-select: text;
}
.gsui .gs-rename-input::placeholder { color: rgba(141, 255, 90, 0.3); }
.gsui .gs-rename-input:disabled { opacity: 0.45; }
.gsui .gs-rename-count { flex: none; font-size: 17px; color: rgba(141, 255, 90, 0.5); }
.gsui .gs-rename-btn { min-height: 38px; }
.gsui .gs-rename-note { grid-column: 1 / -1; margin-top: 2px; }

/* ---- receipt: the store's report card */
.gsui .gs-r-logo.is-long { font-size: 21px; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.gsui .gs-r-logo.is-long::before,
.gsui .gs-r-logo.is-long::after { display: none; }
/* Pasted on over the header, on its own paper: multiply-blended over the dark tier bar it went near-black and its
   tier line vanished. Inset from the right so the outline stays inside the receipt's scroll clip. */
.gsui .gs-stamp--rank {
  position: absolute;
  top: 54px;
  right: 16px;
  z-index: 2;
  --rot: 11deg;
  padding: 5px 12px 4px;
  mix-blend-mode: normal;
  background: rgba(247, 241, 226, 0.92);
  animation: gs-stamp 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) 1.5s both;
}
.gsui .gs-stamp--rank .gs-stamp-big { font-size: 28px; }
.gsui .gs-stamp--rank.is-floor .gs-stamp-big { font-size: 21px; }
.gsui .gs-stamp--rank.is-promoted { color: #a8780a; }
.gsui .gs-stamp--rank.is-demoted { --rot: -12deg; color: #cc1430; }
/* (2026-10-08, x4-satisfaction) Customer Satisfaction on the receipt: the bar in ink, why it moved, the one sentence */
.gsui .gs-satbar--receipt { display: block; width: auto; height: 8px; margin: 2px 0 4px; background: rgba(42, 34, 48, 0.08); border-color: rgba(42, 34, 48, 0.55); }
.gsui .gs-satbar--receipt .gs-satbar-fill { background: repeating-linear-gradient(90deg, #3a2e40 0 3px, #574a5c 3px 4px); box-shadow: none; }
.gsui .gs-satbar--receipt .gs-satbar-tick { background: #b3122b; box-shadow: none; }
.gsui .gs-satbar--receipt .gs-satbar-tick.is-met { background: #1f7a30; box-shadow: none; }
.gsui .gs-r-why { display: flex; justify-content: space-between; gap: 8px; padding-left: 10px; font-size: 12px; line-height: 1.35; }
.gsui .gs-r-why.is-up { color: #1f7a30; }
.gsui .gs-r-why.is-down { color: #b3122b; }
.gsui .gs-r-why-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.gsui .gs-r-cap { font-style: italic; padding-left: 10px; }
.gsui .gs-r-next { margin: 7px 0 3px; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.04em; text-align: center; }
.gsui .gs-receipt .gs-stars-bg { color: rgba(42, 34, 48, 0.2); }
.gsui .gs-receipt .gs-stars-fill { color: #a8780a; text-shadow: none; }
.gsui .gs-r-verdict .gs-r-verdict-stars { align-self: center; margin-bottom: 4px; font-size: 22px; letter-spacing: 2px; } /* (pt-stars) */
.gsui .gs-r-rating .gs-r-val { white-space: nowrap; }
.gsui .gs-r-delta { font-weight: 700; }
.gsui .gs-r-delta.is-up, .gsui .gs-r-grade-money.is-up, .gsui .gs-r-row.is-good { color: #1f7a30; }
.gsui .gs-r-delta.is-down, .gsui .gs-r-grade-money.is-down { color: #b3122b; }
.gsui .gs-r-row.is-ep .gs-r-val { color: #5b1aa6; }
.gsui .gs-r-row.is-ep .gs-r-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.gsui .gs-r-epwhy { margin: -1px 0 3px 12px; font-size: 12px; line-height: 1.3; opacity: 0.72; overflow-wrap: anywhere; }
.gsui .gs-r-grade {
  --g: #2a2230;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 10px 0 4px;
  padding: 8px 10px 8px 8px;
  border: 2px solid rgba(42, 34, 48, 0.55);
  border-radius: 3px;
}
.gsui .gs-r-grade.is-a { --g: #1f8f36; }
.gsui .gs-r-grade.is-b { --g: #4f7f16; }
.gsui .gs-r-grade.is-c { --g: #8a6b15; }
.gsui .gs-r-grade.is-d { --g: #c45a00; }
.gsui .gs-r-grade.is-f { --g: #cc1430; }
.gsui .gs-r-grade-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 62px;
  color: var(--g);
  border: 3px solid currentColor;
  border-radius: 5px;
  outline: 1px solid currentColor;
  outline-offset: 2px;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
  animation: gs-stamp 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) 1.1s both;
  --rot: -5deg;
}
.gsui .gs-r-grade-k { font: 700 9px/1 var(--gs-font-receipt); letter-spacing: 0.22em; }
.gsui .gs-r-grade-v { font: 900 38px/1 var(--gs-font-deco); }
.gsui .gs-r-grade-t { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; }
.gsui .gs-r-grade-line { font-size: 12.5px; font-style: italic; opacity: 0.85; }
.gsui .gs-r-grade-notes { margin-top: 3px; font-size: 12.5px; }
.gsui .gs-r-grade-notes li::before { content: '✎ '; opacity: 0.7; }
.gsui .gs-r-grade-money { margin-top: 3px; font-weight: 700; }
.gsui .gs-r-verdict {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0 2px;
  padding: 6px 10px 7px;
  font-size: 12.5px;
  text-align: center;
  border: 2px dashed currentColor;
  border-radius: 3px;
}
.gsui .gs-r-verdict b { font-size: 14px; letter-spacing: 0.08em; }
.gsui .gs-r-verdict.is-good { color: #1f6a2a; }
.gsui .gs-r-verdict.is-bad { color: #b3122b; }
.gsui .gs-r-incidents { border-style: dashed; }
.gsui .gs-r-incidents .gs-r-curse { color: #8a4a00; }
.gsui .gs-r-curse-note { display: block; margin: 0 0 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; opacity: 0.72; }

/* ---- the Wardrobe (employee lockers in the break room) */
.gsui .gs-ward-wrap { background: radial-gradient(ellipse at center, rgba(8, 20, 22, 0.5), rgba(3, 6, 8, 0.86)); }
.gsui .gs-ward {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 24px));
  height: min(680px, calc(100vh - 24px));
  margin: 12px;
  padding: 0 14px 10px;
  outline: none;
  color: #e6edef;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 3%, transparent 97%, rgba(0, 0, 0, 0.28)),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255, 255, 255, 0.014) 3px 4px),
    linear-gradient(180deg, #4b5d63 0%, #34444a 38%, #263237 100%);
  box-shadow:
    0 0 0 2px #0b1012,
    inset 0 0 0 4px #1b2428,
    inset 0 0 0 5px rgba(190, 210, 214, 0.28),
    0 30px 70px rgba(0, 0, 0, 0.72);
  animation: gs-pop 0.22s ease-out;
}
.gsui .gs-ward-head { position: relative; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 10px 2px 8px; }
.gsui .gs-ward-vents {
  flex: none;
  width: 92px;
  height: 34px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, #11181b 0 3px, transparent 3px 7px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  opacity: 0.85;
}
.gsui .gs-ward-plate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 16px 8px;
  background: linear-gradient(180deg, #f3dc8c, #c9a227 55%, #8a6b15);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px #4a3a08;
  color: #2a1c00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.gsui .gs-ward-kicker { font: 700 9.5px/1 var(--gs-font-deco); letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; }
.gsui .gs-ward-title { font: 900 24px/1 var(--gs-font-deco); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.gsui .gs-ward-tape-name {
  align-self: flex-start;
  max-width: 100%;
  margin-top: 3px;
  padding: 1px 8px 0;
  overflow: hidden;
  font: 400 13px/1.3 var(--gs-font-marker);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1d1626;
  text-shadow: none;
  background: rgba(250, 244, 226, 0.92);
  transform: rotate(-1.5deg);
}
.gsui .gs-ward-ep {
  margin-left: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  column-gap: 6px;
  padding: 6px 14px 7px;
  background: radial-gradient(ellipse at 50% 40%, #102a14, #050d06);
  border-radius: 4px;
  box-shadow: inset 0 0 12px #000, 0 0 0 2px #0b1012, 0 0 0 3px rgba(190, 210, 214, 0.35);
}
.gsui .gs-ward-ep-l { grid-column: 1 / -1; font: 800 9px/1 var(--gs-font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(141, 255, 90, 0.65); }
.gsui .gs-ward-ep-v { font: 36px/1 var(--gs-font-crt); color: #c4ff9e; text-shadow: 0 0 10px rgba(124, 252, 58, 0.9); font-variant-numeric: tabular-nums; }
.gsui .gs-ward-ep-u { font: 20px/1 var(--gs-font-crt); color: rgba(141, 255, 90, 0.7); }
.gsui .gs-ward-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font: 900 18px/1 var(--gs-font-ui);
  color: #e6edef;
  background: linear-gradient(180deg, #5d7076, #2f3c41);
  border: 1px solid rgba(220, 235, 238, 0.45);
  border-radius: 6px;
  box-shadow: 0 3px 0 #11181b, inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
}
.gsui .gs-ward-x:hover { filter: brightness(1.2); }
.gsui .gs-ward-x:active { transform: translateY(2px); box-shadow: 0 1px 0 #11181b; }
.gsui .gs-ward-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr) 272px; gap: 12px; }

/* locker doors = the shelves (categories) */
.gsui .gs-ward-doors { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.gsui .gs-wdoor {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 74px;
  padding: 16px 6px 8px;
  color: #dfe8ea;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, transparent 4px 100%),
    linear-gradient(180deg, #5a6d73, #3a4a50 60%, #2d3a3f);
  border: 1px solid rgba(10, 16, 18, 0.9);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 3px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease-out, filter 0.15s, box-shadow 0.15s;
}
.gsui .gs-wdoor:hover { filter: brightness(1.12); }
.gsui .gs-wdoor-vent {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 6px;
  height: 7px;
  background: repeating-linear-gradient(180deg, #141c1f 0 1.5px, transparent 1.5px 3.5px);
  border-radius: 1px;
  opacity: 0.8;
}
.gsui .gs-wdoor::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  width: 4px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, #9aa9ad, #e8eff0 50%, #7d8b8f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.gsui .gs-wdoor-ico { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.gsui .gs-wdoor-lbl { font: 800 11px/1 var(--gs-font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.gsui .gs-wdoor-n { font: 700 10px/1 var(--gs-font-ui); letter-spacing: 0.08em; color: rgba(223, 232, 234, 0.6); }
.gsui .gs-wdoor-key {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font: 800 9px/1 var(--gs-font-ui);
  color: rgba(223, 232, 234, 0.45);
}
.gsui .gs-wdoor.is-open {
  color: #fff3c4;
  background: linear-gradient(180deg, #1a2326, #0f1517);
  border-color: var(--gs-brass);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(240, 213, 122, 0.5), 0 0 16px rgba(240, 213, 122, 0.25);
  transform: translateX(5px);
}
.gsui .gs-wdoor.is-open .gs-wdoor-n { color: var(--gs-brass-lt); }
.gsui .gs-wdoor.is-open::after { opacity: 0.35; }

/* the open locker: a dark interior with the items on hooks */
.gsui .gs-ward-shelf {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 10px 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(240, 213, 122, 0.08), transparent 70%), linear-gradient(180deg, #121a1d, #0a0f11);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(190, 210, 214, 0.15);
}
.gsui .gs-ward-shelfhead { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 8px; border-bottom: 1px solid rgba(240, 213, 122, 0.2); }
.gsui .gs-wshelf-t { font: 900 17px/1 var(--gs-font-deco); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-brass-lt); }
.gsui .gs-wshelf-s { min-width: 0; overflow: hidden; font: italic 500 12.5px/1.2 var(--gs-font-ui); white-space: nowrap; text-overflow: ellipsis; color: rgba(230, 237, 239, 0.6); }
.gsui .gs-ward-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  align-content: start;
  gap: 10px;
  padding: 10px 4px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 213, 122, 0.4) transparent;
}
/* p13: the DECOR locker (decor + repaint, moved here from the Supply-O-Matic): the terminal's rows, in locker colours,
   across the shelf and side columns */
.gsui .gs-ward.is-decor .gs-ward-body > .gs-ward-shelf:not(.gs-ward-decor),
.gsui .gs-ward.is-decor .gs-ward-side { display: none; }
.gsui .gs-ward-decor { grid-column: 2 / -1; }
.gsui .gs-ward-decor-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 4px 10px; font: 22px/1.1 var(--gs-font-crt); scrollbar-width: thin; scrollbar-color: rgba(240, 213, 122, 0.4) transparent; }
.gsui .gs-ward-decor-log { padding: 7px 4px 9px; border-top: 1px solid rgba(240, 213, 122, 0.2); font: 18px/1.1 var(--gs-font-crt); color: var(--gs-brass-lt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsui .gs-ward-decor .gs-trow { border-bottom-color: rgba(240, 213, 122, 0.16); }
.gsui .gs-ward-decor .gs-trow-name { color: var(--gs-bone); }
.gsui .gs-ward-decor .gs-trow-desc { color: rgba(230, 237, 239, 0.75); }
.gsui .gs-ward-decor .gs-trow-sub,
.gsui .gs-ward-decor .gs-trow-head,
.gsui .gs-ward-decor .gs-tnote,
.gsui .gs-ward-decor .gs-tstat-k { color: rgba(240, 213, 122, 0.62); }
.gsui .gs-ward-decor .gs-trow-price,
.gsui .gs-ward-decor .gs-tstat-v { color: var(--gs-brass-lt); }
.gsui .gs-ward-decor .gs-tstat { border-color: rgba(240, 213, 122, 0.3); background: rgba(240, 213, 122, 0.05); }
.gsui .gs-ward-decor .gs-tsec { color: var(--gs-brass-lt); }
.gsui .gs-ward-decor .gs-tsec::before,
.gsui .gs-ward-decor .gs-tsec::after { border-top-color: rgba(240, 213, 122, 0.35); }
.gsui .gs-ward-decor .gs-tbtn { color: var(--gs-brass-lt); border-color: rgba(240, 213, 122, 0.6); background: rgba(240, 213, 122, 0.06); text-shadow: none; }
.gsui .gs-ward-decor .gs-tbtn:hover:not(:disabled) { color: #1a1408; background: var(--gs-brass-lt); box-shadow: 0 0 14px rgba(240, 213, 122, 0.55); }
.gsui .gs-ward-decor .gs-tbtn:disabled { color: rgba(240, 213, 122, 0.35); border-color: rgba(240, 213, 122, 0.2); background: transparent; }
.gsui .gs-ward-decor .gs-ticon { border-color: rgba(240, 213, 122, 0.4); }
/* (seven locker doors now: a little shorter, so DECOR fits without scrolling) */
.gsui .gs-ward-doors { gap: 6px; }
.gsui .gs-ward-doors > .gs-wdoor { min-height: 60px; padding: 13px 6px 5px; gap: 2px; }
.gsui .gs-wdoor--decor .gs-wdoor-ico { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) sepia(0.3); }
/* the Supply-O-Matic's note: decor lives at the lockers now */
.gsui .gs-tnote--decor { margin: 4px 2px 8px; color: #ffd27a; }

.gsui .gs-wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 140px;
  padding: 10px 6px 9px;
  color: inherit;
  background: linear-gradient(180deg, #243034, #172024);
  border: 1px solid rgba(170, 195, 200, 0.22);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease-out, border-color 0.15s, box-shadow 0.15s;
}
.gsui .gs-wcard::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 18px;
  height: 7px;
  transform: translateX(-50%);
  border: 2px solid rgba(190, 210, 214, 0.45);
  border-top: 0;
  border-radius: 0 0 9px 9px;
}
.gsui .gs-wcard:hover { transform: translateY(-2px); border-color: rgba(240, 213, 122, 0.55); }
.gsui .gs-wcard.is-sel {
  border-color: var(--gs-brass-lt);
  background: linear-gradient(180deg, #303b2c, #1b231a);
  box-shadow: 0 0 0 1px var(--gs-brass-lt), 0 0 18px rgba(240, 213, 122, 0.3), 0 4px 8px rgba(0, 0, 0, 0.4);
}
.gsui .gs-wcard.is-poor .gs-wicon { filter: grayscale(0.6) brightness(0.75); }
.gsui .gs-wcard.is-pending { animation: gs-chip-pulse 0.8s ease-in-out infinite; --c: var(--gs-brass-lt); }
.gsui .gs-wcard-lock { position: absolute; top: 6px; right: 7px; font-size: 11px; font-style: normal; opacity: 0.55; }
.gsui .gs-wcard-name { font: 700 12.5px/1.15 var(--gs-font-ui); text-align: center; color: #eef4f5; }
.gsui .gs-wcard-tag {
  margin-top: auto;
  padding: 3px 8px;
  font: 800 10px/1 var(--gs-font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gs-brass-lt);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(240, 213, 122, 0.35);
  border-radius: 999px;
}
.gsui .gs-wcard.is-poor .gs-wcard-tag { color: #ff9a9a; border-color: rgba(255, 120, 120, 0.35); }
.gsui .gs-wcard.is-owned .gs-wcard-tag { color: #9ff5e6; border-color: rgba(46, 230, 200, 0.4); }
.gsui .gs-wcard.is-worn .gs-wcard-tag { color: #0d2405; background: var(--gs-green); border-color: #c4ff96; box-shadow: 0 0 10px rgba(124, 252, 58, 0.5); }

/* item pictures: the thumbnail, or a drawn stand-in until it arrives */
.gsui .gs-wicon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.35) 70%);
}
.gsui .gs-wicon img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
.gsui .gs-wicon--big { width: 96px; height: 96px; border-radius: 10px; }
.gsui .gs-wicon--sm { width: 40px; height: 40px; }
.gsui .gs-wglyph { font-size: 38px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.gsui .gs-wicon--big .gs-wglyph { font-size: 50px; }
.gsui .gs-wicon--sm .gs-wglyph { font-size: 20px; }
.gsui .gs-wapron {
  --ac: #2ee6c8;
  position: relative;
  display: grid;
  place-items: center;
  width: 54%;
  height: 72%;
  background: var(--ac);
  clip-path: polygon(33% 0, 67% 0, 67% 17%, 96% 27%, 88% 100%, 12% 100%, 4% 27%, 33% 17%);
}
.gsui .gs-wapron::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%, rgba(0, 0, 0, 0.3)); }
.gsui .gs-wapron-g { position: relative; z-index: 1; font-size: 16px; line-height: 1; }
.gsui .gs-wicon--big .gs-wapron-g { font-size: 22px; }
.gsui .gs-wicon--sm .gs-wapron-g { font-size: 9px; }
.gsui .gs-wapron.is-gold { background: linear-gradient(120deg, #8a6b15, #f0d57a 45%, #fff3c4 52%, #c9a227 62%, #8a6b15); }
.gsui .gs-wapron.is-void {
  background:
    radial-gradient(1.2px 1.2px at 30% 40%, #fff, transparent),
    radial-gradient(1px 1px at 62% 66%, #cfe, transparent),
    radial-gradient(1.4px 1.4px at 48% 22%, #fff, transparent),
    radial-gradient(1px 1px at 72% 34%, #fff, transparent),
    #05040a;
}
.gsui .gs-wpat--stripes { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 9px), var(--ac); }
.gsui .gs-wpat--plaid {
  background:
    repeating-linear-gradient(0deg, rgba(255, 90, 90, 0.4) 0 4px, transparent 4px 11px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 4px, transparent 4px 11px),
    var(--ac);
}
.gsui .gs-wpat--checker { background: repeating-conic-gradient(rgba(255, 255, 255, 0.45) 0 25%, transparent 0 50%) 0 0 / 12px 12px, var(--ac); }
.gsui .gs-wpat--flames { background: linear-gradient(0deg, rgba(255, 120, 20, 0.85), rgba(255, 210, 60, 0.4) 45%, transparent 75%), var(--ac); }
.gsui .gs-wpat--skulls { background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 2px, transparent 2.5px) 0 0 / 10px 10px, var(--ac); }
.gsui .gs-wpat--eyes { background: radial-gradient(circle, #fff 2px, #111 2.5px, transparent 3.5px) 0 0 / 12px 12px, var(--ac); }
.gsui .gs-wplaque {
  max-width: 92%;
  padding: 5px 7px 4px;
  font: 800 9px/1.15 var(--gs-font-deco);
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: #2a1c00;
  background: linear-gradient(180deg, #f7e3a0, #c9a227 60%, #8a6b15);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.gsui .gs-wplaque.is-big { font-size: 12px; padding: 7px 9px 6px; }
.gsui .gs-wplaque.is-tight { font-size: 7px; letter-spacing: 0; padding: 5px 4px 4px; }
.gsui .gs-wplaque.is-big.is-tight { font-size: 9.5px; }
.gsui .gs-wplaque.is-xtight { font-size: 6px; }
.gsui .gs-wplaque.is-big.is-xtight { font-size: 8.5px; }
.gsui .gs-wicon.is-plaque { border-radius: 10px; }
.gsui .gs-wicon--sm .gs-wplaque { font-size: 5.5px; padding: 3px 3px 2px; }

/* the side panel: the selected item, what you're wearing, how to earn EP */
.gsui .gs-ward-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(240, 213, 122, 0.4) transparent; }
.gsui .gs-wdet,
.gsui .gs-wwear,
.gsui .gs-wearn {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(10, 16, 18, 0.82), rgba(10, 16, 18, 0.65));
  border: 1px solid rgba(190, 210, 214, 0.18);
  border-radius: 5px;
}
.gsui .gs-wdet { display: flex; flex-direction: column; gap: 8px; }
.gsui .gs-wdet-top { display: flex; align-items: center; gap: 12px; }
.gsui .gs-wdet-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gsui .gs-wdet-name { font: 900 17px/1.1 var(--gs-font-deco); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gs-brass-lt); }
.gsui .gs-wdet-stat { font: 700 11px/1.25 var(--gs-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(230, 237, 239, 0.65); }
.gsui .gs-wdet-desc { font: italic 500 13px/1.35 var(--gs-font-ui); color: #d8e2e4; }
.gsui .gs-wact { width: 100%; padding: 11px 12px; font-size: 13px; }
.gsui .gs-wact.is-buy { color: #0d2405; background: linear-gradient(180deg, #c4ff96 0%, #7cfc3a 45%, #3fae15 100%); border-color: #e6ffd2; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 0 #1b4a08, 0 0 20px rgba(124, 252, 58, 0.4); }
.gsui .gs-wact.is-wear { color: #04211d; background: linear-gradient(180deg, #a8fff0, #2ee6c8 50%, #12907c); border-color: #d8fff8; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 4px 0 #0a4a40, 0 0 18px rgba(46, 230, 200, 0.4); }
.gsui .gs-wact.is-off { background: linear-gradient(180deg, #4a5a60, #263237); border-color: rgba(220, 235, 238, 0.5); }
.gsui .gs-wact.is-poor:disabled,
.gsui .gs-wact.is-poor { color: #ffb0b0; background: linear-gradient(180deg, #4a1820, #2a0a10); border-color: rgba(255, 120, 120, 0.5); }
.gsui .gs-wmsg { min-height: 1.2em; font: 700 11.5px/1.3 var(--gs-font-receipt); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(230, 237, 239, 0.7); }
.gsui .gs-wmsg.is-good { color: #b8ff8a; }
.gsui .gs-wmsg.is-bad { color: #ff9a9a; }
.gsui .gs-wside-t { margin-bottom: 8px; font: 700 10.5px/1 var(--gs-font-deco); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gs-brass); }
.gsui .gs-wwear-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.gsui .gs-wwear-slot {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  padding: 4px 6px 4px 4px;
  text-align: left;
  color: inherit;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(190, 210, 214, 0.15);
  border-radius: 4px;
  cursor: pointer;
}
.gsui .gs-wwear-slot:hover { border-color: rgba(240, 213, 122, 0.5); }
.gsui .gs-wwear-slot .gs-wicon { grid-row: 1 / 3; }
.gsui .gs-wwear-k { font: 800 8.5px/1 var(--gs-font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(230, 237, 239, 0.5); align-self: end; }
.gsui .gs-wwear-v { overflow: hidden; font: 700 11px/1.2 var(--gs-font-ui); white-space: nowrap; text-overflow: ellipsis; align-self: start; }
.gsui .gs-wearn-list { display: flex; flex-direction: column; gap: 3px; }
.gsui .gs-wearn-list li { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/1.3 var(--gs-font-ui); color: #d8e2e4; }
.gsui .gs-wearn-list b { font: 18px/1 var(--gs-font-crt); color: #b8ff8a; text-shadow: 0 0 6px rgba(124, 252, 58, 0.6); }
.gsui .gs-wearn-note { margin-top: 7px; font: italic 500 11px/1.35 var(--gs-font-ui); color: rgba(230, 237, 239, 0.55); }

/* ---- playtest 4: the locker mirror (a live front view of you, WardrobePreview) */
.gsui .gs-wmirror {
  position: relative;
  height: 236px;
  flex: none;
  overflow: hidden;
  border-radius: 6px 6px 40% 40% / 6px 6px 14px 14px;
  background:
    linear-gradient(118deg, transparent 0 18%, rgba(255, 255, 255, 0.07) 19% 23%, transparent 24% 29%, rgba(255, 255, 255, 0.04) 30% 31%, transparent 32%),
    radial-gradient(ellipse 70% 60% at 50% 38%, #3a4a50, #1b2529 70%, #0e1416);
  box-shadow: inset 0 0 0 3px #8c969a, inset 0 0 0 5px #2a3236, inset 0 0 26px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.gsui .gs-wmirror-stage { position: absolute; inset: 5px; }
.gsui .gs-wmirror-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  pointer-events: auto;
  touch-action: pan-y;
}
.gsui .gs-wmirror-canvas:active { cursor: grabbing; }
/* the glass: a faint streak over the top of the picture, never over the caption */
.gsui .gs-wmirror::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), transparent 32%);
  border-radius: inherit;
  pointer-events: none;
}
.gsui .gs-wmirror-sticker {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 1;
  padding: 2px 6px 1px;
  font: 400 10px/1.2 var(--gs-font-marker);
  font-style: normal;
  color: #1d1626;
  background: rgba(250, 244, 226, 0.85);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.gsui .gs-wmirror-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 48%;
  pointer-events: none;
}
.gsui .gs-wmirror-tag b,
.gsui .gs-wmirror-tag span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gsui .gs-wmirror-tag b { font: 800 10px/1.2 var(--gs-font-ui); color: #eef4f5; text-shadow: 0 1px 2px #000; }
.gsui .gs-wmirror-tag span { font: 700 8.5px/1.2 var(--gs-font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-brass-lt); text-shadow: 0 1px 2px #000; }
.gsui .gs-wmirror-tag span:empty { display: none; }
.gsui .gs-wmirror-cap {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 3px 8px;
  font: 700 10.5px/1.25 var(--gs-font-receipt);
  letter-spacing: 0.03em;
  text-align: center;
  color: rgba(230, 237, 239, 0.8);
  background: rgba(6, 10, 12, 0.72);
  border-radius: 3px;
  pointer-events: none;
}
.gsui .gs-wmirror-cap.is-try { color: #9ff5e6; }
.gsui .gs-wmirror-cap.is-locked { color: var(--gs-brass-lt); }
.gsui .gs-wmirror-hint {
  position: absolute;
  bottom: 34px;
  right: 10px;
  z-index: 1;
  font: 800 8px/1 var(--gs-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(230, 237, 239, 0.4);
  pointer-events: none;
}
/* with the mirror up, the detail's own picture steps down to a badge */
.gsui .gs-ward.has-mirror .gs-wdet .gs-wicon--big { width: 56px; height: 56px; }
.gsui .gs-ward.has-mirror .gs-wdet .gs-wicon--big .gs-wglyph { font-size: 30px; }

/* ---- playtest 4: rarity tags (catalog `rarity`: basic / premium / chase). Chase items wear a foil frame. */
.gsui .gs-wrar {
  align-self: flex-start;
  padding: 2px 6px 1px;
  font: 800 8.5px/1.1 var(--gs-font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9d3d6;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 211, 214, 0.35);
  border-radius: 3px;
}
.gsui .gs-wrar--card { position: absolute; top: 5px; left: 6px; z-index: 1; padding: 1px 5px 0; font-size: 7.5px; }
.gsui .gs-wrar.is-premium { color: #ffd98a; border-color: rgba(240, 190, 90, 0.55); background: rgba(60, 36, 0, 0.6); }
.gsui .gs-wrar.is-chase {
  color: #1a0f22;
  border-color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(115deg, #ff7ad9, #ffe27a 30%, #7af5ff 55%, #b48aff 80%, #ff7ad9) 0 0 / 220% 100%;
  animation: gs-foil-slide 3.2s linear infinite;
}
.gsui .gs-wcard.is-chase { border-color: transparent; }
.gsui .gs-wcard-foil {
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: 7px;
  background: linear-gradient(115deg, #ff5ad1, #ffd84a 25%, #5af0ff 50%, #9b5de5 75%, #ff5ad1) 0 0 / 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: gs-foil-slide 4s linear infinite;
  pointer-events: none;
}
/* a slow sheen across the chase card's face */
.gsui .gs-wcard.is-chase::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.13) 48%, rgba(180, 240, 255, 0.08) 52%, transparent 65%) 0 0 / 250% 100%;
  animation: gs-foil-slide 5s linear infinite reverse;
  pointer-events: none;
}
@keyframes gs-foil-slide { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .gsui .gs-wcard-foil,
  .gsui .gs-wcard.is-chase::after,
  .gsui .gs-wrar.is-chase { animation: none; }
}
.gsui .gs-ward-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; font: 700 10px/1.3 var(--gs-font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(230, 237, 239, 0.55); }
.gsui .gs-ward-foot .gs-kbd { font-size: 9px; }
.gsui .gs-ward-tape {
  padding: 2px 10px 1px;
  font: 400 13px/1.3 var(--gs-font-marker);
  letter-spacing: 0;
  text-transform: none;
  color: #1d1626;
  background: rgba(250, 244, 226, 0.88);
  transform: rotate(-0.8deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.gsui .gs-ward-sticker {
  position: absolute;
  z-index: 2;
  left: 64px;
  top: 36px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font: 900 10px/1 var(--gs-font-ui);
  font-style: normal;
  letter-spacing: 0.06em;
  color: #3a2a00;
  background: radial-gradient(circle at 40% 35%, #fff59a, #ffd21a 60%, #d8a400);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  transform: rotate(-14deg);
  pointer-events: none;
}
.gsui .gs-ward-sticker--b {
  left: auto;
  right: 300px;
  top: auto;
  bottom: 4px;
  width: auto;
  height: auto;
  padding: 3px 8px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f2e6c9;
  background: #7a0f24;
  border-radius: 2px;
  transform: rotate(2deg);
}

@keyframes gs-strike-pulse { from { filter: none; } to { filter: drop-shadow(0 0 6px rgba(255, 59, 74, 0.95)); } }
@keyframes gs-alert-in { from { opacity: 0; transform: translateY(-12px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes gs-alert-glow {
  from { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 10px color-mix(in srgb, var(--ac) 20%, transparent); }
  to { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 26px color-mix(in srgb, var(--ac) 55%, transparent); }
}
@keyframes gs-stamp-hud { from { opacity: 0; transform: scale(2) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
@keyframes gs-hold-done { from { transform: translate(-50%, -50%) scale(1.35); filter: brightness(2); } to { transform: translate(-50%, -50%) scale(1); filter: none; } }

/* round 3 on smaller desktop windows */
@media (max-width: 960px) {
  .gsui .gs-ward-body { grid-template-columns: 96px minmax(0, 1fr) 232px; gap: 10px; }
  .gsui .gs-ward-sticker--b { display: none; }
  .gsui .gs-ward-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .gsui .gs-wcard .gs-wicon { width: 66px; height: 66px; }
  .gsui .gs-wwear-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .gsui .gs-rename { grid-template-columns: minmax(0, 1fr) 104px; }
  .gsui .gs-trow--part { margin-left: 16px; }
  .gsui .gs-trow--part::before { left: -12px; width: 9px; }
  .gsui .gs-ward-vents, .gsui .gs-ward-sticker { display: none; }
}
/* the [H] handbook card steps down below the alert column instead of hiding under it */
.gsui.gs-has-alerts .gs-handbook { margin-top: var(--gs-hb-push, 0px); }
.gsui.gs-has-alerts .gs-hb-inner { max-height: calc(100vh - 200px - var(--gs-hb-push, 0px)); }
/* mid-size windows: the curse chips sit to the right of the alert column instead of under it */
@media (min-width: 861px) and (max-width: 1300px) {
  .gsui:not(.gs-touch) .gs-hud.has-alerts .gs-mods { left: calc(28px + var(--gs-alerts-w, 276px)); transform: none; width: calc(100vw - 44px - var(--gs-alerts-w, 276px)); justify-content: flex-start; }
}
@media (max-width: 1100px) {
  .gsui { --gs-alerts-w: 224px; }
}
@media (max-width: 860px) {
  /* the phase chips reach the left column here: start under them, and the curse chips step down */
  .gsui .gs-alerts { top: 104px; }
  .gsui .gs-hud.has-alerts .gs-mods { margin-top: var(--gs-alerts-h, 0px); }
}
@media (max-height: 760px) {
  .gsui .gs-ward-head { min-height: 60px; padding: 6px 2px 6px; }
  .gsui .gs-wdoor { min-height: 60px; }
  .gsui .gs-wcard { min-height: 124px; }
}
@media (min-width: 1600px) and (min-height: 960px) {
  .gsui .gs-alerts { left: 20px; top: 84px; scale: 1.12; transform-origin: 0 0; }
  .gsui .gs-ward { scale: 1.1; }
}

/* ------------------------------------------------------------------ smaller screens */

@media (min-width: 1600px) and (min-height: 960px) {
  .gsui .gs-title-inner { width: min(1000px, 100%); gap: 18px; }
  .gsui .gs-logo-a { font-size: 172px; }
  .gsui .gs-logo-b { font-size: 126px; }
  .gsui .gs-tagline { font-size: 21px; }
  .gsui .gs-mcard-portrait { width: 78px; height: 78px; }
  .gsui .gs-mcard-name { font-size: 13.5px; }
  .gsui .gs-mblurb { font-size: 15px; }
  .gsui .gs-toasts { width: 320px; }
  .gsui .gs-toast { font-size: 15px; }
  /* HUD: scale up as a unit (independent `scale` composes with transforms/animations) */
  .gsui .gs-topbar { scale: 1.22; transform-origin: 50% 0; }
  .gsui .gs-chips { top: 86px; scale: 1.15; transform-origin: 50% 0; }
  .gsui .gs-prompt { scale: 1.18; transform-origin: 50% 100%; }
  .gsui .gs-hint { left: 20px; bottom: 20px; scale: 1.12; transform-origin: 0 100%; }
  .gsui .gs-score { top: 136px; scale: 1.15; transform-origin: 50% 0; }
  .gsui .gs-xhair { scale: 1.15; }
  .gsui .gs-term { scale: 1.16; }
  .gsui .gs-sum-col { scale: 1.1; }
  .gsui .gs-pause { scale: 1.1; }
  .gsui .gs-vend { scale: 1.12; }
  .gsui .gs-mods { top: 128px; scale: 1.12; transform-origin: 50% 0; }
  .gsui .gs-handbook { left: 24px; top: 204px; scale: 1.12; }
  .gsui .gs-hb-inner { max-height: calc((100vh - 220px) / 1.12); }
  .gsui .gs-subs-stack { left: 20px; bottom: 20px; scale: 1.12; transform-origin: 0 100%; }
}
@media (max-width: 1400px) {
  .gsui .gs-toasts { width: 270px; }
}
@media (max-width: 960px) {
  .gsui .gs-pause-cols { grid-template-columns: 1fr; }
  .gsui .gs-vend-body { grid-template-columns: 1fr; }
  .gsui .gs-vend-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .gsui .gs-vend-lcd { grid-row: span 3; }
  .gsui .gs-vend-marquee { padding-left: 20px; padding-right: 64px; }
}
@media (max-height: 860px) {
  .gsui .gs-handbook { scale: 0.9; }
  .gsui .gs-hb-inner { max-height: calc((100vh - 186px) / 0.9); }
}
@media (max-height: 760px) {
  /* top 172: below the curse chips even while their descriptions are unfolded */
  .gsui .gs-handbook { top: 172px; scale: 0.82; }
  .gsui .gs-hb-inner { gap: 8px; padding: 12px 18px 10px; max-height: calc((100vh - 184px) / 0.82); }
  .gsui .gs-handbook .gs-ctrl-list { gap: 3px; }
  .gsui .gs-handbook .gs-ctrl-list li { font-size: 12.5px; }
  /* drop the small print, but never the restock hint on [E] */
  .gsui .gs-handbook .gs-ctrl-note:not(.is-key) { display: none; }
  .gsui .gs-mods { top: 100px; }
  .gsui .gs-vslot { min-height: 136px; }
  .gsui .gs-vpack { height: 70px; }
  .gsui .gs-vend-marquee { margin-bottom: 10px; padding-top: 10px; padding-bottom: 20px; }
  .gsui .gs-vend-logo { font-size: 44px; }
  .gsui .gs-vend-lcd { min-height: 128px; }
  .gsui .gs-vend-panel { gap: 8px; }
  .gsui .gs-vend-tray { height: 54px; margin-top: 10px; }
  .gsui .gs-vdrop { scale: 0.8; }
}
@media (max-height: 820px) {
  .gsui .gs-title-inner { gap: 10px; padding-top: 12px; }
  .gsui .gs-join { gap: 11px; padding: 18px 22px 20px; }
  .gsui .gs-mcard { padding: 12px 4px 10px; }
  .gsui .gs-mcard-portrait { width: 52px; height: 52px; }
  .gsui .gs-name-input { font-size: 24px; padding: 7px 14px 5px; }
  .gsui .gs-nametag-hd b { font-size: 19px; }
  .gsui .gs-trow-name, .gsui .gs-trow-price { font-size: 23px; }
}
@media (max-width: 760px) {
  .gsui .gs-monsters { --mcols: 5; --mgap: 8px; row-gap: 18px; }
  .gsui .gs-mcard-portrait { width: 48px; height: 48px; }
  .gsui .gs-mcard-name { font-size: 10.5px; letter-spacing: 0.04em; }
  .gsui .gs-howto-body { grid-template-columns: 1fr; }
  .gsui .gs-ctrls { grid-template-columns: 1fr; }
  .gsui .gs-restock { grid-template-columns: 1fr; }
  .gsui .gs-restock-step + .gs-restock-step::before { display: none; }
  .gsui .gs-trow, .gsui .gs-trow--crew, .gsui .gs-term-pane--stock .gs-trow { grid-template-columns: 42px minmax(0, 1fr) 56px 88px; gap: 8px; }
  .gsui .gs-ticon, .gsui .gs-term-pane--stock .gs-ticon { width: 42px; height: 42px; }
  .gsui .gs-mgmt-cards, .gsui .gs-mgmt-top { grid-template-columns: 1fr; }
  .gsui .gs-toasts { width: 240px; }
  .gsui .gs-vend-grid { gap: 6px; }
  .gsui .gs-vpack { width: 64px; }
  .gsui .gs-vend-panel { grid-template-columns: 1fr; }
  .gsui .gs-cctv-cam, .gsui .gs-cctv-note { display: none; }
}

/* ------------------------------------------------------------------ keyframes */

@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes gs-prompt-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gs-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes gs-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes gs-drip { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1.12); } }
@keyframes gs-rot { to { transform: rotate(360deg); } }
@keyframes gs-spin-c { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gs-dia-pulse {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(45deg) scale(1.2); }
}
@keyframes gs-blink { 50% { opacity: 0; } }
@keyframes gs-blink-eye { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes gs-chip-pulse {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 30%, transparent), inset 0 0 8px color-mix(in srgb, var(--c) 15%, transparent); }
  50% { box-shadow: 0 0 22px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
}
@keyframes gs-stripes { to { background-position: 34px 0, 0 0; } }
@keyframes gs-delta {
  0% { opacity: 0; transform: translate(-50%, -6px) scale(0.8); }
  15% { opacity: 1; transform: translate(-50%, 2px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, 22px) scale(1); }
}
@keyframes gs-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gs-banner-in {
  0% { opacity: 0; transform: scale(1.4); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}
@keyframes gs-shake {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-3px, 2px) rotate(-1deg); }
  40% { transform: translate(3px, -2px) rotate(1deg); }
  60% { transform: translate(-2px, -1px) rotate(0); }
  80% { transform: translate(2px, 2px) rotate(-0.6deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@keyframes gs-siren-move { to { background-position: 79px 0; } }
@keyframes gs-siren-pulse { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes gs-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: 0.55; } 49% { opacity: 1; } 83% { opacity: 0.8; } 84% { opacity: 1; } }
@keyframes gs-glitch-a {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); }
  20% { clip-path: inset(70% 0 6% 0); transform: translate(5px, 1px); }
  40% { clip-path: inset(32% 0 44% 0); transform: translate(-2px, -1px); }
  60% { clip-path: inset(86% 0 2% 0); transform: translate(3px, 0); }
  80% { clip-path: inset(2% 0 84% 0); transform: translate(-6px, 0); }
}
@keyframes gs-glitch-b {
  0% { clip-path: inset(60% 0 12% 0); transform: translate(4px, 0); }
  25% { clip-path: inset(18% 0 66% 0); transform: translate(-5px, 0); }
  50% { clip-path: inset(44% 0 30% 0); transform: translate(6px, -1px); }
  75% { clip-path: inset(78% 0 6% 0); transform: translate(-3px, 1px); }
}
@keyframes gs-shine { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@keyframes gs-droop { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(1.5deg) translateY(4px); } }
@keyframes gs-woozy { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(4px); } }
@keyframes gs-orbit-x { from { transform: translateX(-130px); } to { transform: translateX(110px); } }
@keyframes gs-orbit-y { from { transform: translateY(-16px) scale(0.75); opacity: 0.6; } to { transform: translateY(14px) scale(1.15); opacity: 1; } }
@keyframes gs-crt-on {
  0% { opacity: 0; transform: scale(1, 0.02); filter: brightness(3); }
  55% { opacity: 1; transform: scale(1, 0.02); filter: brightness(3); }
  100% { opacity: 1; transform: scale(1, 1); filter: brightness(1); }
}
@keyframes gs-crt-flicker { 0%, 100% { opacity: 1; } 31% { opacity: 0.94; } 32% { opacity: 1; } 77% { opacity: 0.97; } 78% { opacity: 1; } }
@keyframes gs-roll { from { background-position: 0 -40%, 0 0; } to { background-position: 0 140%, 0 0; } }
@keyframes gs-print {
  from { opacity: 0; transform: translateY(-46px) rotate(-0.8deg) scaleY(0.9); }
  to { opacity: 1; transform: translateY(0) rotate(-0.8deg) scaleY(1); }
}
@keyframes gs-stamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-4deg); }
  70% { opacity: 0.9; }
  100% { opacity: 0.86; transform: scale(1) rotate(var(--rot)); }
}
@keyframes gs-armed { from { box-shadow: 0 0 0 0 rgba(255, 59, 74, 0.6); } to { box-shadow: 0 0 22px 4px rgba(255, 59, 74, 0.7); } }
@keyframes gs-armed-crt { 50% { opacity: 0.6; } }
@keyframes gs-hb-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes gs-glow {
  0%, 100% { box-shadow: 0 0 5px var(--gs-teal), inset 0 0 4px rgba(46, 230, 200, 0.35); }
  50% { box-shadow: 0 0 16px var(--gs-teal), inset 0 0 10px rgba(46, 230, 200, 0.7); }
}
@keyframes gs-sub-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes gs-eq { from { height: 18%; } to { height: 100%; } }
@keyframes gs-sub-alarm {
  from { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 8px rgba(255, 40, 60, 0.2); }
  to { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 40, 60, 0.6); }
}
@keyframes gs-static { 0% { background-position: 0 0; } 33% { background-position: 0 1px; } 66% { background-position: 0 2px; } }
@keyframes gs-crackle {
  0%, 100% { opacity: 1; transform: none; }
  37% { opacity: 0.5; transform: translateX(1px); }
  38% { opacity: 1; transform: none; }
  71% { opacity: 0.75; transform: translateX(-1px); }
  72% { opacity: 1; transform: none; }
}
@keyframes gs-slip {
  from { opacity: 0; transform: translateY(-34px) rotate(-7deg) scale(1.06); }
  to { opacity: 1; transform: rotate(3deg); }
}
@keyframes gs-neon-flk {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.2; text-shadow: none; }
  9% { opacity: 1; }
  52% { opacity: 0.35; text-shadow: none; }
  53% { opacity: 1; }
  55% { opacity: 0.25; text-shadow: none; }
  56% { opacity: 1; }
}
@keyframes gs-bulb { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0.18; box-shadow: none; } }
@keyframes gs-tube { 0%, 100% { opacity: 0.85; } 41% { opacity: 0.2; } 42% { opacity: 0.85; } 44% { opacity: 0.35; } 45% { opacity: 0.85; } }
@keyframes gs-coil { from { background-position: 0 0; } to { background-position: 11px 0; } }
@keyframes gs-vnudge { from { transform: translateY(0); } to { transform: translateY(5px) scale(0.97); } }
@keyframes gs-vfall { to { transform: translateY(150px) rotate(30deg); opacity: 0; } }
@keyframes gs-vdrop {
  from { opacity: 0; transform: translateY(-60px) rotate(40deg) scale(0.62); }
  to { opacity: 1; transform: rotate(84deg) scale(0.62); }
}

/* Respect reduced motion: stop shaking, glitching, bobbing and orbiting; keep simple fades. */
@media (prefers-reduced-motion: reduce) {
  .gsui *, .gsui *::before, .gsui *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================== touch mode (phones, client/js/touch.js)
   Everything below only applies once touch mode is on (.gsui.gs-touch, html.gs-touch): the desktop layout above
   is untouched. Landscape phones are ~740x360 to ~932x430; notches come in through the safe-area insets. */

/* the keyboard handbook or the touch one, whichever fits the device */
.gsui:not(.gs-touch) .gs-only-touch { display: none !important; }
.gsui.gs-touch .gs-only-keys { display: none !important; }

.gsui.gs-touch {
  --tc-l: max(10px, env(safe-area-inset-left));
  --tc-r: max(10px, env(safe-area-inset-right));
  --tc-t: max(6px, env(safe-area-inset-top));
  --tc-b: max(8px, env(safe-area-inset-bottom));
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* touch labels in prompts ("[GRAB] Take Eyeball Soda") read as little round buttons */
.gsui.gs-touch .gs-kbd {
  border-radius: 999px;
  padding: 0 0.7em;
  color: #e9fff9;
  background: linear-gradient(180deg, rgba(46, 230, 200, 0.42), rgba(16, 90, 82, 0.75));
  border: 1px solid rgba(46, 230, 200, 0.85);
  box-shadow: 0 2px 0 rgba(4, 40, 36, 0.9), 0 0 8px rgba(46, 230, 200, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ on-screen controls */

.gsui .gs-tc { z-index: 3; visibility: hidden; }
.gsui .gs-tc.is-live { visibility: visible; }
.gsui.gs-has-modal .gs-tc,
.gsui.gs-has-modal .gs-tc * { visibility: hidden !important; }

.gsui .gs-tc-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color: var(--gs-bone);
  transition: opacity 0.18s, transform 0.18s;
}
.gsui .gs-tc-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: var(--d, 60px);
  height: var(--d, 60px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 213, 122, 0.14), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(42, 18, 64, 0.62), rgba(12, 5, 20, 0.58) 72%);
  border: 2px solid rgba(201, 162, 39, 0.62);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.22),
    inset 0 0 0 4px rgba(240, 213, 122, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.42);
  transition: transform 0.08s ease-out, background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.gsui .gs-tc-ico {
  position: relative;
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7));
}
.gsui .gs-tc-lbl {
  position: relative;
  max-width: 92%;
  overflow: hidden;
  font: 800 10px/1.05 var(--gs-font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: clip;
  color: var(--gs-brass-lt);
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.9);
}
/* pressed */
.gsui .gs-tc-btn.is-down .gs-tc-face {
  transform: scale(0.92);
  border-color: var(--gs-teal);
  background: radial-gradient(circle at 50% 40%, rgba(46, 230, 200, 0.5), rgba(10, 60, 56, 0.72) 70%);
  box-shadow: 0 0 0 2px rgba(46, 230, 200, 0.35), 0 0 22px rgba(46, 230, 200, 0.55), inset 0 0 12px rgba(255, 255, 255, 0.2);
}
.gsui .gs-tc-btn.is-down .gs-tc-lbl { color: #eafffb; }

/* right thumb cluster: centres measured from the bottom-right corner (--x, --y), size --d */
.gsui .gs-tc-btn.is-act {
  right: calc(var(--tc-r) + var(--x) - var(--d) / 2);
  bottom: calc(var(--tc-b) + var(--y) - var(--d) / 2);
}
.gsui .gs-tc-grab { --d: 86px; --x: 56px; --y: 58px; }
.gsui .gs-tc-throw { --d: 62px; --x: 56px; --y: 166px; }
.gsui .gs-tc-use { --d: 72px; --x: 146px; --y: 134px; }
.gsui .gs-tc-jump { --d: 62px; --x: 160px; --y: 42px; }
.gsui .gs-tc-roar { --d: 56px; --x: 246px; --y: 44px; } /* low: a 3-line prompt under the crosshair stays clear of it */
.gsui .gs-tc-rotate { --d: 52px; --x: 124px; --y: 226px; }
.gsui .gs-tc-grab .gs-tc-lbl { font-size: 12px; }
.gsui .gs-tc-grab .gs-tc-face { border-color: rgba(46, 230, 200, 0.75); border-width: 3px; }
.gsui .gs-tc-grab .gs-tc-ico { width: 40%; height: 40%; }

/* GRAB latched (tapped): you're holding it until the next tap */
.gsui .gs-tc-grab.is-latched .gs-tc-face {
  border-color: var(--gs-pumpkin);
  background: radial-gradient(circle at 50% 40%, rgba(255, 140, 26, 0.42), rgba(70, 30, 6, 0.7) 72%);
  animation: gs-tc-hold 1.2s ease-in-out infinite;
}
.gsui .gs-tc-grab.is-latched .gs-tc-lbl { color: #ffe0b8; }

/* THROW and ROTATE only while holding something */
.gsui .gs-tc-throw,
.gsui .gs-tc-rotate { opacity: 0; transform: scale(0.6); pointer-events: none; }
.gsui .gs-tc.is-holding .gs-tc-throw,
.gsui .gs-tc.is-holding .gs-tc-rotate { opacity: 1; transform: none; pointer-events: auto; }
.gsui .gs-tc-throw .gs-tc-face { border-color: rgba(255, 140, 26, 0.8); }
.gsui .gs-tc-throw .gs-tc-lbl { color: #ffd2a0; }

/* USE: dims when there's nothing to use; lights up teal (and says what it'll do) when there is */
.gsui .gs-tc-use .gs-tc-face { opacity: 0.55; }
.gsui .gs-tc-use.is-ready .gs-tc-face {
  opacity: 1;
  border-color: var(--gs-teal);
  box-shadow: 0 0 0 2px rgba(46, 230, 200, 0.25), 0 0 18px rgba(46, 230, 200, 0.45), inset 0 0 12px rgba(46, 230, 200, 0.2);
}
.gsui .gs-tc-use.is-ready .gs-tc-lbl { color: #b8fff3; font-size: 11px; }
.gsui .gs-tc-use.is-long .gs-tc-lbl { letter-spacing: 0.04em; }
.gsui .gs-tc-tag {
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  padding: 2px 6px;
  font: 900 8.5px/1 var(--gs-font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-ink);
  background: var(--gs-teal);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(46, 230, 200, 0.6);
}

/* ROAR cooldown: a dark sweep that drains as the roar recharges */
.gsui .gs-tc-cd {
  --p: 0%;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(6, 2, 10, 0.72) var(--p), transparent 0);
  opacity: 0;
  pointer-events: none;
}
.gsui .gs-tc-roar.is-cooling .gs-tc-cd { opacity: 1; }
.gsui .gs-tc-roar.is-cooling .gs-tc-ico,
.gsui .gs-tc-roar.is-cooling .gs-tc-lbl { opacity: 0.45; }
.gsui .gs-tc-roar .gs-tc-face { border-color: rgba(241, 91, 181, 0.7); }
.gsui .gs-tc-roar .gs-tc-lbl { color: #ffc2e6; }
/* round 4: ABILITY (the monster's own trick), between USE and ROAR, with the same cooldown sweep */
.gsui .gs-tc-ability { --d: 60px; --x: 238px; --y: 126px; }
.gsui .gs-tc-ability .gs-tc-face { border-color: rgba(124, 252, 58, 0.72); }
.gsui .gs-tc-ability .gs-tc-lbl { color: #d9ffc2; }
.gsui .gs-tc-ability.is-cooling .gs-tc-cd { opacity: 1; }
.gsui .gs-tc-ability.is-cooling .gs-tc-ico,
.gsui .gs-tc-ability.is-cooling .gs-tc-lbl { opacity: 0.45; }
/* (after the big batch) the werewolf's Pounce would land on a tackle target: the floor marker and this button go red-orange */
.gsui .gs-tc-ability.is-hot .gs-tc-face { border-color: #ff5a1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px rgba(255, 90, 31, 0.75); }
.gsui .gs-tc-ability.is-hot .gs-tc-lbl { color: #ffc9a8; }

/* round 4: the monster ability's cooldown ring, bottom right (desktop; phones use the ABILITY button) */
.gsui .gs-ability {
  --c: var(--gs-green);
  --p: 100%;
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s, transform 0.2s;
}
.gsui .gs-ability-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(var(--c) var(--p), rgba(255, 255, 255, 0.1) 0);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.gsui .gs-ability-ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(124, 252, 58, 0.14), rgba(16, 7, 26, 0.94) 70%);
}
.gsui .gs-ability-ico { position: relative; font-size: 27px; line-height: 1; transition: opacity 0.2s, filter 0.2s; }
.gsui .gs-ability-secs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 19px/1 var(--gs-font-ui);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}
.gsui .gs-ability-txt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-shadow: 0 1px 2px #000; }
.gsui .gs-ability-name { font: 800 12px/1 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 55%, #fff); }
.gsui .gs-ability-key .gs-kbd { font-size: 11px; }
.gsui .gs-ability.is-cooling { --c: rgba(201, 162, 39, 0.85); }
.gsui .gs-ability.is-cooling .gs-ability-ico { opacity: 0.35; filter: grayscale(0.8); }
.gsui .gs-ability.is-ready .gs-ability-ring { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.gsui .gs-ability.is-active { --c: var(--gs-teal); }
.gsui .gs-ability.is-ko { opacity: 0.35; }
.gsui .gs-ability.is-pop .gs-ability-ring { animation: gs-pop 0.3s ease-out; }
.gsui.gs-touch .gs-ability { display: none; }
.gsui .gs-ability-head { display: flex; align-items: center; gap: 8px; }
/* what [C] will do: one dim line while it is ready (gone while it recharges) */
.gsui .gs-ability-hint {
  max-width: 250px;
  font: 500 11.5px/1.3 var(--gs-font-ui);
  text-align: right;
  color: rgba(236, 228, 210, 0.78);
}
.gsui .gs-ability-hint:empty,
.gsui .gs-ability.is-cooling .gs-ability-hint,
.gsui .gs-ability.is-ko .gs-ability-hint { display: none; }

/* what your ability just did, just above the crosshair (UI.abilityCaption). Not under it: below the crosshair is where
   Management's PA card (which an ability use often sets off), the touch interaction prompt and your own third-person
   body (a skeleton's bone pile) sit. */
.gsui .gs-abcap {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 30px);
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 5px 14px;
  transform: translateX(-50%);
  font: 700 14px/1.3 var(--gs-font-ui);
  text-align: center;
  color: var(--gs-bone);
  text-shadow: 0 1px 2px #000;
  background: rgba(14, 6, 22, 0.62);
  border-left: 3px solid var(--gs-green);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  pointer-events: none;
}
.gsui .gs-abcap.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.gsui .gs-abcap[data-tone='miss'] { border-left-color: var(--gs-pumpkin); }
.gsui .gs-abcap[data-tone='info'] { border-left-color: var(--gs-purple); }
.gsui.gs-has-modal .gs-abcap,
.gsui.gs-is-ko .gs-abcap { opacity: 0; }
/* (phones: narrow enough to stay clear of the tips / PA card top-left and the button columns) */
.gsui.gs-touch .gs-abcap { bottom: calc(50% + 18px); max-width: min(380px, 46vw); padding: 4px 12px; font-size: 13px; }

/* the lasso's reticle on what it would catch (UI.setLassoReticle) */
.gsui .gs-reticle { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; pointer-events: none; }
.gsui .gs-reticle-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(243, 233, 207, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  opacity: 0.75;
  animation: gs-spin-c 4s linear infinite;
}
.gsui .gs-reticle-lbl[hidden] { display: none; }
.gsui .gs-reticle-lbl {
  position: absolute;
  left: 0;
  top: 28px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 8px;
  font: 800 11px/1.2 var(--gs-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a0f08;
  background: #f3e9cf;
  border-radius: 3px;
}
.gsui.gs-has-modal .gs-reticle,
.gsui.gs-is-ko .gs-reticle { opacity: 0; }

/* abilities from inside your own head (UI.setAbilityFx / abilityPulse), under the HUD */
.gsui .gs-abfx { z-index: 1; pointer-events: none; overflow: hidden; }
.gsui .gs-abfx > * { position: absolute; inset: 0; opacity: 0; }
/* standing in a stench cloud: the screen goes faintly green, more so at the edges */
.gsui .gs-abfx-stench {
  background: radial-gradient(ellipse 85% 80% at 50% 45%, rgba(120, 200, 40, 0.1) 35%, rgba(96, 170, 30, 0.34) 80%, rgba(70, 130, 20, 0.55) 100%);
  transition: opacity 0.5s ease-out;
}
/* you are a pile of bones: your own bones heaped along the bottom of the screen, rattling */
.gsui .gs-abfx-bones { top: auto; height: 26vh; transition: opacity 0.18s ease-out, transform 0.25s ease-out; transform: translateY(40%); }
.gsui .gs-abfx-bones.is-on { opacity: 1; transform: translateY(0); animation: gs-bones-rattle 0.9s ease-in-out infinite; }
.gsui .gs-abfx-bones svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.55)); }
.gsui .gs-abfx-bones use.o { fill: #2a2018; stroke: #2a2018; stroke-width: 16; }
.gsui .gs-abfx-bones use.f { fill: #e8dcbf; }
.gsui .gs-abfx-bones path.o { fill: none; stroke: #2a2018; stroke-width: 34; }
.gsui .gs-abfx-bones path.f { fill: none; stroke: #e8dcbf; stroke-width: 20; stroke-linecap: round; }
@keyframes gs-bones-rattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-6px, 2px) rotate(-0.6deg); }
  50% { transform: translate(3px, -3px) rotate(0.4deg); }
  75% { transform: translate(6px, 1px) rotate(0.7deg); }
}
/* your own Jack-o'-Flash (or someone else's, in your face): a warm white-out from the middle */
.gsui .gs-abfx-flash { background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(255, 246, 214, 0.95), rgba(255, 190, 80, 0.55) 55%, rgba(255, 140, 26, 0.15) 100%); mix-blend-mode: screen; }
/* your skeleton reassembling (first person): a bone-white ring bursting out from just below the crosshair (the 3D
   shockwave ring is on the floor, mostly out of view); UI.abilityPulse scales it up */
.gsui .gs-abfx-shock {
  background: radial-gradient(ellipse 46% 50% at 50% 56%, transparent 62%, rgba(242, 232, 208, 0.7) 74%, rgba(242, 232, 208, 0.25) 82%, transparent 90%);
  transform-origin: 50% 56%;
}
/* your bat dash: the edges go dark purple and smear for a moment */
.gsui .gs-abfx-bats { background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 45%, rgba(60, 20, 90, 0.55) 78%, rgba(20, 6, 34, 0.9) 100%); }
/* (p9) your werewolf pounce: speed lines rushing in from the edges and the edges smeared while you fly
   (UI.setAbilityFx pounce sets the opacity; .is-on only while it shows, so the blur costs nothing otherwise) */
.gsui .gs-abfx-pounce {
  display: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, transparent 40%, rgba(30, 20, 12, 0.35) 100%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 244, 220, 0.5) 0deg 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 38%, #000 80%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 38%, #000 80%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: gs-pounce-lines 0.14s steps(2) infinite;
}
.gsui .gs-abfx-pounce.is-on { display: block; }
@keyframes gs-pounce-lines { 0% { transform: rotate(0deg) scale(1.05); } 100% { transform: rotate(2.4deg) scale(1.12); } }
/* (p9) ...and the landing: three claw slashes raking up across the bottom of the screen (UI.abilityPulse 'claw') */
.gsui .gs-abfx-claw { top: auto; height: 34vh; }
.gsui .gs-abfx-claw svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)); }
.gsui .gs-abfx-claw path { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.gsui .gs-abfx-claw path.o { stroke: #1a120c; stroke-width: 30; }
.gsui .gs-abfx-claw path.f { stroke: #f4e8d0; stroke-width: 12; }
/* p9: your own Hex: a green flash from the middle, and your wand hand flicking up from the bottom right */
.gsui .gs-abfx-hex { background: radial-gradient(ellipse 65% 60% at 50% 48%, rgba(214, 255, 170, 0.75), rgba(124, 252, 58, 0.38) 50%, rgba(40, 120, 20, 0.12) 100%); mix-blend-mode: screen; }
.gsui .gs-abfx-wand { inset: auto; right: 16vw; bottom: 0; width: min(46vh, 40vw); height: min(46vh, 40vw); transform-origin: 100% 100%; }
.gsui .gs-abfx-wand svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.gsui .gs-abfx-wand .glow { transform-box: fill-box; transform-origin: center; opacity: 0.35; }
/* the Hex reticle: green (the lasso's is bandage white) */
.gsui .gs-reticle[data-tone='hex'] .gs-reticle-ring { border-color: rgba(156, 255, 74, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.gsui .gs-reticle[data-tone='hex'] .gs-reticle-lbl { background: #9cff4a; color: #0f2008; }
/* (p9) you are phasing (a ghost): the store behind the glass goes pale and grey, a cold blue vignette breathes at the
   edges (the opacity is how far into the phase you are; the filter is only on while it is) */
.gsui .gs-abfx-phase {
  background:
    radial-gradient(ellipse 72% 66% at 50% 48%, rgba(200, 225, 255, 0.06) 40%, rgba(120, 170, 255, 0.3) 78%, rgba(60, 100, 200, 0.62) 100%),
    linear-gradient(rgba(215, 232, 255, 0.12), rgba(215, 232, 255, 0.12));
  transition: opacity 0.15s linear;
}
.gsui .gs-abfx-phase.is-on {
  -webkit-backdrop-filter: grayscale(0.75) brightness(1.08) contrast(0.92);
  backdrop-filter: grayscale(0.75) brightness(1.08) contrast(0.92);
  animation: gs-phase-breathe 1.6s ease-in-out infinite;
}
@keyframes gs-phase-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .gsui .gs-abfx-phase.is-on { animation: none; }
  .gsui .gs-abfx-bones.is-on { animation: none; }
  .gsui .gs-reticle-ring { animation: none; }
  .gsui .gs-abfx-pounce { animation: none; }
}
/* (p9) the gargoyle's Stone Form, from the inside: grainy grey stone creeps in from the edges (--k 0..1 shrinks the
   hole in the middle) and cracks run in with it. UI.setStoneFx sets --k; UI.stonePulse drops the chips when it crumbles */
.gsui .gs-abfx-stone { --k: 0; transition: opacity 0.12s linear; }
.gsui .gs-abfx-stone > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.gsui .gs-stone-crust {
  background:
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(30, 28, 25, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.19 0 0 0 0 0.17 0 0 0 1.4 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #9a968c, #75716a 60%, #8a867c);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, transparent calc(100% - var(--k) * 45%), #000 calc(112% - var(--k) * 30%));
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, transparent calc(100% - var(--k) * 45%), #000 calc(112% - var(--k) * 30%));
  box-shadow: inset 0 0 calc(var(--k) * 80px) rgba(0, 0, 0, 0.5);
}
.gsui .gs-abfx-stone path { fill: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gsui .gs-abfx-stone path.d { stroke: rgba(28, 26, 22, 0.85); stroke-width: 4; }
.gsui .gs-abfx-stone path.l { stroke: rgba(205, 198, 182, 0.45); stroke-width: 1.5; transform: translate(2px, 2px); }
.gsui .gs-abfx-crumble > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.gsui .gs-stone-dust { background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(150, 144, 132, 0.15) 30%, rgba(120, 114, 104, 0.55) 75%, rgba(90, 86, 78, 0.8) 100%); }
.gsui .gs-abfx-crumble polygon { fill: #7d7970; stroke: #2e2b27; stroke-width: 3; vector-effect: non-scaling-stroke; }

/* knocked out: the hands rest (MENU and CREW still work) */
.gsui .gs-tc.is-ko .gs-tc-btn.is-act:not(.gs-tc-throw):not(.gs-tc-rotate) { opacity: 0.3; }

/* left edge, top down: MENU, LIGHT, CAM, CREW */
.gsui .gs-tc-util {
  position: absolute;
  left: var(--tc-l);
  top: var(--tc-t);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gsui .gs-tc-btn.is-small { position: relative; }
.gsui .gs-tc-btn.is-small .gs-tc-face {
  width: 46px;
  height: 44px;
  border-radius: 10px;
  border-width: 1px;
  gap: 2px;
}
.gsui .gs-tc-btn.is-small .gs-tc-ico { width: 20px; height: 20px; }
.gsui .gs-tc-btn.is-small .gs-tc-lbl { font-size: 8px; letter-spacing: 0.1em; }
.gsui .gs-tc-btn.is-on .gs-tc-face { border-color: var(--gs-amber); box-shadow: 0 0 12px rgba(255, 181, 71, 0.5), inset 0 0 8px rgba(255, 181, 71, 0.25); }
.gsui .gs-tc-btn.is-on .gs-tc-ico { color: #ffe3a8; }
.gsui .gs-tc-menu .gs-tc-ico { stroke-width: 3; }

/* joystick: ghost hint where a thumb usually lands, and the live stick wherever it really lands */
.gsui .gs-tc-ghost {
  position: absolute;
  left: calc(var(--tc-l) + 66px);
  bottom: calc(var(--tc-b) + 70px);
  width: 0;
  height: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.gsui .gs-tc.is-sticking .gs-tc-ghost,
.gsui .gs-tc.is-ko .gs-tc-ghost,
.gsui .gs-tc:not(.is-engaged) .gs-tc-ghost { opacity: 0; }
.gsui .gs-tc-ghost-ring {
  position: absolute;
  left: -52px;
  top: -52px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px dashed rgba(201, 162, 39, 0.5);
  background: radial-gradient(circle, rgba(46, 230, 200, 0.06), rgba(12, 5, 20, 0.25) 70%);
}
.gsui .gs-tc-ghost-knob {
  position: absolute;
  left: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(240, 213, 122, 0.22);
  border: 1px solid rgba(240, 213, 122, 0.45);
}
.gsui .gs-tc-ghost-lbl {
  position: absolute;
  left: 0;
  top: 58px;
  transform: translateX(-50%);
  font: 800 9px/1 var(--gs-font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gs-brass-lt);
  text-shadow: 0 1px 2px #000;
}
.gsui .gs-tc-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.gsui .gs-tc-ring,
.gsui .gs-tc-sprintring { position: absolute; border-radius: 50%; }
.gsui .gs-tc-ring {
  left: calc(var(--r) * -1);
  top: calc(var(--r) * -1);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border: 2px solid rgba(46, 230, 200, 0.6);
  background: radial-gradient(circle, rgba(46, 230, 200, 0.12), rgba(12, 5, 20, 0.4) 72%);
  box-shadow: 0 0 16px rgba(46, 230, 200, 0.25), inset 0 0 0 4px rgba(0, 0, 0, 0.18);
}
.gsui .gs-tc-sprintring {
  left: calc(var(--sr) * -1);
  top: calc(var(--sr) * -1);
  width: calc(var(--sr) * 2);
  height: calc(var(--sr) * 2);
  border: 1px dashed rgba(255, 181, 71, 0.4);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gsui .gs-tc-knob {
  position: absolute;
  left: -25px;
  top: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fff3c4, var(--gs-brass-lt) 30%, var(--gs-brass) 62%, #6b4a10);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  opacity: 0.92;
}
.gsui .gs-tc-sprint {
  position: absolute;
  left: 0;
  top: calc(var(--sr) * -1 - 18px);
  transform: translateX(-50%);
  padding: 3px 8px;
  font: 900 9px/1 var(--gs-font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gs-ink);
  background: var(--gs-amber);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s;
}
.gsui .gs-tc-stick.is-sprint .gs-tc-sprint { opacity: 1; }
.gsui .gs-tc-stick.is-sprint .gs-tc-sprintring { border: 2px solid var(--gs-amber); box-shadow: 0 0 18px rgba(255, 181, 71, 0.45); }
.gsui .gs-tc-stick.is-sprint .gs-tc-knob { background: radial-gradient(circle at 40% 32%, #fff3c4, #ffc46b 30%, var(--gs-pumpkin) 62%, #7a3600); }
/* (2026-10-09, pt-phonesprint) settings "Sprint: Double-tap to sprint": no ring to push past (the SPRINT pill still shows) */
.gsui .gs-tc-stick.is-dbltap .gs-tc-sprintring { display: none; }

/* "tap to start" (after the pause menu or the night's receipt) */
.gsui .gs-tc-tapstart {
  --c: var(--gs-teal);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(38, 15, 58, 0.9), rgba(16, 6, 26, 0.88));
  border: 1px solid var(--gs-brass-dim);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: gs-chip-pulse 1.6s ease-in-out infinite;
}
.gsui .gs-tc-tapstart b { font: 900 15px/1 var(--gs-font-deco); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-brass-lt); }
.gsui .gs-tc-tapstart span { font: 500 11px/1 var(--gs-font-ui); letter-spacing: 0.1em; color: var(--gs-bone-dim); }

@keyframes gs-tc-hold {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 140, 26, 0.3), 0 0 14px rgba(255, 140, 26, 0.35); }
  50% { box-shadow: 0 0 0 3px rgba(255, 140, 26, 0.45), 0 0 26px rgba(255, 140, 26, 0.65); }
}

/* ------------------------------------------------------------------ "turn your phone sideways" */

.gsui.gs-rotate-root { z-index: 60; display: none; }
@media (orientation: portrait) {
  html.gs-touch .gsui.gs-rotate-root { display: block; pointer-events: auto; touch-action: none; }
}
.gsui .gs-rotate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 42%, rgba(155, 93, 229, 0.22), transparent 70%),
    linear-gradient(180deg, #160924, #07030c);
}
.gsui .gs-rotate-phone {
  position: relative;
  width: 64px;
  height: 112px;
  margin-bottom: 10px;
  border: 3px solid var(--gs-brass-lt);
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(201, 162, 39, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.4);
  animation: gs-tc-turn 2.6s ease-in-out infinite;
}
.gsui .gs-rotate-screen {
  position: absolute;
  inset: 9px 6px;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 40%, #1f5a51, #0b2422);
}
.gsui .gs-rotate-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 13px;
  margin: -6.5px 0 0 -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #0b0612 0 22%, var(--gs-teal) 24% 46%, #e8e0c8 48%);
  animation: gs-blink-eye 4s ease-in-out infinite;
}
.gsui .gs-rotate-title { font: 900 22px/1.15 var(--gs-font-deco); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-brass-lt); text-shadow: 0 0 14px rgba(201, 162, 39, 0.5); }
.gsui .gs-rotate-sub { max-width: 280px; font: 500 14px/1.4 var(--gs-font-ui); color: var(--gs-bone-dim); }
@keyframes gs-tc-turn {
  0%, 20% { transform: rotate(0); }
  45%, 75% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}

/* ------------------------------------------------------------------ HUD on a phone */

/* compact top bar */
.gsui.gs-touch .gs-topbar { padding: 3px 22px 6px; }
.gsui.gs-touch .gs-seg { padding: 0 9px; }
.gsui.gs-touch .gs-seg-l { margin-bottom: 3px; font-size: 7.5px; letter-spacing: 0.14em; }
.gsui.gs-touch .gs-seg-v { gap: 4px; font-size: 14px; }
.gsui.gs-touch .gs-seg-night .gs-seg-v { font-size: 16px; }
.gsui.gs-touch .gs-night-pre { font-size: 7.5px; }
.gsui.gs-touch .gs-moon { font-size: 12px; }
.gsui.gs-touch .gs-cust-ico { font-size: 11px; }
.gsui.gs-touch .gs-seg-quota { padding: 0 10px; }
.gsui.gs-touch .gs-qbar { width: 112px; height: 15px; }
.gsui.gs-touch .gs-qtext { font-size: 10px; }
.gsui.gs-touch .gs-delta { font-size: 11px; }

.gsui.gs-touch .gs-chips { top: 40px; gap: 6px; }
.gsui.gs-touch .gs-phase,
.gsui.gs-touch .gs-modechip { gap: 6px; padding: 4px 10px; font-size: 9.5px; }
.gsui.gs-touch .gs-phase-ico { font-size: 11px; }
.gsui.gs-touch .gs-buff { gap: 6px; padding: 2px 9px 2px 2px; font-size: 10px; }
.gsui.gs-touch .gs-buff-ring { width: 20px; height: 20px; }
.gsui.gs-touch .gs-buff-ico { width: 15px; height: 15px; font-size: 9px; }
.gsui.gs-touch .gs-buff-secs { font-size: 11px; }
/* tonight's curses: just their icons on a phone (the night-start toasts, the receipt and the Supply-O-Matic name them) */
.gsui.gs-touch .gs-mods { top: 66px; width: auto; gap: 5px; }
.gsui.gs-touch .gs-mods-lbl,
.gsui.gs-touch .gs-mod-tx { display: none; }
.gsui.gs-touch .gs-mod { padding: 3px; }
.gsui.gs-touch .gs-mod-ico { width: 20px; height: 20px; font-size: 12px; }

/* the interaction prompt sits just under the crosshair, clear of both thumbs (3 lines still end above ROAR at 360 px) */
.gsui.gs-touch .gs-prompt {
  top: calc(50% + 20px);
  bottom: auto;
  max-width: min(440px, 46vw);
  padding: 6px 12px;
  font-size: 13px;
  /* a long prompt slides left so its right edge stays clear of ABILITY (left edge at 100vw - tc-r - 268px), but not
     over the left button column ("translate" adds to the centring transform and its pop-in animation) */
  translate: max(calc(var(--tc-l) + 64px - 50vw + 50%), min(0px, calc(50vw - var(--tc-r) - 276px - 50%))) 0;
}
.gsui.gs-touch .gs-prompt .gs-kbd { font-size: 10px; }

/* tips: a small card top-left, beside the button column; it steps aside while Management is talking */
.gsui.gs-touch .gs-hint {
  left: calc(var(--tc-l) + 54px);
  top: calc(var(--tc-t) + 40px);
  bottom: auto;
  max-width: min(240px, 25vw);
  transition: opacity 0.25s;
  gap: 7px;
  padding: 5px 9px 5px 5px;
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0.88;
}
.gsui.gs-touch .gs-hint-tag { padding: 3px 5px; font-size: 8px; }
.gsui.gs-touch .gs-hint-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.gsui.gs-touch .gs-hint-text .gs-kbd { font-size: 8.5px; }

/* toasts: right, under the top bar, narrower, three at a time */
.gsui.gs-touch .gs-toasts { top: calc(var(--tc-t) + 38px); right: var(--tc-r); width: min(230px, 27vw); gap: 4px; }
.gsui.gs-touch .gs-toast { gap: 7px; padding: 5px 9px 5px 5px; font-size: 11px; }
.gsui.gs-touch .gs-toast-ico { width: 17px; height: 17px; font-size: 10px; }
.gsui.gs-touch .gs-toast-text .gs-kbd { font-size: 8.5px; }
.gsui.gs-touch .gs-toast:nth-last-child(n + 4) { display: none; }
/* holding something: ROTATE pops up under the toasts' corner, so only the newest two stay */
.gsui.gs-touch:has(.gs-tc.is-holding) .gs-toast:nth-last-child(n + 3) { display: none; }

/* PA / payphone subtitles: top-left, in the tips card's spot (the tip steps aside while Management talks). Not
   centred: on a 360-px-tall screen a centred card reached down over the crosshair. The bottom belongs to the thumbs. */
.gsui.gs-touch .gs-subs-stack {
  left: calc(var(--tc-l) + 54px);
  top: calc(var(--tc-t) + 40px);
  bottom: auto;
  transform: none;
  width: min(420px, 44vw);
  scale: 0.74;
  transform-origin: 0 0;
}
.gsui.gs-touch:not(.gs-has-modal):has(.gs-debug:not([hidden])) .gs-subs-stack { top: calc(var(--tc-t) + 78px); }
.gsui.gs-touch.gs-has-modal .gs-subs-stack { top: auto; bottom: 8px; left: var(--tc-l); scale: 0.7; transform-origin: 0 100%; }
/* knocked out: the KO card fills the middle (its left edge ran under the subtitles), so they wait bottom-left too */
.gsui.gs-touch.gs-is-ko:not(.gs-has-modal) .gs-subs-stack,
.gsui.gs-touch.gs-is-ko:not(.gs-has-modal):has(.gs-debug:not([hidden])) .gs-subs-stack { top: auto; bottom: 8px; left: var(--tc-l); scale: 0.7; transform-origin: 0 100%; }

/* banners and the KO card: smaller */
.gsui.gs-touch .gs-banner { scale: 0.62; }
.gsui.gs-touch .gs-ko-box { scale: 0.75; }

/* crew list (hold CREW): under the top bar, scrolls if the crew is big */
.gsui.gs-touch .gs-score {
  top: 46px;
  width: min(440px, calc(100vw - 2 * var(--tc-l) - 120px));
  padding: 10px 12px 8px;
}
.gsui.gs-touch .gs-score-head { margin-bottom: 6px; }
.gsui.gs-touch .gs-crew { gap: 4px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; }
.gsui.gs-touch .gs-score-foot { margin-top: 6px; font-size: 10.5px; }

/* the [H] handbook card has no key on a phone (MENU has it), but keep it on screen if it ever opens */
.gsui.gs-touch .gs-handbook { top: 52px; left: var(--tc-l); scale: 0.72; transform-origin: 0 0; }
.gsui.gs-touch .gs-hb-inner { max-height: calc((100vh - 60px) / 0.72); max-height: calc((100dvh - 60px) / 0.72); }
/* (2026-10-08, pt-fixes) a finger on the open card drags it (pan-y below; touch.js leaves .gs-hb-layer alone) */
.gsui.gs-touch .gs-hb-inner { pointer-events: auto; }

/* debug panel (?debug): top-left beside the buttons, collapsed until opened */
.gsui.gs-touch .gs-debug { left: calc(var(--tc-l) + 54px); right: auto; top: calc(var(--tc-t) + 40px); bottom: auto; width: 210px; }
.gsui.gs-touch .gs-debug-grid { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); }
.gsui.gs-touch:has(.gs-debug:not([hidden])) .gs-hint { top: calc(var(--tc-t) + 78px); }
.gsui.gs-touch:has(.gs-subs .gs-sub) .gs-hint { opacity: 0; }
.gsui.gs-touch .gs-debug-btn { min-height: 34px; }
/* (2026-10-10, w16-debugmenu) a phone: wider for the forms, finger-sized headings, 16px in the boxes (no zoom on focus) */
.gsui.gs-touch .gs-debug { width: min(290px, calc(100vw - var(--tc-l) - 62px)); }
.gsui.gs-touch .gs-dm-fhead { min-height: 34px; font-size: 11px; }
.gsui.gs-touch .gs-dm-search, .gsui.gs-touch .gs-dm-in { font-size: 16px; }
.gsui.gs-touch .gs-dm-check input { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ menus on a phone */

/* scrollable panels: one-finger panning, no rubber-banding into the page */
.gsui.gs-touch .gs-title,
.gsui.gs-touch .gs-modal,
.gsui.gs-touch .gs-term-body,
.gsui.gs-touch .gs-receipt-scroll,
.gsui.gs-touch .gs-crew,
.gsui.gs-touch .gs-debug-grid,
.gsui.gs-touch .gs-hb-inner,
.gsui.gs-touch .gs-pause-hb,
.gsui.gs-touch .gs-ward-grid,
.gsui.gs-touch .gs-ward-side,
.gsui.gs-touch .gs-ward-doors {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.gsui.gs-touch .gs-btn { min-height: 44px; }
.gsui.gs-touch .gs-seg-btn { min-height: 44px; }

/* title screen on a landscape phone: logo on the left, the name tag and monsters on the right, no scrolling
   (the "How to work here" drawer opens underneath and the screen scrolls) */
@media (max-height: 540px) {
  .gsui.gs-touch .gs-title-inner {
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 6px 18px;
    padding: max(10px, env(safe-area-inset-top)) var(--tc-r) 12px var(--tc-l);
  }
  .gsui.gs-touch .gs-logo { grid-column: 1; grid-row: 1; align-self: end; }
  .gsui.gs-touch .gs-tagline { grid-column: 1; grid-row: 2; min-height: 2.6em; font-size: 12px; }
  .gsui.gs-touch .gs-join { grid-column: 2; grid-row: 1 / span 3; gap: 7px; padding: 12px 14px 13px; }
  .gsui.gs-touch .gs-howto { grid-column: 1; grid-row: 3; align-self: start; }
  .gsui.gs-touch .gs-howto.is-open { grid-column: 1 / -1; grid-row: 4; }
  .gsui.gs-touch .gs-plaque { gap: 7px; padding: 4px 9px; font-size: 7.5px; letter-spacing: 0.2em; }
  .gsui.gs-touch .gs-logo-a { font-size: clamp(44px, 7.4vw, 66px); }
  .gsui.gs-touch .gs-logo-b { font-size: clamp(34px, 5.6vw, 50px); }
  .gsui.gs-touch .gs-drip { width: 5px; }
  .gsui.gs-touch .gs-drip::after { width: 8px; height: 9px; bottom: -3px; }
  .gsui.gs-touch .gs-nametag { width: 100%; }
  .gsui.gs-touch .gs-nametag-hd { min-width: 78px; padding: 4px 10px; }
  .gsui.gs-touch .gs-nametag-hd b { font-size: 15px; }
  .gsui.gs-touch .gs-nametag-hd small { font-size: 9px; }
  .gsui.gs-touch .gs-name-input { padding: 6px 12px 4px; font-size: 20px; }
  .gsui.gs-touch .gs-join .gs-deco-title { font-size: 10px; }
  .gsui.gs-touch .gs-monsters { --mgap: 6px; padding-bottom: 4px; }
  .gsui.gs-touch .gs-mcard { gap: 3px; min-height: 44px; padding: 9px 2px 7px; border-radius: 50% 50% 6px 6px / 30px 30px 6px 6px; }
  .gsui.gs-touch .gs-mcard:hover { transform: none; }
  .gsui.gs-touch .gs-mcard.is-selected { transform: translateY(-3px); }
  .gsui.gs-touch .gs-mcard.is-selected::after { bottom: -7px; padding: 2px 5px; font-size: 7.5px; }
  .gsui.gs-touch .gs-mcard-portrait { width: 40px; height: 40px; }
  .gsui.gs-touch .gs-mcard-name { font-size: 8.5px; letter-spacing: 0.04em; }
  .gsui.gs-touch .gs-mblurb { font-size: 11px; }
  .gsui.gs-touch .gs-howto-toggle { min-height: 44px; padding: 8px 14px; font-size: 11px; }
  .gsui.gs-touch .gs-howto-body { grid-template-columns: 1fr; gap: 14px; padding: 2px 14px 14px; }
  .gsui.gs-touch .gs-cctv { inset: 6px 8px; font-size: 14px; }
  .gsui.gs-touch .gs-cctv-rec { top: 6px; left: 10px; gap: 6px; }
  .gsui.gs-touch .gs-cctv-dot { width: 8px; height: 8px; }
  .gsui.gs-touch .gs-cctv-cam,
  .gsui.gs-touch .gs-cctv-note { display: none; }
  .gsui.gs-touch .gs-cctv-time { bottom: 6px; right: 10px; }
  .gsui.gs-touch .gs-cctv-c { width: 16px; height: 16px; }
}

/* menus on a short landscape screen: full height, big rows, decorative bits trimmed */
.gsui.gs-touch.gs-has-modal .gs-debug { display: none; }
.gsui.gs-touch.gs-has-modal .gs-subs-stack { scale: 0.6; opacity: 0.9; }
@media (max-height: 540px) {
  /* Supply-O-Matic */
  .gsui.gs-touch .gs-term {
    width: calc(100vw - var(--tc-l) - var(--tc-r));
    margin: 5px 0;
    padding: 7px 8px;
    border-radius: 16px;
  }
  .gsui.gs-touch .gs-term-screen { height: calc(100vh - 24px); height: calc(100dvh - 24px); gap: 4px; padding: 6px 12px 6px; font-size: 18px; border-radius: 12px / 16px; }
  .gsui.gs-touch .gs-term-title { font-size: 21px; }
  .gsui.gs-touch .gs-term-x {
    min-width: 52px;
    min-height: 44px;
    margin: -6px -6px -4px 0;
    font-size: 24px;
    border: 1px solid rgba(124, 252, 58, 0.55);
  }
  .gsui.gs-touch .gs-term-bal { font-size: 19px; }
  .gsui.gs-touch .gs-term-status { font-size: 14px; }
  .gsui.gs-touch .gs-term-dock { font-size: 14px; padding: 3px 6px; }
  .gsui.gs-touch .gs-term-dock-list { font-size: 13px; }
  .gsui.gs-touch .gs-term-tabs { flex-wrap: nowrap; gap: 6px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
  .gsui.gs-touch .gs-term-tab { flex: none; min-height: 44px; padding: 4px 11px 2px; font-size: 18px; }
  .gsui.gs-touch .gs-term-log { font-size: 16px; }
  .gsui.gs-touch .gs-term-foot,
  .gsui.gs-touch .gs-term-plate { display: none; }
  .gsui.gs-touch .gs-trow,
  .gsui.gs-touch .gs-trow--crew,
  .gsui.gs-touch .gs-term-pane--stock .gs-trow { grid-template-columns: 46px minmax(0, 1fr) 62px 104px; gap: 8px; padding: 4px; }
  .gsui.gs-touch .gs-trow-head { padding: 0 4px; font-size: 15px; }
  .gsui.gs-touch .gs-ticon,
  .gsui.gs-touch .gs-term-pane--stock .gs-ticon { width: 46px; height: 46px; }
  .gsui.gs-touch .gs-trow-name,
  .gsui.gs-touch .gs-trow--crew .gs-trow-name,
  .gsui.gs-touch .gs-trow-price { font-size: 20px; }
  .gsui.gs-touch .gs-trow-desc { font-size: 16px; }
  .gsui.gs-touch .gs-trow-sub { font-size: 14px; }
  .gsui.gs-touch .gs-tbtn { min-height: 44px; font-size: 20px; }
  .gsui.gs-touch .gs-tsec { font-size: 18px; }
  .gsui.gs-touch .gs-tnote { font-size: 15px; }
  .gsui.gs-touch .gs-tstat-v { font-size: 19px; }
  .gsui.gs-touch .gs-mgmt-mode { font-size: 26px; }
  .gsui.gs-touch .gs-mgmt-desc,
  .gsui.gs-touch .gs-mrow { font-size: 17px; }
  .gsui.gs-touch .gs-mgmt-btn { min-height: 44px; }
}
@media (max-height: 540px) {
  /* pause / settings: settings + buttons on the left, the handbook on the right, each scrolls on its own */
  .gsui.gs-touch .gs-pause {
    width: calc(100vw - var(--tc-l) - var(--tc-r));
    height: calc(100vh - 14px); height: calc(100dvh - 14px);
    margin: 7px 0;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 8px 22px;
  }
  .gsui.gs-touch .gs-pause-cols { display: contents; }
  .gsui.gs-touch .gs-pause-head { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; text-align: left; }
  .gsui.gs-touch .gs-pause-title { font-size: 22px; }
  .gsui.gs-touch .gs-pause-sub { margin: 0; font-size: 10.5px; }
  .gsui.gs-touch .gs-pause-resume { grid-column: 1; grid-row: 2; width: 100%; padding: 10px; font-size: 15px; }
  .gsui.gs-touch .gs-settings {
    grid-column: 1;
    grid-row: 3;
    min-height: 0;
    overflow-y: auto;
    gap: 2px;
    padding: 0 6px 0 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gs-brass-dim) transparent;
  }
  .gsui.gs-touch .gs-settings .gs-deco-title { display: none; }
  .gsui.gs-touch .gs-pause-head > .gs-pause-leave { margin: 0 0 0 auto; align-self: center; }
  .gsui.gs-touch .gs-pause-hb {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    overflow-y: auto;
    gap: 8px;
    padding: 0 6px 0 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gs-brass-dim) transparent;
  }
  .gsui.gs-touch .gs-pause-hb .gs-ctrls { grid-template-columns: 1fr; gap: 8px; }
  .gsui.gs-touch .gs-pause-hb .gs-ctrl-list li { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .gsui.gs-touch .gs-set-row { grid-template-columns: 112px minmax(0, 1fr) 44px; gap: 8px; }
  .gsui.gs-touch .gs-set-row.gs-set-row--toggle { grid-template-columns: 112px minmax(0, 1fr); }
  .gsui.gs-touch .gs-set-lbl { font-size: 12px; }
  .gsui.gs-touch .gs-set-val { font-size: 12px; }
  .gsui.gs-touch .gs-set-note { display: none; }
  .gsui.gs-touch .gs-seg-btn { padding: 6px 4px; }
}
/* sliders big enough for a thumb */
.gsui.gs-touch .gs-range { height: 40px; }
.gsui.gs-touch .gs-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; }
.gsui.gs-touch .gs-range::-moz-range-thumb { width: 18px; height: 18px; }
@media (max-height: 540px) {
  /* end-of-night receipt: the paper on the left (it scrolls), the big button on the right */
  .gsui.gs-touch .gs-sum-col {
    display: grid;
    grid-template-columns: auto minmax(160px, auto);
    grid-template-rows: 1fr auto auto 1fr;
    align-items: center;
    gap: 8px 22px;
    min-height: 100vh; min-height: 100dvh;
    padding: 2px var(--tc-r) 2px var(--tc-l);
  }
  .gsui.gs-touch .gs-sum-papers { grid-column: 1; grid-row: 1 / -1; flex-wrap: nowrap; gap: 4px 14px; }
  .gsui.gs-touch .gs-receipt { width: min(380px, 44vw); margin: 12px 0; }
  .gsui.gs-touch .gs-sum-papers:has(.gs-pinkslip:not([hidden])) .gs-receipt { width: min(340px, 36vw); }
  .gsui.gs-touch .gs-receipt-scroll { max-height: calc(100vh - 44px); max-height: calc(100dvh - 44px); padding: 12px 18px 10px; font-size: 13px; }
  .gsui.gs-touch .gs-pinkslip { width: min(260px, 28vw); max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow-y: auto; margin-top: 16px; padding: 14px 14px 12px; font-size: 11px; }
  .gsui.gs-touch .gs-sum-next { grid-column: 2; grid-row: 2; min-height: 52px; padding: 12px 20px; font-size: 16px; letter-spacing: 0.14em; }
  .gsui.gs-touch .gs-sum-ready { grid-column: 2; grid-row: 3; max-width: 240px; font-size: 11px; text-align: center; }
}
@media (max-height: 540px) {
  /* VEND-O-MATIC: the glass (it scrolls) and the keypad side by side, marquee shrunk, tray and plate left out */
  .gsui.gs-touch .gs-vend {
    display: flex;
    flex-direction: column;
    width: calc(100vw - var(--tc-l) - var(--tc-r));
    height: calc(100vh - 10px); height: calc(100dvh - 10px);
    margin: 5px 0;
    padding: 0 10px 8px;
  }
  .gsui.gs-touch .gs-vend-marquee { flex: none; margin: 0 -10px 6px; padding: 7px 64px 12px; }
  .gsui.gs-touch .gs-vend-logo { font-size: 26px; }
  .gsui.gs-touch .gs-vend-tag,
  .gsui.gs-touch .gs-vsticker,
  .gsui.gs-touch .gs-vcoin,
  .gsui.gs-touch .gs-vend-tray,
  .gsui.gs-touch .gs-vend-plate { display: none; }
  .gsui.gs-touch .gs-vend-bulbs { bottom: 3px; }
  .gsui.gs-touch .gs-vend-bulbs i { width: 5px; height: 5px; }
  .gsui.gs-touch .gs-vend-x { top: 2px; right: 8px; width: 48px; height: 44px; }
  .gsui.gs-touch .gs-vend-body { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 216px; gap: 10px; }
  .gsui.gs-touch .gs-vend-glass { min-height: 0; overflow-y: auto; padding: 6px 8px 8px; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
  .gsui.gs-touch .gs-vend-grid { gap: 6px; margin-top: 0; }
  .gsui.gs-touch .gs-vslot { min-height: 110px; padding: 6px 4px 40px; }
  .gsui.gs-touch .gs-vfx { bottom: 23px; height: 15px; font-size: 9px; line-height: 13px; letter-spacing: 0.03em; }
  .gsui.gs-touch .gs-vpack { width: 52px; height: 58px; padding: 5px 3px; gap: 2px; }
  .gsui.gs-touch .gs-vpack-ico { font-size: 22px; }
  .gsui.gs-touch .gs-vpack-name { font-size: 7px; }
  .gsui.gs-touch .gs-vcoil { bottom: 40px; height: 10px; }
  .gsui.gs-touch .gs-vtag { height: 22px; font-size: 17px; gap: 8px; }
  .gsui.gs-touch .gs-vsold { top: 26px; font-size: 10px; }
  .gsui.gs-touch .gs-vend-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: none;
  }
  .gsui.gs-touch .gs-vend-panel > * { flex: none; }
  /* the keypad (and VEND) always stays in view: the LCD takes what height is left and scrolls its text */
  .gsui.gs-touch .gs-vend-panel > .gs-vend-lcd { flex: 1 1 auto; min-height: 58px; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
  .gsui.gs-touch .gs-vend-lcd { grid-row: auto; padding: 6px 8px; font-size: 16px; }
  .gsui.gs-touch .gs-vlcd-code { font-size: 24px; }
  .gsui.gs-touch .gs-vlcd-desc { font-size: 14px; }
  .gsui.gs-touch .gs-vend-credit { padding: 4px 8px; }
  .gsui.gs-touch .gs-vend-money { font-size: 21px; }
  /* two rows instead of three: A B C CLR / 1 2 3 VEND */
  .gsui.gs-touch .gs-vkeys { width: 100%; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); }
  .gsui.gs-touch .gs-vkey { height: 44px; font-size: 16px; }
  .gsui.gs-touch .gs-vkey--clr { grid-column: 4; grid-row: 1; font-size: 13px; }
  .gsui.gs-touch .gs-vkey--vend { grid-column: 4; grid-row: 2; padding: 0 2px; font-size: 13px; letter-spacing: 0.02em; line-height: 1.05; white-space: normal; }
  .gsui.gs-touch .gs-vend-owned { font-size: 10px; }
}

/* receipt, pause menu and wardrobe: their bottom-left corner holds the receipt / "Leave shift" / the EMOTES tab,
   so subtitles go bottom-right (in the wardrobe that's the "Currently wearing" list, which can spare it) */
.gsui.gs-touch.gs-has-modal:has(.gs-sum-wrap:not([hidden]), .gs-pause-wrap:not([hidden]), .gs-ward-wrap:not([hidden])) .gs-subs-stack {
  left: auto;
  right: var(--tc-r);
  transform-origin: 100% 100%;
}

/* ------------------------------------------------------------------ round 3 on a phone */

/* HUD: tier label, rating ribbon and strikes shrink with the compact top bar */
.gsui.gs-touch .gs-seg-night.has-tier .gs-seg-l { max-width: 96px; }
.gsui.gs-touch .gs-rating { top: calc(100% - 1px); gap: 4px; padding: 1px 6px 1px; font-size: 8.5px; border-radius: 0 0 5px 5px; }
.gsui.gs-touch .gs-night-tier { gap: 3px; margin-bottom: 3px; } /* (pt-fixes3) */
.gsui.gs-touch .gs-night-tier .gs-stars { font-size: 7.5px; letter-spacing: 0; } /* (pt-fixes3) */
.gsui.gs-touch .gs-rating .gs-satbar { width: 42px; height: 5px; } /* (x4-satisfaction) */
.gsui.gs-touch .gs-qlabel { gap: 5px; margin-bottom: 3px; }
.gsui.gs-touch .gs-strikes { gap: 2px; }
.gsui.gs-touch .gs-strikes i { width: 8px; height: 8px; }
.gsui.gs-touch .gs-strikes i.is-on::after { font-size: 6px; }
/* chaos alerts: compact pills under the phase chips, clear of the thumbs and the toasts */
.gsui.gs-touch .gs-alerts {
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 56vw);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  scale: none;
}
/* Management is talking (subtitles top-left): the pills slide right, between the subtitles and the toasts */
.gsui.gs-touch:has(.gs-subs .gs-sub) .gs-alerts {
  left: calc(var(--tc-l) + 62px + min(420px, 44vw) * 0.74);
  transform: none;
  width: calc(73vw - var(--tc-l) - var(--tc-r) - 70px - min(420px, 44vw) * 0.74);
  justify-content: flex-start;
}
.gsui.gs-touch .gs-hud.has-alerts .gs-mods { margin-top: var(--gs-alerts-h, 0px); }
/* compact pills: icon + title (+ grade); the how-to line only when it's the only alert */
.gsui.gs-touch .gs-alert { gap: 6px; max-width: 100%; padding: 2px 9px 2px 2px; border-left-width: 3px; }
.gsui.gs-touch .gs-alert-ico { width: 22px; height: 22px; font-size: 12px; }
.gsui.gs-touch .gs-alert-tx { gap: 1px; }
.gsui.gs-touch .gs-alert-t { font-size: 9.5px; letter-spacing: 0.08em; }
.gsui.gs-touch .gs-alert-s { display: none; overflow: hidden; font-size: 9px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.gsui.gs-touch .gs-alerts > .gs-alert:only-child .gs-alert-s { display: block; }
.gsui.gs-touch .gs-alert-s .gs-kbd { font-size: 7px; }
.gsui.gs-touch .gs-alert-grade { width: 24px; height: 24px; border-width: 1.5px; }
.gsui.gs-touch .gs-alert-grade small { display: none; }
.gsui.gs-touch .gs-alert-grade b { font-size: 14px; }
.gsui.gs-touch .gs-alert-bar { width: 64px; height: 3px; margin-top: 1px; }
.gsui.gs-touch .gs-hold { width: 46px; height: 46px; }
/* A banner is up (chaos event, night start, promotion): on a landscape phone it sits right where Management's PA
   card, the tip card and the alert pills live, and they drew over its title. They step back for the banner's few
   seconds; the PA keeps typing underneath and is still there when the banner leaves. */
.gsui.gs-touch .gs-alerts { transition: opacity 0.25s; }
.gsui.gs-touch .gs-subs-stack { transition: bottom 0.3s ease, opacity 0.25s; }
.gsui.gs-touch:not(.gs-has-modal):has(.gs-banner:not(.is-out)) .gs-subs-stack,
.gsui.gs-touch:not(.gs-has-modal):has(.gs-banner:not(.is-out)) .gs-hint,
.gsui.gs-touch:not(.gs-has-modal):has(.gs-banner:not(.is-out)) .gs-alerts { opacity: 0; }

/* Supply-O-Matic: break room parts indent less; the rename box is thumb-sized */
.gsui.gs-touch .gs-trow--part { margin-left: 14px; }
.gsui.gs-touch .gs-trow--part::before { left: -11px; width: 8px; }
.gsui.gs-touch .gs-rename { grid-template-columns: minmax(0, 1fr) 112px; }
.gsui.gs-touch .gs-rename-input { min-height: 44px; font-size: 22px; }
.gsui.gs-touch .gs-rename-btn { min-height: 44px; }
.gsui.gs-touch .gs-mgmt-new .gs-mgmt-btn { min-width: 0; width: 100%; }

@media (max-height: 540px) {
  /* the Wardrobe: doors on the left, the open locker in the middle (scrolls), the detail on the right (scrolls) */
  .gsui.gs-touch .gs-ward {
    width: calc(100vw - var(--tc-l) - var(--tc-r));
    height: calc(100vh - 10px);
    height: calc(100dvh - 10px);
    margin: 5px 0;
    padding: 0 8px 6px;
  }
  .gsui.gs-touch .gs-ward-head { min-height: 0; gap: 10px; padding: 5px 0; }
  .gsui.gs-touch .gs-ward-vents,
  .gsui.gs-touch .gs-ward-kicker,
  .gsui.gs-touch .gs-ward-sticker,
  .gsui.gs-touch .gs-ward-foot { display: none; }
  .gsui.gs-touch .gs-ward-plate { flex-direction: row; align-items: center; gap: 10px; padding: 5px 12px; }
  .gsui.gs-touch .gs-ward-title { font-size: 17px; }
  .gsui.gs-touch .gs-ward-tape-name { margin-top: 0; font-size: 11px; }
  .gsui.gs-touch .gs-ward-ep { padding: 3px 10px 4px; }
  .gsui.gs-touch .gs-ward-ep-l { font-size: 7.5px; }
  .gsui.gs-touch .gs-ward-ep-v { font-size: 26px; }
  .gsui.gs-touch .gs-ward-ep-u { font-size: 16px; }
  .gsui.gs-touch .gs-ward-x { width: 52px; height: 44px; }
  .gsui.gs-touch .gs-ward-body { grid-template-columns: 72px minmax(0, 1fr) minmax(196px, 30vw); gap: 8px; }
  .gsui.gs-touch .gs-ward-doors { gap: 5px; }
  .gsui.gs-touch .gs-wdoor { flex: 0 0 auto; min-height: 48px; gap: 2px; padding: 6px 4px 5px; }
  .gsui.gs-touch .gs-wdoor:hover { filter: none; }
  .gsui.gs-touch .gs-wdoor.is-open { transform: translateX(3px); }
  .gsui.gs-touch .gs-wdoor-vent,
  .gsui.gs-touch .gs-wdoor-key { display: none; }
  .gsui.gs-touch .gs-wdoor-ico { font-size: 17px; }
  .gsui.gs-touch .gs-wdoor-lbl { font-size: 8.5px; letter-spacing: 0.06em; }
  .gsui.gs-touch .gs-wdoor-n { font-size: 8px; }
  .gsui.gs-touch .gs-wdoor::after { right: 4px; width: 3px; height: 12px; }
  .gsui.gs-touch .gs-ward-shelf { padding: 6px 6px 0; }
  .gsui.gs-touch .gs-ward-shelfhead { padding-bottom: 5px; }
  .gsui.gs-touch .gs-wshelf-t { font-size: 13px; }
  .gsui.gs-touch .gs-wshelf-s { font-size: 10.5px; }
  .gsui.gs-touch .gs-ward-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; padding: 6px 2px 8px; }
  .gsui.gs-touch .gs-wcard { min-height: 108px; gap: 3px; padding: 8px 4px 6px; }
  .gsui.gs-touch .gs-wcard:hover { transform: none; }
  .gsui.gs-touch .gs-wcard .gs-wicon { width: 54px; height: 54px; }
  .gsui.gs-touch .gs-wcard .gs-wglyph { font-size: 28px; }
  .gsui.gs-touch .gs-wcard-name { font-size: 10.5px; }
  .gsui.gs-touch .gs-wcard-tag { padding: 2px 6px; font-size: 8.5px; }
  .gsui.gs-touch .gs-ward-side { gap: 6px; }
  .gsui.gs-touch .gs-wdet,
  .gsui.gs-touch .gs-wwear,
  .gsui.gs-touch .gs-wearn { padding: 7px 8px; }
  .gsui.gs-touch .gs-wdet { gap: 6px; }
  .gsui.gs-touch .gs-wicon--big { width: 60px; height: 60px; }
  .gsui.gs-touch .gs-wicon--big .gs-wglyph { font-size: 32px; }
  .gsui.gs-touch .gs-wdet-name { font-size: 13px; }
  .gsui.gs-touch .gs-wdet-stat { font-size: 9.5px; }
  .gsui.gs-touch .gs-wdet-desc { font-size: 11px; }
  .gsui.gs-touch .gs-wact { min-height: 44px; padding: 8px; font-size: 12px; }
  .gsui.gs-touch .gs-wmsg { font-size: 10px; }
  .gsui.gs-touch .gs-wside-t { margin-bottom: 5px; font-size: 9px; }
  .gsui.gs-touch .gs-wwear-slot { grid-template-columns: 30px minmax(0, 1fr); min-height: 40px; }
  .gsui.gs-touch .gs-wicon--sm { width: 30px; height: 30px; }
  .gsui.gs-touch .gs-wearn-list li { font-size: 10.5px; }
  .gsui.gs-touch .gs-wearn-list b { font-size: 15px; }
  .gsui.gs-touch .gs-wearn-note { font-size: 10px; }
  /* the mirror on a phone: shorter, and the detail's badge smaller still */
  .gsui.gs-touch .gs-wmirror { height: min(168px, 44vh); }
  .gsui.gs-touch .gs-wmirror-sticker { top: 7px; left: 7px; font-size: 8.5px; }
  .gsui.gs-touch .gs-wmirror-tag { top: 7px; right: 7px; }
  .gsui.gs-touch .gs-wmirror-cap { left: 6px; right: 6px; bottom: 6px; padding: 2px 5px; font-size: 9px; }
  .gsui.gs-touch .gs-wmirror-hint { bottom: 28px; right: 8px; font-size: 7px; }
  .gsui.gs-touch .gs-ward.has-mirror .gs-wdet .gs-wicon--big { width: 40px; height: 40px; }
  .gsui.gs-touch .gs-ward.has-mirror .gs-wdet .gs-wicon--big .gs-wglyph { font-size: 22px; }
  .gsui.gs-touch .gs-wrar--card { top: 4px; left: 4px; font-size: 6.5px; }
  /* receipt: the PROMOTED stamp a touch smaller on the narrow paper */
  .gsui.gs-touch .gs-stamp--rank { top: 46px; }
  .gsui.gs-touch .gs-stamp--rank .gs-stamp-big { font-size: 22px; }
}
/* small phones (iPhone SE, 740-px Androids): the mirror is too narrow for the sticker and the name tag side by side */
@media (max-height: 540px) and (max-width: 760px) {
  .gsui.gs-touch .gs-wmirror-sticker { display: none; }
}
/* receipt header on the narrow phone paper: the store's name stays on one line */
.gsui.gs-touch .gs-r-logo { font-size: 24px; letter-spacing: 0.1em; }
.gsui.gs-touch .gs-r-logo::before,
.gsui.gs-touch .gs-r-logo::after { margin: 0 5px; font-size: 10px; vertical-align: 5px; }
.gsui.gs-touch .gs-r-logo.is-long { font-size: 16px; }

/* ------------------------------------------------------------------ round 4 on a phone */
/* the health vignette on a phone: a little thinner (the thumb buttons live on the edges), a touch stronger at the rim */
.gsui.gs-touch .gs-hpvig-rim { background: radial-gradient(ellipse 84% 80% at 50% 50%, transparent 64%, rgba(170, 0, 24, 0.3) 82%, rgba(135, 0, 18, 0.66) 100%); }
.gsui.gs-touch .gs-hit-arc { width: 124px; height: 124px; margin: -62px 0 0 -62px; border-width: 5px; }
.gsui.gs-touch .gs-mode-t { padding: 1px 5px; }
.gsui.gs-touch .gs-mark-tag { gap: 4px; padding: 1px 7px 1px 1px; font-size: 9px; }
.gsui.gs-touch .gs-mark-ico { width: 16px; height: 16px; font-size: 9.5px; }
.gsui.gs-touch .gs-ko-cause { margin-top: 10px; padding: 5px 12px 6px 9px; font-size: 14px; }

/* ------------------------------------------------------------------ r4 slice: tools */
/* the equipped extinguisher's foam meter: a little pressure tube right of the crosshair (UI.setToolMeter) */
.gsui .gs-toolmeter {
  position: absolute;
  left: 34px;
  top: -30px;
  width: 9px;
  height: 60px;
  border-radius: 5px;
  background: rgba(10, 4, 16, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
  overflow: visible;
  pointer-events: none;
}
.gsui .gs-toolmeter-fill {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  top: 2px;
  transform-origin: 50% 100%;
  transform: scaleY(var(--k, 1));
  border-radius: 3px;
  background: linear-gradient(0deg, #e9f6ff, #ffffff 60%, #ffe2e2);
  box-shadow: 0 0 8px rgba(220, 240, 255, 0.7);
}
.gsui .gs-toolmeter-lbl {
  position: absolute;
  left: 14px;
  top: 0;
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #f2e6c9;
  text-shadow: 0 1px 2px #000;
}
.gsui .gs-toolmeter.is-low .gs-toolmeter-fill { background: linear-gradient(0deg, #ff5a5a, #ffb0a0); box-shadow: 0 0 8px rgba(255, 60, 60, 0.8); }
.gsui .gs-toolmeter.is-low .gs-toolmeter-lbl { color: #ff9a9a; }
.gsui .gs-toolmeter.is-empty { animation: gs-hp-low 0.5s ease-in-out infinite alternate; }
.gsui.gs-touch .gs-toolmeter { left: 26px; top: -52px; height: 44px; width: 8px; }
.gsui .gs-tc-btn.is-tool .gs-tc-face { border-color: rgba(159, 216, 207, 0.9); }

/* ------------------------------------------------------------------ p17: Management's voice, the checklist */

/* the radio is talking: the tips card (same corner) steps aside until it's done */
.gsui:not(.gs-touch):has(.gs-subs .gs-sub) .gs-hint { opacity: 0; }

/* Big story moments: the night-1 wake-up, promotions, the story beats, the finale. Center, above the crosshair. */
.gsui .gs-story { z-index: 12; pointer-events: none; }
.gsui .gs-sub-lane--big {
  position: absolute;
  left: 50%;
  top: 29%;
  width: min(640px, calc(100vw - 32px));
  transform: translateX(-50%);
  transition: top 0.3s ease;
}
.gsui:not(.gs-has-modal):has(.gs-banner:not(.is-out)) .gs-sub-lane--big { top: 35%; }
.gsui .gs-sub--big {
  --sc: #e9d7a6;
  padding: 12px 22px 14px 14px;
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--sc) 16%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(8, 8, 12, 0.95), rgba(2, 2, 5, 0.92));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 30px color-mix(in srgb, var(--sc) 16%, transparent);
}
.gsui .gs-sub--big .gs-sub-text { font-size: 21px; line-height: 1.34; color: #fbf3df; }
.gsui .gs-sub--big .gs-sub-live { color: var(--sc); }
.gsui .gs-sub--big.gs-sub--warning .gs-sub-text { color: #ffe1e4; }
/* a menu is open (the receipt, the Supply-O-Matic): a strip along the top, over it */
.gsui.gs-has-modal .gs-sub-lane--big { top: 10px; scale: 0.8; transform-origin: 50% 0; }

/* The first-upgrade checklist: a small card on the right, above the ability ring. Gone while a menu or the handbook is open. */
.gsui .gs-cl-layer { z-index: 3; pointer-events: none; }
.gsui.gs-has-modal .gs-cl-layer,
.gsui.gs-controls-open .gs-cl-layer { visibility: hidden; }
.gsui .gs-checklist {
  position: absolute;
  right: 16px;
  bottom: 100px;
  width: 262px;
  padding: 10px 14px 10px;
  color: #2a2418;
  background: linear-gradient(180deg, #f3ecd9, #e6dcc2);
  border-radius: 3px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(80, 60, 20, 0.25);
  transform: rotate(0.6deg);
  transform-origin: 100% 100%;
  opacity: 0.94;
  transition: opacity 0.45s, transform 0.45s;
  animation: gs-sub-in 0.4s ease-out both;
}
.gsui .gs-checklist.is-out { opacity: 0; transform: rotate(4deg) translateY(16px); }
.gsui .gs-cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dashed rgba(60, 45, 15, 0.45); }
.gsui .gs-cl-title { font: 900 12px/1 var(--gs-font-ui); letter-spacing: 0.22em; text-transform: uppercase; }
.gsui .gs-cl-form { font: 700 10px/1 var(--gs-font-receipt); letter-spacing: 0.08em; opacity: 0.6; }
.gsui .gs-cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gsui .gs-cl-step { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 8px; font: 600 13px/1.25 var(--gs-font-receipt); }
.gsui .gs-cl-box { display: grid; place-items: center; width: 14px; height: 14px; font: 900 13px/1 var(--gs-font-ui); font-style: normal; color: #1d7a3a; border: 1.5px solid rgba(50, 38, 12, 0.7); border-radius: 2px; }
.gsui .gs-cl-step.is-on .gs-cl-label { text-decoration: line-through; text-decoration-color: rgba(40, 30, 10, 0.55); opacity: 0.55; }
.gsui .gs-cl-step.is-next .gs-cl-label { font-weight: 800; }
.gsui .gs-cl-step.is-next .gs-cl-box { border-color: #a01a14; box-shadow: 0 0 0 2px rgba(160, 26, 20, 0.18); }
.gsui .gs-cl-step.is-new .gs-cl-box { animation: gs-cl-tick 0.6s ease-out; }
.gsui .gs-cl-foot { margin-top: 7px; font: italic 500 10.5px/1.3 var(--gs-font-receipt); opacity: 0.6; }
.gsui .gs-cl-stamp {
  position: absolute;
  right: 14px;
  top: 34%;
  padding: 2px 10px;
  font: 900 24px/1 var(--gs-font-ui);
  letter-spacing: 0.18em;
  color: #a01a14;
  border: 3px solid #a01a14;
  border-radius: 4px;
  transform: rotate(-12deg);
  opacity: 0.82;
  animation: gs-cl-stamp 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes gs-cl-tick { from { transform: scale(1.8); } to { transform: none; } }
@keyframes gs-cl-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: 0.82; transform: rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
  .gsui .gs-checklist, .gsui .gs-cl-step.is-new .gs-cl-box, .gsui .gs-cl-stamp { animation: none; }
}

/* phones: the story card smaller, high up; the checklist only says the next step, top-left under the tips/radio spot
   (the bottom belongs to the thumbs) */
.gsui.gs-touch .gs-sub-lane--big { top: 24%; width: min(600px, 74vw); scale: 0.7; transform-origin: 50% 0; }
.gsui.gs-touch:not(.gs-has-modal):has(.gs-banner:not(.is-out)) .gs-sub-lane--big { top: 24%; }
.gsui.gs-touch.gs-has-modal .gs-sub-lane--big { top: 4px; scale: 0.6; }
.gsui.gs-touch .gs-checklist {
  right: auto;
  bottom: auto;
  left: calc(var(--tc-l) + 54px);
  top: calc(var(--tc-t) + 122px);
  width: 230px;
  padding: 6px 10px 6px;
  scale: 0.78;
  transform-origin: 0 0;
}
.gsui.gs-touch .gs-cl-head { padding-bottom: 4px; margin-bottom: 4px; }
.gsui.gs-touch .gs-checklist:not(.is-done) .gs-cl-step:not(.is-next),
.gsui.gs-touch .gs-cl-foot { display: none; }
.gsui.gs-touch .gs-cl-stamp { font-size: 18px; top: 22%; }

/* ------------------------------------------------------------------ p19: the crew chat */

/* Left side, above Management's radio box and the tips card: UI._chatLayout measures them (--chat-edge = how far up
   from the bottom they reach). The newest 6 lines show, each fading after 10 s; with the input open (Enter) the last 20
   show on a panel. Click-through except the input. */
.gsui .gs-chat-layer { z-index: 11; pointer-events: none; }
.gsui.gs-chat-open .gs-chat-layer { z-index: 13; }
.gsui .gs-chat {
  position: absolute;
  left: 16px;
  bottom: max(16px, calc(var(--chat-edge, 0px) + 10px));
  width: min(440px, 36vw, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: bottom 0.25s ease, top 0.25s ease, opacity 0.2s;
}
.gsui.gs-chat-muted .gs-chat,
.gsui.gs-controls-open:not(.gs-chat-open) .gs-chat { opacity: 0; }
.gsui .gs-chat-log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font: 500 13.5px/1.35 var(--gs-font-ui);
  overflow: hidden;
}
.gsui .gs-chat-log:empty { display: none; }
.gsui .gs-chat-line {
  max-width: 100%;
  padding: 2px 8px;
  color: var(--gs-bone);
  background: rgba(14, 6, 22, 0.62);
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  overflow-wrap: anywhere;
  transition: opacity 0.9s ease;
}
.gsui .gs-chat-name { font-weight: 800; margin-right: 0.4em; }
.gsui .gs-chat-line.is-sys { background: rgba(14, 6, 22, 0.45); }
.gsui .gs-chat-sys { font-size: 12px; font-style: italic; letter-spacing: 0.02em; color: var(--gs-brass-lt); opacity: 0.85; }
.gsui .gs-chat:not(.is-open) .gs-chat-line:not(:nth-last-child(-n + 6)) { display: none; }
.gsui .gs-chat:not(.is-open) .gs-chat-line.is-old { opacity: 0; }
.gsui .gs-chat.is-open .gs-chat-log {
  max-height: min(46vh, 520px);
  overflow-y: auto;
  padding: 6px;
  pointer-events: auto;
  scrollbar-width: thin;
  background: linear-gradient(180deg, rgba(36, 14, 56, 0.78), rgba(16, 7, 26, 0.85));
  border: 1px solid var(--gs-brass-dim);
  border-radius: 4px;
}
.gsui .gs-chat.is-open .gs-chat-line { background: none; padding: 1px 4px; }
.gsui .gs-chat-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  pointer-events: auto;
  background: linear-gradient(90deg, rgba(36, 14, 56, 0.96), rgba(18, 8, 28, 0.94));
  border: 1px solid rgba(155, 93, 229, 0.6);
  border-left: 3px solid var(--gs-teal);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.gsui .gs-chat-tag {
  flex: none;
  padding: 5px 7px;
  font: 900 10px/1 var(--gs-font-ui);
  letter-spacing: 0.16em;
  color: var(--gs-ink);
  background: var(--gs-teal);
  border-radius: 3px;
}
.gsui .gs-chat-input {
  flex: 1;
  min-width: 0;
  padding: 4px 2px;
  font: 500 14px/1.3 var(--gs-font-ui);
  color: var(--gs-bone);
  background: transparent;
  border: 0;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.gsui .gs-chat-input::placeholder { color: rgba(242, 230, 201, 0.4); }
.gsui:not(.gs-touch) .gs-chat-send { display: none; } /* (Enter sends; phones get a button) */
.gsui .gs-chat-send {
  flex: none;
  padding: 6px 12px;
  font: 800 11px/1 var(--gs-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gs-ink);
  background: var(--gs-teal);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

/* Phones: the log sits in the top-left column under the tips card / radio / checklist (measured: --chat-edge is how far
   down they reach), clear of the thumbs; the newest 4 lines. Typing: the box goes to the very top (the on-screen
   keyboard covers the bottom half) with the history under it. CHAT button: beside MENU (touch.js). */
.gsui.gs-touch .gs-chat {
  left: calc(var(--tc-l) + 54px);
  top: max(calc(var(--tc-t) + 40px), calc(var(--chat-edge, 0px) + 6px));
  bottom: auto;
  width: min(300px, 36vw);
  gap: 4px;
}
.gsui.gs-touch .gs-chat-log { font-size: 10.5px; gap: 1px; }
.gsui.gs-touch .gs-chat-line { padding: 1px 6px; }
.gsui.gs-touch .gs-chat-sys { font-size: 9.5px; }
.gsui.gs-touch .gs-chat:not(.is-open) .gs-chat-line:not(:nth-last-child(-n + 4)) { display: none; }
.gsui.gs-touch .gs-chat.is-open {
  top: calc(var(--tc-t) + 2px);
  width: min(460px, calc(100vw - var(--tc-l) - var(--tc-r) - 54px - 27vw - 16px)); /* (clear of the toasts) */
}
.gsui.gs-touch .gs-chat.is-open .gs-chat-entry { order: -1; }
.gsui.gs-touch .gs-chat.is-open .gs-chat-log { max-height: 30vh; }
.gsui.gs-touch .gs-chat-input { font-size: 16px; } /* (16 px: iOS doesn't zoom the page into the box) */
.gsui .gs-tc-util .gs-tc-chat { position: absolute; left: 52px; top: 0; }
.gsui .gs-tc-util .gs-tc-chat .gs-tc-face { width: 42px; height: 34px; }
.gsui .gs-tc-util .gs-tc-chat .gs-tc-ico { width: 16px; height: 16px; }
.gsui.gs-chat-open .gs-tc-chat .gs-tc-face { border-color: var(--gs-teal); box-shadow: 0 0 12px rgba(46, 230, 200, 0.45); }

/* ------------------------------------------------------------------ the playtest: bug report, survey (2026-10-08, pt-feedback; client/js/feedback.js) */
/* (above the difficulty section on purpose: tools/p28_difficultyuitest.js wants that one last) */

.gsui .gs-pause-pt { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.gsui .gs-pause-ptbtn { flex: 1 1 0; max-width: 205px; padding: 10px 14px; font-size: 13px; }
/* (2026-10-08 review: the landscape-phone pause grid places every cell; the row gets its own, kept short)
   (2026-10-09, pt-stores: Leave shift went up into the head, so this row is the last one) */
@media (max-height: 540px) {
  .gsui.gs-touch .gs-pause { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .gsui.gs-touch .gs-pause-pt { grid-column: 1; grid-row: 4; flex-wrap: nowrap; gap: 8px; }
  .gsui.gs-touch .gs-pause-ptbtn { max-width: none; min-height: 40px; padding: 6px 10px; font-size: 12.5px; }
}
.gsui .gs-sum-extra:empty { display: none; }
.gsui.gs-touch .gs-sum-extra { grid-column: 2; grid-row: 4; align-self: start; justify-self: center; }
.gsui .gs-pt-offer { padding: 9px 18px; font-size: 12.5px; }

.gsui .gs-pt-wrap {
  z-index: 11; /* over the receipt and the pause menu; under the toasts (12), so a refusal still shows */
  background: radial-gradient(ellipse at center, rgba(14, 5, 24, 0.55), rgba(6, 2, 10, 0.85));
}
.gsui .gs-pt {
  width: min(560px, calc(100vw - 32px));
  margin: 16px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: gs-pop 0.2s ease-out;
}
.gsui .gs-pt-title { font: 900 26px/1.1 var(--gs-font-deco); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-brass-lt); text-align: center; }
.gsui .gs-pt-sub { font: italic 500 13px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); text-align: center; margin-bottom: 4px; }
.gsui .gs-pt-field { display: flex; flex-direction: column; gap: 5px; }
.gsui .gs-pt-lbl { font: 700 12px/1.2 var(--gs-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gs-bone); }
.gsui .gs-pt-text,
.gsui .gs-pt-input {
  width: 100%;
  padding: 8px 10px;
  font: 400 16px/1.35 var(--gs-font-ui); /* (16px: a phone doesn't zoom in on focus) */
  color: var(--gs-bone);
  background: rgba(8, 3, 14, 0.75);
  border: 1px solid var(--gs-brass-dim);
  border-radius: 4px;
  resize: vertical;
  user-select: text;
  -webkit-user-select: text;
}
.gsui .gs-pt-text:focus,
.gsui .gs-pt-input:focus { outline: none; border-color: var(--gs-teal); }
.gsui .gs-pt-count { margin-top: -6px; font: 500 11px/1 var(--gs-font-ui); color: var(--gs-bone-dim); text-align: right; }
.gsui .gs-pt-shot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.gsui .gs-pt-check { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--gs-font-ui); cursor: pointer; }
.gsui .gs-pt-check input { width: 20px; height: 20px; accent-color: var(--gs-green); }
.gsui .gs-pt-thumb { width: 128px; max-height: 80px; object-fit: cover; border: 1px solid var(--gs-brass-dim); border-radius: 3px; }
.gsui .gs-pt-thumb.is-off { opacity: 0.25; filter: grayscale(1); }
.gsui .gs-pt-shotnote { font: italic 500 12.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); }
.gsui .gs-pt-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.gsui .gs-pt-choice {
  flex: 1 1 0;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 10px;
  font: 700 15px/1 var(--gs-font-ui);
  color: var(--gs-bone);
  background: rgba(67, 33, 106, 0.55);
  border: 1px solid var(--gs-brass-dim);
  border-radius: 4px;
  cursor: pointer;
}
.gsui .gs-pt-choice:hover { background: rgba(67, 33, 106, 0.85); }
.gsui .gs-pt-choice.is-on { color: #0d2405; background: linear-gradient(180deg, #c4ff96, #7cfc3a 55%, #3fae15); border-color: #e6ffd2; }
.gsui .gs-pt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.gsui .gs-pt-actions .gs-btn { min-height: 46px; }
.gsui .gs-pt-notice { margin-top: 10px; font: italic 500 11.5px/1.3 var(--gs-font-ui); color: var(--gs-bone-dim); text-align: center; opacity: 0.8; }
@media (max-width: 760px), (max-height: 540px) {
  .gsui .gs-pt { padding: 16px 14px 14px; gap: 8px; }
  .gsui .gs-pt-title { font-size: 21px; }
  .gsui .gs-pt-actions .gs-btn { flex: 1 1 0; }
}

/* the debug panel's PLAYTEST rows */
.gsui .gs-debug-pt { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0 2px; padding-top: 6px; border-top: 1px solid rgba(124, 252, 58, 0.3); }
.gsui .gs-debug-pt-head { grid-column: 1 / -1; font: 800 10px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.14em; color: var(--gs-green); }
.gsui .gs-debug-pt-stats { grid-column: 1 / -1; min-height: 13px; font: 600 10px/1.3 var(--gs-font-ui); color: var(--gs-bone); opacity: 0.8; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 2026-10-08: difficulty (the New Campaign picker, the header, the receipt) */
/* The MANAGEMENT tab's New Campaign card: four options (EASY preselected), a tap each on phones; the campaign's
   difficulty under the store's name; the receipt prints it small under the tier. */
.gsui .gs-mgmt-diff { margin-top: 3px; font-size: 17px; line-height: 1.1; letter-spacing: 0.14em; color: rgba(214, 255, 186, 0.75); }
.gsui .gs-diffpick-k { margin-top: 4px; }
.gsui .gs-diffpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.gsui .gs-diffpick-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 5px 8px 6px;
  font: 20px/1.05 var(--gs-font-crt);
  text-align: left;
  color: #8dff5a;
  background: transparent;
  border: 1px dashed rgba(124, 252, 58, 0.45);
  cursor: pointer;
  pointer-events: auto;
  text-shadow: inherit;
}
.gsui .gs-diffpick-opt:hover:not(:disabled) { border-style: solid; background: rgba(124, 252, 58, 0.08); }
.gsui .gs-diffpick-opt.is-picked { border: 2px solid #7cfc3a; background: rgba(124, 252, 58, 0.14); box-shadow: inset 0 0 12px rgba(124, 252, 58, 0.18); }
.gsui .gs-diffpick-opt:disabled { color: rgba(141, 255, 90, 0.32); border-color: rgba(124, 252, 58, 0.2); cursor: not-allowed; text-shadow: none; }
.gsui .gs-diffpick-opt--graveyard.is-picked { border-color: #ffb547; background: rgba(255, 140, 40, 0.1); box-shadow: inset 0 0 12px rgba(255, 140, 40, 0.18); }
.gsui .gs-diffpick-name { font-size: 22px; letter-spacing: 0.08em; color: #c4ff9e; }
.gsui .gs-diffpick-opt.is-picked .gs-diffpick-name { color: #e6ffb8; }
.gsui .gs-diffpick-opt--graveyard .gs-diffpick-name { color: #ffd27a; }
.gsui .gs-diffpick-desc { font-size: 16px; line-height: 1.05; color: rgba(141, 255, 90, 0.7); overflow-wrap: anywhere; }
.gsui .gs-r-diff { letter-spacing: 0.14em; }
@media (max-width: 760px) {
  .gsui .gs-diffpick { grid-template-columns: minmax(0, 1fr); }
}
.gsui.gs-touch .gs-diffpick-opt { min-height: 44px; }

/* ------------------------------------------------------------------ (2026-10-09, pt-difficulty; AMENDMENTS 70)
   The New Campaign forfeit prompt ("Your previous store will be deleted"), on top of everything (the Supply-O-Matic
   included), and the pause menu's difficulty line (with LOBBIES on, client/js/lobby.js puts it next to the code). */
.gsui .gs-forfeit-wrap { z-index: 13; background: rgba(8, 2, 12, 0.72); }
.gsui .gs-forfeit {
  width: min(460px, calc(100vw - 32px));
  margin: 16px;
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-color: var(--gs-red);
  animation: gs-pop 0.18s ease-out;
}
.gsui .gs-forfeit-title { font: 900 24px/1.15 var(--gs-font-deco); letter-spacing: 0.06em; text-align: center; color: #ff8a7a; }
.gsui .gs-forfeit-lost { font: 700 11px/1 var(--gs-font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gs-bone-dim); }
.gsui .gs-forfeit-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: rgba(0, 0, 0, 0.28); border-radius: 4px; }
.gsui .gs-forfeit-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 15px/1.3 var(--gs-font-ui); }
.gsui .gs-forfeit-k { color: var(--gs-bone-dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }
.gsui .gs-forfeit-v { color: var(--gs-bone); text-align: right; overflow-wrap: anywhere; }
.gsui .gs-forfeit-tier .gs-stars { font-size: 14px; }
.gsui .gs-forfeit-note, .gsui .gs-forfeit-next { margin: 0; font: 500 13.5px/1.4 var(--gs-font-ui); color: var(--gs-bone); }
.gsui .gs-forfeit-next { color: var(--gs-amber); }
.gsui .gs-forfeit-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gsui .gs-forfeit-btns .gs-btn { flex: 1 1 12em; padding: 11px 14px; }
.gsui.gs-touch .gs-forfeit-btns .gs-btn { min-height: 44px; }
.gsui .gs-pause-diffrow { margin-top: 6px; font: 600 11px/1.2 var(--gs-font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gs-bone-dim); }
.gsui .gs-pause-diffrow .gs-pause-diff { margin-left: 6px; font: 700 13px/1 var(--gs-font-ui); letter-spacing: 0.14em; color: var(--gs-bone); }
.gsui.gs-touch .gs-pause-diffrow { margin-top: 0; }
/* (2026-10-09, w75-night3) PROMOTED!: the title and the new tier's stars are one big rubber stamp that slams onto the
   screen (tilted, a hard landing with a small bounce, an ink ring that spreads), then the banner layer and the receipt
   jolt once. Short: the slam is 0.32 s, the jolt 0.4 s. The resting stamp is the pt-stars banner in a brass frame. */
.gsui .gs-banner.is-stamp { animation: none; }
.gsui .gs-banner-stampface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 26px 12px;
  border: 5px double var(--gs-brass-lt);
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 45%, rgba(40, 26, 0, 0.55), rgba(12, 4, 20, 0.35) 70%, transparent);
  box-shadow: 0 0 0 2px rgba(58, 42, 0, 0.8), 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 24px rgba(240, 213, 122, 0.18);
  rotate: -7deg;
  animation: gs-stamp-slam 0.32s cubic-bezier(0.55, 0, 0.9, 0.45) both, gs-stamp-settle 0.28s ease-out 0.32s both;
}
.gsui .gs-banner-stampface::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 3px solid rgba(240, 213, 122, 0.7);
  border-radius: 18px;
  pointer-events: none;
  animation: gs-stamp-ink 0.6s ease-out 0.3s both;
}
.gsui .gs-banner.is-stamp .gs-banner-sub { animation: gs-banner-in 0.45s ease-out 0.45s both, gs-glitch-b 1.05s steps(1) 0.9s infinite; }
/* (2026-10-10, w18-moments; JUICE_MAP.md MN8) the breath before the thud: the stamp hangs at full size for 90 ms, then
   slams (the thud and the fanfare wait for it: gameclient/state.js promotionStamp). ?juice=0: today's slam. */
.gsui .gs-banner.is-stamp.is-breath .gs-banner-stampface { animation: gs-stamp-breath var(--gs-breath, 0.09s) linear both, gs-stamp-slam 0.32s cubic-bezier(0.55, 0, 0.9, 0.45) var(--gs-breath, 0.09s) both, gs-stamp-settle 0.28s ease-out calc(var(--gs-breath, 0.09s) + 0.32s) both; }
.gsui .gs-banner.is-stamp.is-breath .gs-banner-stampface::after { animation-delay: calc(var(--gs-breath, 0.09s) + 0.3s); }
@keyframes gs-stamp-breath { from, to { opacity: 0.9; scale: 3.2; filter: blur(2px); } }
.gsui .is-jolt { animation: gs-stamp-jolt 0.4s linear both; }
@keyframes gs-stamp-slam {
  0% { opacity: 0; scale: 3.2; filter: blur(5px); }
  70% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; scale: 0.92; filter: none; }
}
@keyframes gs-stamp-settle {
  0% { scale: 0.92; }
  45% { scale: 1.04; }
  100% { scale: 1; }
}
@keyframes gs-stamp-ink {
  0% { opacity: 0.9; scale: 0.96; }
  100% { opacity: 0; scale: 1.18; }
}
@keyframes gs-stamp-jolt {
  0%, 100% { translate: 0 0; }
  12% { translate: -7px 6px; }
  28% { translate: 6px -4px; }
  44% { translate: -4px 3px; }
  62% { translate: 3px -2px; }
  80% { translate: -1px 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .gsui .gs-banner-stampface, .gsui .gs-banner-stampface::after, .gsui .is-jolt { animation-duration: 0.01s; animation-delay: 0s; }
}
/* the memo under the review (the night before an inspection; the first promotion): the same pen, a little smaller */
.gsui .gs-r-review.gs-r-memo { margin-top: 2px; font-size: 15px; transform: rotate(-0.8deg); }

/* (2026-10-09, w10-somatic) The Supply-O-Matic's information pass: the stock rows' inventory line (server/inventory.js),
   the STOCK tab's totals strip, the lock line under the price line, the lock's word on the button. The terminal's
   established look is kept (AMENDMENTS 52): the same CRT greens and the amber the locks already used. */
.gsui .gs-trow-inv { font-size: 18px; line-height: 1.1; color: #c4ff9e; text-shadow: 0 0 6px rgba(124, 252, 58, 0.55); }
.gsui .gs-trow-inv.is-out { color: #ffb547; text-shadow: 0 0 6px rgba(255, 181, 71, 0.55); }
.gsui .gs-trow-lock { margin-top: 1px; }
.gsui .gs-trow.is-locked .gs-trow-sub:not(.is-lock) { opacity: 0.6; }
.gsui .gs-trow.is-locked .gs-tbtn:disabled { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsui .gs-tstats--stock .gs-tstat.is-full .gs-tstat-v { color: #ffb547; }
/* phones: every terminal tap target at least 44 px, long lines wrap instead of trailing off */
.gsui.gs-touch .gs-tbtn,
.gsui.gs-touch .gs-term-tab { min-height: 44px; }
.gsui.gs-touch .gs-term-x { min-width: 44px; min-height: 44px; }
.gsui.gs-touch .gs-trow-sub { white-space: normal; }
.gsui.gs-touch .gs-trow-inv { font-size: 15px; }
.gsui.gs-touch .gs-trow.is-locked .gs-tbtn:disabled { font-size: 15px; }

/* (2026-10-09, w10-somatic) the debug performance overlay (client/js/perfoverlay.js; debug-key holders only) */
.gsui .gs-perf {
  position: absolute;
  z-index: 60;
  left: 8px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 8px;
  pointer-events: none;
  color: #8dff5a;
  background: rgba(2, 8, 3, 0.78);
  border: 1px solid rgba(124, 252, 58, 0.45);
  border-radius: 4px;
}
.gsui .gs-perf-text { margin: 0; font: 12px/1.3 ui-monospace, Consolas, monospace; white-space: pre; }
.gsui .gs-perf-save {
  pointer-events: auto;
  padding: 2px 8px;
  font: 11px/1.2 ui-monospace, Consolas, monospace;
  color: #8dff5a;
  background: transparent;
  border: 1px solid rgba(124, 252, 58, 0.55);
  cursor: pointer;
}
.gsui .gs-perf-save:hover { color: #052006; background: #8dff5a; }
.gsui.gs-touch .gs-perf { left: calc(var(--tc-l, 0px) + 8px); }
.gsui.gs-touch .gs-perf-save { min-height: 44px; }