@charset "UTF-8";

/*
 * Orbitron is bundled unmodified under the SIL Open Font License 1.1.
 * License and attribution: ../../assets/fonts/orbitron/OFL.txt
 */
@font-face {
  font-family: "Orbitron";
  src: url("../../assets/fonts/orbitron/Orbitron-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ui-bg: #141428;
  --ui-panel: rgba(20, 20, 40, 0.95);
  --ui-border: #4a90e2;
  --ui-accent: #673ab7;
  --ui-text: #ffffff;
  --ui-muted: rgba(255, 255, 255, 0.7);
  --overlay-dark: rgba(0, 0, 0, 0.85);
}

/* Global reset styles (moved from inline HTML) */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  position: fixed;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0a0a0a;
  font-family: "Orbitron", sans-serif;
}

#gameCanvas {
  display: block;
  background-color: #1a1a2e;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: auto;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Base UI overlay + resets that don't fight existing global resets */
#ui-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

#ui-root * {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

/* Utility layers (BEM) */
.ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ui-layer--modal {
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above HUD chrome (pause / char buttons at 1001); below elevated sheet toggle (10001) */
  z-index: 10000;
}

/* Nested overlays above the pause menu so controller focus targets the top sheet */
.ui-layer--modal:has(.update-modal),
.ui-layer--modal:has(.launch-modal),
.ui-layer--modal:has(.audio-menu),
.ui-layer--modal:has(.privacy-modal) {
  z-index: 10020;
}

.ui-layer--modal.confirm-dialog {
  z-index: 10030;
}

.confirm-dialog .modal {
  max-width: min(520px, 92vw);
  width: min(520px, 92vw);
}

/* Generic modal block */
.modal {
  pointer-events: auto;
  background: var(--ui-panel);
  color: var(--ui-text);
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  max-width: min(900px, 92vw);
  max-height: min(85vh, 800px);
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal__header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(150, 150, 255, 0.3);
  font-weight: 700;
}

.modal__body {
  padding: 16px 20px;
  overflow: auto;
  font-weight: 500;
  line-height: 1.6;
}

.modal__footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(150, 150, 255, 0.3);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn {
  pointer-events: auto;
  background: transparent;
  color: var(--ui-text);
  border: 2px solid var(--ui-border);
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}

.btn--primary {
  background: rgba(100, 100, 255, 0.2);
}

/* Multiplayer modal */
.multiplayer-modal {
  max-width: min(420px, 92vw);
}

.multiplayer-modal .modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mp-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Author display rules beat the UA [hidden] stylesheet - force hide */
.mp-section[hidden],
.mp-host-badge[hidden],
.mp-status[hidden] {
  display: none !important;
}

.mp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ui-muted);
  letter-spacing: 0.02em;
}

.mp-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(150, 150, 255, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--ui-text);
  font-size: 14px;
  font-family: inherit;
}

.mp-input:focus {
  outline: none;
  border-color: var(--ui-border);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.25);
}

.mp-input--code {
  text-align: center;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
}

.mp-btn-block {
  width: 100%;
}

.mp-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mp-divider::before,
.mp-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(150, 150, 255, 0.3);
}

.mp-join {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-join__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.mp-join__row .mp-input {
  flex: 1;
  min-width: 0;
}

.mp-join__row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.mp-lobby__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mp-code {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mp-code__value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  color: var(--ui-text);
  font-family: 'Courier New', Courier, monospace;
}

.mp-lobby__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mp-host-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(120, 160, 255, 0.45);
  background: rgba(100, 100, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mp-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(150, 150, 255, 0.25);
}

.mp-roster__title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--ui-muted);
  letter-spacing: 0.02em;
}

.mp-roster__empty {
  padding: 10px 0;
  color: var(--ui-muted);
  font-size: 13px;
}

.mp-roster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(120, 160, 255, 0.12);
  border: 1px solid rgba(120, 160, 255, 0.2);
}

.mp-roster__row--you {
  background: rgba(120, 160, 255, 0.25);
  border-color: rgba(120, 160, 255, 0.45);
}

.mp-roster__row--offline {
  opacity: 0.65;
}

.mp-roster__player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.mp-roster__icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

.mp-roster__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-roster__row--you .mp-roster__name {
  font-weight: 700;
}

.mp-kick-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(200, 50, 50, 0.9);
  border-color: rgba(200, 50, 50, 1);
  flex-shrink: 0;
}

.mp-kick-btn:hover {
  background: rgba(220, 70, 70, 1);
}

.mp-status {
  min-height: 1.2em;
  font-size: 13px;
  color: var(--ui-muted);
  line-height: 1.3;
}

.mp-status:empty {
  display: none;
}

/* Pause menu (sectioned layout, mirrors multiplayer modal patterns) */
.pause-menu-shell {
  position: relative;
  display: block;
  /* Desktop default: comfortable width; touch/narrow overrides below */
  width: min(560px, 92vw);
  max-width: 92vw;
  max-height: min(85vh, 760px);
  pointer-events: auto;
}

.pause-menu {
  width: 100%;
  max-width: none;
  max-height: min(85vh, 760px);
}

.pause-menu .pause-segmented__btn {
  font-size: 13px;
  padding: 10px 8px;
}

/* Float beside the modal — does not compete for modal width */
.pause-notes-rail {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 72px;
  padding: 14px 8px;
  background: var(--ui-panel);
  border: 2px solid var(--ui-border);
  border-radius: 8px;
  color: var(--ui-text);
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.2);
  cursor: pointer;
  pointer-events: auto;
}

.pause-notes-rail:hover,
.pause-notes-rail:focus-visible {
  background: rgba(100, 100, 255, 0.22);
  box-shadow: 0 0 14px rgba(74, 144, 226, 0.45);
}

