#mission-simulation {
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:radial-gradient(circle at 50% 45%,#071944 0,#02081c 44%,#01040e 100%);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s,visibility 0s linear .22s;
}
#mission-simulation.open { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
#mission-simulation-canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
#mission-simulation-header {
  position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  padding:max(11px,env(safe-area-inset-top)) 16px 10px; background:linear-gradient(#010617e8,transparent);
}
#mission-simulation-header::after { content:''; }
#mission-simulation-exit { justify-self:start; }
#mission-simulation-title { min-width:0; text-align:center; }
#mission-simulation-name { overflow:hidden; font-size:17px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
#mission-simulation-date { margin-top:2px; color:rgba(190,207,255,.58); font-size:11px; font-variant-numeric:tabular-nums; }
#mission-story-panel {
  position:absolute; z-index:2; top:88px; right:16px; bottom:102px; width:min(360px,34vw);
  display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(129,163,255,.18);
  border-radius:17px; background:linear-gradient(180deg,rgba(5,13,36,.9),rgba(2,8,24,.78));
  box-shadow:0 18px 70px #0007; backdrop-filter:blur(16px);
}
#mission-story-heading {
  position:relative; z-index:2; padding:13px 16px 11px; border-bottom:1px solid rgba(135,165,255,.12);
  color:#91b3ff; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
#mission-story-viewport {
  position:relative; flex:1; min-height:0; overflow:hidden;
  mask-image:linear-gradient(transparent 0,#000 10%,#000 87%,transparent 100%);
}
#mission-story-panel.complete #mission-story-viewport { display:none; }
#mission-story-scroll {
  position:absolute; top:0; right:0; left:0; padding:0 18px 28px; will-change:transform;
  color:rgba(232,238,255,.77); font-size:13px; line-height:1.7;
}
#mission-story-scroll h2 { margin:0 0 10px; color:#fff; font-size:22px; line-height:1.2; }
#mission-story-scroll p + p { margin-top:15px; }
#mission-story-scroll .mission-story-paragraph { margin-top:17px; }
#mission-story-scroll .mission-story-ending {
  margin-top:20px; padding:12px; border-left:2px solid #78d8a0; border-radius:0 9px 9px 0;
  background:rgba(76,188,123,.08); color:#c9f6d9; font-size:12px;
}
#mission-simulation-controls {
  position:absolute; z-index:2; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); left:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:opacity .18s,visibility 0s linear 0s;
}
#mission-simulation.vehicle-open #mission-simulation-controls {
  visibility:hidden; opacity:0; pointer-events:none; transition-delay:0s, .18s;
}
#mission-timeline { width:min(680px,100%); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; color:rgba(190,207,255,.52); font-size:9px; }
#mission-progress { width:100%; height:18px; margin:0; background:transparent; accent-color:#88aaff; cursor:pointer; -webkit-appearance:none; appearance:none; }
#mission-progress::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:rgba(135,165,255,.28); }
#mission-progress::-webkit-slider-thumb { width:15px; height:15px; margin-top:-6px; border:2px solid #dfe8ff; border-radius:50%; background:#779cff; box-shadow:0 0 12px rgba(105,145,255,.75); -webkit-appearance:none; }
#mission-progress::-moz-range-track { height:3px; border-radius:3px; background:rgba(135,165,255,.28); }
#mission-progress::-moz-range-thumb { width:13px; height:13px; border:2px solid #dfe8ff; border-radius:50%; background:#779cff; box-shadow:0 0 12px rgba(105,145,255,.75); }
#mission-simulation-actions { display:flex; align-items:center; justify-content:center; gap:9px; }
.mission-sim-button { padding:10px 14px; border:1px solid rgba(135,165,255,.28); border-radius:18px; background:rgba(12,23,57,.78); color:#e3eaff; cursor:pointer; backdrop-filter:blur(12px); }
#mission-vehicle-button { color:#aecaFF; }
#mission-vehicle-info {
  position:absolute; z-index:4; top:88px; right:16px; bottom:108px; width:min(360px,calc(100% - 32px)); padding:18px; overflow-y:auto;
  border:1px solid rgba(135,165,255,.22); border-radius:16px; background:rgba(4,11,31,.96);
  box-shadow:0 18px 70px #0009; visibility:hidden; opacity:0; transform:translateY(10px); transition:.18s;
}
#mission-vehicle-info.open { visibility:visible; opacity:1; transform:none; }
#mission-story-panel { transition:opacity .18s,transform .18s,visibility 0s linear 0s; }
#mission-simulation.vehicle-open #mission-story-panel { visibility:hidden; opacity:0; pointer-events:none; transform:translateX(12px); transition-delay:0s,0s,.18s; }
#mission-vehicle-figure { overflow:hidden; margin:-18px -18px 16px; border-radius:16px 16px 0 0; background:#11141b; }
#mission-vehicle-image { display:block; width:100%; min-height:180px; max-height:310px; object-fit:cover; object-position:center; background:#080d18; transition:opacity .15s; }
#mission-vehicle-image.loading { opacity:0; }
#mission-vehicle-figure figcaption { padding:6px 12px; color:rgba(190,207,255,.45); font-size:9px; text-align:right; }
#mission-vehicle-info h3 { padding-right:32px; font-size:19px; }
#mission-vehicle-type { margin-top:4px; color:rgba(190,207,255,.56); font-size:11px; }
#mission-vehicle-mass { margin-top:12px; color:#dce6ff; font-size:12px; }
#mission-vehicle-facts { margin:12px 0 0 18px; color:rgba(228,235,255,.66); font-size:12px; line-height:1.55; }
#mission-vehicle-facts li + li { margin-top:6px; }
#mission-vehicle-close { position:absolute; top:10px; right:10px; width:30px; height:30px; padding:0; }
#mission-complete {
  display:none; flex:1; min-height:0; align-items:center; justify-content:center; padding:18px;
}
#mission-complete.open { display:flex; }
#mission-complete-card { width:100%; padding:18px; border:1px solid rgba(115,229,163,.25); border-radius:15px; background:rgba(25,76,54,.12); text-align:center; }
#mission-complete-card h2 { font-size:23px; }
#mission-complete-result { margin-top:8px; color:#71dfa0; font-size:15px; }
#mission-complete-confirm { width:100%; margin-top:12px; padding:11px; border:1px solid rgba(104,220,153,.36); border-radius:13px; background:rgba(61,190,116,.18); color:#dfffea; font-weight:600; cursor:pointer; }
@media (max-width:540px) {
  #mission-simulation-name { font-size:15px; }
  #mission-simulation-controls { right:8px; left:8px; }
  .mission-sim-button { padding:9px 11px; font-size:11px; }
  #mission-vehicle-info { top:94px; right:10px; bottom:104px; width:calc(100% - 20px); }
  #mission-story-panel { top:auto; right:10px; bottom:90px; left:10px; width:auto; height:31vh; }
  #mission-story-panel.complete #mission-story-heading { padding-left:24px; }
  #mission-story-panel.complete #mission-complete { padding:10px 14px 14px; }
  #mission-story-panel.complete #mission-complete-card { padding:14px; }
  #mission-story-scroll { font-size:12px; line-height:1.6; }
  #mission-story-scroll h2 { font-size:19px; }
}