/* Rune's brain: same purple glow family as the preorder page (shared/desk.css). */
:root {
  --bg: #0b0a10; --text: #ece8f3; --muted: #a39cb3; --faint: #6f6784;
  --accent: #a48bff; --accent-2: #7c5cff; --rune: #b39dff; --glass: #17141fcc; --line: #2a2536;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { background: radial-gradient(120% 90% at 70% 10%, #120f1b, #0b0a10 60%); overscroll-behavior: none; -webkit-user-select: none; user-select: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
#scene.dragging { cursor: grabbing; }
#scene.locked { cursor: none; }

.head { position: fixed; top: 16px; left: 16px; right: 16px; pointer-events: none; }
.head h1 { margin: 0; font: 600 22px/1.2 var(--serif); letter-spacing: .01em; color: var(--text); text-shadow: 0 0 18px #7c5cff88; }
.head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.label {
  position: fixed; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px; font-size: 13px; color: var(--text);
  background: var(--glass); border: 1px solid #a48bff55; box-shadow: 0 0 22px #7c5cff44;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: translate(-50%, calc(-100% - 14px));
}
.label.private { color: var(--muted); font-style: italic; }

.hint {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  margin: 0; max-width: min(560px, calc(100% - 32px)); text-align: center; pointer-events: none;
  padding: 8px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--muted);
  background: var(--glass); border: 1px solid var(--line); transition: opacity 1.2s ease;
}
.hint b { color: var(--text); font-weight: 600; }
.hint.gone { opacity: 0; }
.for-touch { display: none; }
.touch .for-mouse { display: none; }
.touch .for-touch { display: inline; }

.stick {
  display: none; position: fixed; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom));
  width: 112px; height: 112px; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle, #a48bff14, #a48bff08 60%, transparent 70%); border: 1px solid #a48bff44;
}
.touch .stick { display: block; }
.stick .knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d9ceff, #a48bff 55%, #7c5cff); box-shadow: 0 0 18px #a48bff88; opacity: .75;
}

.nogl { position: fixed; inset: 0; display: grid; place-content: center; gap: 12px; padding: 16px; text-align: center; background: var(--bg); }
.nogl[hidden] { display: none; }
.nogl img { max-width: min(640px, 100%); height: auto; border-radius: 12px; }
.nogl p { color: var(--muted); margin: 0; }

@media (max-width: 480px) {
  .head h1 { font-size: 19px; }
  .hint { font-size: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
}