html, body {
  margin: 0;
  padding: 0;
}
#game-ui {
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-top:20px;
  margin-bottom: 20px;
}
#game-header {
  flex-shrink: 0;
  color: white;
  background: rgba(0,0,0,0.6);
}
#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 25px;
}

#loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20,20,20,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
  color: #ffffff;
}

#rotate-overlay {
  display:none;
  position:absolute;
  background: rgba(0,0,0,0.7);
  width: 100vw;
  color:#fff;
  z-index:9999;
  font-size:2em;
  text-align:center;
}
canvas#gameCanvas {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  height: auto;
  border-radius: 10px;
}

#game-instructions {
  color: #eee;
  background: rgba(20,20,20,0.92);
  margin: 1.3em auto 0 auto;
  border-radius: 10px;
  max-width: 900px;
  width: 100%;
  font-size: 1.14em;
  padding: 1em 1.4em;
  text-align: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.20);
}
#game-instructions em {
  color: #ffd26a;
  font-size: 0.96em;
}

#toast {
  display:none;
  position:fixed;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  background:#222;
  color:#fff;
  padding:16px 36px;
  border-radius:18px;
  font-size:22px;
  box-shadow:0 2px 18px #000;
  opacity:0;transition:opacity 0.44s;
}