/* Reset & base */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  background: radial-gradient(1200px 800px at 50% 100%, #0b1022 0%, #060913 60%, #04060d 100%);

  color: #e7f0ff;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  overflow: hidden;

}



#app, canvas {

  width: 100%; height: 100%; display: block;

}



/* Overlay HUD text */

#hud {

  position: fixed; left: 18px; top: 16px; z-index: 10;

  user-select: none; pointer-events: none;

  text-shadow: 0 0 18px rgba(0, 180, 255, 0.25);

}

#hud .title {

  font-weight: 800; letter-spacing: 0.5px;

  font-size: clamp(18px, 2.6vw, 28px); color: #bcd7ff;

}

#hud .title .ai {

  color: #6be0ff;

  background: linear-gradient(90deg, #7affff, #9f7aff);

  -webkit-background-clip: text; background-clip: text;

  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 20px rgba(100,220,255,.35);

}

#hud .hint { margin-top: 6px; opacity: 0.75; font-size: clamp(12px, 1.6vw, 14px); color: #b8c6e0; }

kbd {

  border: 1px solid rgba(255,255,255,0.25); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 0.9em; background: rgba(255,255,255,0.08);

}



/* Focus outline */

#app:focus-visible { outline: 2px solid #69d2ff; outline-offset: 4px; border-radius: 8px; }



/* Soft vignette */

body::after {

  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;

  background: radial-gradient(70% 65% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.28) 100%);

}



canvas { image-rendering: optimizeQuality; }

::-webkit-scrollbar { display: none; }