.pause-notes-rail__glyph {
  position: relative;
  width: 36px;
  height: 44px;
  flex: 0 0 auto;
}

/* Document / changelog page */
.pause-notes-rail__page {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 28, 0.9);
  border: 2px solid var(--ui-border);
  border-radius: 3px 8px 3px 3px;
  box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.15);
}

.pause-notes-rail__page::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 50%, rgba(74, 144, 226, 0.35) 50%),
    var(--ui-panel);
  border-left: 2px solid var(--ui-border);
  border-bottom: 2px solid var(--ui-border);
  border-radius: 0 6px 0 0;
}

.pause-notes-rail__lines {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pause-notes-rail__lines::before,
.pause-notes-rail__lines::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(136, 221, 255, 0.85);
}

.pause-notes-rail__lines::before {
  width: 100%;
  box-shadow: 0 7px 0 rgba(136, 221, 255, 0.55);
}

.pause-notes-rail__lines::after {
  width: 62%;
  margin-top: 9px;
  background: rgba(74, 144, 226, 0.9);
}

.pause-notes-rail__label {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  color: #88ddff;
}

.pause-menu__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}

.pause-primary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(150, 150, 255, 0.25);
  background: rgba(0, 0, 0, 0.2);
}

.pause-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 16px 16px;
  /* Room for controller focus outlines so they are not clipped */
  scroll-padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.8) rgba(20, 20, 40, 0.4);
}

.pause-scroll::-webkit-scrollbar {
  width: 8px;
}

.pause-scroll::-webkit-scrollbar-track {
  background: rgba(20, 20, 40, 0.4);
  border-radius: 4px;
}

.pause-scroll::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.75);
  border-radius: 4px;
  border: 2px solid rgba(20, 20, 40, 0.4);
}

.pause-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pause-section + .pause-section {
  padding-top: 12px;
  border-top: 1px solid rgba(150, 150, 255, 0.18);
}

.pause-section__title {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ui-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pause-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pause-view[hidden] {
  display: none !important;
}

.pause-settings-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.pause-settings-header__back {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 8px 12px;
  font-size: 13px;
}

.pause-settings-header__title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--ui-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pause-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #88ddff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.pause-btn-block {
  width: 100%;
  text-align: center;
}

.pause-btn-block.is-disabled,
.pause-menu .btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(50%);
}

.pause-segmented {
  display: flex;
  gap: 6px;
  width: 100%;
}

.pause-segmented__btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 6px;
  font-size: 12px;
  border-color: rgba(150, 150, 255, 0.3);
  background: transparent;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.pause-segmented__btn.is-active {
  border-color: var(--ui-border);
  background: rgba(100, 100, 255, 0.35);
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.4);
}

.pause-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #666;
  border-radius: 6px;
  padding: 8px 12px;
  color: #fff;
  font-size: 12px;
  font-family: 'Orbitron', sans-serif;
  z-index: 10003;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.controller-focused {
  outline: 3px solid #ffea8a !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 234, 138, 0.85) !important;
}

.modal__body.controller-focused,
.nexus-scrollbar.controller-focused,
[data-controller-scroll].controller-focused {
  outline-offset: -4px !important;
  box-shadow: inset 0 0 0 2px #ffea8a, inset 0 0 18px rgba(255, 234, 138, 0.35) !important;
}

.controller-button-badge {
  --controller-button-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  min-width: 1.45em;
  border-radius: 50%;
  background: linear-gradient(180deg, #050505 0%, #050505 58%, #2c2c2c 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--controller-button-color);
  font-family: Arial, sans-serif;
  font-weight: 800;
  font-size: 0.9em;
  line-height: 1;
  vertical-align: -0.18em;
  box-shadow: inset 0 -0.2em 0.4em rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.65);
}

.controller-button-mark {
  display: block;
  position: relative;
  width: 70%;
  height: 70%;
  color: var(--controller-button-color);
}

.controller-button-mark--cross::before,
.controller-button-mark--cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 85%;
  height: 16%;
  background: currentColor;
  transform-origin: center;
}

.controller-button-mark--cross::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.controller-button-mark--cross::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.controller-button-mark--circle {
  border: 0.18em solid currentColor;
  border-radius: 50%;
}

.controller-button-mark--triangle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  border-left: 0.18em solid currentColor;
  border-top: 0.18em solid currentColor;
  transform: translate(-50%, -42%) rotate(45deg);
}

.controller-button-mark--square {
  border: 0.18em solid currentColor;
}

.launch-modal {
  max-width: min(1180px, 96vw);
}

.controls-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.controls-guide__section {
  background: rgba(10, 12, 22, 0.62);
  border: 1px solid rgba(120, 160, 255, 0.32);
  border-radius: 8px;
  padding: 12px;
}

