.vpol, .vpol * { box-sizing: border-box; }
.vpol {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
color: #2B292D;
}
.vpol-frame {
position: absolute; inset: .75em;
font-size: 8px;
font-size: clamp(8px, 4.4px + 1.06cqw, 14.5px);
display: flex; overflow: hidden; border-radius: .5em;
}
.vpol-game {
flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
padding: 4% 5.5% 3.5%; background: rgba(43, 41, 45, .045);
}
.vpol-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 2em; }
.vpol-round { display: block; width: 3.25em; height: .5em; border-radius: .25em; background: rgba(43, 41, 45, .2); }
.vpol-total {
display: flex; align-items: center; gap: .3em;
font-size: 1em; font-weight: 700; line-height: 1.25em; color: rgba(43, 41, 45, .55);
}
.vpol-num  { display: block; height: 1.25em; overflow: hidden; }
.vpol-roll { display: block; transform: translateY(0); }
.vpol-n    { display: block; height: 1.25em; line-height: 1.25em; font-weight: 700; text-align: right; }
.vpol-qwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.vpol-qline { display: block; height: .625em; border-radius: .3125em; background: rgba(43, 41, 45, .34); }
.vpol-qline--1 { width: 88%; }
.vpol-qline--2 { width: 52%; margin-top: .5em; background: rgba(43, 41, 45, .24); }
.vpol-opts { flex: 0 0 50%; min-height: 0; display: flex; flex-direction: column; gap: .5em; }
.vpol-opt {
flex: 1 1 0; min-height: 0; position: relative; display: flex; align-items: center; gap: .625em;
padding: 0 .625em; overflow: hidden; border-radius: .5em; background: rgba(43, 41, 45, .075);
}
.vpol-bar {
position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; display: block;
background: rgba(43, 41, 45, .2); transform: scaleX(1); transform-origin: left center;
}
.vpol-opt--1 .vpol-bar { width: 60%; background: #00ffff; transform: scaleX(.8); }
.vpol-opt--2 .vpol-bar { width: 38%; transform: scaleX(.86); }
.vpol-opt--3 .vpol-bar { width: 20%; }
.vpol-key {
position: relative; z-index: 1; flex: 0 0 auto; display: block; height: 1.625em;
padding: 0 .6em; border-radius: .8125em; background: #fff;
font-size: 1em; font-weight: 700; line-height: 1.625em; color: #2B292D;
}
.vpol-label { position: relative; z-index: 1; flex: 0 0 auto; display: block; height: .625em; border-radius: .3125em; background: rgba(43, 41, 45, .38); }
.vpol-opt--1 .vpol-label { width: 26%; }
.vpol-opt--2 .vpol-label { width: 20%; }
.vpol-opt--3 .vpol-label { width: 23%; }
.vpol-res { position: relative; z-index: 1; flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: .375em; }
.vpol-faces { display: flex; }
.vpol-faces > img { display: block; width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; }
.vpol-faces > img + img { margin-left: .19em; }
.vpol-res .vpol-num { min-width: 1.6em; color: rgba(43, 41, 45, .55); }
.vpol-opt--1 .vpol-res .vpol-num { color: #2B292D; }
.vpol-foot {
flex: 0 0 auto; display: block; margin-top: .625em; font-size: 1em; font-weight: 700;
line-height: 1.125em; text-align: center; color: rgba(43, 41, 45, .5);
}
.vpol-cam { flex: 0 0 33%; position: relative; display: block; overflow: hidden; background: rgba(43, 41, 45, .12); }
.vpol-shot { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vpol .dw-live { top: .75em; left: .75em; z-index: 2; font-size: 1.0625em; }
.vpol .dw-cm {
left: .75em; bottom: .75em; z-index: 2;
font-size: 1em;
max-width: calc(100% - 1.5em);
}
.vpol .vpol-cm--1 { transform: translateY(0);    opacity: 1; }
.vpol .vpol-cm--2 { transform: translateY(150%); opacity: 0; }
.vpol .vpol-cm--3 { transform: translateY(150%); opacity: 0; }
.vpol .vpol-cm--4 { transform: translateY(150%); opacity: 0; }
@keyframes vpol-cm1 {
0%,     11%  { transform: translateY(0);     opacity: 1; }
16%,    27%  { transform: translateY(-115%); opacity: 1; }
31%,    42%  { transform: translateY(-230%); opacity: 1; }
47%,    88%  { transform: translateY(-345%); opacity: 1; }
93%          { transform: translateY(-345%); opacity: 0; }
93.01%, 96%  { transform: translateY(0);     opacity: 0; }
100%         { transform: translateY(0);     opacity: 1; }
}
@keyframes vpol-cm2 {
0%,     11%  { transform: translateY(150%);  opacity: 0; }
16%,    27%  { transform: translateY(0);     opacity: 1; }
31%,    42%  { transform: translateY(-115%); opacity: 1; }
47%,    88%  { transform: translateY(-230%); opacity: 1; }
93%          { transform: translateY(-230%); opacity: 0; }
93.01%, 100% { transform: translateY(150%);  opacity: 0; }
}
@keyframes vpol-cm3 {
0%,     26%  { transform: translateY(150%);  opacity: 0; }
31%,    42%  { transform: translateY(0);     opacity: 1; }
47%,    88%  { transform: translateY(-115%); opacity: 1; }
93%          { transform: translateY(-115%); opacity: 0; }
93.01%, 100% { transform: translateY(150%);  opacity: 0; }
}
@keyframes vpol-cm4 {
0%,     42%  { transform: translateY(150%);  opacity: 0; }
47%,    88%  { transform: translateY(0);     opacity: 1; }
93%          { transform: translateY(0);     opacity: 0; }
93.01%, 100% { transform: translateY(150%);  opacity: 0; }
}
@keyframes vpol-bar1 {
0%,     35%  { transform: scaleX(.8); }
41%,    51%  { transform: scaleX(.9); }
57%,    96%  { transform: scaleX(1); }
96.01%, 100% { transform: scaleX(.8); }
}
@keyframes vpol-bar2 {
0%,     19%  { transform: scaleX(.86); }
25%,    96%  { transform: scaleX(1); }
96.01%, 100% { transform: scaleX(.86); }
}
@keyframes vpol-roll1 {
0%,     35%  { transform: translateY(0); }
40%,    51%  { transform: translateY(-1.25em); }
56%,    96%  { transform: translateY(-2.5em); }
96.01%, 100% { transform: translateY(0); }
}
@keyframes vpol-roll2 {
0%,     19%  { transform: translateY(0); }
24%,    96%  { transform: translateY(-1.25em); }
96.01%, 100% { transform: translateY(0); }
}
@keyframes vpol-total {
0%,     19%  { transform: translateY(0); }
24%,    35%  { transform: translateY(-1.25em); }
40%,    51%  { transform: translateY(-2.5em); }
56%,    96%  { transform: translateY(-3.75em); }
96.01%, 100% { transform: translateY(0); }
}
@keyframes vpol-next {
0%,     90%  { opacity: 1; }
96%          { opacity: 0; }
96.01%       { opacity: 0; }
100%         { opacity: 1; }
}
.pillar-panel.is-active .vpol-cm--1 { animation: vpol-cm1 7.5s cubic-bezier(.22, .72, .24, 1) infinite; }
.pillar-panel.is-active .vpol-cm--2 { animation: vpol-cm2 7.5s cubic-bezier(.22, .72, .24, 1) infinite; }
.pillar-panel.is-active .vpol-cm--3 { animation: vpol-cm3 7.5s cubic-bezier(.22, .72, .24, 1) infinite; }
.pillar-panel.is-active .vpol-cm--4 { animation: vpol-cm4 7.5s cubic-bezier(.22, .72, .24, 1) infinite; }
.pillar-panel.is-active .vpol-opt--1 .vpol-bar  { animation: vpol-bar1  7.5s cubic-bezier(.25, .9, .3, 1) infinite; }
.pillar-panel.is-active .vpol-opt--2 .vpol-bar  { animation: vpol-bar2  7.5s cubic-bezier(.25, .9, .3, 1) infinite; }
.pillar-panel.is-active .vpol-opt--1 .vpol-roll { animation: vpol-roll1 7.5s cubic-bezier(.45, 0, .15, 1) infinite; }
.pillar-panel.is-active .vpol-opt--2 .vpol-roll { animation: vpol-roll2 7.5s cubic-bezier(.45, 0, .15, 1) infinite; }
.pillar-panel.is-active .vpol-roll--total       { animation: vpol-total 7.5s cubic-bezier(.45, 0, .15, 1) infinite; }
.pillar-panel.is-active .vpol-opts,
.pillar-panel.is-active .vpol-total { animation: vpol-next 7.5s ease-in-out infinite; }
.pillar-panel.is-active .vpol .dw-live .dw-live-dot { animation: dw-pulse 1.25s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.vpol, .vpol *,
.pillar-panel.is-active .vpol * {
animation: none !important;
transition: none !important;
}
}