/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #04040c;
  --bg-1: #0a0a20;
  --bg-2: #161636;
  --text: #f6f6ff;

  /* Rarity palettes */
  --c-normal-1: #8c95a3;
  --c-normal-2: #d8dfe8;
  --c-normal-3: #5a6271;

  --c-rare-1: #2f7eff;
  --c-rare-2: #7ec8ff;
  --c-rare-3: #0d3a8c;

  --c-super-1: #ffb340;
  --c-super-2: #fff0a8;
  --c-super-3: #b06400;

  --c-inf-1: #ff4ecd;
  --c-inf-2: #4ecdff;
  --c-inf-3: #ffe14e;
  --c-inf-4: #4eff8b;
  --c-inf-5: #b04eff;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Noto Sans JP', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}