:root {
--cdg-cine-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cdg-cine-dur: 0.32s;
--cdg-cine-glow-violet: rgba(124, 58, 237, 0.14);
--cdg-cine-glow-cyan: rgba(8, 145, 178, 0.12);
--cdg-cine-glow-amber: rgba(245, 158, 11, 0.14);
--cdg-cine-glow-green: rgba(34, 197, 94, 0.16);
} body.cdg-ux-v080.cdg-playing--active #cdg-audio-sticky.cdg-audio-dock {
padding: 0.18rem 0.28rem;
gap: 0.28rem;
max-width: min(11.5rem, calc(100vw - 1.25rem));
border-radius: 999px;
background: rgba(15, 23, 42, 0.62);
border: 1px solid rgba(148, 163, 184, 0.22);
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body.cdg-ux-v080 .cdg-audio-dock__cluster {
display: inline-flex;
align-items: center;
gap: 0.1rem;
padding: 0.1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__listen,
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__auto,
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__power {
min-width: 1.85rem;
min-height: 1.85rem;
padding: 0.15rem 0.35rem;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
border: none;
background: transparent;
box-shadow: none;
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__listen--playing {
background: rgba(34, 197, 94, 0.22);
border-radius: 999px;
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__auto--off,
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__power--off {
opacity: 0.42;
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__settings {
min-width: 1.85rem;
min-height: 1.85rem;
padding: 0.15rem 0.3rem;
font-size: 0.72rem;
border: none;
background: transparent;
box-shadow: none;
opacity: 0.88;
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__status {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__status--warn,
body.cdg-ux-v080.cdg-playing--active .cdg-audio-dock__status--error {
position: static;
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
font-size: 0.62rem;
max-width: 4.5rem;
padding-left: 0.15rem;
} body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-game-status {
opacity: 0.7;
font-size: 0.68rem;
padding: 0.3rem 0.5rem;
margin-bottom: 0.45rem;
}
body.cdg-ux-v080 .cdg-play-stack {
max-width: min(36rem, calc(100vw - 1.1rem));
gap: 1.1rem;
}
body.cdg-ux-v080 .cdg-play-footer {
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
margin-top: 0.15rem;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-play-footer .cdg-btn-next,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-play-footer .cdg-quiz__feedback {
visibility: visible !important;
opacity: 1 !important;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage.cdg-play-live,
body.cdg-ux-v080.cdg-playing--active.cdg-play-portaled .cdg-play-stage {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-quiz__question-title,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage #cdg-daily-question-title,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage #cdg-cultural-question-title {
font-size: clamp(1.22rem, 2.8vw + 0.88rem, 1.62rem);
line-height: 1.52;
letter-spacing: 0.012em;
text-align: center;
margin: 0.35rem auto 0.85rem;
max-width: 28rem;
padding: 0.15rem 0.25rem 0.35rem;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-quiz__progress,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage #cdg-daily-progress,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage #cdg-cultural-progress {
align-self: center;
font-size: 0.72rem;
margin-bottom: 0.35rem;
}
body.cdg-ux-v080.cdg-playing--active .cdg-quiz-timer {
font-size: 0.78rem;
opacity: 0.92;
}
body.cdg-ux-v080.cdg-playing--active .cdg-quiz__feedback {
text-align: center;
font-size: 0.92rem;
margin-top: 0.65rem;
} .cdg-choices--reveal .cdg-answer,
.cdg-choices--reveal .cdg-quiz__choice {
transition:
opacity var(--cdg-cine-dur) var(--cdg-cine-ease),
transform var(--cdg-cine-dur) var(--cdg-cine-ease),
box-shadow var(--cdg-cine-dur) var(--cdg-cine-ease),
border-color var(--cdg-cine-dur) var(--cdg-cine-ease);
}
.cdg-choices--reveal .cdg-answer--selected,
.cdg-choices--reveal .cdg-quiz__choice--selected {
animation: cdg-cine-selected-hold 0.28s var(--cdg-cine-ease) both;
}
.cdg-choices--reveal .cdg-answer--correct,
.cdg-choices--reveal .cdg-quiz__choice--correct {
animation: cdg-cine-reveal-correct 0.4s var(--cdg-cine-ease) both;
box-shadow:
inset 0 0 0 1px rgba(34, 197, 94, 0.35),
0 6px 22px var(--cdg-cine-glow-green);
}
.cdg-choices--reveal .cdg-answer--wrong,
.cdg-choices--reveal .cdg-quiz__choice--wrong {
animation: cdg-cine-reveal-wrong 0.36s var(--cdg-cine-ease) both;
}
.cdg-choices--reveal .cdg-quiz__feedback {
animation: cdg-cine-feedback-in 0.38s var(--cdg-cine-ease) both;
}
@keyframes cdg-cine-selected-hold {
from { opacity: 0.92; transform: scale(0.992); }
to { opacity: 1; transform: scale(1); }
}
@keyframes cdg-cine-reveal-correct {
from {
opacity: 0.65;
transform: scale(0.988);
filter: blur(0.6px);
}
to {
opacity: 1;
transform: scale(1);
filter: none;
}
}
@keyframes cdg-cine-reveal-wrong {
from { opacity: 0.7; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cdg-cine-feedback-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
} body.cdg-ux-v080[data-cdg-mood="waiting"] .cdg-play-stage::before {
box-shadow:
inset 0 0 0 1px rgba(124, 58, 237, 0.1),
0 12px 40px var(--cdg-cine-glow-violet);
}
body.cdg-ux-v080[data-cdg-mood="reading"] .cdg-play-stage::before {
box-shadow:
inset 0 0 0 1px rgba(8, 145, 178, 0.12),
0 12px 42px var(--cdg-cine-glow-cyan);
}
body.cdg-ux-v080[data-cdg-mood="tension"] .cdg-play-stage::before {
box-shadow:
inset 0 0 0 1px rgba(245, 158, 11, 0.16),
0 10px 36px var(--cdg-cine-glow-amber);
}
body.cdg-ux-v080[data-cdg-mood="tension"] .cdg-quiz-timer--low .cdg-quiz-timer__bar {
animation: cdg-cine-timer-pulse 1.2s ease-in-out infinite;
}
body.cdg-ux-v080[data-cdg-mood="reveal"] .cdg-play-stage::before {
box-shadow:
inset 0 0 0 1px rgba(34, 197, 94, 0.14),
0 14px 44px var(--cdg-cine-glow-green);
}
@keyframes cdg-cine-timer-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.72; }
} body.cdg-ux-v080 .cdg-end-screen--in {
animation: cdg-cine-end-in 0.42s var(--cdg-cine-ease) both;
}
body.cdg-ux-v080 .cdg-play-stage.cdg-end-screen--outro {
animation: cdg-cine-play-outro 0.4s var(--cdg-cine-ease) both;
}
@keyframes cdg-cine-end-in {
from {
opacity: 0;
transform: translateY(10px) scale(0.992);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes cdg-cine-play-outro {
from { opacity: 1; transform: scale(1); filter: none; }
to { opacity: 0.88; transform: scale(0.996); filter: blur(0.4px); }
} @media (max-width: 390px) {
body.cdg-ux-v080.cdg-playing--active #cdg-audio-sticky.cdg-audio-dock {
left: max(0.5rem, env(safe-area-inset-left));
bottom: max(0.45rem, env(safe-area-inset-bottom));
max-width: min(10.5rem, calc(100vw - 1rem));
transform: scale(0.96);
transform-origin: left bottom;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage .cdg-quiz__question-title,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage #cdg-daily-question-title {
font-size: clamp(1.1rem, 4.2vw + 0.45rem, 1.32rem);
line-height: 1.48;
margin-bottom: 0.65rem;
}
body.cdg-ux-v080 .cdg-answer,
body.cdg-ux-v080 .cdg-quiz__choice {
min-height: 2.55rem;
padding: 0.5rem 0.72rem;
gap: 0.55rem;
}
body.cdg-ux-v080 .cdg-play-stack {
gap: 0.85rem;
}
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage.cdg-game-card,
body.cdg-ux-v080.cdg-playing--active .cdg-play-stage.cdg-quiz__panel--play {
padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
}
} @media (prefers-reduced-motion: reduce) {
.cdg-choices--reveal .cdg-answer,
.cdg-choices--reveal .cdg-quiz__choice,
.cdg-choices--reveal .cdg-quiz__feedback,
body.cdg-ux-v080 .cdg-end-screen--in,
body.cdg-ux-v080 .cdg-play-stage.cdg-end-screen--outro,
body.cdg-ux-v080[data-cdg-mood="tension"] .cdg-quiz-timer--low .cdg-quiz-timer__bar {
animation: none !important;
transition: none !important;
filter: none !important;
}
}