@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  font-family: 'DM Sans', sans-serif;
  background: #9bc9d2;
  color: #f5f1e8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { user-select: none; }
#game { position: relative; cursor: crosshair; }
canvas { display: block; width: 100%; height: 100%; }

.veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(15, 29, 34, .08), rgba(13, 25, 27, .32));
  transition: opacity .24s ease;
}
.hidden { opacity: 0; pointer-events: none; }
#loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(255,255,255,.82); font: 11px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.loading-mark { width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#crosshair { position: absolute; left: 50%; top: 50%; z-index: 1; width: 14px; height: 14px; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
#crosshair.visible { opacity: .9; }
#crosshair span { position: absolute; display: block; background: #fffdf2; box-shadow: 0 1px 3px #24342c; }
#crosshair span:first-child { width: 1px; height: 12px; top: 1px; left: 6px; }
#crosshair span:last-child { height: 1px; width: 12px; top: 6px; left: 1px; }
#health-bar { position: absolute; top: max(18px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 1; display: flex; gap: 4px; pointer-events: none; }
#health-bar img { display: block; width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(24, 39, 31, .62)); }
#coordinates { position: absolute; left: 22px; bottom: 18px; color: rgba(255,255,255,.76); font: 10px 'DM Mono', monospace; text-shadow: 0 1px 5px #1c342b; opacity: .75; pointer-events: none; }
@media (max-width: 560px) {
  #health-bar { top: max(13px, env(safe-area-inset-top)); right: max(13px, env(safe-area-inset-right)); gap: 2px; }
  #health-bar img { width: 30px; height: 30px; }
  #coordinates { left: 14px; bottom: 13px; }
}