.controls-guide__section h3 {
  margin: 0 0 10px;
  color: #88ddff;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.controls-guide__row {
  display: grid;
  grid-template-columns: minmax(92px, 0.78fr) 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.controls-guide__row:first-of-type {
  border-top: 0;
}

.controls-guide__input {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.controls-guide__action {
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  line-height: 1.35;
}

.control-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.control-key-badge,
.control-pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 5px;
  padding: 3px 6px;
  min-height: 24px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.control-key-badge {
  min-width: 25px;
}

.control-pill-badge--touch {
  border-color: rgba(110, 210, 255, 0.45);
  color: #b8f0ff;
}

.control-pill-badge--controller {
  border-color: rgba(255, 234, 138, 0.45);
  color: #ffea8a;
}

.controls-guide__note {
  grid-column: 1/-1;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  text-align: center;
  padding: 4px 8px 0;
}

.controller-nav-hints {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(150, 150, 255, 0.22);
  background: rgba(5, 8, 18, 0.72);
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1;
}

.controller-nav-active .controller-nav-hints {
  display: flex;
}

.controller-nav-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.controller-nav-hints .control-pill-badge {
  min-height: 20px;
  padding: 3px 6px;
  font-size: 10px;
}

.controller-nav-hints .controller-button-badge {
  font-size: 0.82em;
}

@media (max-width: 900px) {
  .controls-guide {
    grid-template-columns: 1fr;
  }
  .controls-guide__row {
    grid-template-columns: minmax(86px, 0.7fr) 1fr;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pause-button,
.charsheet-button {
  position: fixed;
  top: 12px;
  z-index: 1001; /* HUD chrome - sits under .ui-layer--modal (10000) */
}

.pause-button {
  right: 12px;
}

.charsheet-button {
  right: 100px;
}

/* Only while the character sheet itself is open, so the button can toggle-close */
.charsheet-button--above-sheet {
  z-index: 10001;
}

/* Character Sheet specific */
.character-sheet {
  max-width: 1280px;
  max-height: 92vh;
}

.cs-grid {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  grid-auto-rows: min-content;
  gap: 16px;
  padding: 6px;
}

.cs-panel {
  background: rgba(10, 12, 22, 0.55);
  border: 2px solid rgba(120, 160, 255, 0.35);
  border-radius: 4px;
  padding: 10px;
}

.cs-panel--center {
  min-height: 420px;
}

.cs-title {
  color: #ffaa88;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
}

.cs-subtitle {
  color: #88ddff;
  font-weight: 700;
  margin: 4px 0 8px;
}

.cs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cs-chip {
  border: 1px solid rgba(150, 150, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
}

.cs-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.cs-card {
  position: relative;
  border-radius: 10px;
  border: 2px solid #666;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 16, 28, 0.95) 0%, rgba(10, 10, 20, 0.95) 100%);
  padding: 8px 10px 12px 10px;
  min-height: 210px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.cs-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cs-card__name {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.cs-card__tag {
  color: #cfd8ff;
  font-weight: 700;
  font-size: 10px;
}

.cs-card__origin {
  font-weight: 700;
  font-size: 11px;
}

.cs-card__emblem {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 34px solid #9c27b0;
  margin: 16px auto 10px auto;
  opacity: 0.9;
}

.cs-card__desc {
  color: #cfd8ff;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 8px;
}

.cs-empty {
  border: 2px dashed rgba(200, 200, 200, 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(200, 200, 220, 0.7);
  font-weight: 700;
}

.cs-list {
  display: grid;
  gap: 6px;
}

.cs-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-badge {
  border: 1px solid rgba(150, 150, 255, 0.3);
  border-radius: 3px;
  padding: 6px 8px;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

/* Nexus Machine Scrollbar Styling */
.nexus-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.6) rgba(20, 20, 40, 0.3);
}

.nexus-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.nexus-scrollbar::-webkit-scrollbar-track {
  background: rgba(20, 20, 40, 0.3);
  border-radius: 6px;
}

.nexus-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 6px;
  border: 2px solid rgba(20, 20, 40, 0.3);
}

.nexus-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}

/* Reusable Mobile Scaling mixin */
/* Compile the mobile mixin under the mobile media query */
@media (max-width: 1024px), (max-height: 600px) {
  /* Scale modals for mobile */
  .modal {
    max-width: min(90vw, 900px);
    max-height: min(90vh, 800px);
  }
  /* Scale modal body padding and font sizes */
  .modal__header {
    padding: 12px 16px;
    font-size: 0.9em;
  }
  .modal__body {
    padding: 12px 16px;
    font-size: 0.9em;
  }
  .modal__footer {
    padding: 10px 12px;
    gap: 6px;
  }
  /* Scale buttons */
  .btn {
    padding: 8px 12px;
    font-size: 0.9em;
    border-radius: 5px;
  }
  /* Scale character sheet */
  .character-sheet {
    max-width: 95vw;
    max-height: 90vh;
  }
  .cs-grid {
    gap: 12px;
    padding: 4px;
  }
  .cs-panel {
    padding: 8px;
  }
  /* Scale card grid */
  .cs-cards {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .cs-card {
    padding: 6px 8px 10px 8px;
    min-height: 180px;
  }
  /* Scale chips and badges */
  .cs-chips {
    gap: 6px;
  }
  .cs-chip {
    padding: 3px 6px;
    font-size: 11px;
  }
  .cs-badge {
    padding: 5px 6px;
    font-size: 11px;
  }
  /* HUD mobile scaling and repositioning */
  #dom-hud {
    bottom: 200px !important;
    /* Move above touch controls (controls are at ~16-18% from bottom) */
    left: 10px !important;
    right: 10px !important;
    transform: scale(0.85) !important;
    transform-origin: left bottom !important;
  }
  #dom-hud #dom-hp-bar,
  #dom-hud #dom-shield-bar {
    max-width: 320px !important;
    height: 12px !important;
  }
  #dom-hud #dom-hp-bar-text,
  #dom-hud #dom-shield-bar-text {
    font-size: 9px !important;
  }
  #dom-hud #dom-xp-bar {
    max-width: 320px !important;
    height: 8px !important;
    margin-top: 6px !important;
  }
  #dom-hud #dom-cooldowns-row {
    gap: 10px !important;
    margin-top: 6px !important;
  }
  #dom-hud #dom-cooldowns-row > div {
    gap: 3px !important;
  }
  #dom-hud #dom-cooldowns-row > div > div:first-child {
    width: 120px !important;
    height: 12px !important;
  }
  #dom-hud #dom-cooldowns-row > div > div:last-child {
    font-size: 10px !important;
    margin-top: 1px !important;
  }
  #dom-hud .hud > div:first-child {
    font-size: 11px !important;
    margin-right: 4px !important;
  }
  /* Room info mobile scaling */
  .room-info-panel {
    top: 8px !important;
    width: 180px !important;
    min-height: 45px !important;
    padding: 6px 10px !important;
  }
  .room-info-panel .room-info__number {
    font-size: 24px !important;
    margin-bottom: 2px !important;
  }
  .room-info-panel .room-info__enemies {
    font-size: 12px !important;
    min-height: 18px !important;
  }
  .room-info-panel .room-info__status {
    font-size: 14px !important;
    top: calc(100% + 6px) !important;
  }
  /* Room/Level banner mobile scaling */
  .ui-layer[style*="top: 12px"] {
    top: 8px !important;
    padding: 0 12px !important;
  }
  .ui-layer[style*="top: 12px"] > div {
    font-size: 14px !important;
  }
  /* Teammate health bars mobile positioning */
  #dom-teammate-health {
    bottom: 280px !important;
    /* Above HUD (which is at 200px) */
    left: 10px !important;
    transform: scale(0.85) !important;
    transform-origin: left bottom !important;
  }
  /* Pause menu mobile styling — keep compact on small viewports */
  .pause-menu-shell {
    width: min(420px, 92vw) !important;
    max-width: 92vw !important;
    max-height: 90vh !important;
  }
  .confirm-dialog .modal {
    max-width: min(420px, 92vw) !important;
    width: min(420px, 92vw) !important;
  }
  .pause-menu {
    max-width: none !important;
    max-height: 90vh !important;
    width: 100% !important;
  }
  .pause-notes-rail {
    left: calc(100% + 8px);
    width: 64px;
    padding: 12px 6px;
  }
  .pause-notes-rail__label {
    font-size: 9px;
  }
  .pause-menu .modal__header {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  .pause-menu .pause-menu__body {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .pause-menu .pause-scroll {
    gap: 14px;
    padding: 12px 14px 14px;
  }
  .pause-menu .pause-btn-block,
  .pause-menu .pause-segmented__btn {
    padding: 12px 14px !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
  .pause-menu .pause-segmented__btn {
    font-size: 13px !important;
    padding: 10px 6px !important;
  }
  /* Ensure pause menu appears above HUD */
  .ui-layer--modal {
    z-index: 10000 !important;
  }
  /* Character sheet mobile scaling */
  .character-sheet {
    max-width: 98vw !important;
    max-height: 96vh !important;
    transform: scale(0.85);
    transform-origin: center center;
  }
  .character-sheet .modal__header {
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
  .character-sheet .modal__body {
    padding: 8px 10px !important;
    font-size: 11px !important;
    max-height: 70vh !important;
    overflow: hidden !important;
  }
  .character-sheet .modal__footer {
    padding: 6px 10px !important;
  }
  .character-sheet .cs-grid {
    grid-template-columns: 1fr 1.5fr 1fr !important;
    gap: 8px !important;
    padding: 3px !important;
  }
  .character-sheet .cs-panel {
    padding: 5px !important;
    font-size: 10px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Custom scrollbar for mobile panels */
  .character-sheet .cs-panel::-webkit-scrollbar {
    width: 6px;
  }
  .character-sheet .cs-panel::-webkit-scrollbar-track {
    background: rgba(20, 20, 40, 0.3);
    border-radius: 3px;
  }
  .character-sheet .cs-panel::-webkit-scrollbar-thumb {
    background: rgba(74, 144, 226, 0.6);
    border-radius: 3px;
  }
  .character-sheet .cs-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 144, 226, 0.8);
  }
  .character-sheet .cs-title {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  .character-sheet .cs-subtitle {
    font-size: 11px !important;
    margin: 2px 0 4px !important;
  }
  .character-sheet .cs-cards {
    gap: 8px !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
  .character-sheet .cs-card {
    padding: 5px 6px !important;
    min-height: 150px !important;
    font-size: 10px !important;
  }
  .character-sheet .cs-card__name {
    font-size: 10px !important;
  }
  .character-sheet .cs-card__tag {
    font-size: 9px !important;
  }
  .character-sheet .cs-card__desc {
    font-size: 9px !important;
  }
}
/* Compile the mobile mixin under the touch-mode class override */
.touch-mode {
  /* Scale modals for mobile */
}
.touch-mode .modal {
  max-width: min(90vw, 900px);
  max-height: min(90vh, 800px);
}
.touch-mode {
  /* Scale modal body padding and font sizes */
}
.touch-mode .modal__header {
  padding: 12px 16px;
  font-size: 0.9em;
}
.touch-mode .modal__body {
  padding: 12px 16px;
  font-size: 0.9em;
}
.touch-mode .modal__footer {
  padding: 10px 12px;
  gap: 6px;
}
.touch-mode {
  /* Scale buttons */
}
.touch-mode .btn {
  padding: 8px 12px;
  font-size: 0.9em;
  border-radius: 5px;
}
.touch-mode {
  /* Scale character sheet */
}
.touch-mode .character-sheet {
  max-width: 95vw;
  max-height: 90vh;
}
.touch-mode .cs-grid {
  gap: 12px;
  padding: 4px;
}
.touch-mode .cs-panel {
  padding: 8px;
}
.touch-mode {
  /* Scale card grid */
}
.touch-mode .cs-cards {
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.touch-mode .cs-card {
  padding: 6px 8px 10px 8px;
  min-height: 180px;
}
.touch-mode {
  /* Scale chips and badges */
}
.touch-mode .cs-chips {
  gap: 6px;
}
.touch-mode .cs-chip {
  padding: 3px 6px;
  font-size: 11px;
}
.touch-mode .cs-badge {
  padding: 5px 6px;
  font-size: 11px;
}
.touch-mode {
  /* HUD mobile scaling and repositioning */
}
.touch-mode #dom-hud {
  bottom: 200px !important;
  /* Move above touch controls (controls are at ~16-18% from bottom) */
  left: 10px !important;
  right: 10px !important;
  transform: scale(0.85) !important;
  transform-origin: left bottom !important;
}
.touch-mode #dom-hud #dom-hp-bar,
.touch-mode #dom-hud #dom-shield-bar {
  max-width: 320px !important;
  height: 12px !important;
}
.touch-mode #dom-hud #dom-hp-bar-text,
.touch-mode #dom-hud #dom-shield-bar-text {
  font-size: 9px !important;
}
.touch-mode #dom-hud #dom-xp-bar {
  max-width: 320px !important;
  height: 8px !important;
  margin-top: 6px !important;
}
.touch-mode #dom-hud #dom-cooldowns-row {
  gap: 10px !important;
  margin-top: 6px !important;
}
.touch-mode #dom-hud #dom-cooldowns-row > div {
  gap: 3px !important;
}
.touch-mode #dom-hud #dom-cooldowns-row > div > div:first-child {
  width: 120px !important;
  height: 12px !important;
}
.touch-mode #dom-hud #dom-cooldowns-row > div > div:last-child {
  font-size: 10px !important;
  margin-top: 1px !important;
}
.touch-mode #dom-hud .hud > div:first-child {
  font-size: 11px !important;
  margin-right: 4px !important;
}
.touch-mode {
  /* Room info mobile scaling */
}
.touch-mode .room-info-panel {
  top: 8px !important;
  width: 180px !important;
  min-height: 45px !important;
  padding: 6px 10px !important;
}
.touch-mode .room-info-panel .room-info__number {
  font-size: 24px !important;
  margin-bottom: 2px !important;
}
.touch-mode .room-info-panel .room-info__enemies {
  font-size: 12px !important;
  min-height: 18px !important;
}
.touch-mode .room-info-panel .room-info__status {
  font-size: 14px !important;
  top: calc(100% + 6px) !important;
}
.touch-mode {
  /* Room/Level banner mobile scaling */
}
.touch-mode .ui-layer[style*="top: 12px"] {
  top: 8px !important;
  padding: 0 12px !important;
}
.touch-mode .ui-layer[style*="top: 12px"] > div {
  font-size: 14px !important;
}
.touch-mode {
  /* Teammate health bars mobile positioning */
}
.touch-mode #dom-teammate-health {
  bottom: 280px !important;
  /* Above HUD (which is at 200px) */
  left: 10px !important;
  transform: scale(0.85) !important;
  transform-origin: left bottom !important;
}
.touch-mode .pause-menu-shell {
  width: min(420px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 90vh !important;
}
.touch-mode .confirm-dialog .modal {
  max-width: min(420px, 92vw) !important;
  width: min(420px, 92vw) !important;
}
.touch-mode .pause-menu {
  max-width: none !important;
  max-height: 90vh !important;
  width: 100% !important;
}
.touch-mode .pause-notes-rail {
  left: calc(100% + 8px);
  width: 64px;
  padding: 12px 6px;
}
.touch-mode .pause-notes-rail__label {
  font-size: 9px;
}
.touch-mode .pause-menu .modal__header {
  padding: 12px 16px !important;
  font-size: 16px !important;
}
.touch-mode .pause-menu .pause-menu__body {
  padding: 0 !important;
  overflow: hidden !important;
}
.touch-mode .pause-menu .pause-scroll {
  gap: 14px;
  padding: 12px 14px 14px;
}
.touch-mode .pause-menu .pause-btn-block,
.touch-mode .pause-menu .pause-segmented__btn {
  padding: 12px 14px !important;
  font-size: 15px !important;
  min-height: 48px !important;
}
.touch-mode .pause-menu .pause-segmented__btn {
  font-size: 13px !important;
  padding: 10px 6px !important;
}
.touch-mode {
  /* Ensure pause menu appears above HUD */
}
.touch-mode .ui-layer--modal {
  z-index: 10000 !important;
}
.touch-mode {
  /* Character sheet mobile scaling */
}
.touch-mode .character-sheet {
  max-width: 98vw !important;
  max-height: 96vh !important;
  transform: scale(0.85);
  transform-origin: center center;
}
.touch-mode .character-sheet .modal__header {
  padding: 8px 12px !important;
  font-size: 14px !important;
}
.touch-mode .character-sheet .modal__body {
  padding: 8px 10px !important;
  font-size: 11px !important;
  max-height: 70vh !important;
  overflow: hidden !important;
}
.touch-mode .character-sheet .modal__footer {
  padding: 6px 10px !important;
}
.touch-mode .character-sheet .cs-grid {
  grid-template-columns: 1fr 1.5fr 1fr !important;
  gap: 8px !important;
  padding: 3px !important;
}
.touch-mode .character-sheet .cs-panel {
  padding: 5px !important;
  font-size: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.touch-mode {
  /* Custom scrollbar for mobile panels */
}
.touch-mode .character-sheet .cs-panel::-webkit-scrollbar {
  width: 6px;
}
.touch-mode .character-sheet .cs-panel::-webkit-scrollbar-track {
  background: rgba(20, 20, 40, 0.3);
  border-radius: 3px;
}
.touch-mode .character-sheet .cs-panel::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.6);
  border-radius: 3px;
}
.touch-mode .character-sheet .cs-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(74, 144, 226, 0.8);
}
.touch-mode .character-sheet .cs-title {
  font-size: 12px !important;
  margin-bottom: 4px !important;
}
.touch-mode .character-sheet .cs-subtitle {
  font-size: 11px !important;
  margin: 2px 0 4px !important;
}
.touch-mode .character-sheet .cs-cards {
  gap: 8px !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
}
.touch-mode .character-sheet .cs-card {
  padding: 5px 6px !important;
  min-height: 150px !important;
  font-size: 10px !important;
}
.touch-mode .character-sheet .cs-card__name {
  font-size: 10px !important;
}
.touch-mode .character-sheet .cs-card__tag {
  font-size: 9px !important;
}
.touch-mode .character-sheet .cs-card__desc {
  font-size: 9px !important;
}

