html, body { width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #0d0b0d; color: #eee; font-family: system-ui, sans-serif; }
#game-canvas { display: block; width: 100%; height: 100%; outline: none; }
.boot-loading { position: fixed; z-index: 1000; inset: 0; display: flex;
  flex-direction: column; gap: .7rem; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 24px 16px; overflow-y: auto; text-align: center;
  background: radial-gradient(ellipse at center, #252019, #0d0b0d 70%); }
.boot-loading[hidden] { display: none; }
.boot-brand { display: grid; place-items: center; width: min(84vw, 520px);
  height: min(36vh, 300px); flex-shrink: 0; margin-bottom: .6rem; }
.boot-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.boot-brand h1 { margin: 0; color: #d6c6a5; letter-spacing: .12em;
  font: 600 clamp(32px, 7vw, 64px)/1.2 Georgia, serif; text-transform: uppercase; }
.boot-loading strong { color: #e9e0cf; }
.boot-loading > span { max-width: 40rem; opacity: .68; font-size: .9rem;
  overflow-wrap: anywhere; }
.spinner { width: 28px; height: 28px; flex-shrink: 0; border: 3px solid #443827;
  border-top-color: #c7aa72; border-radius: 50%; animation: spin .8s linear infinite; }
#enter-game { min-height: 44px; padding: 10px 32px; margin-top: .6rem;
  border: 1px solid #9c8050; border-radius: 4px; color: #f0dfb9;
  background: #2b251c; font: 600 1rem/1.4 Georgia, serif; cursor: pointer; }
#enter-game:hover { background: #3c3021; border-color: #ddbf83; }
#enter-game:focus-visible { outline: 2px solid #eed3a0; outline-offset: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 420px) { .boot-loading { padding: 12px; gap: .45rem; }
  .boot-brand { height: 28vh; margin-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

[hidden] { display: none !important; }
.community-controls { position: fixed; top: 10px; left: 12px; z-index: 10; display: flex;
  flex-wrap: wrap; max-width: calc(100vw - 40px); align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px;
  background: rgba(15,15,17,.7); color: #bcae92; font: 11px/1.6 system-ui,sans-serif; }
.community-controls a { color: #cbb992; text-decoration: none; }
.community-controls a:hover, .community-controls a:focus-visible { color: #f6d994; text-decoration: underline; }
@media (max-width:600px) { .community-controls { top:6px; left:6px; font-size:10px; } }