.auc { display: flex; flex-direction: column; gap: 18px; }
.auc-head { display: flex; align-items: center; gap: 14px; }
.auc-title { font-size: 24px; }
.auc-fee { color: var(--muted); font-size: 13px; }
.auc-empty { color: var(--muted); text-align: center; margin: 0; }
.auc-ph { background: var(--bg3); box-shadow: inset 0 0 0 4px var(--ink); flex: none; }

.auc-stage { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 18px; }
.auc-empty-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.auc-host { display: flex; flex-direction: column; align-items: center; width: 128px; flex: none; }
.auc-host-sprite { position: relative; z-index: 0; transform-origin: 50% 100%; }
.auc-podium { position: relative; z-index: 1; margin-top: -56px; }

.auc-item { width: 180px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.auc-val { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 13px; }

.auc-board { position: relative; width: 256px; height: 176px; flex: none; }
.auc-board-art { position: absolute; left: 0; top: 0; }
.auc-board-in { position: absolute; inset: 16px 16px 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; background: #241a14; box-shadow: inset 0 0 0 4px var(--ink); padding: 8px; }
.auc-board .auc-ph { position: absolute; inset: 0; }
.auc-label { color: var(--muted); font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-timer { font-size: 16px; font-variant-numeric: tabular-nums; }
.auc-timer.hot { color: var(--bad); animation: auc-blink .5s steps(1) infinite; }
.auc-call { min-height: 20px; font-size: 15px; color: var(--muted); }
.auc-call.going { color: var(--accent); animation: auc-stamp .3s var(--spring); }
.auc-call.ext { color: #6fd6ff; }
.auc-call.sold { color: var(--accent); font-size: 22px; animation: auc-stamp .4s var(--spring); }
.auc-board.sold .auc-timer { color: var(--good); font-size: 14px; }
@keyframes auc-blink { 50% { opacity: .35; } }
@keyframes auc-stamp { from { transform: scale(2); opacity: 0; } }

.auc-feed { width: 220px; height: 176px; flex: none; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.auc-feed-head { color: var(--muted); font-size: 13px; }
.auc-feed-list { display: flex; flex-direction: column; gap: 6px; }
.auc-bid { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.auc-bid .auc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-bid.new { animation: auc-in .3s var(--spring); color: var(--accent); }
.auc-bid.ext .auc-who { color: #6fd6ff; }
@keyframes auc-in { from { transform: translateX(-24px); opacity: 0; } }

.auc-lots { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.auc-lot { font: inherit; color: var(--fg); border: 0; cursor: pointer; width: 240px; padding: 10px 12px 14px; display: flex; align-items: center; gap: 10px; text-align: left; }
.auc-lot.sel { background: var(--bg3); }
.auc-lot.sel::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); }
.auc-lot-art { width: 96px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.auc-lot-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; }
.auc-lot-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-lot-timer { color: var(--muted); font-variant-numeric: tabular-nums; }

.auc-tabs { display: flex; gap: 10px; margin-top: -6px; }
.auc-tab .auc-count { min-width: 0; }
.auc-tab .auc-count:not(:empty) { margin-left: 8px; }

.auc-buy { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.auc-bidbar { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 64px; }
.auc-paddle { display: inline-flex; align-items: center; gap: 10px; }
.auc-paddle-ph { width: 30px; height: 36px; background: #b5462e; box-shadow: inset 0 0 0 3px var(--ink); flex: none; }
.auc-mine { color: var(--muted); font-size: 14px; min-width: 220px; }
.auc-mine.lead { color: #6fd6ff; }
.auc-bid.me .auc-who { color: #6fd6ff; }
.auc-bid.lead { background: rgba(111, 214, 255, .14); box-shadow: inset 3px 0 0 0 #6fd6ff; padding: 0 4px 0 8px; margin: 0 -4px 0 -8px; }

.auc-recent { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.auc-recent-head { color: var(--muted); font-size: 13px; }
.auc-sale { display: grid; grid-template-columns: 1fr 160px auto; gap: 12px; align-items: center; }
.auc-sale-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-sale-buyer { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auc-sale.up .num { color: var(--good); }
.auc-sale.down .num { color: var(--muted); }

.auc-grid { display: grid; grid-template-columns: repeat(auto-fill, 150px); justify-content: center; gap: 12px; max-height: 60vh; overflow-y: auto; padding: 6px; }
.auc-grid .card { cursor: pointer; }
.auc-confirm { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
.auc-terms { width: 360px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.auc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auc-k { color: var(--muted); }
.auc-v { display: inline-flex; align-items: center; gap: 8px; }
.auc-to { color: var(--muted); }
.auc-note { color: var(--muted); font-size: 13px; margin: 0; line-height: 1.4; }
.auc-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }

.wheel-box { width: 320px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wheel-title { font-size: 24px; }
.wheel-rig { position: relative; width: 224px; height: 272px; margin-top: 30px; }
.wheel-disc { position: absolute; left: 0; top: 0; width: 224px; height: 224px; z-index: 2; transform-origin: 50% 50%; }
.wheel-stand { position: absolute; left: 0; top: 176px; z-index: 1; }
.wheel-ph { width: 224px; height: 96px; background: #6b4320; box-shadow: inset 0 0 0 4px var(--ink), inset 0 8px 0 0 #8a5a2b; }
.wheel-ptr { position: absolute; left: 94px; top: -26px; z-index: 3; transform-origin: 50% 0; }
.wheel-result { min-height: 88px; display: flex; align-items: center; justify-content: center; }
.wheel-hint { color: var(--muted); font-size: 13px; text-align: center; }
.wheel-prize { display: flex; align-items: center; gap: 14px; font-size: 20px; }
.wheel-prize-art { display: flex; align-items: center; justify-content: center; min-width: 32px; }
.wheel-prize.jackpot { color: var(--accent); font-size: 26px; }
.wheel-status { color: var(--muted); font-size: 14px; min-height: 18px; text-align: center; }
.wheel-actions { display: flex; gap: 12px; }
.wheel-vouchers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wheel-vouchers:empty { display: none; }