/* Would-You-Rather Wheel -- wheel canvas + question panel */
.wyr-main { display: grid; grid-template-columns: minmax(220px, 42%) 1fr; gap: 16px; align-items: center; }
@media (max-width: 640px) { .wyr-main { grid-template-columns: 1fr; } .wyr-wheel-wrap { max-width: 300px; margin: 0 auto; width: 100%; } }
.wyr-wheel-wrap .ak-stage { background: transparent; border: none; cursor: pointer; }
.wyr-panel { display: flex; flex-direction: column; gap: 10px; }
.wyr-cat { margin: 0; font-weight: 800; color: var(--color-primary); min-height: 1.3em; }
.wyr-q { margin: 0; font-size: 1.5rem; font-weight: 900; }
.wyr-opts { display: flex; flex-direction: column; gap: 8px; }
.wyr-or { text-align: center; font-weight: 900; color: var(--color-text-soft); font-size: 0.85rem; letter-spacing: 0.1em; }
.wyr-opt {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 6px 10px; align-items: center;
  padding: 12px 14px; border-radius: 16px; text-align: left; font: inherit; cursor: pointer;
  border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.wyr-opt:hover:not(:disabled) { border-color: var(--color-primary); }
.wyr-opt:active:not(:disabled) { transform: scale(0.98); }
.wyr-opt:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.wyr-opt:disabled { cursor: default; }
.wyr-opt.is-mine { border-color: var(--color-success); background: rgba(74, 222, 128, 0.15); }
.wyr-tag { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: #0e0f13; font-weight: 900; }
.wyr-opt[data-o="1"] .wyr-tag { background: var(--color-accent); }
.wyr-text { font-size: 1.12rem; font-weight: 700; }
.wyr-count { grid-row: 1 / span 2; font-size: 0.95rem; color: var(--color-text-soft); white-space: nowrap; }
.wyr-bar { grid-column: 2; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.wyr-bar i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width 0.3s ease; }
.wyr-opt[data-o="1"] .wyr-bar i { background: var(--color-accent); }
.wyr-mode { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--color-text-soft); cursor: pointer; }
.wyr-mode input { width: 18px; height: 18px; accent-color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) { .wyr-bar i { transition: none; } }