/* Readability and interaction overrides. Kept separate from the compressed visual stylesheet. */
.dialogue-dialog > .dialog-close {
  left: 13px;
  right: auto;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 22px;
}

.boot-screen.loading > #startGame,
.boot-screen.loading > h1 + button + small { display: none; }
.case-loader { width: min(430px, 86vw); margin-top: 38px; display: grid; justify-items: center; }
.loader-orbit { position: relative; display: grid; place-items: center; width: 74px; height: 74px; }
.loader-orbit b { color: var(--cyan); font-size: 25px; text-shadow: 0 0 20px var(--cyan); }
.loader-orbit i { position: absolute; inset: 0; border: 1px solid #294944; border-top-color: var(--cyan); border-radius: 50%; animation: loader-spin 1.25s linear infinite; }
.loader-orbit i::after { content: ""; position: absolute; top: 5px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.case-loader > span { margin-top: 18px; color: #60817d; font: 10px "IBM Plex Mono"; letter-spacing: .25em; }
.case-loader > strong { min-height: 26px; margin-top: 10px; font-size: 16px; font-weight: 500; color: #d6e5e3; }
.loader-track { position: relative; width: 100%; height: 2px; margin-top: 18px; overflow: hidden; background: #172826; }
.loader-track i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); transform: translateX(-100%); animation: loader-scan 2.4s ease-in-out infinite; }
.case-loader > small { margin-top: 14px; color: #71817f; font-size: 12px; letter-spacing: 0; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-scan { 50%, 100% { transform: translateX(100%); } }

.conversation > header { height: 76px; padding: 18px 24px; }
.conversation > header > span { font-size: 11px; }
.pressure { width: 165px; }
.pressure small { font-size: 12px; }
.pressure > i { height: 4px; }
.message small { font-size: 10px; }
.message p { padding: 12px 14px; font-size: 14px; line-height: 1.75; }
#chatForm textarea { padding: 16px; font-size: 14px; }
#chatForm button { font-size: 12px; }

.brand span { font-size: 15px; }
.brand small, .case-title small, .clock small { font-size: 10px; }
.case-title b { font-size: 14px; }
.runtime { font-size: 11px; }
.panel-title span { font-size: 12px; }
.panel-title small { font-size: 11px; }
.cast-card .info b { font-size: 16px; }
.cast-card .info small { font-size: 12px; }
.cast-card .location { font-size: 10px; }
.case-note small { font-size: 11px; }
.case-note p { font-size: 12px; }
.case-note b { display: block; color: #c99253; font-size: 11px; line-height: 1.55; }
.map-head small { font-size: 10px; }
.map-head h2 { font-size: 22px; }
.scan-button span { font-size: 12px; }
.scan-button small { font-size: 9px; }
.map-node b { font-size: 11px; }
.map-node small { font-size: 10px; }
.location-strip small { font-size: 10px; }
.location-strip p { font-size: 12px; }
.evidence-card span { font-size: 10px; }
.evidence-card b { font-size: 14px; }
.evidence-card p, .empty { font-size: 12px; }
.toast { font-size: 13px; }
.portrait-meta small { font-size: 11px; }
.portrait-meta h2 { font-size: 28px; }
.result-dialog p { font-size: 13px; }

.accuse-dialog, .action-dialog { width: min(540px, 92vw); padding: 30px; }
.red-label, .cyan-label { font: 11px "IBM Plex Mono"; letter-spacing: 0.14em; }
.red-label { color: var(--red); }
.cyan-label { color: var(--cyan); }
.accuse-dialog h2, .action-dialog h2 { margin: 6px 0; font-size: 25px; }
.accuse-dialog > p, .action-dialog > p { color: var(--muted); font-size: 13px; line-height: 1.6; }

.action-list { display: grid; gap: 10px; margin-top: 22px; }
.action-choice {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  background: #101923;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.action-choice:hover { border-color: var(--cyan); background: #112522; }
.action-choice:disabled { opacity: 0.42; cursor: not-allowed; filter: grayscale(1); }
.action-choice > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #42645f;
  color: var(--cyan);
  font-style: normal;
}
.action-choice b { display: block; font-size: 14px; }
.action-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.action-choice > em { color: var(--amber); font: 10px "IBM Plex Mono"; font-style: normal; }
.action-result { margin-top: 22px; border: 1px solid #3a625d; background: #0e1e1c; padding: 18px; }
.action-result small { color: var(--cyan); font: 10px "IBM Plex Mono"; letter-spacing: 0.12em; }
.action-result h3 { margin: 7px 0; font-size: 18px; }
.action-result p { color: #b2c0c7; font-size: 14px; line-height: 1.75; }
.action-result button { width: 100%; margin-top: 8px; border: 1px solid #47756f; background: #15312d; color: var(--cyan); padding: 11px; cursor: pointer; }

@media (max-width: 720px) {
  .map-node b { font-size: 9px; }
  .portrait-meta h2 { font-size: 20px; }
  .portrait-meta small { font-size: 9px; }
}