:root {
  --amber: #ffb347;
  --ember: #ff6b1e;
  --glass: rgba(20, 14, 10, 0.55);
  --glow: rgba(255, 150, 60, 0.35);
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05060f;
  font-family: 'Cormorant Garamond', serif;
  color: #f3e6d2;
  -webkit-tap-highlight-color: transparent;
}

#scene-container { position: fixed; inset: 0; }
canvas { display: block; }

/* ─── Loader ─── */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; background: radial-gradient(circle at 50% 60%, #1a0f08 0%, #05060f 70%);
  transition: opacity 1.2s ease;
}
#loader.gone { opacity: 0; pointer-events: none; }
#loader p {
  font-size: 1.3rem; letter-spacing: 0.04em; color: #d8b98a; font-weight: 300;
  animation: pulse 2s ease-in-out infinite;
}
.ember-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, var(--amber), var(--ember) 60%, transparent 72%);
  box-shadow: 0 0 40px 10px var(--glow);
  animation: flicker 0.9s ease-in-out infinite alternate;
}
@keyframes flicker {
  from { transform: scale(0.85) rotate(-4deg); opacity: 0.8; }
  to   { transform: scale(1.12) rotate(4deg); opacity: 1; }
}
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ─── Title card ─── */
#title-card {
  position: fixed; top: 7vh; left: 0; right: 0; z-index: 20;
  text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(-18px);
  transition: opacity 2s ease, transform 2s ease;
}
#title-card.show { opacity: 1; transform: translateY(0); }
#title-card.fade { opacity: 0.28; }
#title-card h1 {
  font-size: clamp(2.4rem, 7vw, 4.6rem); font-weight: 600; letter-spacing: 0.06em;
  color: #ffe4b0;
  text-shadow: 0 0 24px rgba(255, 150, 60, 0.55), 0 2px 10px rgba(0,0,0,0.6);
}
#title-card .sub {
  font-size: clamp(1rem, 2.6vw, 1.5rem); font-style: italic; font-weight: 300;
  color: #c99a68; letter-spacing: 0.08em; margin-top: 4px;
}

/* ─── Hint ─── */
#hint {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 15; pointer-events: none;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem); letter-spacing: 0.1em;
  color: rgba(240, 220, 190, 0.7);
  background: var(--glass); backdrop-filter: blur(6px);
  padding: 10px 20px; border-radius: 30px; border: 1px solid rgba(255,180,100,0.18);
  opacity: 0; transition: opacity 1.5s ease; text-transform: lowercase;
}
#hint.show { opacity: 1; }

/* ─── Dock ─── */
#dock {
  position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); z-index: 25;
  display: flex; gap: 10px; padding: 10px 14px;
  background: var(--glass); backdrop-filter: blur(14px);
  border-radius: 22px; border: 1px solid rgba(255, 180, 100, 0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 30px rgba(255,120,40,0.12);
}
#dock button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: rgba(255, 180, 100, 0.06); border: 1px solid transparent;
  color: #f0dcc0; cursor: pointer; padding: 10px 14px; border-radius: 14px;
  font-family: inherit; transition: all 0.25s ease; min-width: 60px;
}
#dock button:hover, #dock button:active {
  background: rgba(255, 150, 60, 0.22);
  border-color: rgba(255, 180, 100, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255,120,40,0.25);
}
#dock button.active {
  background: rgba(255, 150, 60, 0.3);
  border-color: var(--amber);
}
#dock .glyph { font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(255,150,60,0.4)); }
#dock .lbl { font-size: 0.8rem; letter-spacing: 0.05em; opacity: 0.85; }

/* ─── Toast ─── */
#toast {
  position: fixed; bottom: 110px; left: 50%; transform: translate(-50%, 12px);
  z-index: 30; opacity: 0; pointer-events: none;
  background: var(--glass); backdrop-filter: blur(10px);
  color: #ffdca8; padding: 8px 22px; border-radius: 20px;
  border: 1px solid rgba(255,180,100,0.25); font-style: italic;
  font-size: 1.05rem; letter-spacing: 0.05em;
  transition: opacity 0.4s ease, transform 0.4s ease;
  text-shadow: 0 0 12px rgba(255,150,60,0.4);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ─── Remix link ─── */
#remix {
  position: fixed; top: 14px; right: 16px; z-index: 25;
  font-size: 0.85rem; letter-spacing: 0.06em; text-decoration: none;
  color: rgba(255, 200, 150, 0.7);
  background: var(--glass); backdrop-filter: blur(8px);
  padding: 6px 14px; border-radius: 16px;
  border: 1px solid rgba(255,180,100,0.18);
  transition: all 0.25s ease;
}
#remix:hover { color: #ffe4b0; border-color: var(--amber); box-shadow: 0 0 20px var(--glow); }

@media (max-width: 480px) {
  #dock button { padding: 9px 10px; min-width: 52px; }
  #dock .lbl { font-size: 0.72rem; }
  #dock .glyph { font-size: 1.3rem; }
}
</parameter>