/* The emote wheel. Radial, hollow, and only ever up while V is held.
   Tokens come from theme.css so the ring wears Emberbound's violet rather
   than the blue the shape is borrowed from. */

.emwheel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(calc(var(--vh) * 46), 420px);
  height: min(calc(var(--vh) * 46), 420px);
}
/* Under 800 virtual pixels of height (a notebook at 150%) the 46% wheel
   reached 18px into the orb vitals; 40% clears them. The token is published
   by ui/uiscale.ts against the interface's own viewport, never a media query. */
:root[data-vp~="h800"] .emwheel {
  width: min(calc(var(--vh) * 40), 420px);
  height: min(calc(var(--vh) * 40), 420px);
  transform: translate(-50%, -50%) scale(0.86);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease-out, transform 120ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  /* The hub is a window onto the game; nothing here may catch a click, since
     the pointer is being used as a direction rather than a cursor. */
  user-select: none;
}

.emwheel.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.emwheel-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 22px #000a);
}

/* The plate behind the spokes, so the gaps between them still read as ring. */
.emwheel-ring {
  fill: none;
  stroke: #0a0713d9;
}

.emwheel-spoke {
  fill: #1b1021c7;
  stroke: var(--line, #332a50);
  stroke-width: 2;
  transition: fill 70ms linear;
}

.emwheel-spoke.is-on {
  fill: var(--acc, #b98cff);
  stroke: var(--acc2, #dcc4ff);
}

/* The stick figures: white line art, dark when their spoke lights up. */
.emwheel-fig {
  fill: none;
  stroke: var(--ink, #ede9f7);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 70ms linear, transform 90ms ease-out;
}

.emwheel-fig circle {
  fill: var(--ink, #ede9f7);
  stroke: none;
}

.emwheel-fig.is-on {
  stroke: #120a18;
}

.emwheel-fig.is-on circle {
  fill: #120a18;
}

.emwheel-num {
  fill: var(--faint, #776b9a);
  font: 600 15px/1 var(--ui, system-ui, sans-serif);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

/* The hub: the dead zone, and where the chosen emote names itself. */
.emwheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44%;
  height: 44%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
}

.emwheel-label {
  font: 700 clamp(13px, calc(var(--vh) * 1.7), 17px) / 1.2 var(--ui, system-ui, sans-serif);
  letter-spacing: 0.04em;
  color: var(--ink, #ede9f7);
  text-shadow: 0 2px 8px #000c;
  min-height: 1.2em;
}