:root {
  color-scheme: dark;
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #181411;
  color: #fff8e9;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #181411; }
#game { position: relative; display: grid; place-items: center; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #231f20; outline: none; }
#loading {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(88vw, 360px);
  padding: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid #e6ce8a;
  border-radius: 8px;
  background: rgb(28 24 20 / 94%);
  box-shadow: 0 12px 48px #0009;
  text-align: center;
}
#loading img { display: block; width: 112px; height: 112px; object-fit: cover; margin: 0 auto 12px; border-radius: 8px; }
#load-message { margin: 0 0 12px; font-size: 14px; }
.progress { height: 8px; overflow: hidden; border-radius: 5px; background: #5b5040; }
.progress i { display: block; width: 0; height: 100%; background: #d5a92c; transition: width 120ms linear; }
#game-error {
  position: absolute;
  z-index: 3;
  inset: 12px 12px auto;
  max-height: 45vh;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid #f38c71;
  border-radius: 6px;
  background: #2c1714;
  color: #fff;
  white-space: pre-wrap;
}
@media (max-width: 600px) {
  #loading { padding: 16px; }
  #loading img { width: 88px; height: 88px; }
}