@import "tailwindcss";

@theme {
  --color-bg: #1a1512;
  --color-surface: #2a2420;
  --color-ink: #f0e6d3;
  --color-dim: #9e8e7a;
  --color-gold: #d4a84b;
  --color-gold-glow: #e6c06a;
  --color-rust: #8b3a3a;
}

* {
  box-sizing: border-box;
}

button:not(:disabled) {
  cursor: pointer;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--color-bg);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-ink);
}

#scene {
  pointer-events: none;
  -moz-user-select: none;
  user-select: none;
  position: fixed;
  inset: 0;
  z-index: 1;
}

canvas {
  pointer-events: none;
  -moz-user-select: none;
  user-select: none;
  display: block;
}

@keyframes morphIn {
  from {
    opacity: 0;
    transform: scaleX(0.3) scaleY(0.3) translateY(-50%);
  }
  to {
    opacity: 1;
    transform: scaleX(1) scaleY(1) translateY(-50%);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cardOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}