/* Страница-обёртка для сборки под браузер. Тёмный фон под цвет игры,
   полотно во всё окно с сохранением 16:9. */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #07090e;
  color: #e8dcc0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  overflow: hidden;
}

#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, #16192a 0%, #07090e 62%);
}

#canvas { display: block; background: #05070b; }

#load {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  background: #07090e;
}

#load-title { font-size: 34px; letter-spacing: 1px; color: #f2dfb7; }
#load-sub { font-size: 14px; color: #8893a7; }
#load-hint { font-size: 12px; color: #5c6675; margin-top: 6px; }

#bar {
  width: 320px; height: 6px;
  background: #141a26;
  border: 1px solid #2b3446;
}
#bar-fill { width: 0%; height: 100%; background: #d8ae61; transition: width .2s; }

#full {
  position: absolute; right: 14px; bottom: 12px;
  width: 34px; height: 34px;
  background: rgba(20, 26, 38, .7);
  border: 1px solid #2b3446;
  color: #d8ae61; font-size: 16px; cursor: pointer;
}
#full:hover { background: rgba(32, 40, 58, .9); }

#warn { position: absolute; left: 0; right: 0; top: 0; }
#warn .err { background: #7a1f26; padding: 10px; font-size: 13px; }
#warn .warn { background: #6b5735; padding: 10px; font-size: 13px; }