/* css/style.css — FOUNDATION. Reset, full-window canvas, the #ui-root layer and shared CSS variables. */
:root {
  --ez-sea-deep: #15557e;
  --ez-sea: #1f7ea6;
  --ez-shallow: #3fb7bf;
  --ez-sand: #ecdcae;
  --ez-white: #f7f5ef;
  --ez-blue: #2f6fb3;
  --ez-terracotta: #c2603c;
  --ez-olive: #6f7d45;
  --ez-ink: #1d2327;
  --ez-panel: rgba(18, 28, 38, 0.86);
  --ez-panel-border: rgba(255, 255, 255, 0.14);
  --ez-text: #f4f1e8;
  --ez-muted: #aab4bb;
  --ez-good: #6fcf6f;
  --ez-warn: #f0b440;
  --ez-bad: #e8554a;
  --ez-hp: #d8413a;
  --ez-hunger: #e0932f;
  --ez-thirst: #3a9ad9;
  --ez-gold: #e8c65a;
  --ez-blood: #b0151a;
  --ez-radius: 10px;
  --ez-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --ez-font-title: Georgia, "Times New Roman", serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--ez-sea-deep); color: var(--ez-text); font-family: var(--ez-font);
  -webkit-user-select: none; user-select: none;
}
#game {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block;
  cursor: crosshair; touch-action: none; outline: none;
}
#ui-root {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
}
#ui-root button, #ui-root input, #ui-root select, #ui-root a, #ui-root .interactive { pointer-events: auto; }
button { font-family: inherit; }
pre#autotest, pre#shot { position: fixed; left: 0; bottom: 0; margin: 0; }
/* loading indicator (index.html) until main.js boots the game; the <noscript> message */
#ez-loading, .ez-noscript {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: radial-gradient(circle at 50% 40%, var(--ez-sea) 0%, var(--ez-sea-deep) 70%); text-align: center;
}
#ez-loading b { font: 700 30px var(--ez-font-title); letter-spacing: 0.04em; color: var(--ez-white); }
#ez-loading i {
  width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.22); border-top-color: var(--ez-sand);
  animation: ez-spin 0.9s linear infinite;
}
@keyframes ez-spin { to { transform: rotate(360deg); } }
.ez-noscript { z-index: 30; padding: 24px; font-size: 18px; line-height: 1.5; color: var(--ez-white); }
.ez-noscript b { font: 700 30px var(--ez-font-title); }