@font-face { font-family: "Audiowide"; src: url("fonts/Audiowide-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Michroma"; src: url("fonts/Michroma-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Rajdhani"; src: url("fonts/Rajdhani-Medium.ttf") format("truetype"); font-weight: 500; font-display: block; }
@font-face { font-family: "Rajdhani"; src: url("fonts/Rajdhani-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "InterMB"; src: url("fonts/inter.ttf") format("truetype"); font-display: block; }

:root { --bg: #040a11; --text: #e8e7ee; --accent: #16bdfa; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }

#stage { position: relative; aspect-ratio: 3 / 2; width: min(100vw, 150vh); cursor: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage.show-cursor { cursor: default; }

#loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 24px "Audiowide", system-ui, sans-serif; letter-spacing: .2em; color: var(--accent);
}
#loading.hidden { display: none; }

#error {
  position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(20, 18, 28, .92); border: 1px solid #d54173; color: #fea198;
  font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; z-index: 10;
}