/* 線上輪盤抽籤 */
.tool { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .tool { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .tool > .lead { grid-column: 1 / -1; } }
.lead { margin: 0; text-align: center; color: var(--muted); }
.panel { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.panel h2 { margin: 0 0 10px; font-size: 1.125rem; }

.wheel-box { position: relative; width: min(100%, 26rem); margin: 0 auto; aspect-ratio: 1; }
.wheel-box svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wheel { transform-origin: 100px 100px; transition: transform 4s cubic-bezier(.12, .6, .1, 1); }
.wheel.instant { transition: none; }
.seg-text { font-family: var(--font-sans, "Noto Sans TC", sans-serif); font-weight: 700; fill: #2b2b2b; dominant-baseline: middle; pointer-events: none; }
.pointer { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.hub { fill: #fff; stroke: var(--line); stroke-width: 2; }

.spin-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.result {
  min-height: 3.5rem; padding: 10px 18px; text-align: center; font-size: 1.75rem; font-weight: 700; width: 100%;
  border: 2px solid var(--accent); border-radius: 12px; background: var(--accent-soft); overflow-wrap: anywhere;
}
.result.idle { border-color: var(--line); background: var(--panel); color: var(--muted); font-size: 1rem; font-weight: 400; }

textarea.opts {
  width: 100%; min-height: 12rem; font: inherit; font-size: 1.0625rem; line-height: 1.6; padding: 10px 12px; resize: vertical;
  border: 2px solid var(--accent); border-radius: 12px; background: var(--panel); color: var(--ink);
}
.hint { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; margin-top: 8px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.history { margin: 0; padding-left: 1.5rem; display: grid; gap: 2px; }
.small-btn {
  min-height: 40px; padding: 4px 14px; font: inherit; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.small-btn:hover, .small-btn:focus-visible { border-color: var(--accent); outline: none; }
.error { color: #C0392B; font-weight: 700; margin: 8px 0 0; }
.notes { margin: 0; padding-left: 1.25rem; color: var(--muted); grid-column: 1 / -1; }