/* Engine boot intro (above title chrome until handoff).
   High-contrast diagnostic look: absolute black, a faint engine grid, pure
   white type with a single cyan accent. Edges stay laser-crisp — no soft
   gradients, no blur. */
.engine-boot-screen {
  position: absolute;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background-color: #020205;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  color: #ffffff;
  font-family: "Orbitron", sans-serif;
  text-align: center;
  opacity: 1;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 700ms cubic-bezier(0.45, 0, 0.2, 1);
}

/* Cinematic stage: the engine renders its primitive tech-demo here. */
.engine-boot-screen__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* While the cinematic runs, the DOM panel stays mounted as the accessible
   narration but is visually replaced by the stage canvas. */
.engine-boot-screen--cinematic .engine-boot-screen__panel {
  opacity: 0;
}

/* Read/write head: a single crisp line scanning down while initializing. */
.engine-boot-screen__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 2%,
    rgba(0, 229, 255, 0.55) 30%,
    rgba(0, 229, 255, 0.9) 50%,
    rgba(0, 229, 255, 0.55) 70%,
    transparent 98%
  );
  pointer-events: none;
  animation: engine-boot-scan 2100ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* When the boot outcome lands, the sweep finishes the pass it is on (JS adds
   the scan-done class at the iteration boundary) so the final reveal never
   cuts the line off mid-screen. The keyframe cycle already ends faded out at
   the bottom, so stopping at the boundary is seamless. */
