* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f7f7f7;
  color: #535353;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: background-color .45s ease;
}

html[data-stage="1"], html[data-stage="1"] body { background: #251847; }
html[data-stage="2"], html[data-stage="2"] body { background: #01030a; }
html[data-stage="3"], html[data-stage="3"] body { background: #070000; }
html[data-stage="4"], html[data-stage="4"] body { background: #071109; }

#wrap { position: fixed; inset: 0; }
#wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { image-rendering: auto; }

#offline {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 92vw);
  pointer-events: none;
  transition: opacity .35s ease;
}
#offline h1 { margin: 0 0 10px; font-size: 1.5em; font-weight: 500; color: #202124; }
#offline p { margin: 0 0 4px; }
#offline ul { margin: 0 0 14px; padding-left: 22px; }
#offline li { margin: 2px 0; }
#offline .code { font-size: 12px; color: #757575; letter-spacing: .02em; text-transform: uppercase; }
#offline.gone { opacity: 0; }

#hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #757575;
  pointer-events: none;
  transition: opacity .3s ease;
  white-space: nowrap;
}
#hint.gone { opacity: 0; }

#bar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  display: flex;
  gap: 6px;
  mix-blend-mode: difference;
  z-index: 2;
}
#bar a, #bar button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 18px/1 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  opacity: .6;
}
#bar a:hover, #bar button:hover { opacity: 1; }
#bar button.off { text-decoration: line-through; opacity: .35; }