* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #132b31; color: #f2f5e2; font: 16px system-ui, sans-serif; }
#game { position: fixed; inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#loading {
  position: fixed; inset: 0; z-index: 2; display: grid; overflow: auto;
  background: #10262b;
  background-image: linear-gradient(180deg, rgba(4,17,22,.3), transparent 40%, rgba(4,17,22,.5)), url('/assets/images/shelter-loading.20260907.png');
  background-size: cover; background-position: center; text-align: center;
}
.loading-layout {
  min-height: 100%; width: 100%; display: grid; justify-items: center;
  grid-template-rows: auto minmax(32px, 1fr) auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.loading-logo { grid-row: 1; margin: 0; line-height: 0; }
.loading-logo img { display: block; width: min(370px, 72vw); height: auto; max-height: 30svh; object-fit: contain; }
.loading-panel {
  grid-row: 3; width: min(100%, 500px); padding: 20px 24px 8px;
  background: rgba(8,29,34,.94); border: 1px solid #577c77; border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
p { margin: 0; line-height: 1.5; }
#loading-copy { font-size: 1rem; color: #f2f5e2; }
.progress-label { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0 8px; font-size: .875rem; color: #d6e8df; }
#progress-percent { font-variant-numeric: tabular-nums; color: #ffd078; }
progress { display: block; appearance: none; width: 100%; height: 16px; margin: 0; overflow: hidden; border: 1px solid #73938a; border-radius: 8px; background: #061c22; accent-color: #fac04d; }
progress::-webkit-progress-bar { background: #061c22; }
progress::-webkit-progress-value { background: #fac04d; border-radius: 6px; }
progress::-moz-progress-bar { background: #fac04d; border-radius: 6px; }
.save-note { font-size: .875rem; color: #bfd4ca; margin-top: 16px; }
#error { display: none; color: #ffd078; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 25vh; overflow: auto; margin-top: 16px; text-align: left; }
#retry { min-height: 48px; padding: 10px 28px; margin-top: 16px; border: 2px solid #0f2529; border-bottom-width: 5px; border-radius: 12px; background: #fac04d; color: #18312e; font: 700 1rem system-ui; cursor: pointer; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 12px; color: #8de0ce; font-size: .875rem; }
.back-link:focus-visible, #retry:focus-visible { outline: 3px solid #f2f5e2; outline-offset: 3px; }
@media (max-width: 480px) {
  .loading-panel { padding-inline: 16px; }
  .loading-layout { padding-inline: max(12px, env(safe-area-inset-left)); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .loading-layout { grid-template-rows: auto 16px auto; padding-block: 12px; }
  .loading-logo img { max-height: 22svh; }
  .loading-panel { padding-top: 12px; }
}
/* No artificial movement or timed delays; reduced-motion users get identical information. */