/* ANCORE — tokens e base. Menus em ui/menu.css, HUD em ui/hud.css. Identidade: docs/BRAND.md */
@import url('./ui/brand.css');
@import url('./ui/menu.css');
@import url('./ui/hud.css');

:root {
  /* tipografia */
  --font: "Bahnschrift", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Bahnschrift", "Consolas", "Roboto Mono", monospace;
  --fs-display: clamp(56px, 5.4vw, 92px);
  --fs-h1: clamp(34px, 3vw, 46px);
  --fs-h2: 26px;
  --fs-h3: 19px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-label: 10.5px;
  --tr-display: -0.005em;
  --tr-title: .04em;
  --tr-label: .24em;

  /* marca ANCORE (docs/BRAND.md §2) */
  --ancore-orange: #FD6A00;
  --ancore-orange-hi: #FF8A2B;
  --ancore-orange-deep: #C24E00;
  --graphite-900: #121316;
  --graphite-800: #16181B;
  --graphite-700: #1E2125;
  --graphite-600: #2A2E33;
  --ceramic: #E9E7E2;
  --ceramic-dim: #BFC2C5;
  --ctc-crimson: #B3262B;
  --ctc-teal: #4FB3B8;
  --vgd: #FD6A00;
  --ctc: #B3262B;

  /* superfícies (grafite em camadas) */
  --bg-0: #0B0C0E;
  --bg-1: #121316;
  --bg-2: #16181B;
  --bg-3: #1E2125;
  --glass: rgba(18, 19, 22, .62);
  --glass-2: rgba(22, 24, 27, .78);
  --fill-1: rgba(233, 231, 226, .035);
  --fill-2: rgba(233, 231, 226, .07);
  --fill-3: rgba(233, 231, 226, .12);
  --hair: rgba(233, 231, 226, .09);
  --hair-2: rgba(233, 231, 226, .16);
  --hair-3: rgba(233, 231, 226, .28);

  /* texto (cerâmica) */
  --text: #E9E7E2;
  --text-2: rgba(233, 231, 226, .68);
  --text-3: rgba(233, 231, 226, .44);
  --text-4: rgba(233, 231, 226, .27);
  --ink: #0E0F11;

  /* um único acento (laranja Ancore), usado com parcimônia */
  --accent: #FD6A00;
  --accent-hi: #FF8A2B;
  --accent-deep: #C24E00;
  --accent-soft: rgba(253, 106, 0, .14);
  --accent-line: rgba(253, 106, 0, .78);
  --warn: #e8b04a;
  --danger: #e5554f;
  --good: #7fd68a;
  --bad: #e5554f;

  /* times (sobrescritos pelo modo daltônico no HUD) */
  --ally: #54CEE2;
  --enemy: #F16E78;

  /* raridade */
  --r-comum: #a9aca8;
  --r-raro: #5aa2e8;
  --r-epico: #a97be0;
  --r-lendario: #e2b04f;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --t-fast: 140ms;
  --t-med: 220ms;
  --t-slow: 420ms;

  /* legado (ainda usados em alguns pontos) */
  --amber: var(--warn);
  --line: var(--hair);
  --line-2: var(--hair-2);
  --panel: var(--glass);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
  background: var(--bg-0); color: var(--text);
  font-family: var(--font); font-stretch: condensed; font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none;
}
button, input, select, textarea { font-family: inherit; font-stretch: inherit; color: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--accent-line); outline-offset: 3px; }

#game { position: fixed; inset: 0; z-index: 0; }
#game canvas { display: block; width: 100%; height: 100%; }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#menu { position: fixed; inset: 0; z-index: 20; }
#menu:empty, #menu.mo-hidden { pointer-events: none; }
#overlay { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#overlay > * { pointer-events: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,230,223,.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,230,223,.3); }

/* tela de carregamento legada (main.js: #overlay.loading > .loading-box) */
#overlay.loading { pointer-events: auto; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 60%, #15191b, transparent 60%), linear-gradient(180deg, #0b0d0e, #050606); }
.loading-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; animation: mo-fade .3s ease-out; }
.loading-spinner { width: 220px; height: 2px; background: var(--hair); position: relative; overflow: hidden; }
.loading-spinner::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--text), transparent); animation: mo-shimmer 1.3s var(--ease-in-out) infinite; }
.loading-text { font-size: 13px; font-weight: 600; letter-spacing: var(--tr-label); color: var(--text-2); }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-shimmer { from { left: -35%; } to { left: 100%; } }