:root {
   --bg: #1a1612;
   --warm: #f5d6a0;
   --honey: #e8a930;
   --amber: #d4880a;
   --glow: rgba(245, 214, 160, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

/* Frozen state body class - warms the background */
body.state-frozen {
  background: #1f1a12;
}

body.state-sustain {
  background: #221e16;
}

#canvas {
  display: block;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: pointer;
}

body.state-frozen #canvas {
  cursor: pointer;
}

#grain {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  mix-blend-mode: overlay;
}

#grain.active {
  opacity: 1;
}

#hint {
  position: fixed;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 214, 160, 0.5);
  font-size: 14px;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.5s ease;
  text-shadow: 0 0 8px rgba(245, 214, 160, 0.15);
}

#hint.hidden {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* Frozen hint text change */
#hint-frozen {
  position: fixed;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 214, 160, 0.4);
  font-size: 13px;
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-shadow: 0 0 8px rgba(245, 214, 160, 0.1);
}

#hint-frozen.visible {
  opacity: 1;
}

@media (max-width: 480px) {
  #hint {
    font-size: 12px;
    bottom: 4vh;
  }
  #hint-frozen {
    font-size: 11px;
    bottom: 4vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  #grain { display: none; }
}