:root {
--cdg-ad-bg-deep: #0c1224;
--cdg-ad-bg-mid: #151b3d;
--cdg-ad-bg-card: rgba(255, 255, 255, 0.97);
--cdg-ad-text: #0f172a;
--cdg-ad-text-soft: #334155;
--cdg-ad-violet: #7c3aed;
--cdg-ad-magenta: #db2777;
--cdg-ad-blue: #2563eb;
--cdg-ad-cyan: #0891b2;
--cdg-ad-gold: #fbbf24;
--cdg-ad-glow-violet: rgba(124, 58, 237, 0.35);
--cdg-ad-glow-magenta: rgba(219, 39, 119, 0.28);
--cdg-ad-glow-cyan: rgba(8, 145, 178, 0.25);
--cdg-ad-radius: 18px;
--cdg-ad-shadow: 0 14px 40px rgba(8, 12, 36, 0.18);
--cdg-ad-a: var(--cdg-ad-violet);
--cdg-ad-b: var(--cdg-ad-magenta);
--cdg-ad-c: var(--cdg-ad-blue);
--cdg-ad-d: var(--cdg-ad-cyan);
} .cdg-jeux-page {
position: relative;
}
.cdg-jeux-hero {
position: relative;
margin: 0 0 1.75rem;
padding: 1.35rem 1.25rem 1.5rem;
border-radius: calc(var(--cdg-ad-radius) + 4px);
overflow: hidden;
color: #f8fafc;
background:
radial-gradient(ellipse 120% 80% at 10% 0%, rgba(124, 58, 237, 0.45), transparent 55%),
radial-gradient(ellipse 90% 70% at 90% 20%, rgba(219, 39, 119, 0.35), transparent 50%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(8, 145, 178, 0.3), transparent 55%),
linear-gradient(145deg, var(--cdg-ad-bg-mid) 0%, var(--cdg-ad-bg-deep) 100%);
box-shadow: var(--cdg-ad-shadow);
}
.cdg-jeux-hero::after {
content: "♪";
position: absolute;
top: 1rem;
right: 1.1rem;
font-size: 1.35rem;
opacity: 0.55;
pointer-events: none;
}
.cdg-jeux-hero__title {
margin: 0 0 0.35rem;
font-size: clamp(1.35rem, 4vw, 1.75rem);
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.25;
}
.cdg-jeux-hero__tagline {
margin: 0 0 1rem;
font-size: 0.95rem;
line-height: 1.5;
color: rgba(248, 250, 252, 0.88);
max-width: 36rem;
}
.cdg-jeux-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.cdg-jeux-hero__stat {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.75rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
font-size: 0.82rem;
font-weight: 700;
backdrop-filter: blur(6px);
}
.cdg-jeux-hero__stat--pulse {
background: rgba(251, 191, 36, 0.18);
border-color: rgba(251, 191, 36, 0.45);
color: #fde68a;
}
.cdg-jeux-hero__progress {
margin-top: 1rem;
padding: 0.75rem 0.85rem;
border-radius: 12px;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.cdg-jeux-hero__progress-label {
margin: 0 0 0.35rem;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(248, 250, 252, 0.75);
}
.cdg-jeux-hero__progress-bar {
height: 0.45rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.cdg-jeux-hero__progress-bar span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--cdg-ad-violet), var(--cdg-ad-magenta), var(--cdg-ad-cyan));
transition: width 0.5s ease;
}
.cdg-jeux-hero__progress-meta {
margin: 0.35rem 0 0;
font-size: 0.8rem;
color: rgba(248, 250, 252, 0.8);
} .cdg-quiz,
.cdg-daily,
.cdg-cultural-quiz,
.cdg-challenges,
.cdg-leaderboard,
.cdg-room {
margin-bottom: 1.75rem;
padding: 1.15rem 1.2rem 1.35rem;
border-radius: var(--cdg-ad-radius);
background: var(--cdg-ad-bg-card);
border: 1px solid rgba(148, 163, 184, 0.35);
box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.cdg-quiz__title,
.cdg-daily__title,
.cdg-leaderboard h2 {
color: var(--cdg-ad-text);
font-weight: 800;
}
.cdg-quiz__btn--primary,
.cdg-room__btn--launch {
background: linear-gradient(135deg, var(--cdg-ad-violet), var(--cdg-ad-magenta));
border: none;
color: #fff;
box-shadow: 0 8px 22px var(--cdg-ad-glow-magenta);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cdg-quiz__btn--primary:hover,
.cdg-room__btn--launch:hover,
.cdg-quiz__btn--primary:focus-visible,
.cdg-room__btn--launch:focus-visible {
transform: translateY(-1px);
box-shadow: 0 10px 28px var(--cdg-ad-glow-violet);
outline: none;
} body.cdg-playing {
scroll-behavior: smooth;
}
body.cdg-playing::before {
content: "";
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 60%),
radial-gradient(ellipse 70% 50% at 100% 100%, rgba(219, 39, 119, 0.15), transparent 55%),
linear-gradient(180deg, rgba(12, 18, 36, 0.55) 0%, rgba(12, 18, 36, 0.72) 100%);
opacity: 0;
transition: opacity 0.35s ease;
}
body.cdg-playing.cdg-playing--active::before {
opacity: 1;
}
body.cdg-playing .cdg-jeux-hero,
body.cdg-playing .cdg-challenges,
body.cdg-playing .cdg-daily:not(.cdg-app--in-play),
body.cdg-playing .cdg-cultural-quiz:not(.cdg-app--in-play),
body.cdg-playing .cdg-leaderboard,
body.cdg-playing .cdg-room:not(.cdg-app--in-play),
body.cdg-playing .cdg-quiz:not(.cdg-app--in-play) {
opacity: 0.2;
filter: blur(1px);
pointer-events: none;
user-select: none;
transition: opacity 0.35s ease, filter 0.35s ease;
}
.cdg-playing-focus {
position: relative;
z-index: 100;
transform: translateZ(0);
animation: cdg-focus-in 0.4s ease;
}
@keyframes cdg-focus-in {
from {
opacity: 0.6;
transform: translateY(8px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
body.cdg-playing::before,
.cdg-playing-focus,
.cdg-answer__bar span,
.cdg-room__answer-stats .cdg-answer__bar span {
animation: none !important;
transition: none !important;
}
} body.cdg-pregame-open {
overflow: hidden;
}
.cdg-pregame-portal {
position: fixed;
inset: 0;
z-index: 120000;
display: flex;
align-items: center;
justify-content: center;
padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
pointer-events: none;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(4px);
}
body.cdg-pregame-open .cdg-pregame-portal .cdg-pregame {
pointer-events: auto;
margin: 0;
width: min(920px, calc(100vw - 1.5rem));
max-height: min(90vh, 720px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}
.cdg-pregame {
margin: 0 0 1rem;
padding: 1.25rem 1.2rem 1.35rem;
border-radius: var(--cdg-ad-radius);
background: linear-gradient(160deg, rgba(124, 58, 237, 0.08), rgba(8, 145, 178, 0.08));
border: 2px solid rgba(124, 58, 237, 0.25);
max-width: 100%;
}
.cdg-pregame__title {
margin: 0 0 1rem;
font-size: 1.2rem;
font-weight: 800;
color: var(--cdg-ad-text);
}
.cdg-pregame__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 1.1rem;
}
@media (min-width: 560px) {
.cdg-pregame__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.cdg-pregame__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cdg-pregame__card {
padding: 0.85rem 0.95rem;
border-radius: 12px;
background: #fff;
border: 1px solid #e2e8f0;
min-height: 4.5rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cdg-pregame__score-mode {
margin: 0;
font-size: 0.82rem;
font-weight: 700;
color: #6366f1;
}
.cdg-pregame__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: stretch;
margin-top: 0.15rem;
}
.cdg-pregame__go {
flex: 1 1 14rem;
min-height: 3rem;
}
.cdg-pregame__back {
min-height: 3rem;
flex: 0 1 auto;
background: transparent;
border: 2px solid #94a3b8;
color: var(--cdg-ad-text-soft);
}
.cdg-pregame__card-label {
display: block;
margin-bottom: 0.25rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cdg-ad-text-soft);
}
.cdg-pregame__card-value {
font-size: 0.95rem;
font-weight: 700;
color: var(--cdg-ad-text);
}
.cdg-pregame__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
min-height: 3rem;
cursor: pointer;
}
.cdg-pregame__switch {
position: relative;
width: 2.75rem;
height: 1.55rem;
border-radius: 999px;
background: #cbd5e1;
border: none;
flex-shrink: 0;
transition: background 0.2s ease;
}
.cdg-pregame__switch[aria-checked="true"] {
background: linear-gradient(135deg, var(--cdg-ad-violet), var(--cdg-ad-magenta));
}
.cdg-pregame__switch::after {
content: "";
position: absolute;
top: 0.15rem;
left: 0.15rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transition: transform 0.2s ease;
}
.cdg-pregame__switch[aria-checked="true"]::after {
transform: translateX(1.15rem);
} .cdg-game-card,
.cdg-quiz__panel--play,
#cdg-daily-panel-play,
#cdg-cultural-panel-play,
.cdg-room__play-inner {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
border: 2px solid rgba(124, 58, 237, 0.2);
box-shadow:
var(--cdg-ad-shadow),
0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.cdg-game-status {
background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(8, 145, 178, 0.12));
border-color: rgba(124, 58, 237, 0.25);
color: #5b21b6;
}
.cdg-quiz__question-title,
.cdg-room__q-text,
#cdg-daily-question-title,
#cdg-cultural-question-title {
color: var(--cdg-ad-text);
text-shadow: none;
} .cdg-answer[data-key="A"],
.cdg-quiz__choice[data-key="A"] {
border-color: color-mix(in srgb, var(--cdg-ad-a) 55%, #fff);
background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--cdg-ad-a) 8%, #fff));
}
.cdg-answer[data-key="B"],
.cdg-quiz__choice[data-key="B"] {
border-color: color-mix(in srgb, var(--cdg-ad-b) 55%, #fff);
background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--cdg-ad-b) 8%, #fff));
}
.cdg-answer[data-key="C"],
.cdg-quiz__choice[data-key="C"] {
border-color: color-mix(in srgb, var(--cdg-ad-c) 55%, #fff);
background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--cdg-ad-c) 8%, #fff));
}
.cdg-answer[data-key="D"],
.cdg-quiz__choice[data-key="D"] {
border-color: color-mix(in srgb, var(--cdg-ad-d) 55%, #fff);
background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--cdg-ad-d) 8%, #fff));
}
.cdg-answer[data-key="A"]:hover:not(:disabled),
.cdg-answer[data-key="B"]:hover:not(:disabled),
.cdg-answer[data-key="C"]:hover:not(:disabled),
.cdg-answer[data-key="D"]:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}
.cdg-answer--selected[data-key="A"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdg-ad-a) 35%, transparent); }
.cdg-answer--selected[data-key="B"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdg-ad-b) 35%, transparent); }
.cdg-answer--selected[data-key="C"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdg-ad-c) 35%, transparent); }
.cdg-answer--selected[data-key="D"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdg-ad-d) 35%, transparent); }
.cdg-answer--correct {
background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
border-color: #86efac !important;
color: #14532d !important;
}
.cdg-answer--wrong {
background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
border-color: #fca5a5 !important;
color: #991b1b !important;
}
.cdg-quiz__feedback--ok {
background: rgba(34, 197, 94, 0.12);
border-left: 4px solid #22c55e;
color: #14532d;
padding: 0.65rem 0.85rem;
border-radius: 10px;
}
.cdg-quiz__feedback--ko,
.cdg-quiz__feedback--timeout {
background: rgba(239, 68, 68, 0.1);
border-left: 4px solid #f87171;
color: #991b1b;
padding: 0.65rem 0.85rem;
border-radius: 10px;
} .cdg-timer,
.cdg-quiz-timer {
margin-bottom: 0.85rem;
padding: 0.55rem 0.75rem;
border-radius: 12px;
background: linear-gradient(90deg, rgba(8, 145, 178, 0.12), rgba(124, 58, 237, 0.12));
border: 1px solid rgba(8, 145, 178, 0.25);
}
.cdg-quiz-timer__label {
font-weight: 800;
color: #0e7490;
}
.cdg-quiz-timer--urgent .cdg-quiz-timer__label,
.cdg-quiz-timer--urgent .cdg-quiz-timer__seconds {
color: #be185d;
}
.cdg-quiz-timer__track {
height: 0.5rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.1);
overflow: hidden;
}
.cdg-quiz-timer__track span {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--cdg-ad-cyan), var(--cdg-ad-violet));
transition: width 0.25s linear;
}
.cdg-quiz-timer--urgent .cdg-quiz-timer__track span {
background: linear-gradient(90deg, #f59e0b, #db2777);
} .cdg-audio-sticky {
position: fixed;
z-index: 120;
right: max(0.75rem, env(safe-area-inset-right));
bottom: max(0.85rem, env(safe-area-inset-bottom));
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.65rem 0.45rem 0.5rem;
border-radius: 999px;
background: rgba(15, 23, 42, 0.92);
border: 2px solid rgba(124, 58, 237, 0.55);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
color: #f8fafc;
backdrop-filter: blur(10px);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.cdg-audio-sticky[hidden] {
display: none !important;
}
.cdg-audio-sticky__pulse {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--cdg-ad-violet), var(--cdg-ad-magenta));
color: #fff;
font-size: 1.1rem;
cursor: pointer;
min-width: 48px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cdg-audio-sticky__pulse--playing {
animation: cdg-audio-pulse 1.2s ease-in-out infinite;
}
@keyframes cdg-audio-pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--cdg-ad-glow-magenta); }
50% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); }
}
.cdg-audio-sticky__label {
font-size: 0.82rem;
font-weight: 700;
max-width: 8rem;
line-height: 1.2;
}
.cdg-audio-sticky__auto {
font-size: 0.68rem;
opacity: 0.75;
display: block;
}
.cdg-sensitive-audio__btn,
.cdg-audio-control {
border-color: var(--cdg-ad-violet);
background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(219, 39, 119, 0.08));
color: #5b21b6;
} .cdg-room__player-card {
background: linear-gradient(135deg, #fff, rgba(124, 58, 237, 0.04));
border-color: rgba(124, 58, 237, 0.15);
transition: transform 0.15s ease;
}
.cdg-room__player-card--host {
border-color: rgba(251, 191, 36, 0.55);
box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}
.cdg-room__player-avatar {
background: linear-gradient(135deg, var(--cdg-ad-violet), var(--cdg-ad-magenta));
box-shadow: 0 4px 12px var(--cdg-ad-glow-violet);
}
.cdg-room__answer-stats .cdg-answer--stat {
position: relative;
overflow: hidden;
}
.cdg-room__answer-stats .cdg-answer__bar {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: rgba(15, 23, 42, 0.08);
}
.cdg-room__answer-stats .cdg-answer__bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--cdg-ad-violet), var(--cdg-ad-cyan));
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transform-origin: left center;
}
.cdg-room__answer-stats .cdg-answer--correct .cdg-answer__bar span {
background: linear-gradient(90deg, #22c55e, #86efac);
}
.cdg-room__winner {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
} @media (max-width: 390px) {
.cdg-jeux-hero {
padding: 1.1rem 1rem 1.25rem;
margin-bottom: 1.25rem;
}
.cdg-quiz,
.cdg-daily,
.cdg-cultural-quiz {
padding: 1rem;
}
.cdg-answer,
.cdg-quiz__choice,
.cdg-room__answer-btn {
min-height: 3.1rem;
}
.cdg-audio-sticky {
left: max(0.75rem, env(safe-area-inset-left));
right: max(0.75rem, env(safe-area-inset-right));
justify-content: center;
}
.cdg-audio-sticky__label {
max-width: none;
}
body.cdg-playing .cdg-playing-focus {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
} .cdg-jeux-hero,
.cdg-jeux-hero__title,
.cdg-jeux-hero__tagline,
.cdg-jeux-hero__stat,
.cdg-jeux-hero__progress-label,
.cdg-jeux-hero__progress-meta {
color: #f8fafc !important;
}
.cdg-jeux-hero {
margin-bottom: 1rem;
padding: 0.85rem 1rem 1rem;
}
.cdg-jeux-hero__title {
color: #ffffff !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.cdg-jeux-hero__tagline {
margin-bottom: 0.65rem;
font-size: 0.88rem;
}
.cdg-jeux-hero__progress {
margin-top: 0.65rem;
padding: 0.55rem 0.65rem;
}
body.cdg-jeux-page {
background: #f1f5f9;
}
.cdg-jeux-section {
margin-bottom: 0.85rem !important;
padding: 0.9rem 1rem 1rem !important;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.cdg-jeux-section--leaderboard {
margin-top: 0.5rem;
opacity: 0.98;
}
.cdg-jeux-section .cdg-quiz__header {
margin-bottom: 0.65rem;
}
.cdg-jeux-section .cdg-quiz__intro {
margin-bottom: 0.5rem;
} html.cdg-playing--active,
body.cdg-playing--active {
overflow: hidden;
}
body.cdg-playing--active .cdg-jeux-hero,
body.cdg-playing--active .cdg-jeux-section:not(.cdg-app--in-play),
body.cdg-playing--active .cdg-challenges,
body.cdg-playing--active .cdg-daily:not(.cdg-app--in-play),
body.cdg-playing--active .cdg-cultural-quiz:not(.cdg-app--in-play),
body.cdg-playing--active .cdg-leaderboard,
body.cdg-playing--active .cdg-room:not(.cdg-app--in-play) {
display: none !important;
}
body.cdg-playing--active .cdg-app--in-play > .cdg-quiz__header,
body.cdg-playing--active .cdg-app--in-play > .cdg-quiz__intro,
body.cdg-playing--active .cdg-app--in-play > .cdg-quiz__meta,
body.cdg-playing--active .cdg-app--in-play #cdg-player-progression,
body.cdg-playing--active .cdg-app--in-play #cdg-cultural-journey,
body.cdg-playing--active .cdg-app--in-play #cdg-panel-start,
body.cdg-playing--active .cdg-app--in-play #cdg-panel-loading,
body.cdg-playing--active .cdg-app--in-play #cdg-panel-done,
body.cdg-playing--active .cdg-daily > .cdg-daily__title,
body.cdg-playing--active .cdg-daily > .cdg-daily__meta,
body.cdg-playing--active .cdg-daily > .cdg-daily__streak,
body.cdg-playing--active .cdg-daily > .cdg-daily__countdown,
body.cdg-playing--active .cdg-daily > .cdg-daily__loading,
body.cdg-playing--active .cdg-daily > .cdg-daily__error,
body.cdg-playing--active .cdg-daily > .cdg-daily__subtitle,
body.cdg-playing--active .cdg-daily > .cdg-daily__leaderboard,
body.cdg-playing--active .cdg-daily #cdg-daily-panel-start,
body.cdg-playing--active .cdg-daily #cdg-daily-panel-done,
body.cdg-playing--active .cdg-cultural-quiz > .cdg-quiz__header,
body.cdg-playing--active .cdg-cultural-quiz #cdg-cultural-journey,
body.cdg-playing--active .cdg-cultural-quiz .cdg-cultural-quiz__filters,
body.cdg-playing--active .cdg-cultural-quiz #cdg-cultural-panel-start,
body.cdg-playing--active .cdg-cultural-quiz #cdg-cultural-panel-done,
body.cdg-playing--active .cdg-room #cdg-room-lobby,
body.cdg-playing--active .cdg-room #cdg-room-finished,
body.cdg-playing--active .cdg-room #cdg-room-create {
display: none !important;
}
body.cdg-playing--active .cdg-play-stage {
position: fixed;
inset: 0;
z-index: 120;
pointer-events: auto;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: max(0.65rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
max-width: none;
width: 100%;
border-radius: 0;
background: linear-gradient(165deg, #f8fafc 0%, #eef2ff 45%, #fdf4ff 100%);
box-shadow: none;
animation: none;
}
body.cdg-playing--active .cdg-app--in-play {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.cdg-game-quit {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 6;
width: 2.75rem;
height: 2.75rem;
min-width: 48px;
min-height: 48px;
padding: 0;
border: 2px solid rgba(15, 23, 42, 0.15);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #334155;
font-size: 1.65rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.cdg-game-quit:hover,
.cdg-game-quit:focus-visible {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
outline: none;
}
.cdg-game-card.cdg-play-stage:not(.cdg-playing-focus) {
position: relative;
padding-top: 3rem;
}
body.cdg-playing--active .cdg-game-card.cdg-play-stage,
body.cdg-playing--active .cdg-quiz__panel--play.cdg-play-stage {
position: fixed;
padding-top: max(0.65rem, env(safe-area-inset-top));
}
.cdg-audio-sticky {
gap: 0.55rem;
padding: 0.5rem 0.7rem;
}
.cdg-audio-sticky__toggle {
min-width: 3rem;
min-height: 2.5rem;
padding: 0.35rem 0.55rem;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.04em;
cursor: pointer;
}
.cdg-audio-sticky__toggle--off {
background: rgba(239, 68, 68, 0.35);
border-color: #fca5a5;
}
.cdg-audio-sticky__sub {
display: block;
font-size: 0.68rem;
font-weight: 600;
opacity: 0.85;
margin-top: 0.1rem;
}
@media (max-width: 390px) {
body.cdg-playing--active .cdg-play-stage {
padding-top: max(0.5rem, env(safe-area-inset-top));
}
.cdg-game-quit {
top: max(0.35rem, env(safe-area-inset-top));
right: max(0.35rem, env(safe-area-inset-right));
}
}