.engine-boot-screen--scan-done .engine-boot-screen__scanline {
  animation: none;
  opacity: 0;
}

.engine-boot-screen--exiting {
  opacity: 0;
  pointer-events: none;
}

.engine-boot-screen[hidden] {
  display: none !important;
}

/* The signature lockup scales from ONE unit (the panel font-size). Every
   size, gap, and rule below is in em of that unit, so the composition keeps
   identical proportions on every device — small phones, tablets, 1080p,
   ultrawide, and 4K just render the same artwork at different scales.
   vmin tracks the limiting screen dimension (height on landscape phones and
   ultrawide, width on portrait), so no aspect ratio distorts the layout. */
.engine-boot-screen__panel {
  font-size: clamp(9px, 2.4vmin, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
  padding: 1.5em;
  max-width: 94vw;
  position: relative;
  z-index: 1;
}

/* The engine's four primitives pulse in sequence while the system spins up,
   then lock solid on ready. Rendered with clip-path so edges stay crisp. */
.engine-boot-screen__shapes {
  display: flex;
  gap: 0.9em;
  margin-top: 0.7em;
  animation: engine-boot-fade-up 700ms cubic-bezier(0.22, 0.7, 0.3, 1) 1700ms both;
}

.engine-boot-screen__shape {
  width: 0.85em;
  height: 0.85em;
  opacity: 0.3;
  animation: engine-boot-shape-pulse 1600ms cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.engine-boot-screen__shape--square {
  background: #4a90e2;
  animation-delay: 0ms;
}

.engine-boot-screen__shape--triangle {
  background: #ff1493;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  animation-delay: 400ms;
}

.engine-boot-screen__shape--pentagon {
  background: #c72525;
  clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
  animation-delay: 800ms;
}

.engine-boot-screen__shape--hexagon {
  background: #673ab7;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  animation-delay: 1200ms;
}

.engine-boot-screen--ready .engine-boot-screen__shape {
  animation: engine-boot-shape-lock 450ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.engine-boot-screen--error .engine-boot-screen__shape {
  animation: none;
  opacity: 0.18;
}

/* Staged reveal: "Powered by" -> "Shape Engine" -> version -> rule -> status.
   Animations use only transform/opacity/filter (never layout properties such
   as letter-spacing), so the lockup NEVER reflows or re-wraps mid-animation. */
.engine-boot-screen__brand {
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.34em;
  margin-right: -0.34em; /* re-center: trailing tracking on the last glyph */
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
  animation: engine-boot-fade-up 900ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.engine-boot-screen__title {
  /* vw cap guarantees "SHAPE ENGINE" stays on one line on the narrowest
     portrait phones; the em term rules everywhere else. */
  font-size: min(2.6em, 7vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.55);
  animation:
    engine-boot-title-in 1100ms cubic-bezier(0.22, 0.7, 0.3, 1) 500ms both,
    engine-boot-title-hum 1600ms cubic-bezier(0.45, 0, 0.55, 1) 1600ms infinite;
}

.engine-boot-screen__version {
  font-size: 1em;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  white-space: nowrap;
  color: #00e5ff;
  animation: engine-boot-fade-up 800ms cubic-bezier(0.22, 0.7, 0.3, 1) 1250ms both;
}

.engine-boot-screen__rule {
  width: min(16em, 70vw);
  height: 1px;
  margin-top: 0.9em;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.8), transparent);
  transform-origin: center;
  animation: engine-boot-rule-in 900ms cubic-bezier(0.22, 0.7, 0.3, 1) 1550ms both;
}

.engine-boot-screen__status {
  margin-top: 0.6em;
  font-size: 0.9em;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  min-height: 1.4em;
  min-width: 13ch;
  white-space: nowrap;
  transition:
    color 450ms cubic-bezier(0.45, 0, 0.2, 1),
    text-shadow 450ms cubic-bezier(0.45, 0, 0.2, 1);
  animation: engine-boot-fade-up 700ms cubic-bezier(0.22, 0.7, 0.3, 1) 1900ms both;
}

.engine-boot-screen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: center;
  margin-top: 0.75em;
}

.engine-boot-screen__button {
  appearance: none;
  border: 1px solid rgba(0, 229, 255, 0.65);
  background: rgba(0, 229, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.85em;
  letter-spacing: 0.06em;
  padding: 0.55em 1.2em;
  border-radius: 0;
  cursor: pointer;
  pointer-events: auto;
}

.engine-boot-screen__button:hover,
.engine-boot-screen__button:focus-visible {
  border-color: #00e5ff;
  background: rgba(0, 229, 255, 0.18);
  outline: none;
}

.engine-boot-screen__button:disabled {
  opacity: 0.55;
  cursor: wait;
}

.engine-boot-screen__button--secondary {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

.engine-boot-screen--error .engine-boot-screen__status {
  color: #ff4d4d;
  text-shadow: 0 0 6px rgba(255, 77, 77, 0.45);
}

.engine-boot-screen--error .engine-boot-screen__status,
.engine-boot-screen--error .engine-boot-screen__rule,
.engine-boot-screen--error .engine-boot-screen__brand,
.engine-boot-screen--error .engine-boot-screen__title,
.engine-boot-screen--error .engine-boot-screen__version,
.engine-boot-screen--error .engine-boot-screen__shapes {
  animation-delay: 0ms;
  animation-duration: 300ms;
}

.engine-boot-screen--ready .engine-boot-screen__status {
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  animation: engine-boot-ready-pulse 650ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.engine-boot-screen--ready .engine-boot-screen__title {
  animation: engine-boot-ready-wake 650ms cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

.engine-boot-screen--reduced .engine-boot-screen__brand,
.engine-boot-screen--reduced .engine-boot-screen__title,
.engine-boot-screen--reduced .engine-boot-screen__version,
.engine-boot-screen--reduced .engine-boot-screen__rule,
.engine-boot-screen--reduced .engine-boot-screen__status,
.engine-boot-screen--reduced .engine-boot-screen__shapes,
.engine-boot-screen--reduced .engine-boot-screen__shape,
.engine-boot-screen--reduced .engine-boot-screen__scanline {
  animation: none;
}

.engine-boot-screen--reduced .engine-boot-screen__shape {
  opacity: 1;
}

.engine-boot-screen--reduced .engine-boot-screen__scanline {
  opacity: 0;
}

.engine-boot-screen--reduced,
.engine-boot-screen--reduced.engine-boot-screen--exiting {
  transition: none;
}

@keyframes engine-boot-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tracking-in effect via transform only: scaleX condenses toward the final
   width without ever changing layout, so the line can never wrap mid-reveal. */
@keyframes engine-boot-title-in {
  0% {
    opacity: 0;
    transform: scaleX(1.18);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes engine-boot-rule-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Signature-cyan breathing on the wordmark while the engine initializes. */
@keyframes engine-boot-title-hum {
  0%, 100% { text-shadow: 0 0 6px rgba(0, 229, 255, 0.55); }
  50% { text-shadow: 0 0 14px rgba(0, 229, 255, 0.95); }
}

@keyframes engine-boot-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes engine-boot-shape-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  18% {
    opacity: 1;
    transform: scale(1.22);
  }
  36% {
    opacity: 0.3;
    transform: scale(1);
  }
}

@keyframes engine-boot-shape-lock {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  55% {
    opacity: 1;
    transform: scale(1.18);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes engine-boot-ready-pulse {
  0% {
    opacity: 0;
    transform: scale(0.96);
    text-shadow: 0 0 0 rgba(0, 229, 255, 0);
  }
  48% {
    opacity: 1;
    transform: scale(1.045);
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
  }
}

@keyframes engine-boot-ready-wake {
  0% { transform: scale(1); }
  45% {
    transform: scale(1.018);
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.9);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .engine-boot-screen__brand,
  .engine-boot-screen__title,
  .engine-boot-screen__version,
  .engine-boot-screen__rule,
  .engine-boot-screen__status,
  .engine-boot-screen__shapes,
  .engine-boot-screen__shape,
  .engine-boot-screen__scanline {
    animation: none;
  }

  .engine-boot-screen__shape {
    opacity: 1;
  }

  .engine-boot-screen__scanline {
    opacity: 0;
  }

  .engine-boot-screen {
    animation: none;
    transition: none;
  }
}

/* Title screen chrome (DOM overlay over procedural attract canvas) */
.title-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
  user-select: none;
  padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 48px);
  background: transparent;
  font-family: "Orbitron", sans-serif;
  opacity: 1;
  transition: opacity var(--title-exit-ms, 450ms) ease-in;
}

.title-screen--exiting {
  opacity: 0;
  pointer-events: none;
}

.title-screen__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: clamp(8px, 4vh, 36px);
}

.title-screen__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 18px);
  flex-wrap: wrap;
}

.title-screen__word {
  font-weight: 900;
  font-size: clamp(36px, 8vw, 84px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: #1a0a2e;
  -webkit-text-stroke: 2px #00e5ff;
  text-shadow:
    0 0 8px rgba(0, 229, 255, 0.85),
    0 0 22px rgba(0, 229, 255, 0.45),
    -2px 0 10px rgba(255, 106, 0, 0.35),
    2px 0 10px rgba(255, 106, 0, 0.35);
}

.title-screen__gem {
  display: inline-flex;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.65)) drop-shadow(0 0 8px rgba(255, 106, 0, 0.4));
}

.title-screen__gem svg {
  display: block;
  width: clamp(40px, 7vw, 64px);
  height: clamp(40px, 7vw, 64px);
}

.title-screen__subtitle {
  font-size: clamp(12px, 2.2vw, 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7cff4a;
  text-shadow:
    0 0 8px rgba(124, 255, 74, 0.9),
    0 0 18px rgba(124, 255, 74, 0.45);
  text-align: center;
  text-transform: uppercase;
  animation: title-subtitle-breathe 2.8s ease-in-out infinite;
}

.title-screen__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  width: 100%;
}

.title-screen__currency {
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(12px, 1.8vw, 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #c8e6ff;
  text-shadow: 0 0 6px rgba(120, 200, 255, 0.45);
}

.title-screen__shards {
  color: #ffb070;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.title-screen__shard-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ff8a2a;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(255, 138, 42, 0.8);
}

.title-screen__prompt {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #ffe066;
  text-shadow:
    0 0 8px rgba(255, 224, 102, 0.85),
    0 0 18px rgba(255, 200, 40, 0.4);
  animation: title-prompt-pulse 1.6s ease-in-out infinite;
  text-align: center;
  white-space: nowrap;
}

.title-screen__prompt .title-screen__key,
.title-screen__prompt .controller-button-badge,
.title-screen__prompt .control-key-badge {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 0.05em;
  animation: none;
  text-shadow: none;
  letter-spacing: 0;
  font-size: 0.92em;
}

.title-screen__prompt .controller-button-badge {
  width: 1.55em;
  height: 1.55em;
  min-width: 1.55em;
  box-shadow:
    inset 0 -0.2em 0.4em rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.65),
    0 0 10px rgba(255, 224, 102, 0.35);
}

.title-screen__prompt .control-key-badge {
  color: #ffe066;
  border-color: rgba(255, 224, 102, 0.55);
  background: rgba(255, 224, 102, 0.08);
  min-height: 1.55em;
  padding: 0.15em 0.45em;
}

.title-screen__version {
  justify-self: end;
  font-size: clamp(10px, 1.4vw, 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(160, 180, 200, 0.55);
  text-align: right;
}

.title-screen__install {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(0, 229, 255, 0.65);
  border-radius: 8px;
  background: rgba(8, 18, 38, 0.88);
  color: #c8f7ff;
  font: 700 11px/1 "Orbitron", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.title-screen__install[hidden] {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .title-screen__install:hover {
    border-color: #00e5ff;
    background: rgba(10, 40, 64, 0.96);
  }
}

@keyframes title-prompt-pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes title-subtitle-breathe {
  0%,
  100% {
    opacity: 0.72;
    text-shadow:
      0 0 6px rgba(124, 255, 74, 0.55),
      0 0 14px rgba(124, 255, 74, 0.28);
    transform: scale(1);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 12px rgba(124, 255, 74, 1),
      0 0 28px rgba(124, 255, 74, 0.65);
    transform: scale(1.03);
  }
}

@media (max-width: 720px) {
  .title-screen__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }

  .title-screen__currency,
  .title-screen__version {
    justify-self: center;
    text-align: center;
  }

  .title-screen__prompt {
    white-space: normal;
    order: -1;
  }
}

.touch-mode .title-screen__word {
  font-size: clamp(28px, 10vw, 56px);
  -webkit-text-stroke-width: 1.5px;
}

.touch-mode .title-screen__subtitle {
  font-size: clamp(11px, 3.2vw, 16px);
}

/* Short landscape screens (phones): slim the chrome so the combat sim gets room */
@media (max-height: 520px) {
  .title-screen {
    padding: 10px clamp(12px, 3vw, 32px) 12px;
  }

  .title-screen__top {
    gap: 4px;
    padding-top: 2px;
  }

  .title-screen__word {
    font-size: clamp(24px, 5.5vh, 44px);
  }

  .title-screen__gem svg {
    width: clamp(28px, 6vh, 44px);
    height: clamp(28px, 6vh, 44px);
  }

  .title-screen__subtitle {
    font-size: clamp(10px, 2.6vh, 14px);
  }

  .title-screen__bottom {
    gap: 8px;
  }

  .title-screen__currency {
    font-size: clamp(10px, 2.4vh, 13px);
    gap: 2px;
  }

  .title-screen__prompt {
    font-size: clamp(11px, 2.8vh, 15px);
  }

  .title-screen__version {
    font-size: clamp(9px, 2vh, 11px);
  }
}

/* Portrait rotate gate — game is landscape-only on mobile / installed PWA */
#rotate-landscape-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  background: #0a0a0a;
  color: #ffffff;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  pointer-events: auto;
}

#rotate-landscape-overlay.is-visible {
  display: flex;
}

#rotate-landscape-overlay .rotate-landscape-icon {
  width: 72px;
  height: 72px;
  border: 3px solid #4a90e2;
  border-radius: 10px;
  position: relative;
  animation: rotate-phone-hint 1.6s ease-in-out infinite;
}

#rotate-landscape-overlay .rotate-landscape-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 4px;
  margin-left: -9px;
  border-radius: 2px;
  background: #4a90e2;
}

#rotate-landscape-overlay p {
  max-width: 280px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes rotate-phone-hint {
  0%,
  20% {
    transform: rotate(0deg);
  }
  45%,
  70% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

/* Soft PWA update prompt — shown in nexus / live runs, not forced */
.pwa-update-banner {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 12px 16px;
  background: var(--ui-panel);
  border: 2px solid rgba(120, 160, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  font-family: Orbitron, sans-serif;
}

.pwa-update-banner__text {
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.pwa-update-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.pwa-update-banner__btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
}