/* Uppstart: laddningsmarkeringar, reservlägesbanderoll och meddelanden för gamla webbläsare (boot.js, modules.js, gate.js). */
.boot-stage { display: grid; place-content: center; justify-items: center; gap: .9rem; min-height: 60%; height: 100%; color: var(--ink-soft, #5a4a37); font-family: 'Caveat', 'Segoe Print', cursive; font-size: 1.5rem; text-align: center; }
.boot-stage p { margin: 0; }
.boot-stage i, .boot-pill i {
  display: block; width: 2.4rem; height: 2.4rem; border: 3px dashed var(--ink, #3a2e22); border-radius: 50%;
  animation: boot-spin 2.4s linear infinite;
}
.boot-pill {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: .55rem; padding: .35rem .9rem .35rem .6rem;
  background: var(--paper, #f6ecd6); color: var(--ink, #3a2e22); border: 2px solid var(--ink, #3a2e22);
  border-radius: 999px; box-shadow: 0 3px 0 rgba(58, 46, 34, .3); font-family: 'Caveat', 'Segoe Print', cursive; font-size: 1.25rem;
}
.boot-pill i { width: 1.1rem; height: 1.1rem; border-width: 2px; }
.boot-reserv { position: fixed; top: 0; left: 0; right: 0; z-index: 95; padding: .25rem .6rem; background: #a62f2f; color: #fff; font: 600 .8rem/1.3 system-ui, sans-serif; text-align: center; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-stage i, .boot-pill i { animation: none; } }

/* Meddelande i webbläsare som inte klarar spelet (gate.js) */
.gate { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 1rem; background: var(--paper, #f6ecd6); color: var(--ink, #3a2e22); font: 1.05rem/1.5 Georgia, 'Times New Roman', serif; }
.gate.soft { background: rgba(35, 26, 16, .6); }
.gate-card { max-width: 30rem; padding: 1.2rem 1.4rem; background: var(--paper, #f6ecd6); border: 3px solid var(--ink, #3a2e22); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; box-shadow: 0 4px 0 rgba(58, 46, 34, .3); }
.gate-card h1 { margin: 0 0 .5rem; font-size: 1.5rem; }
.gate-card p { margin: .5rem 0; }
.gate-card a { color: var(--accent-2, #2a5f5a); }
.gate-card button { margin-top: .5rem; padding: .5rem 1rem; font: inherit; color: var(--ink, #3a2e22); background: var(--wood, #d9bf8a); border: 2px solid var(--ink, #3a2e22); border-radius: 10px; cursor: pointer; }