body.game-loading { background: #141d24; }
body.game-loading #help, body.game-loading #credit, body.game-loading #hud,
body.game-loading #ui, body.game-loading #cross { visibility: hidden; }
body.game-loading #c { opacity: 0; }
#startup { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px;
  box-sizing: border-box; color: #e7ebdc; background: radial-gradient(ellipse at 50% 35%,#283b3b,#141d24 75%); }
#startup[hidden] { display: none; }
body.game-loading #failscreen { z-index: 300; }
.loading-card { box-sizing: border-box; width: min(100%,440px); min-height: 270px; padding: 32px;
  border: 2px solid #68745d; box-shadow: 0 5px 0 #0c1218; background: #202c2b; text-align: center; }
.loading-brand { font: 700 28px/1.2 VoxelPixel,monospace; margin: 0 0 28px; }
.loading-title { margin: 0; min-height: 30px; font: 16px/1.5 VoxelPixel,monospace; }
.loading-track { height: 4px; margin: 20px 0 24px; background: #111b1d; overflow: hidden; }
.loading-track::after { content: ''; display: block; width: 25%; height: 100%; background: #afc082;
  animation: loading-sweep 1.8s ease-in-out infinite alternate; }
.loading-steps { display: flex; gap: 6px; justify-content: space-between; padding: 0; margin: 0;
  list-style: none; font: 11px/1.4 VoxelPixel,monospace; color: #83918b; }
.loading-steps[hidden], .loading-card button[hidden] { display: none; }
.loading-steps li { display: grid; gap: 6px; flex: 1; }
.loading-steps li::before { content: ''; width: 5px; height: 5px; margin: auto; background: #53615a; }
.loading-steps li[data-state=current] { color: #ebf1cf; }
.loading-steps li[data-state=current]::before, .loading-steps li[data-state=done]::before { background: #afc082; }
.loading-steps li[data-state=done] { color: #a9b8a0; }
.loading-details { margin-top: 20px; font: 12px/1.4 system-ui,sans-serif; color: #adbbb3; }
.loading-details summary { display: inline-block; cursor: pointer; padding: 3px 10px; }
.loading-details summary:focus-visible { outline: 2px solid #cfdea4; }
.loading-details p { margin: 6px 0 0; overflow-wrap: anywhere; }
@keyframes loading-sweep { to { transform: translateX(300%); } }
@media(prefers-reduced-motion:reduce) { .loading-track::after { animation: none; width: 100%; opacity: .65; } }
@media(max-width:480px) { .loading-card { padding: 28px 18px; } .loading-steps { font-size: 10px; gap: 2px; } }