/* Shared Wizard interactive session — mobile-ready layers */
:root {
  --wiz-cyan: #00c8ff;
  --wiz-ink: #e8f4ff;
  --wiz-muted: #8aa3b5;
  --wiz-panel: rgba(10, 18, 28, 0.92);
  --wiz-ok: #00e57b;
  --wiz-warn: #ffb020;
  --wiz-stage-min: 220px;
}

.wizard-session-host {
  position: relative;
  width: 100%;
  min-height: var(--wiz-stage-min);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(80, 40, 160, 0.35), transparent 70%),
    linear-gradient(180deg, #0a121c 0%, #05080c 100%);
  border: 1px solid rgba(0, 200, 255, 0.22);
  isolation: isolate;
  touch-action: manipulation;
}

.wizard-session-host[data-ready="0"]::after {
  content: attr(data-status);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--wiz-muted);
  font: 600 0.85rem/1.3 system-ui, sans-serif;
  background: rgba(5, 8, 12, 0.55);
  z-index: 40;
  padding: 1rem;
  text-align: center;
}

.wizard-session-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.wizard-session-layer--bg { z-index: 1; pointer-events: none; }
.wizard-session-layer--char { z-index: 2; pointer-events: none; }
.wizard-session-layer--fx { z-index: 3; pointer-events: none; }
.wizard-session-layer--ui { z-index: 4; pointer-events: none; }

.wizard-session-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.wizard-session-hotspot {
  position: absolute;
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  min-width: 48px;
  min-height: 48px;
  padding: 0.55rem 0.85rem;
  font: 600 0.75rem/1 Syne, system-ui, sans-serif;
  color: #041018;
  background: var(--wiz-cyan);
  box-shadow: 0 6px 18px rgba(0, 200, 255, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wizard-session-hotspot:active { transform: scale(0.97); }
.wizard-session-hotspot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.wizard-session-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.wizard-session-dock button {
  pointer-events: auto;
  min-height: 40px;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 200, 255, 0.35);
  background: var(--wiz-panel);
  color: var(--wiz-ink);
  font: 600 0.7rem/1 system-ui, sans-serif;
}

.wizard-session-dock button[aria-pressed="true"] {
  background: rgba(0, 200, 255, 0.22);
  border-color: var(--wiz-cyan);
}

.wizard-session-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
  font: 600 0.65rem/1 system-ui, sans-serif;
  color: var(--wiz-muted);
  background: var(--wiz-panel);
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  pointer-events: none;
}

@media (max-width: 720px) {
  :root { --wiz-stage-min: 260px; }
  .wizard-session-host { border-radius: 12px; min-height: 280px; }
  .wizard-session-dock { gap: 0.3rem; padding: 0.4rem; }
  .wizard-session-dock button { flex: 1 1 calc(33% - 0.3rem); min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-session-host { scroll-behavior: auto; }
  .wizard-session-hotspot { transition: none; }
}

/* Forge mobile polish */
@media (max-width: 900px) {
  body.forge-mobile-ready header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); background: rgba(7, 11, 16, 0.92); }
  body.forge-mobile-ready #stage { min-height: 280px; }
  body.forge-mobile-ready .row { gap: 0.35rem; }
  body.forge-mobile-ready button { min-height: 44px; }
}