/* Land of Lor — web loader chrome only. The game interface itself is native Godot
   (game/world/client/ui/); this page just shows the banner, one play button, and
   the download progress. Palette per brand (game/design/HANDOFF.md). */

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font: 15px/1.4 system-ui, sans-serif;
}

#canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  z-index: 0;
}
#canvas:focus { outline: none; }

#loader {
  position: fixed; inset: 0; z-index: 10;
  background: #2a2135;
}
#loader-banner {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
#loader-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,20,38,0.28) 0%, rgba(28,20,38,0) 34%, rgba(28,20,38,0.34) 100%);
}
#play-btn {
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%);
  height: 58px; padding: 0 34px;
  border: 3px solid #f0b429; border-radius: 16px;
  background: #2a2135; color: #f5d98a;
  font-family: 'Pixelify Sans', system-ui, sans-serif; font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a4a0e;
}
#play-btn:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 2px 0 #7a4a0e; }
@font-face {
  font-family: 'Pixelify Sans';
  src: url('assets/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

#boot-status {
  position: absolute; left: 50%; bottom: 18%;
  transform: translateX(-50%);
  width: min(340px, 80vw);
  text-align: center;
  padding: 14px 18px;
  background: rgba(42, 33, 53, 0.88);
  border: 2px solid #f0b429; border-radius: 14px;
}
#boot-progress { width: 100%; accent-color: #f0b429; }
#boot-notice { color: #f0a4ae; font-size: 13px; margin-top: 8px; white-space: pre-line; }

[hidden] { display: none !important; }