.wheel-wrap { position: relative; width: min(420px, 82vw); aspect-ratio: 1; }
.wheel { width: 100%; height: 100%; transition: transform 4.6s cubic-bezier(0.12, 0.8, 0.12, 1); filter: drop-shadow(0 20px 40px rgb(0 0 0 / .35)); }
.wheel .seg-a { fill: var(--surface-2); }
.wheel .seg-b { fill: rgb(var(--primary-rgb) / .22); }
.wheel .seg-line { stroke: rgb(var(--primary-rgb) / .5); stroke-width: .6; }
.wheel .ring { fill: none; stroke: var(--primary); stroke-width: 3; }
.wheel text { fill: var(--text); font-family: var(--font-en); font-weight: 900; font-size: 13px; }
.wheel .seg-win { fill: var(--primary); }
.wheel .seg-win + text, .wheel text.win { fill: var(--on-primary); }
.pointer { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 2; width: 0; height: 0; border-inline: 16px solid transparent; border-top: 28px solid var(--primary); filter: drop-shadow(0 4px 8px rgb(0 0 0 / .3)); }
.hub { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, var(--primary-light), var(--primary)); color: var(--on-primary); font-weight: 900; font-size: clamp(1rem, 3.5vw, 1.4rem); box-shadow: 0 0 0 6px var(--surface), 0 0 0 7px var(--line), 0 10px 30px -6px var(--glow); transition: transform .2s; }
.hub:hover { transform: scale(1.05); }
.hub:disabled { cursor: wait; }
.legend { justify-content: center; max-width: 620px; }
.legend .pchip { padding: 0 .9rem 0 .4rem; }
html[dir='rtl'] .legend .pchip { padding: 0 .4rem 0 .9rem; }
.legend .pchip.is-win { background: var(--primary); color: var(--on-primary); border-color: transparent; transform: scale(1.08); transition: transform .3s var(--ease); }
.legend .pchip.is-win i { background: var(--on-primary); color: var(--primary); }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: min(520px, 100%); margin-top: .5rem; }
.choice-card { padding: 1.6rem 1rem; border-radius: calc(var(--radius) + 4px); background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: .3rem; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.choice-card:hover { transform: translateY(-6px) rotate(-1.5deg); border-color: var(--primary); box-shadow: 0 24px 50px -24px var(--glow); }
.choice-card.is-dare:hover { transform: translateY(-6px) rotate(1.5deg); }
.choice-card b { font-size: 3.6rem; line-height: 1; font-family: var(--font-en); color: var(--primary-ink); }
.choice-card.is-dare { background: linear-gradient(180deg, var(--primary-light), var(--primary)); border-color: transparent; color: var(--on-primary); }
.choice-card.is-dare b { color: var(--on-primary); }
.choice-card span { font-size: 1.35rem; font-weight: 900; }
.choice-card small { opacity: .75; font-weight: 600; }

.flip { width: min(480px, 100%); aspect-ratio: 4 / 3; perspective: 1400px; }
.flip-inner { position: relative; width: 100%; height: 100%; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: calc(var(--radius) + 6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.6rem; border: 2px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.flip-face.front b { font-size: 7rem; font-family: var(--font-en); line-height: 1; }
.flip-face.front { background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 14px, var(--surface-2) 14px, var(--surface-2) 28px); }
.flip-face.back { transform: rotateY(180deg); background: radial-gradient(ellipse at 50% 0%, rgb(var(--primary-rgb) / .14), transparent 70%), var(--surface); }
.flip-face.back p { margin: 0; font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 800; line-height: 1.7; text-wrap: balance; }
.flip-face.back small { color: var(--text-mute); font-weight: 700; }