:root { --cdg-ds-violet: #7c3aed;
--cdg-ds-magenta: #db2777;
--cdg-ds-blue: #2563eb;
--cdg-ds-cyan: #0891b2;
--cdg-ds-gold: #fbbf24;
--cdg-ds-bg: #f8fafc;
--cdg-ds-surface: #ffffff;
--cdg-ds-text: #0f172a;
--cdg-ds-muted: #64748b;
--cdg-ds-border: rgba(148, 163, 184, 0.38); --cdg-ds-ok-bg: #dcfce7;
--cdg-ds-ok-text: #14532d;
--cdg-ds-ok-border: #86efac;
--cdg-ds-ko-bg: #fee2e2;
--cdg-ds-ko-text: #991b1b;
--cdg-ds-ko-border: #fca5a5;
--cdg-ds-wait-bg: #fff7ed;
--cdg-ds-wait-text: #9a3412;
--cdg-ds-elim-bg: #fdecea;
--cdg-ds-elim-text: #8a3028; --cdg-ds-radius-sm: 10px;
--cdg-ds-radius: 16px;
--cdg-ds-radius-lg: 20px;
--cdg-ds-space-xs: 0.35rem;
--cdg-ds-space-sm: 0.55rem;
--cdg-ds-space-md: 1rem;
--cdg-ds-space-lg: 1.5rem;
--cdg-ds-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
--cdg-ds-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06); --cdg-ds-touch: 44px;
--cdg-ds-touch-lg: 48px;
--cdg-ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
--cdg-ds-duration: 0.22s; --cdg-ds-safe-bottom: env(safe-area-inset-bottom, 0px);
--cdg-ds-safe-top: env(safe-area-inset-top, 0px); --cdg-ad-violet: var(--cdg-ds-violet);
--cdg-ad-magenta: var(--cdg-ds-magenta);
--cdg-ad-radius: var(--cdg-ds-radius);
--cdg-ad-shadow: var(--cdg-ds-shadow);
} .cdg-quiz__btn,
.cdg-room__btn,
.cdg-room-center__btn,
.cdg-leaderboard__challenge-btn,
.cdg-pregame__go,
.cdg-pregame__back,
.cdg-sensitive-audio__btn,
.cdg-game-quit,
.cdg-player-identity-edit__color,
button.cdg-answer,
.cdg-room__answer-btn {
min-height: var(--cdg-ds-touch);
min-width: var(--cdg-ds-touch);
}
.cdg-quiz__btn--primary,
.cdg-room__btn--launch,
.cdg-pregame__go {
min-height: var(--cdg-ds-touch-lg);
padding: 0.65rem 1.15rem;
border-radius: var(--cdg-ds-radius-sm);
font-weight: 700;
}
.cdg-quiz__btn--ghost,
.cdg-jeux-multi__btn--ghost {
min-height: var(--cdg-ds-touch);
} .cdg-quiz__btn:focus-visible,
.cdg-room__btn:focus-visible,
.cdg-jeux-accordion__summary:focus-visible,
.cdg-leaderboard__challenge-btn:focus-visible,
.cdg-pregame__switch:focus-visible,
.cdg-sensitive-audio__btn:focus-visible,
.cdg-game-quit:focus-visible,
a.cdg-jeux-multi__btn:focus-visible {
outline: 2px solid var(--cdg-ds-violet);
outline-offset: 2px;
} .cdg-jeux-hub__card,
.cdg-quiz,
.cdg-daily,
.cdg-cultural-quiz,
.cdg-challenges,
.cdg-leaderboard,
.cdg-room,
.cdg-room-center__panel {
border-radius: var(--cdg-ds-radius);
border: 1px solid var(--cdg-ds-border);
box-shadow: var(--cdg-ds-shadow-soft);
} .cdg-badge,
.cdg-jeux-multi__badge,
.cdg-room-center__hero-badge,
.cdg-room__player-badge {
display: inline-flex;
align-items: center;
padding: 0.28rem 0.62rem;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
}
.cdg-badge--ok {
background: var(--cdg-ds-ok-bg);
color: var(--cdg-ds-ok-text);
}
.cdg-badge--wait {
background: var(--cdg-ds-wait-bg);
color: var(--cdg-ds-wait-text);
}
.cdg-badge--elim {
background: var(--cdg-ds-elim-bg);
color: var(--cdg-ds-elim-text);
} .cdg-answer--correct,
.cdg-quiz__choice--correct {
background: var(--cdg-ds-ok-bg) !important;
border-color: var(--cdg-ds-ok-border) !important;
color: var(--cdg-ds-ok-text) !important;
}
.cdg-answer--wrong,
.cdg-quiz__choice--wrong {
background: var(--cdg-ds-ko-bg) !important;
border-color: var(--cdg-ds-ko-border) !important;
color: var(--cdg-ds-ko-text) !important;
} .cdg-empty-state {
margin: 0.5rem 0;
padding: 1rem 1.1rem;
border-radius: var(--cdg-ds-radius-sm);
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
color: var(--cdg-ds-muted);
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
} .cdg-player-chip__avatar {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.cdg-player-chip__level {
font-weight: 700;
color: var(--cdg-ds-violet);
} .cdg-emotional-line {
margin: 0.5rem 0 0;
padding: 0.55rem 0.75rem;
border-radius: var(--cdg-ds-radius-sm);
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
}
.cdg-emotional-line--positive {
background: var(--cdg-ds-ok-bg);
color: var(--cdg-ds-ok-text);
}
.cdg-emotional-line--neutral {
background: #eef2ff;
color: #3730a3;
}
.cdg-emotional-line--tense {
background: var(--cdg-ds-wait-bg);
color: var(--cdg-ds-wait-text);
}
.cdg-emotional-line--elim {
background: var(--cdg-ds-elim-bg);
color: var(--cdg-ds-elim-text);
}
.cdg-score-delta {
display: inline-block;
margin-left: 0.35rem;
padding: 0.12rem 0.45rem;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.cdg-score-delta--plus {
background: var(--cdg-ds-ok-bg);
color: var(--cdg-ds-ok-text);
}
.cdg-score-delta--minus {
background: var(--cdg-ds-ko-bg);
color: var(--cdg-ds-ko-text);
}
.cdg-mvp-badge {
display: inline-block;
margin-top: 0.35rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: linear-gradient(135deg, var(--cdg-ds-gold), #f59e0b);
color: #422006;
font-size: 0.78rem;
font-weight: 800;
}
.cdg-streak-flash {
animation: cdg-streak-pop 0.5s var(--cdg-ds-ease);
}
@keyframes cdg-streak-pop {
0% {
opacity: 0;
transform: scale(0.92);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.cdg-streak-flash,
.cdg-emotional-line {
animation: none !important;
}
}