.bt-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .bt-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.bt-stage { width: 100%; max-width: 460px; margin: 0 auto; }
.bt-svg { display: block; width: 100%; height: auto; cursor: pointer; overflow: visible; -webkit-tap-highlight-color: transparent; }
.bt-stage.is-spinning .bt-svg { cursor: progress; }
.bt-live { margin: 0; min-height: 1.4em; word-break: keep-all; }

.bt-table { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.bt-dial { fill: var(--surface); stroke: var(--border-strong); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.bt-tick { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.bt-hour { fill: var(--text-3); font-size: 22px; font-weight: 800; font-family: var(--font-num); }
.bt-wedge { opacity: .28; animation: bb-fade .4s ease-out; }

.bt-name { transition: opacity .3s ease; }
.bt-pill { stroke: rgba(255, 255, 255, .85); stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.bt-name-text { font-weight: 800; font-family: var(--font); }
.bt-name.is-dim { opacity: .38; }
.bt-name.is-hit .bt-pill { stroke: var(--text); stroke-width: 4; }
.bt-name.is-hit { animation: bt-hit .7s ease-in-out 3; transform-box: fill-box; transform-origin: center; }
@keyframes bt-hit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* 물병 */
.bt-spinner { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); }
.bt-cap { fill: #2f80ed; stroke: #1d5fb8; stroke-width: 2; }
.bt-cap-ring { fill: #1d5fb8; }
.bt-body { fill: rgba(170, 222, 250, .92); stroke: #4aa3d6; stroke-width: 3; stroke-linejoin: round; }
.bt-water { fill: rgba(47, 128, 237, .28); }
.bt-label { fill: #ffffff; stroke: #cfe6f5; stroke-width: 1.5; }
.bt-wave { fill: none; stroke: #2f80ed; stroke-width: 4; stroke-linecap: round; }
.bt-shine { fill: rgba(255, 255, 255, .7); }
/* 화살표 */
.bt-arrow { fill: #ff5a36; stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; }
.bt-arrow-tail { fill: #ffb020; stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; }
.bt-hub { fill: #ffffff; stroke: #1d2030; stroke-width: 5; }
.bt-hub-dot { fill: #1d2030; }

.game-shell.is-full .bt-layout { flex: 1; align-content: center; }
.game-shell.is-full .bt-stage { max-width: min(560px, 62vh); }