#titleScreen {
  position: fixed;
  inset: 0;
  z-index: 999;   /* above every other UI layer, including xrextras loading/almost-there */
  overflow: hidden;
  background: #060a12;
  transition: opacity 0.5s ease;
}
#titleScreen.hide {
  opacity: 0;
  pointer-events: none;
}
#langToggle {
  position: absolute;
  top: calc(1.8vh + env(safe-area-inset-top));
  right: calc(4vw + env(safe-area-inset-right));
  z-index: 2;
  display: flex;
  gap: 6px;
  background: var(--sci-panel);
  padding: 5px;
  border: 1px solid var(--sci-line-soft);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.18);
  backdrop-filter: blur(4px);
}
.langBtn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(53, 224, 255, 0.25);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--sci-cyan);
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.langBtn.active {
  opacity: 1;
  border-color: var(--sci-cyan);
  background: rgba(53, 224, 255, 0.18);
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.55);
  transform: scale(1.08);
}
.langBtn svg { display: block; }

/* ===== help button (title screen, top-left) ===== */
#helpBtn {
  position: absolute;
  top: calc(1.8vh + env(safe-area-inset-top));
  left: calc(4vw + env(safe-area-inset-left));
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sci-cyan);
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sci-panel);
  color: var(--sci-cyan);
  box-shadow: 0 0 12px rgba(53, 224, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-tap-highlight-color: transparent;
}
#helpBtn:active { background: rgba(53, 224, 255, 0.22); }
#helpBtn svg { display: block; }

/* ===== help modal: rounded window, circular X close (top-right) ===== */
#helpModal {
  position: fixed;
  inset: 0;
  z-index: 1000;   /* above #titleScreen (999) */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 12, 0.65);
  padding: 6vh 5vw;
  box-sizing: border-box;
  touch-action: none;
}
#helpModal.open { display: flex; }
.helpWindow {
  position: relative;
  width: min(94vw, 440px);
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 18px;
  border: 1px solid var(--sci-cyan);
  background: linear-gradient(180deg, rgba(14, 26, 44, 0.98), rgba(6, 12, 22, 0.98));
  box-shadow: 0 0 40px rgba(53, 224, 255, 0.3), inset 0 0 24px rgba(53, 224, 255, 0.08);
  padding: 20px 20px calc(18px + env(safe-area-inset-bottom));
  color: var(--sci-text);
  font-family: var(--sci-font);
  animation: helpIn 0.16s ease-out;
}
@keyframes helpIn {
  from { transform: scale(0.92); opacity: 0; }
}
.helpTitle {
  margin: 0 34px 14px 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #eaffff;
  text-shadow: 0 0 10px rgba(53, 224, 255, 0.7);
}
.helpClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--sci-cyan);
  background: rgba(53, 224, 255, 0.12);
  color: var(--sci-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--sci-font);
  box-shadow: 0 0 10px rgba(53, 224, 255, 0.4);
  -webkit-tap-highlight-color: transparent;
}
.helpClose:active { background: rgba(53, 224, 255, 0.3); }
.help-section {
  border-left: 2px solid var(--sci-cyan);
  padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}
.help-section:last-child { margin-bottom: 0; }
.help-section h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sci-cyan-2);
  text-shadow: 0 0 6px rgba(53, 224, 255, 0.5);
}
.help-section p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sci-text);
}

#titleBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#titleContent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 9vh 6vw calc(6vh + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#titleLogo {
  max-width: 90vw;
  width: 460px;
  margin-top: 3vh;
  filter: drop-shadow(0 0 22px rgba(53, 224, 255, 0.4));
}
/* start button: angular HUD panel with animated neon glow + corner ticks */
#startBtn {
  position: relative;
  border: 1px solid var(--sci-cyan);
  border-radius: 0;
  clip-path: var(--clip-hud);
  padding: 16px 60px;
  font: 800 20px/1 var(--sci-font);
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #eaffff;
  background: linear-gradient(180deg, rgba(53, 224, 255, 0.28), rgba(10, 22, 40, 0.85));
  text-shadow: 0 0 10px rgba(53, 224, 255, 0.8);
  box-shadow: inset 0 0 16px rgba(53, 224, 255, 0.25);
  filter: drop-shadow(0 0 10px rgba(53, 224, 255, 0.45));
  -webkit-tap-highlight-color: transparent;
  animation: startGlow 1.7s ease-in-out infinite;
}
#startBtn:active { background: linear-gradient(180deg, rgba(53, 224, 255, 0.5), rgba(20, 40, 66, 0.9)); }
@keyframes startGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(53, 224, 255, 0.4)); }
  50% { filter: drop-shadow(0 0 20px rgba(53, 224, 255, 0.85)); }
}