:root {
  --color-surface: 40 40 40;
  --color-surface-raised: 48 48 48;
  --color-surface-overlay: 58 58 58;
  --color-content: 229 229 229;
  --color-content-muted: 115 115 115;
  --color-content-subtle: 82 82 82;
  --color-accent: 94 234 212;
}

.light {
  --color-surface: 228 228 228;
  --color-surface-raised: 235 235 235;
  --color-surface-overlay: 220 220 220;
  --color-content: 23 23 23;
  --color-content-muted: 82 82 82;
  --color-content-subtle: 163 163 163;
  --color-accent: 20 184 166;
}

[x-cloak] { display: none !important; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  min-height: 100vh;
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-content));
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

canvas {
  display: block;
  touch-action: none;
}

.link {
  color: rgb(var(--color-accent));
  transition: opacity 0.15s ease;
}
.link:hover { opacity: 0.8; }

.btn {
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
  display: inline-block;
}

.btn-primary {
  background-color: rgb(var(--color-accent) / 0.1);
  color: rgb(var(--color-accent));
}
.btn-primary:hover { background-color: rgb(var(--color-accent) / 0.2); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: rgb(var(--color-content-muted));
}
.btn-ghost:hover { color: rgb(var(--color-content)); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.card {
  padding: 2rem;
  background-color: rgb(var(--color-surface-raised));
}

.input {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: rgb(var(--color-surface-overlay));
  color: rgb(var(--color-content));
  outline: none;
  border: none;
}
.input::placeholder { color: rgb(var(--color-content-subtle)); }
.input:focus { box-shadow: 0 0 0 1px rgb(var(--color-accent) / 0.5); }

.text-content       { color: rgb(var(--color-content)); }
.text-content-muted { color: rgb(var(--color-content-muted)); }
.text-content-subtle{ color: rgb(var(--color-content-subtle)); }
.text-accent        { color: rgb(var(--color-accent)); }
.bg-surface         { background-color: rgb(var(--color-surface)); }
.bg-surface-raised  { background-color: rgb(var(--color-surface-raised)); }
.bg-surface-overlay { background-color: rgb(var(--color-surface-overlay)); }
.border-surface-overlay { border-color: rgb(var(--color-surface-overlay)); }
.text-balance       { text-wrap: balance; }

/* Hex loader (play page) */
.hex-loader { position: relative; width: 76px; height: 44px; }
.hex {
  position: absolute;
  width: 28px;
  height: 24px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background-color: rgb(var(--color-accent));
  animation: hex-pulse 1.2s ease-in-out infinite;
}
.hex-1 { left: 0;  top: 10px; animation-delay: 0s; }
.hex-2 { left: 24px; top: 0;  animation-delay: 0.2s; }
.hex-3 { left: 48px; top: 10px; animation-delay: 0.4s; }

@keyframes hex-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1); }
}