.arena { min-height: 100vh; background: #fff8f2; }
.topline { display: flex; align-items: center; justify-content: space-between; }
.progress { margin-top: 20rpx; height: 10rpx; overflow: hidden; border-radius: 99rpx; background: #eee4dd; }
.progress-in { height: 100%; border-radius: inherit; background: #ff6b35; transition: width .25s; }
.question { margin: 54rpx 8rpx 34rpx; font-size: 52rpx; line-height: 1.18; font-weight: 900; }
.pair { position: relative; }
.choice { position: relative; min-height: 360rpx; padding: 34rpx; box-sizing: border-box; border-radius: 38rpx; color: #fff; box-shadow: 0 20rpx 50rpx rgba(80, 35, 18, .14); }
.choice + .choice { margin-top: 24rpx; }
.choice-a { background: #ff6b35; transform: rotate(-1deg); }
.choice-b { background: #2766df; transform: rotate(1deg); }
.choice:active { transform: scale(.975); }
.choice-index { width: 54rpx; height: 54rpx; line-height: 54rpx; text-align: center; border: 2rpx solid rgba(255,255,255,.6); border-radius: 50%; font-size: 24rpx; font-weight: 800; }
.food-mark { position: absolute; right: 34rpx; top: 24rpx; font-size: 92rpx; opacity: .8; transform: rotate(12deg); }
.choice-name { margin-top: 72rpx; font-size: 60rpx; line-height: 1.12; font-weight: 900; }
.tap-hint { margin-top: 54rpx; font-size: 24rpx; opacity: .75; }
.versus { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); width: 84rpx; height: 84rpx; line-height: 84rpx; text-align: center; color: #201d1b; background: #fff; border: 5rpx solid #201d1b; border-radius: 50%; font-size: 26rpx; font-weight: 900; }
.round-note { margin: 38rpx 0; text-align: center; color: #8f827a; font-size: 24rpx; }
.saving { position: fixed; left: 50%; bottom: 70rpx; transform: translateX(-50%); padding: 22rpx 34rpx; border-radius: 99rpx; background: #201d1b; color: #fff; font-size: 25rpx; }