/* 杯数カウンターと対になる、ゲームから独立した抽選ツール。 */
.quick-launch { left: max(16px, calc((100vw - 430px)/2 + 16px)); right: auto; }
.quick-launch:focus-visible, .quick-dialog button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.quick-sheet { padding: 20px; }
.quick-sheet h2 { font-size: clamp(15px, 4.6vw, 20px); }
.quick-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; padding: 5px; background: #e9dfca; border: 2px solid var(--ink); border-radius: 16px; }
.quick-modes button { min-height: 44px; padding: 5px; border: 2px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 800; }
.quick-modes button[aria-pressed="true"] { background: var(--beer); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.quick-range { margin: 14px 0 8px; text-align: center; font-size: 12px; font-weight: 800; }
.quick-art { display: grid; place-items: center; height: clamp(170px, 27dvh, 240px); }
.quick-wheel-wrap { position: relative; width: min(100%, 240px, 27dvh); aspect-ratio: 1; }
.quick-wheel-clip { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.quick-wheel { display: block; width: 100%; height: 100%; overflow: visible; }
.quick-wheel text { font-family: var(--display); font-size: 20px; fill: var(--ink); }
.quick-wheel.is-rolling { transition: transform 1.85s cubic-bezier(.12, .68, .14, 1); }
.quick-pointer { position: absolute; top: -9px; left: calc(50% - 14px); width: 28px; height: 36px; }
.quick-die-wrap { display: grid; place-items: center; width: 100%; height: 100%; }
.quick-die { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 12px; width: clamp(130px, 20dvh, 170px); aspect-ratio: 1; padding: 20px; border: 4px solid var(--ink); border-radius: 24px; background: #fffdf5; box-shadow: 6px 6px 0 var(--ink); transform: rotate(-7deg); }
.quick-die [data-pip] { border-radius: 50%; background: var(--ink); visibility: hidden; }
.quick-die [data-pip].is-on { visibility: visible; }
.quick-die [data-pip].is-red { background: var(--danger); }
.quick-die.is-rolling { animation: quick-dice-roll .7s ease-in-out; }
.quick-readout { display: grid; justify-items: center; margin: 12px 0; }
.quick-readout p { font-size: 12px; color: var(--muted); }
.quick-readout output { min-width: 3ch; font-family: var(--display); font-size: 44px; line-height: 1.25; text-align: center; font-variant-numeric: tabular-nums; }
.quick-roll { width: 100%; }
.quick-roll:disabled { cursor: wait; opacity: .65; }
@keyframes quick-dice-roll { 20%, 60% { transform: translateY(-12px) rotate(15deg); } 40%, 80% { transform: translateY(0) rotate(-15deg); } }
@media (max-width: 360px) { .quick-sheet { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .quick-wheel.is-rolling { transition: none; } .quick-die.is-rolling { animation: none; } }