#cdg-dfb-sound.cdg-dfb-sound {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-width: 44px;
min-height: 44px;
padding: 0.5rem 0.95rem;
font-size: 0.84rem;
line-height: 1.2;
font-weight: 800;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
}
body.cdg-dancefloor-battle:not(.cdg-playing--active):not(.cdg-dfb-intro-open) #cdg-dfb-sound.cdg-dfb-sound {
position: fixed;
top: max(0.7rem, env(safe-area-inset-top, 0px));
left: max(0.7rem, env(safe-area-inset-left, 0px));
z-index: 80;
margin: 0;
}
body:has(#cdg-panel-play:not([hidden])) #cdg-dfb-sound.cdg-dfb-sound,
body:has(#cdg-panel-done:not([hidden])) #cdg-dfb-sound.cdg-dfb-sound,
body:has(#cdg-dfb-intro:not([hidden])) #cdg-dfb-sound.cdg-dfb-sound,
body.cdg-playing--active #cdg-dfb-sound.cdg-dfb-sound,
body.cdg-dfb-intro-open #cdg-dfb-sound.cdg-dfb-sound {
position: static;
box-shadow: none;
} body.cdg-playing--active .cdl-global-live,
body.cdg-playing--active .cdl-global-live__fab,
body.cdg-playing--active #cdl-global-live,
body.cdg-playing--active .cdsn-classic-chip,
body.cdg-playing--active #car-root,
body.cdg-playing--active .car-root,
body.cdg-playing--active .cda-assistant,
body.cdg-playing--active .cda-assistant__toggle,
body.cdg-playing--active .cd-compare-bar,
body.cdg-playing--active #cd-compare-bar,
body.cdg-playing--active .cd-fab-dock-managed:not(.cdg-audio-sticky):not(#cdg-audio-sticky),
body.cdg-playing--active #cd-install-fab,
body.cdg-playing--active .cd-install-fab,
body.cdg-dfb-intro-open .cdl-global-live,
body.cdg-dfb-intro-open .cdl-global-live__fab,
body.cdg-dfb-intro-open .cdsn-classic-chip,
body.cdg-dfb-intro-open #car-root,
body.cdg-dfb-intro-open .cda-assistant,
body.cdg-dfb-intro-open .cda-assistant__toggle,
body.cdg-dfb-intro-open .cd-compare-bar,
body:has(#cdg-panel-play:not([hidden])) .cdl-global-live,
body:has(#cdg-panel-play:not([hidden])) .cdl-global-live__fab,
body:has(#cdg-panel-play:not([hidden])) .cdsn-classic-chip,
body:has(#cdg-panel-play:not([hidden])) #car-root,
body:has(#cdg-panel-play:not([hidden])) .cda-assistant,
body:has(#cdg-panel-play:not([hidden])) .cda-assistant__toggle,
body:has(#cdg-panel-play:not([hidden])) .cd-compare-bar,
body:has(#cdg-panel-done:not([hidden])) .cdl-global-live,
body:has(#cdg-panel-done:not([hidden])) .cdl-global-live__fab,
body:has(#cdg-panel-done:not([hidden])) .cdsn-classic-chip,
body:has(#cdg-panel-done:not([hidden])) #car-root,
body:has(#cdg-panel-done:not([hidden])) .cda-assistant,
body:has(#cdg-panel-done:not([hidden])) .cda-assistant__toggle,
body:has(#cdg-panel-done:not([hidden])) .cd-compare-bar,
body:has(#cdg-dfb-intro:not([hidden])) .cdl-global-live,
body:has(#cdg-dfb-intro:not([hidden])) .cdl-global-live__fab,
body:has(#cdg-dfb-intro:not([hidden])) .cdsn-classic-chip,
body:has(#cdg-dfb-intro:not([hidden])) #car-root,
body:has(#cdg-dfb-intro:not([hidden])) .cda-assistant,
body:has(#cdg-dfb-intro:not([hidden])) .cda-assistant__toggle,
body:has(#cdg-dfb-intro:not([hidden])) .cd-compare-bar {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
body.cdg-playing--active .cdg-play-stage,
body:has(#cdg-panel-play:not([hidden])) #cdg-panel-play,
body:has(#cdg-panel-done:not([hidden])) #cdg-panel-done {
position: relative;
z-index: 90;
} .cdg-pregame__card[data-pregame-dfb-mix-block] {
border: 1px solid rgba(124, 58, 237, 0.38);
background:
linear-gradient(180deg, rgba(124, 58, 237, 0.08), rgba(255, 255, 255, 0.96));
}
.cdg-pregame__card[data-pregame-audio-block] {
border: 1px solid rgba(8, 145, 178, 0.28);
} .cdg-play--climax .cdg-climax-badge,
#cdg-climax-badge {
max-width: 100%;
white-space: normal;
text-transform: none;
letter-spacing: 0.03em;
line-height: 1.35;
text-align: center;
} body.cdg-playing--active .cdg-play-stage .cdg-quiz-timer,
body.cdg-playing--active .cdg-play-stage .cdg-timer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"label secs"
"track track";
column-gap: 0.85rem;
row-gap: 0.4rem;
align-items: center;
}
body.cdg-playing--active .cdg-play-stage .cdg-quiz-timer__label,
body.cdg-playing--active .cdg-play-stage .cdg-timer__label {
grid-area: label;
flex: none;
min-width: 0;
padding-right: 0.15rem;
white-space: normal;
}
body.cdg-playing--active .cdg-play-stage .cdg-quiz-timer__secs,
body.cdg-playing--active .cdg-play-stage .cdg-timer__secs {
grid-area: secs;
margin-left: 0;
min-width: 3.25rem;
text-align: right;
}
body.cdg-playing--active .cdg-play-stage .cdg-quiz-timer__track,
body.cdg-playing--active .cdg-play-stage .cdg-timer__track {
grid-area: track;
flex: none;
width: 100%;
max-width: none;
} .cdg-end-screen .cdg-perf__rank,
.cdg-end-screen .cdg-perf__ranks .cdg-perf__rank {
overflow: visible;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.4;
}
@media (max-width: 390px) {
.cdg-end-screen .cdg-perf__rank {
font-size: 0.8rem;
padding: 0.7rem 0.75rem;
}
#cdg-dfb-sound.cdg-dfb-sound [data-dfb-sound-label] {
max-width: 11.5rem;
}
}