/* COLOC CHAOS — Chaos Explosif
   Couche d'interface isolée par ccx-enabled, chargée après les feuilles
   historiques. Elle ne touche jamais aux faces de cartes V103/V116. */

body.ccx-enabled {
  --ccx-bg: #100d25;
  --ccx-panel: #241a44;
  --ccx-panel-hi: #322358;
  --ccx-yellow: #ffe537;
  --ccx-cyan: #23e2f1;
  --ccx-orange: #ff963c;
  --ccx-lime: #c0ff51;
  --ccx-text: #fff;
  --ccx-muted: #d3cde5;
  --ccx-border: #6a5a91;
  --ccx-ink: #171026;
  color-scheme: dark;
  background:
    radial-gradient(ellipse at 10% 8%, #413287 0, transparent 42%),
    radial-gradient(ellipse at 93% 77%, #19546c 0, transparent 35%),
    var(--ccx-bg);
  color: var(--ccx-text);
}

/* Navigation et hiérarchie ; ne jamais inclure les cartes validées. */
body.ccx-enabled .topbar {
  border-bottom: 2px solid #5d4c80;
  padding-bottom: 12px;
}
body.ccx-enabled .brand-accent,
body.ccx-enabled .chaos-wordmark-coral {
  color: var(--ccx-yellow);
  text-shadow: 3px 4px 0 #090615, 0 0 15px #ffe53750;
}
body.ccx-enabled .brand-icon {
  background: var(--ccx-yellow);
  color: var(--ccx-ink);
  border: 2px solid #fff;
  box-shadow: 4px 5px 0 #0a0718;
}
body.ccx-enabled .header-chip {
  border-color: var(--ccx-border);
  background: #221a3ad9;
  color: var(--ccx-muted);
}
body.ccx-enabled .eyebrow {
  color: var(--ccx-cyan);
}
body.ccx-enabled .gradient-text {
  background: linear-gradient(110deg, var(--ccx-yellow), var(--ccx-orange) 55%, var(--ccx-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ccx-enabled .lead,
body.ccx-enabled .subtle {
  color: var(--ccx-muted);
}

/* Panels de navigation, réglages, lobby, scores ; surfaces non invasives. */
body.ccx-enabled :is(.panel, .invite-panel, .control-panel, .location-mode-card, .player-item, .stat, .solo-promo) {
  border: 2px solid var(--ccx-border);
  background: linear-gradient(150deg, var(--ccx-panel-hi), var(--ccx-panel) 80%);
  box-shadow: 5px 6px 0 #090615a8, 0 16px 26px #07041560;
}
body.ccx-enabled :is(.panel.primary, .location-mode-card.selected) {
  border-color: var(--ccx-yellow);
  background: linear-gradient(145deg, #392963, #241a44 78%);
}
body.ccx-enabled :is(.player-item, .location-mode-card, .panel, .control-panel) {
  border-radius: 20px;
}
body.ccx-enabled .invite-code {
  color: var(--ccx-yellow);
  text-shadow: 0 0 14px #ffe53755;
}
body.ccx-enabled .avatar {
  background: var(--ccx-cyan);
  color: var(--ccx-ink);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}
body.ccx-enabled .round-pill,
body.ccx-enabled .chip {
  border-color: var(--ccx-border);
  background: #211936;
  color: #fff;
}

/* Boutons comme autocollants : gros contraste, ombre ferme, état tactile. */
body.ccx-enabled .btn,
body.ccx-enabled .chaos-menu-link {
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: 0;
  min-height: 48px;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
body.ccx-enabled :is(.btn.main, .chaos-menu-gold) {
  color: var(--ccx-ink);
  background: linear-gradient(180deg, #fff35d, var(--ccx-yellow));
  border: 2px solid #fff7a3;
  box-shadow: 0 6px 0 #c88200, 0 12px 20px #0006;
}
body.ccx-enabled :is(.btn.hot, .chaos-menu-pink) {
  color: var(--ccx-ink);
  background: linear-gradient(180deg, #ffbe62, var(--ccx-orange));
  border: 2px solid #ffcf89;
  box-shadow: 0 6px 0 #a94b05, 0 12px 20px #0006;
}
body.ccx-enabled :is(.btn.outline, .chaos-menu-purple) {
  color: var(--ccx-text);
  background: #29204d;
  border: 2px solid var(--ccx-cyan);
  box-shadow: 0 5px 0 #083f54, 0 10px 20px #0006;
}
body.ccx-enabled :is(.btn.ghost, .chaos-menu-ghost) {
  color: var(--ccx-text);
  background: #201839;
  border: 2px solid var(--ccx-border);
}
body.ccx-enabled :is(.btn, .chaos-menu-link):active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #0b0819, 0 4px 8px #0005;
}
body.ccx-enabled :is(.btn, .chaos-menu-link):focus-visible,
body.ccx-enabled :is(input, select, button, a):focus-visible {
  outline: 3px solid var(--ccx-cyan);
  outline-offset: 4px;
}
body.ccx-enabled :is(.btn, .chaos-menu-link):disabled {
  opacity: .5;
  filter: grayscale(.5);
  cursor: not-allowed;
}
body.ccx-enabled :is(input[type="text"], input[type="url"], select) {
  border: 2px solid var(--ccx-border);
  background: #17112c;
  color: #fff;
}
body.ccx-enabled :is(input[type="text"], input[type="url"], select):focus {
  border-color: var(--ccx-cyan);
  box-shadow: 0 0 0 3px #23e2f130;
}

/* Décors réservés aux zones d'accueil et de victoire : ne pas gêner le texte. */
body.ccx-enabled .chaos-hero-title {
  isolation: isolate;
}
body.ccx-enabled .chaos-hero-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-conic-gradient(from 10deg, transparent 0deg 20deg, #ffe53719 21deg 24deg, transparent 25deg 44deg);
  mask-image: radial-gradient(circle, transparent 0%, #000 55%, transparent 80%);
}
body.ccx-enabled .toast {
  color: var(--ccx-ink);
  background: var(--ccx-lime);
  border: 2px solid #fff;
  box-shadow: 4px 5px 0 #070514;
}

/* Préserver l'expérience en petits écrans, sans scroll horizontal. */
@media (max-width: 430px) {
  body.ccx-enabled .page-wrap { padding-inline: 12px; }
  body.ccx-enabled .topbar { gap: 8px; flex-wrap: wrap; }
  body.ccx-enabled .btn:not(.tiny) { min-height: 50px; }
  body.ccx-enabled .chaos-menu-link { min-height: 58px; }
  body.ccx-enabled :is(.panel, .invite-panel, .control-panel) { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ccx-enabled .btn,
  body.ccx-enabled .chaos-menu-link {
    transition: none;
    animation: none;
  }
  body.ccx-enabled :is(.btn, .chaos-menu-link):active { transform: none; }
}


/* === Intégration graphique : affichage à l'écran sur les deux parcours === */
body.ccx-enabled {
  --bg: var(--ccx-bg);
  --surface: var(--ccx-panel);
  --surface2: var(--ccx-panel-hi);
  --line: var(--ccx-border);
  --white: var(--ccx-text);
  --muted: var(--ccx-muted);
  --yellow: var(--ccx-yellow);
  --pink: var(--ccx-orange); /* compatibilité des composants existants, pas de rose */
  --purple: #9c78f5;
  --green: var(--ccx-lime);
  --shadow: 0 20px 45px #07041580;
}
body.ccx-enabled .orb-one {background:#4534a8;opacity:.33}
body.ccx-enabled .orb-two {background:#0aa5b8;opacity:.20}
body.ccx-enabled .page-wrap {width:100%}
body.ccx-enabled .topbar {isolation:isolate}
body.ccx-enabled .brand {text-shadow:0 2px 0 #000}
body.ccx-enabled .brand small {color:#d1c7ee}
body.ccx-enabled .site-footer {
  color:#d3cde5;
  border-color:var(--ccx-border);
}
body.ccx-enabled .chaos-wordmark {filter:drop-shadow(0 7px 0 #080716)}
body.ccx-enabled .chaos-wordmark-white {
  color:#fff;
  text-shadow:3px 6px 0 #120b28,0 0 14px #fff5;
}
body.ccx-enabled .chaos-wordmark-coral {
  color:var(--ccx-yellow);
  background:linear-gradient(180deg,#fff973 0%,#ffe537 60%,#ffa12f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:clamp(2px,.45vw,5px) #150a28;
  text-shadow:0 5px 0 #1b1232;
}
body.ccx-enabled .chaos-wordmark .chaos-roof {
  color:var(--ccx-cyan);
  text-shadow:2px 4px 0 #110a24;
}
body.ccx-enabled .hero.chaos-game-home {position:relative;padding:12px 0 25px}
body.ccx-enabled .chaos-brand-ribbon {
  background:var(--ccx-yellow);
  color:var(--ccx-ink);
  border:3px solid #fff;
  border-radius:10px;
  box-shadow:6px 6px 0 #0b0923;
  transform:rotate(-2deg);
  text-transform:uppercase;
  font-size:clamp(.95rem,2.8vw,1.45rem);
}
body.ccx-enabled .chaos-tagline {color:#fff;margin-top:18px}
body.ccx-enabled .chaos-tagline strong {
  color:var(--ccx-ink);
  background:var(--ccx-lime);
  border-radius:4px;
}
body.ccx-enabled .chaos-hero-art {
  border:4px solid var(--ccx-cyan);
  background:#14102e;
  border-radius:24px;
  box-shadow:9px 9px 0 #0d081f,0 22px 45px #0201098c;
  transform:rotate(-.3deg);
  margin:16px auto 24px;
}
body.ccx-enabled .chaos-hero-art img {
  aspect-ratio:1100 / 570;
  object-fit:contain;
  background:#100d25;
}
body.ccx-enabled .chaos-card-counter {
  background:var(--ccx-yellow);
  border:2px solid white;
  color:var(--ccx-ink);
  border-radius:8px;
  box-shadow:4px 4px 0 #080715;
  font-weight:1000;
}
body.ccx-enabled .chaos-menu-link {
  border-radius:18px;
  border-width:3px;
  font-weight:1000;
  min-width:0;
  text-wrap:balance;
}
body.ccx-enabled .chaos-menu-link:focus-visible {
  outline:3px solid white;outline-offset:4px;
}
body.ccx-enabled .chaos-menu-pink {
  background:var(--ccx-orange);
  border-color:#ffcb7b;
  color:var(--ccx-ink);
}
body.ccx-enabled .chaos-menu-purple {
  background:#263e66;
  border-color:var(--ccx-cyan);
  color:white;
}
body.ccx-enabled .chaos-menu-ghost {
  background:#2b224b;
  border-color:#8b7abc;
  color:white;
}

/* Modes, paramètres, consentement : état choisi évident sans perdre la navigation */
body.ccx-enabled .location-modes h2,
body.ccx-enabled .room-title {
  color:#fff;
  text-shadow:3px 4px 0 #0c0926;
  line-height:1.12;
}
body.ccx-enabled .location-mode-card {
  gap:12px;
  padding:20px 17px;
  border-bottom-width:6px;
}
body.ccx-enabled .location-mode-card strong {
  color:white;
  font-size:clamp(1rem,2vw,1.18rem);
}
body.ccx-enabled .location-mode-card span {color:var(--ccx-muted);line-height:1.5}
body.ccx-enabled .location-mode-card.selected {
  background:#30464d;
  border-color:var(--ccx-lime);
  box-shadow:0 5px 0 #568d23,0 14px 25px #0007;
}
body.ccx-enabled .location-mode-card.selected::after {
  content:"✓ SÉLECTIONNÉ";
  align-self:flex-start;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.03em;
  padding:6px 8px;
  background:var(--ccx-lime);
  color:var(--ccx-ink);
  border-radius:5px;
}
body.ccx-enabled .settings-row {gap:12px}
body.ccx-enabled .choice {
  border:1px solid var(--ccx-border);
  border-radius:12px;
  padding:10px;
  background:#1c1633;
  color:white;
  min-height:44px;
}
body.ccx-enabled .choice:has(input:checked) {
  border:2px solid var(--ccx-lime);
  background:#25433a;
}
body.ccx-enabled input[type=checkbox],
body.ccx-enabled input[type=radio] {accent-color:var(--ccx-lime)}
body.ccx-enabled .safety-info {
  border:2px solid #ba974e;
  background:#3b301e;
  color:#fff0ca;
  line-height:1.6;
}
body.ccx-enabled .warning {
  border-color:#ed9b4a;
  background:#3c261e;
  color:#ffe8b6;
}
body.ccx-enabled .status-pill.online {
  background:#1d463a;
  border-color:var(--ccx-lime);
  color:var(--ccx-lime);
}
body.ccx-enabled .player-list {gap:10px}
body.ccx-enabled .player-item {min-width:0}
body.ccx-enabled .player-info {overflow:hidden}
body.ccx-enabled .player-info strong {color:white}
body.ccx-enabled .invite-panel {border:3px solid var(--ccx-cyan)}
body.ccx-enabled .invite-code {
  overflow-wrap:anywhere;
  font-size:clamp(1.85rem,7vw,3.4rem);
}
body.ccx-enabled .quiet-note {color:var(--ccx-muted)}
body.ccx-enabled .banner {border-color:var(--ccx-cyan)}

/* Cartes question : garder le format et le rendu interne des vraies faces 3:4. */
body.ccx-enabled .play-layout {max-width:940px;margin-left:auto;margin-right:auto}
body.ccx-enabled .question-panel {
  background:linear-gradient(150deg,#30204f,#1d1636 76%);
  border:3px solid #6b5ab2;
  border-radius:26px;
  box-shadow:0 7px 0 #0a0820,0 20px 40px #0008;
}
body.ccx-enabled .play-meta {gap:10px;flex-wrap:wrap}
body.ccx-enabled .round-pill {
  border:2px solid var(--ccx-cyan);
  color:white;
  font-weight:900;
  padding:9px 13px;
}
body.ccx-enabled .card-family:not(.card-question) {
  --family:var(--ccx-orange);
  --family-bg:#323057;
  border:3px solid var(--ccx-border);
  background:linear-gradient(140deg,#342350,#1c1739) !important;
}
body.ccx-enabled .play-layout .card-family.card-question {
  background:#fffbed !important;
  border:4px solid var(--ccx-yellow);
  color:var(--ccx-ink);
  box-shadow:7px 8px 0 #0c071f,0 22px 40px #0007;
}
body.ccx-enabled .play-layout .card-family.card-question:before {
  background:linear-gradient(90deg,var(--ccx-yellow),var(--ccx-orange),var(--ccx-cyan));
}
body.ccx-enabled .play-layout .card-family.card-question .role-line {
  background:#e3f9fc;
  color:var(--ccx-ink);
  border:2px solid #6fc6e0;
  box-shadow:0 4px 0 #7ea5af;
}
body.ccx-enabled .play-layout .card-family.card-question .role-name {
  color:#154970;
}
body.ccx-enabled .play-layout .card-family.card-question .theme-badge {
  background:var(--ccx-yellow);
  color:var(--ccx-ink);
  border:3px solid white;
  box-shadow:0 5px 0 #ce8c17;
}
body.ccx-enabled .play-layout .card-family.card-question .number-badge {
  color:var(--ccx-ink);
  background:#f9f6e8;
  border-color:#dac775;
}
body.ccx-enabled .play-layout .card-family.card-question .twist {
  color:white;background:#2b2348;border:2px solid #6260af;
}

/* Secret : signal orange et avertissement lisible. Aucune interaction ajoutée
   à l'affichage de la consigne, la logique de passage reste inchangée. */
body.ccx-enabled .play-layout .card-secret {
  background:linear-gradient(155deg,#352447,#1d1634)!important;
  border:3px solid var(--ccx-orange);
}
body.ccx-enabled .play-layout .card-secret .secret-step {
  color:var(--ccx-ink);
  background:var(--ccx-yellow);
  border-color:#fff3a2;
}
body.ccx-enabled .play-layout .card-secret .secret-hero {
  background:linear-gradient(165deg,#3a315c,#1e183b);
  border:3px solid var(--ccx-orange);
  border-radius:23px;
  box-shadow:0 7px 0 #7d421c,0 15px 24px #0008;
}
body.ccx-enabled .play-layout .card-secret .secret-hero-title {
  color:white;
  text-shadow:0 5px 0 #110d28;
  -webkit-text-stroke:clamp(1px,.25vw,3px) #170f31;
}
body.ccx-enabled .play-layout .card-secret .secret-word {
  color:var(--ccx-ink);
  background:var(--ccx-yellow);
  border-color:#fff;
  box-shadow:0 6px 0 #a66b0e;
}
body.ccx-enabled .play-layout .card-secret .secret-privacy {
  color:#ffedbe;
}
body.ccx-enabled .play-layout .card-secret .secret-hero-detail {
  color:white;
}
/* Votes et devinettes : pastilles neutres, sélection cyan/vert. */
body.ccx-enabled .play-layout :is(.card-vote,.card-guess,.card-sip-target) {
  background:linear-gradient(150deg,#29254e,#1b1737)!important;
  border:3px solid var(--ccx-cyan);
}
body.ccx-enabled :is(.card-vote,.card-guess,.card-sip-target) h1,
body.ccx-enabled :is(.card-vote,.card-guess,.card-sip-target) h2 {color:var(--ccx-yellow)}
body.ccx-enabled :is(.card-vote,.card-guess,.card-sip-target) > p {color:white}
body.ccx-enabled .card-vote .btn[data-score] {
  background:#fffaf0;
  color:var(--ccx-ink);
  border:2px solid #b5a6d0;
  box-shadow:0 5px 0 #635479;
}
body.ccx-enabled .card-vote .btn[data-score="-2"],
body.ccx-enabled .card-vote .btn[data-score="-1"] {
  background:#ffdaaf;
  border-color:var(--ccx-orange);
}
body.ccx-enabled .card-vote .btn[data-score="1"],
body.ccx-enabled .card-vote .btn[data-score="2"] {
  background:#e6ffd6;
  border-color:var(--ccx-lime);
}
body.ccx-enabled .card-vote .btn[data-score]:focus-visible,
body.ccx-enabled .card-vote .btn[data-score]:active {
  outline:3px solid var(--ccx-cyan);
  outline-offset:3px;
}
body.ccx-enabled .reaction.selected,
body.ccx-enabled .choice:has(input:checked) {box-shadow:inset 0 0 0 2px var(--ccx-lime)}
body.ccx-enabled .reaction {background:#2c254c;border:2px solid var(--ccx-border)}
body.ccx-enabled .reaction.selected {background:#28544b;border-color:var(--ccx-lime)}
body.ccx-enabled .chaos-choice-card {
  border:3px solid var(--ccx-yellow);
  border-bottom-width:7px;
  background:linear-gradient(145deg,#fff479,#ffb62f);
  color:var(--ccx-ink);
  box-shadow:0 8px 0 #0b0922,0 15px 20px #0007;
}
body.ccx-enabled .chaos-choice-card.choice-boisson {
  background:linear-gradient(145deg,#c7faff,#30d7ec);
  border-color:#d1ffff;
}
body.ccx-enabled .chaos-choice-card.choice-gage {
  background:linear-gradient(145deg,#fff178,#ffad38);
}
body.ccx-enabled .chaos-choice-card .chaos-choice-icon {filter:none}
body.ccx-enabled .refusal-panel {background:linear-gradient(140deg,#3b292f,#241d39)!important;border-color:var(--ccx-orange)}
body.ccx-enabled .refusal-subtitle {color:var(--ccx-yellow)}
body.ccx-enabled .refusal-choice {color:white}

/* Score et fin, sans changement des valeurs calculées par le moteur. */
body.ccx-enabled .end-page {position:relative;margin-top:40px}
body.ccx-enabled .end-page:before {
  content:"⚡ 🎉 ⚡";
  display:block;
  color:var(--ccx-yellow);
  font-size:clamp(2rem,6vw,4rem);
  margin-bottom:8px;
}
body.ccx-enabled .end-page .end-icon {filter:drop-shadow(0 5px 0 #000)}
body.ccx-enabled .end-page h1 {color:white}
body.ccx-enabled .end-page h2 {color:var(--ccx-yellow);overflow-wrap:anywhere}
body.ccx-enabled .end-page ol {
  list-style:none;
  padding:0;
  margin:24px auto;
  display:grid;
  gap:9px;
  text-align:left;
}
body.ccx-enabled .end-page ol li {
  padding:15px 16px;
  border:2px solid var(--ccx-border);
  border-radius:13px;
  background:linear-gradient(100deg,#342752,#211a3d);
  color:white;
  font-weight:800;
  overflow-wrap:anywhere;
}
body.ccx-enabled .end-page ol li:first-child {
  background:linear-gradient(100deg,#57501f,#3b2d39);
  border-color:var(--ccx-yellow);
  box-shadow:0 0 0 2px #f8d95630;
}
body.ccx-enabled .end-page ol li:first-child:before {content:"👑  ";font-size:1.3rem}
body.ccx-enabled .end-page .stat {
  border:2px solid var(--ccx-cyan);
  background:#222c49;
}
body.ccx-enabled .end-page .stat b {color:var(--ccx-yellow)}
body.ccx-enabled .end-page .stat span {color:#fff}

/* Mobile : l'affichage doit rester parfaitement fluide même à 320 px. */
@media(max-width:720px) {
  body.ccx-enabled .hero.chaos-game-home {padding:8px 0 22px}
  body.ccx-enabled .chaos-menu {grid-template-columns:1fr;gap:12px}
  body.ccx-enabled .chaos-menu-link {padding:13px 14px}
  body.ccx-enabled .location-mode-grid {grid-template-columns:1fr}
  body.ccx-enabled .hero-cards {grid-template-columns:1fr}
  body.ccx-enabled .page-wrap {padding-inline:14px}
  body.ccx-enabled .topbar .header-chip {display:none}
  body.ccx-enabled .play-layout .question-panel {padding:18px 14px}
}
@media(max-width:390px) {
  body.ccx-enabled .page-wrap {padding-inline:10px}
  body.ccx-enabled .chaos-menu-link {font-size:1rem}
  body.ccx-enabled .chaos-hero-art {border-width:2px;border-radius:16px}
  body.ccx-enabled .chaos-card-counter {font-size:.72rem;padding:5px}
  body.ccx-enabled .topbar {flex-wrap:wrap}
  body.ccx-enabled .topbar .btn.tiny {min-height:44px}
  body.ccx-enabled .location-mode-card {padding:14px}
  body.ccx-enabled .end-page ol li {padding:12px}
}
@media(prefers-reduced-motion:reduce) {
  body.ccx-enabled *,
  body.ccx-enabled *::before,
  body.ccx-enabled *::after {
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media(prefers-contrast:more) {
  body.ccx-enabled :is(.panel,.question-panel,.location-mode-card,.player-item) {border-width:3px}
  body.ccx-enabled .quiet-note {color:white}
}


/* Détails de phases : finition sans fuchsia dans les composants d'interface. */
body.ccx-enabled .play-layout .card-secret .secret-question {
  background:#fffaf0;
  border:3px solid var(--ccx-cyan);
  box-shadow:0 6px 0 #145d73,0 12px 22px #0006;
  color:var(--ccx-ink);
}
body.ccx-enabled .play-layout .card-secret .secret-question-caption,
body.ccx-enabled .play-layout .card-secret .secret-question-text {
  color:var(--ccx-ink);
}
body.ccx-enabled .play-layout .card-secret .answer-ideas {
  background:#282246;
  border:2px solid var(--ccx-orange);
  color:white;
}
body.ccx-enabled .play-layout .card-secret .answer-ideas summary {
  color:var(--ccx-yellow);
}
body.ccx-enabled .play-layout .card-secret .answer-ideas summary span {
  color:var(--ccx-muted);
}
body.ccx-enabled .play-layout .card-reveal {
  background:linear-gradient(145deg,#3e3a59,#201936)!important;
  border-color:var(--ccx-lime);
}
body.ccx-enabled .play-layout .card-reveal > h3 {
  color:var(--ccx-yellow);
}
body.ccx-enabled .game-back-button {
  min-height:48px;
  border:2px solid var(--ccx-border);
}
body.ccx-enabled .local-setup .local-form {
  border:3px solid var(--ccx-yellow);
}
body.ccx-enabled .local-handoff .local-pass-emoji {
  filter:drop-shadow(0 0 12px #23e2f188);
}
body.ccx-enabled .local-setup .local-resume {
  border-color:var(--ccx-lime);
  background:#263d3b;
}
body.ccx-enabled .local-setup .category-list {
  gap:9px;
}
body.ccx-enabled .local-setup .choice:has(input:checked) > span {
  color:var(--ccx-lime);
}
body.ccx-enabled .end-page .stats {
  gap:14px;
}

/* Animations courtes de fête, jamais sur une carte 3:4 ; réduites plus haut si demandé. */
@keyframes ccx-hype {
  0%, 100% {transform:rotate(-3deg) scale(1)}
  38% {transform:rotate(2deg) scale(1.035)}
  65% {transform:rotate(-1deg) scale(1.01)}
}
@keyframes ccx-trophy {
  0%, 100% {transform:translateY(0) rotate(-2deg)}
  50% {transform:translateY(-7px) rotate(3deg)}
}
@keyframes ccx-bounce-in {
  0% {transform:translate(-50%,18px) scale(.85);opacity:0}
  70% {transform:translate(-50%,-5px) scale(1.04);opacity:1}
  100% {transform:translate(-50%,0) scale(1);opacity:1}
}
body.ccx-enabled .chaos-card-counter {
  animation:ccx-hype 3.5s ease-in-out infinite;
}
body.ccx-enabled .end-page .end-icon {
  display:inline-block;
  animation:ccx-trophy 1.75s ease-in-out 2;
}
body.ccx-enabled .toast.show {
  animation:ccx-bounce-in 260ms ease-out both;
}
body.ccx-enabled .stat:hover {
  box-shadow:0 0 0 2px var(--ccx-yellow);
}
@media(prefers-reduced-motion:reduce) {
  body.ccx-enabled .chaos-card-counter,
  body.ccx-enabled .end-page .end-icon,
  body.ccx-enabled .toast.show {animation:none!important}
}