/* AutoDeck's WebGL page (index.html). The canvas fills the frame; Unity
   matches its render size to the canvas's size times devicePixelRatio. The
   colours are placeholders until Lucía draws a loading screen. */

:root {
  --page-bg: #0b0f1a;
  --bar-track: #26304a;
  --bar-fill: #e8e2d0;
  --error-bg: #8c1c1c;
  --warning-bg: #8a6d12;
  --message-fg: #ffffff;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--page-bg);
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

#game-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(320px, 60%);
  height: 6px;
  transform: translate(-50%, -50%);
  background: var(--bar-track);
  border-radius: 3px;
  overflow: hidden;
}

#game-loading[hidden] {
  display: none;
}

#game-loading-fill {
  width: 0;
  height: 100%;
  background: var(--bar-fill);
  transition: width 0.2s linear;
}

#game-message {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  font: 14px/1.4 system-ui, sans-serif;
  color: var(--message-fg);
}

#game-message.is-error {
  background: var(--error-bg);
}

#game-message.is-warning {
  background: var(--warning-bg);
}