/* Unit engine styles (engine-u18-randomizers.js): wheel, icon buttons, slip colors shared by the randomizer tools. */
.tool { --rz-1: #E9D3FF; --rz-2: #FFD3E6; --rz-3: #CDF3E0; --rz-4: #FFE6B8; --rz-5: #D6E4FF; --rz-ink: 38 8 64; }
@media (prefers-color-scheme: dark) {
  .tool { --rz-1: #6E57A8; --rz-2: #9A5584; --rz-3: #3E8A73; --rz-4: #A0743A; --rz-5: #4F6FB0; --rz-ink: 255 255 255; }
}

/* Wheel: pointer on top, rotor spins under it. */
.tool .rz-wheel { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto; }
.tool .rz-rotor { position: absolute; inset: 0; border-radius: 50%; box-shadow: var(--shadow), 0 0 0 6px var(--surface); will-change: transform; }
.tool .rz-disc { display: block; width: 100%; height: 100%; }
.tool .rz-seg { stroke: var(--surface); stroke-width: 1.2; }
.tool .rz-c1 { fill: var(--rz-1); } .tool .rz-c2 { fill: var(--rz-2); } .tool .rz-c3 { fill: var(--rz-3); } .tool .rz-c4 { fill: var(--rz-4); } .tool .rz-c5 { fill: var(--rz-5); }
.tool .rz-label { fill: rgb(var(--rz-ink)); font-weight: 850; letter-spacing: -.01em; }
.tool .rz-hub { position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--surface); box-shadow: 0 2px 10px rgb(var(--ink) / .18), inset 0 0 0 4px rgb(var(--accent)); }
.tool .rz-pointer {
  position: absolute; left: 50%; top: -10px; width: 30px; height: 38px; margin-left: -15px; z-index: 2;
  background: rgb(var(--ink)); clip-path: polygon(50% 100%, 0 0, 100% 0); border-radius: 4px;
  transform-origin: 50% 10%; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .2));
}
@media (prefers-color-scheme: dark) { .tool .rz-pointer { background: #fff; } }
.tool .rz-pointer.is-tick { animation: rz-tick .12s ease-out; }
@keyframes rz-tick { 40% { transform: rotate(-16deg); } }

/* Small round icon button (sound toggle and similar) */
.tool .rz-icon-btn {
  width: 44px; height: 44px; border-radius: 22px; display: inline-grid; place-items: center; flex: 0 0 auto;
  background: var(--surface); color: rgb(var(--ink) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: transform .16s ease-out, color .15s ease;
}
.tool .rz-icon-btn:active { transform: scale(.96); }
.tool .rz-icon-btn[aria-pressed="true"] { color: rgb(var(--ink) / .4); }
.tool button, .tool a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tool .btn:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .tool .rz-pointer.is-tick { animation: none; } }

/* Footer row (sound toggle + soft CTA) and small remove buttons, shared by the unit's tools */
.tool .rz-foot { display: flex; align-items: center; gap: 12px; }
.tool .rz-foot .tool-cta { text-align: left; flex: 1; }
.tool .rz-x { width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center; color: rgb(var(--ink) / .5); flex: 0 0 auto; }
.tool .rz-x svg { width: 16px; height: 16px; }