/* COLOC CHAOS — FIDÉLITÉ MAQUETTE : second passage artistique
   Cette couche s'ajoute APRÈS style.css, local.css et chaos-explosif.css.
   Les faces de cartes et images WebP sont explicitement exclues. */

body.ccx-enabled {
  --ccx-neon-violet:#a65aff;
  --ccx-neon-pink:#e13eff; /* liseré violet-fuchsia uniquement, sans dominante rose */
  --ccx-night:#0e0924;
  font-family: "Trebuchet MS", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  background: radial-gradient(ellipse at 70% 13%,#3c116e 0,transparent 36%),
              radial-gradient(ellipse at 20% 50%,#1f1a64 0,transparent 40%),#0d0822;
}
body.ccx-enabled .page-wrap {position:relative;isolation:isolate;max-width:1130px;padding-bottom:0}
body.ccx-enabled .page-wrap::before {
  content:"";position:absolute;pointer-events:none;inset:0 0 auto;height:280px;z-index:0;
  background:url("/art/ccx-party-top.svg") center top/100% auto no-repeat;
  opacity:.64;
}
body.ccx-enabled .page-wrap::after {
  content:"";pointer-events:none;position:relative;display:block;
  width:calc(100% + 56px);margin:8px -28px 0;height:124px;flex:0 0 124px;
  background:url("/art/ccx-party-crowd.svg") center bottom/cover no-repeat;
  opacity:.95;
}
body.ccx-enabled .page-wrap>*{position:relative;z-index:1}
body.ccx-enabled .topbar {
  background:#100b2fdb;border:2px solid #a76bf7;border-radius:999px;
  box-shadow:0 4px 0 #050318,0 0 14px #922eff6a;
  margin:6px 0 24px;padding:11px 15px;
}
/* L'accueil possède déjà son logo dans le héros : aucun bandeau de navigation doublon. */
body.ccx-enabled.ccx-landing .app-topbar { display:none; }
body.ccx-enabled .topbar .brand {
  color:white;font-style:italic;font-size:clamp(18px,2vw,25px);
  -webkit-text-stroke:.5px #120624;text-shadow:2px 3px 0 #070516;
}
body.ccx-enabled .topbar .brand-accent {color:var(--ccx-yellow);text-shadow:1px 3px 0 #08051b}
body.ccx-enabled .header-chip {
  border:1px solid #cbabfb;color:white;background:#1d1740;
}
body.ccx-enabled .topbar .btn.tiny {border-radius:999px;border-width:2px;min-height:43px}
body.ccx-enabled .eyebrow,body.ccx-enabled .micro {
  letter-spacing:.035em;color:var(--ccx-yellow);font-weight:1000;
}
body.ccx-enabled .chaos-hero-title {
  padding-top:4px;min-height:140px;
}
body.ccx-enabled .ccx-hero-logo {
  display:block;width:min(100%,590px);height:auto;aspect-ratio:780 / 380;
  margin:0 auto;object-fit:contain;
  filter:drop-shadow(0 11px 0 #070318);
}
body.ccx-enabled .ccx-local-brand {
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  margin:-28px auto 12px;max-width:760px;
}
body.ccx-enabled .ccx-local-brand img {
  width:min(100%,410px);height:auto;aspect-ratio:780/380;
  display:block;filter:drop-shadow(0 6px 0 #060319);
}
body.ccx-enabled .ccx-brush-heading,
body.ccx-enabled .ccx-title-sticker {
  display:inline-block;position:relative;isolation:isolate;
  padding:12px 22px;margin:2px auto 16px;
  font-weight:1000;font-size:clamp(1.6rem,5.5vw,3.2rem);
  line-height:1.13;text-align:center;letter-spacing:-.05em;
  color:#110917 !important;text-shadow:none !important;
  background:linear-gradient(170deg,#fff94c 8%,#ffe324 70%,#ffb520);
  box-shadow:6px 7px 0 #0c061b;
  transform:rotate(-1.5deg);
  clip-path:polygon(0 4%,7% 0,14% 4%,23% 0,34% 4%,43% 0,51% 3%,61% 0,71% 4%,82% 0,92% 4%,100% 0,96% 96%,100% 99%,84% 96%,73% 100%,63% 96%,54% 100%,44% 96%,32% 100%,23% 96%,12% 100%,4% 96%);
}
body.ccx-enabled .ccx-brush-heading {font-size:clamp(1.15rem,4vw,2rem)}
body.ccx-enabled .ccx-title-sticker .gradient-text {color:#191021!important;background:none!important;-webkit-text-fill-color:currentColor}
body.ccx-enabled .chaos-brand-ribbon {
  margin-top:-20px;margin-bottom:15px;
  color:#0a0720;border:0;box-shadow:0 5px 0 #070317;
  clip-path:polygon(0 14%,9% 3%,17% 10%,28% 0,43% 8%,54% 2%,66% 11%,79% 1%,90% 9%,100% 0,98% 87%,88% 100%,73% 94%,60% 100%,45% 91%,30% 100%,17% 93%,0 100%);
  transform:rotate(-2.2deg);
}
body.ccx-enabled .chaos-tagline {
  margin:4px auto 12px;max-width:680px;
  font-size:clamp(1.04rem,2.6vw,1.6rem);
  font-style:italic;line-height:1.35;color:white;
  text-shadow:1px 2px 0 #110621;
}
body.ccx-enabled .chaos-tagline strong {
  display:inline;line-height:1.6;color:#111021;background:var(--ccx-lime);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
body.ccx-enabled .chaos-hero-art {
  overflow:hidden;border-radius:24px;
  border:4px solid #b8eefd;
  box-shadow:0 0 0 5px #081122,0 0 26px #22e2f19c,0 16px 0 #08071f;
}
body.ccx-enabled .chaos-card-counter {font-style:italic;transform:rotate(2deg);letter-spacing:-.025em}
body.ccx-enabled .chaos-menu {
  margin:34px auto 25px;max-width:800px;gap:17px;
}
body.ccx-enabled .chaos-menu-link,body.ccx-enabled .btn.main,body.ccx-enabled .btn.hot {
  border-width:3px;border-style:solid;border-radius:999px;
  font-style:italic;font-weight:1000;
  text-shadow:none;
}
body.ccx-enabled .chaos-menu-link {
  display:flex;align-items:center;justify-content:space-between;
  min-height:70px;font-size:clamp(1.06rem,2.4vw,1.35rem);
  padding:13px 19px;line-height:1.15;
}
body.ccx-enabled .chaos-menu-gold,body.ccx-enabled .btn.main {
  background:linear-gradient(#ffff6d 0%,#ffe529 40%,#ffbb17);
  color:#15081e;border-color:#fffec8;
  box-shadow:0 5px 0 #a86810,0 0 17px #ffe83185,0 12px 20px #0007;
}
body.ccx-enabled .chaos-menu-pink,body.ccx-enabled .btn.hot {
  background:linear-gradient(#61faff,#21eaf2 40%,#00bccc);
  color:#15081e;border-color:#d2ffff;
  box-shadow:0 5px 0 #007788,0 0 17px #17d9fb91,0 12px 20px #0008;
}
body.ccx-enabled .chaos-menu-purple {
  background:linear-gradient(#c9fe71,#a8ff0a 40%,#71c817);
  color:#130820;border-color:#eaffc6;
  box-shadow:0 5px 0 #447f0d,0 0 17px #b6ff3799;
}
body.ccx-enabled .chaos-menu-ghost,body.ccx-enabled .btn.ghost,body.ccx-enabled .btn.outline {
  background:linear-gradient(160deg,#33215e,#1b113e);
  color:white;border-color:#b8a3fc;
  box-shadow:0 4px 0 #080419,0 0 11px #a467ff66;
}
body.ccx-enabled .btn:not(.tiny) {min-height:54px;font-size:clamp(.94rem,2.5vw,1.12rem);line-height:1.17}
body.ccx-enabled .btn:focus-visible,body.ccx-enabled .chaos-menu-link:focus-visible {
  outline:4px solid var(--ccx-cyan);outline-offset:4px;
}
body.ccx-enabled .btn:disabled {filter:grayscale(.6);opacity:.52}
body.ccx-enabled .btn.danger {
  border:2px solid #ff963c;background:#442020;color:#ffe9bd;
}
body.ccx-enabled .hero-cards {gap:20px}
body.ccx-enabled .panel,body.ccx-enabled .control-panel,body.ccx-enabled .invite-panel {
  border:2px solid #9b70e2;
  background:linear-gradient(160deg,#231941f8,#0c0c2cfa);
  box-shadow:0 6px 0 #09051c,0 0 15px #853dd337;
}
body.ccx-enabled .panel.primary {border-color:var(--ccx-yellow)}
body.ccx-enabled .panel h2,body.ccx-enabled .control-panel h3 {
  font-size:clamp(1.2rem,3.5vw,1.7rem);
  color:white;font-weight:1000;letter-spacing:-.04em;
}
body.ccx-enabled .panel h2::first-letter {color:var(--ccx-yellow)}
body.ccx-enabled .panel p {color:#e0daec}
body.ccx-enabled .location-mode-grid {gap:14px}
body.ccx-enabled .location-mode-card {
  border:3px solid #a98ceb;border-radius:24px;
  background:linear-gradient(155deg,#291b4b,#130d2f);
  box-shadow:0 0 12px #784aca48,0 5px 0 #09071c;
}
body.ccx-enabled .location-mode-card.selected {
  border-color:#20eff5;background:#0d3043;
  box-shadow:0 0 18px #20eff599,0 5px 0 #051b2d;
}
body.ccx-enabled .location-mode-card.selected::after {background:#23e2f1}
body.ccx-enabled .room-page {position:relative}
body.ccx-enabled .room-page::before {
  content:"";position:absolute;left:0;right:0;top:-55px;height:180px;
  background:url("/art/ccx-party-top.svg") center top/100% auto no-repeat;
  opacity:.55;z-index:-1;pointer-events:none;
}
body.ccx-enabled .local-setup {margin-top:16px}
body.ccx-enabled .local-setup .chaos-setup-art {
  border-radius:20px;border:3px solid var(--ccx-cyan);
  box-shadow:0 0 13px #2ee8ef77,0 8px 0 #070319;
  overflow:hidden;margin-bottom:20px;
}
body.ccx-enabled .local-setup .chaos-setup-art img {
  width:100%;height:auto;display:block;aspect-ratio:1100/570;object-fit:contain;
}
body.ccx-enabled .local-setup .room-title {text-align:center;margin-top:18px}
body.ccx-enabled .local-setup .name-fields {gap:12px}
body.ccx-enabled .local-form {
  border-radius:26px;background:linear-gradient(155deg,#251747,#17112d);
}
body.ccx-enabled .field label {color:#fff;font-weight:950}
body.ccx-enabled .field :is(input,select) {min-height:49px}
body.ccx-enabled .invite-panel {
  border:3px solid #bb83fd;box-shadow:0 0 19px #8e44f573,0 7px 0 #08051b;
  border-radius:23px;
}
body.ccx-enabled .invite-code {
  display:inline-block;padding:10px 16px;letter-spacing:.1em;
  font-size:clamp(2.25rem,7vw,4.5rem);
  color:white;text-shadow:2px 4px 0 #0b071c,0 0 15px #b269ff;
}
body.ccx-enabled .player-item {
  border:2px solid #a48cde;background:linear-gradient(140deg,#251b45,#0e0b23);
  border-radius:18px;min-width:0;
}
body.ccx-enabled .player-item:nth-child(even) .avatar {background:var(--ccx-yellow)}
body.ccx-enabled .player-item:nth-child(3n) .avatar {background:var(--ccx-lime)}
body.ccx-enabled .player-item .avatar {
  width:47px;height:47px;flex:0 0 47px;
  border:3px solid #fff;border-radius:50%;color:#100d25;
  font-size:22px;box-shadow:0 0 0 3px #37185e;
}
body.ccx-enabled .status-pill.online {
  border:2px solid #91ff39;border-radius:999px;
  background:#b6ff26;color:#110c1e;
  box-shadow:0 0 9px #a6ff5773;font-weight:950;
}
body.ccx-enabled .status-pill:not(.online) {background:#313048;color:white}
body.ccx-enabled .player-info strong {font-size:1.04rem}
body.ccx-enabled .player-info small {color:#d0cbe3}

/* Jeu : une bande de fête graphique autour des cartes mais pas sur leurs pixels. */
body.ccx-enabled .play-layout {position:relative;padding-top:44px}
body.ccx-enabled .play-layout::before {
  content:"";position:absolute;left:-4%;right:-4%;top:-20px;height:145px;
  background:url("/art/ccx-party-top.svg") center top/100% auto no-repeat;
  opacity:.66;z-index:-1;pointer-events:none;
}
body.ccx-enabled .play-meta {
  padding:8px 6px;justify-content:space-between;
}
body.ccx-enabled .play-meta .round-pill {
  padding:9px 13px;background:#1e1642;color:white;
  border:2px solid #b57cff;border-radius:999px;
  text-shadow:0 0 10px #cc8fff;
}
body.ccx-enabled .play-meta .round-pill:nth-child(2) {border-color:#23e2f1}
body.ccx-enabled .question-panel {border-radius:25px;border:3px solid #ba89f3}
body.ccx-enabled .play-layout .card-family.card-question {
  border:4px solid #fbed61;
  box-shadow:0 8px 0 #0e061f,0 0 20px #ffd63e50;
}
body.ccx-enabled .play-layout .card-family.card-question .role-line {
  margin-top:12px;margin-bottom:17px;padding:12px 15px;
  font-size:clamp(.97rem,2.6vw,1.22rem);
  border-radius:999px;border:2px solid #bba6ea;
  background:#1a1440;color:#fff;
  box-shadow:0 0 15px #ae6fff70;
}
body.ccx-enabled .play-layout .card-family.card-question .role-name {
  color:#ffe537;font-weight:1000;
}
body.ccx-enabled .control-panel {
  border:2px solid #8167b7;background:#1e1642;
  border-radius:20px;
}
body.ccx-enabled .control-panel .reaction-bar {gap:7px}
body.ccx-enabled .reaction {border-radius:17px;border-color:#a879ef}
body.ccx-enabled .reaction.selected {
  border-color:#d6ff5c;background:#315136;
  box-shadow:0 0 13px #b5ff3170;
}
body.ccx-enabled .local-handoff .question-panel,
body.ccx-enabled .play-layout .card-secret {
  border-color:#ffe537;
  box-shadow:0 6px 0 #995e0b,0 0 20px #ffe94c55;
}
body.ccx-enabled .play-layout .card-secret .secret-hero {
  border-radius:28px;border-color:#24e6ee;
  box-shadow:0 0 20px #24e6ee66,0 8px 0 #092b47;
}
body.ccx-enabled .play-layout .card-secret .secret-hero-title {
  font-weight:1000;font-style:italic;line-height:1.15;
  text-transform:uppercase;
}
body.ccx-enabled .play-layout .card-secret .secret-word {
  padding:13px 20px;background:linear-gradient(150deg,#ffe63e,#ffad2c);
  border-radius:12px;box-shadow:0 6px 0 #ad5a05;
}
body.ccx-enabled .play-layout .card-secret .secret-step {
  background:#fff135;color:#100821;font-weight:1000;
  border-radius:9px;transform:rotate(-2deg);
}
/* Signal très lisible pour la consigne avant le passage du téléphone. */
body.ccx-enabled .play-layout .card-family.card-question .twist {
  background:linear-gradient(135deg,#fff45a,#ffc52b)!important;
  border:3px solid #fffef0!important;
  color:#15081e!important;
  box-shadow:0 6px 0 #a86810,0 0 18px #ffe8318a;
}
body.ccx-enabled .play-layout .card-family.card-question .twist strong {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:2px solid #fffef0;
  border-radius:999px;
  background:#15081e;
  color:#fffef0!important;
  font-weight:1000;
  text-shadow:none;
}
body.ccx-enabled .play-layout .card-family.card-question .twist p {
  color:#24102d!important;
  font-weight:850;
}
body.ccx-enabled .play-layout .card-secret .secret-step {
  background:linear-gradient(#ffff6d 0%,#ffe529 40%,#ffbb17)!important;
  color:#15081e!important;
  border:3px solid #fffef0!important;
  box-shadow:0 4px 0 #a86810,0 0 14px #ffe83180;
  text-shadow:none!important;
}
body.ccx-enabled .card-vote,body.ccx-enabled .card-guess {
  border-color:var(--ccx-cyan)!important;
  box-shadow:0 0 20px #23e2f155;
}
body.ccx-enabled .card-vote .btn[data-score] {
  border-radius:999px;border-width:3px;
  font-size:clamp(1rem,2.7vw,1.2rem);
  font-weight:1000;
}
body.ccx-enabled .card-vote .btn[data-score="2"],
body.ccx-enabled .card-vote .btn[data-score="1"] {
  background:linear-gradient(#dfff91,#a8ff30);color:#171026;
}
body.ccx-enabled .card-vote .btn[data-score="0"] {
  background:linear-gradient(#8dfaff,#18d7e9);color:#171026;
}
body.ccx-enabled .card-vote .btn[data-score="-1"],
body.ccx-enabled .card-vote .btn[data-score="-2"] {
  background:linear-gradient(#ffd48c,#ff992b);color:#171026;
}
body.ccx-enabled .chaos-choice-card {border-radius:23px}
body.ccx-enabled .chaos-choice-card.choice-gage {
  box-shadow:0 8px 0 #ad5805,0 0 15px #ffbd367a;
}
body.ccx-enabled .chaos-choice-card.choice-boisson {
  box-shadow:0 8px 0 #007889,0 0 15px #22e8ef73;
}
body.ccx-enabled .card-reveal h1,
body.ccx-enabled .end-page h1 {
  font-style:italic;text-shadow:2px 4px 0 #0a0720;
}
body.ccx-enabled .end-page h2 {
  background:linear-gradient(90deg,#ffe537,#ff963c);
  color:#13102b;padding:12px 16px;border:3px solid white;
  border-radius:18px;box-shadow:5px 7px 0 #130921;
}
body.ccx-enabled .end-page ol li:first-child {
  border:3px solid #ffe537;
  box-shadow:0 0 16px #ffdc2b8c;
}
body.ccx-enabled .end-page ol li:nth-child(2) {
  border-color:#23e2f1;
}
body.ccx-enabled .end-page ol li:nth-child(3) {
  border-color:#ff963c;
}
body.ccx-enabled .toast.show {border-radius:999px}

/* Medium and compact screens: avoid clipping names/codes and controls. */
@media (max-width:720px) {
  body.ccx-enabled .page-wrap::before {height:230px;background-size:auto 230px}
  body.ccx-enabled .page-wrap::after {width:calc(100% + 28px);margin-left:-14px;margin-right:-14px;height:90px;flex-basis:90px}
  body.ccx-enabled .topbar {border-radius:18px;flex-wrap:wrap;margin:0 0 14px}
  body.ccx-enabled .ccx-hero-logo {width:min(100%,490px)}
  body.ccx-enabled .chaos-menu {gap:14px}
  body.ccx-enabled .hero-cards {gap:13px}
  body.ccx-enabled .location-mode-grid {grid-template-columns:1fr}
  body.ccx-enabled .location-mode-card {min-height:90px}
  body.ccx-enabled .player-item {gap:9px}
  body.ccx-enabled .play-layout {padding-top:16px}
  body.ccx-enabled .play-layout::before {height:120px}
  body.ccx-enabled .question-panel {padding:17px 13px}
  body.ccx-enabled .chaos-menu-link {font-size:1.08rem}
  body.ccx-enabled .ccx-brush-heading {font-size:1.25rem}
}
@media(max-width:430px) {
  body.ccx-enabled .topbar .brand {font-size:18px}
  body.ccx-enabled .topbar .brand small {display:none}
  body.ccx-enabled .chaos-hero-title {min-height:0}
  body.ccx-enabled .chaos-brand-ribbon {font-size:.9rem;line-height:1.17;padding:9px 12px}
  body.ccx-enabled .chaos-menu-link {min-height:62px;padding:12px 15px}
  body.ccx-enabled .chaos-menu-link span:first-child {font-size:1.6rem}
  body.ccx-enabled .player-item .avatar {width:40px;height:40px;flex-basis:40px}
  body.ccx-enabled .player-info strong {font-size:.89rem}
  body.ccx-enabled .status-pill {font-size:.7rem;padding:5px 7px}
  body.ccx-enabled .invite-code {padding:4px}
  body.ccx-enabled .ccx-title-sticker {font-size:clamp(1.35rem,8vw,2.5rem)}
  body.ccx-enabled .local-setup .name-fields {grid-template-columns:1fr}
}
@media(max-width:350px) {
  body.ccx-enabled .page-wrap {padding-inline:8px}
  body.ccx-enabled .page-wrap::after {width:calc(100% + 16px);margin-left:-8px;margin-right:-8px}
  body.ccx-enabled .topbar {padding:8px}
  body.ccx-enabled .topbar .btn {font-size:11px;min-height:42px}
  body.ccx-enabled .btn:not(.tiny) {font-size:.94rem}
  body.ccx-enabled .chaos-menu-link {font-size:.98rem}
  body.ccx-enabled .play-meta {gap:6px}
  body.ccx-enabled .play-meta .round-pill {padding:6px;font-size:.75rem}
}
@media(prefers-reduced-motion:reduce) {
  body.ccx-enabled .ccx-hero-logo,body.ccx-enabled .chaos-hero-art,
  body.ccx-enabled .ccx-title-sticker,body.ccx-enabled .ccx-brush-heading {transform:none!important;animation:none!important}
}


/* Mascotte et petites décorations comme sur la planche de référence. */
body.ccx-enabled .chaos-hero-title::after {
  content:"";position:absolute;left:max(-55px,calc(50% - 390px));top:30%;
  width:clamp(70px,13vw,155px);height:clamp(70px,13vw,155px);
  background:url("/art/ccx-cup-mascot.svg") center/contain no-repeat;
  transform:rotate(-16deg);pointer-events:none;z-index:2;
  filter:drop-shadow(0 4px 0 #110526);
}
body.ccx-enabled .brand-icon {
  font-size:0;width:45px;height:45px;border:0;
  background:url("/art/ccx-cup-mascot.svg") center/contain no-repeat;
  box-shadow:none;transform:rotate(-6deg);
}
body.ccx-enabled .ccx-avatar {
  padding:0!important;overflow:hidden;background:transparent!important;
  box-shadow:0 0 0 2px white,0 0 12px #7f5bf388;
}
body.ccx-enabled .ccx-avatar img {
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
}
body.ccx-enabled .ccx-podium {
  width:min(100%,630px);margin:24px auto 20px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;gap:12px;text-align:center;
}
body.ccx-enabled .ccx-podium-player {
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;min-width:0;
  color:white;font-weight:1000;
}
body.ccx-enabled .ccx-podium-player img {
  width:clamp(52px,10vw,82px);height:clamp(52px,10vw,82px);
  border-radius:50%;border:4px solid #fff;
  box-shadow:0 0 18px #d892ffad;background:#281747;
  object-fit:cover;margin-bottom:10px;
}
body.ccx-enabled .ccx-rank-1 img {border-color:var(--ccx-yellow);box-shadow:0 0 20px #fddd16}
body.ccx-enabled .ccx-rank-2 img {border-color:var(--ccx-cyan)}
body.ccx-enabled .ccx-rank-3 img {border-color:var(--ccx-orange)}
body.ccx-enabled .ccx-podium-name {
  display:block;margin-bottom:8px;max-width:100%;
  font-size:clamp(.84rem,2.7vw,1.3rem);
  overflow-wrap:anywhere;text-shadow:0 2px 0 #09081f;
}
body.ccx-enabled .ccx-podium-block {
  width:100%;border:3px solid #1a102b;border-bottom:0;
  border-radius:15px 15px 0 0;
  background:linear-gradient(#1cd8fc,#1752c0);
  box-shadow:0 0 18px #0cbefe77,inset 0 3px 0 #fff7;
  min-height:105px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  color:white;
}
body.ccx-enabled .ccx-podium-block b {
  font-size:clamp(1.9rem,6vw,3.1rem);line-height:1;
  text-shadow:2px 3px 0 #100929;
}
body.ccx-enabled .ccx-podium-block strong {font-size:clamp(.82rem,2.3vw,1.1rem)}
body.ccx-enabled .ccx-rank-1 .ccx-podium-block {
  background:linear-gradient(#ffe94c,#e9a210);min-height:158px;
  box-shadow:0 0 20px #fddd1699,inset 0 3px 0 #fffb8a;
  color:#160d25;
}
body.ccx-enabled .ccx-rank-1 .ccx-podium-block b {text-shadow:1px 2px 0 #fff}
body.ccx-enabled .ccx-rank-3 .ccx-podium-block {
  background:linear-gradient(#ff9a45,#be501e);min-height:80px;
  box-shadow:0 0 13px #ff913788,inset 0 3px 0 #ffcf8a;
}
body.ccx-enabled .ccx-podium + ol {margin-top:26px}
@media(max-width:520px){
  body.ccx-enabled .chaos-hero-title::after {left:0;top:36%;width:78px;height:78px}
  body.ccx-enabled .ccx-podium {gap:6px}
  body.ccx-enabled .ccx-podium-block {min-height:80px;border-width:2px}
  body.ccx-enabled .ccx-rank-1 .ccx-podium-block {min-height:122px}
  body.ccx-enabled .ccx-rank-3 .ccx-podium-block {min-height:66px}
}
@media(max-width:375px){
  body.ccx-enabled .chaos-hero-title::after {width:57px;height:57px;left:-4px;top:42%}
  body.ccx-enabled .ccx-podium-player img {width:48px;height:48px}
  body.ccx-enabled .ccx-podium-block strong {font-size:.74rem}
}
@media(prefers-reduced-motion:reduce){
  body.ccx-enabled .chaos-hero-title::after {transform:none}
}

/* Finition graphique V2 : hiérarchie, survol et ancres sans toucher au moteur. */
body.ccx-enabled :is(h1,h2,h3,p) { text-wrap: balance; }
body.ccx-enabled #salon-online { scroll-margin-top: 28px; }
body.ccx-enabled .chaos-tagline strong {
  padding: .04em .24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.ccx-enabled .chaos-hero-art {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
body.ccx-enabled .topbar { gap: 12px; }
@media (hover:hover) and (pointer:fine) {
  body.ccx-enabled :is(.btn, .chaos-menu-link):hover {
    transform: translateY(-2px);
    filter: brightness(1.06) saturate(1.05);
  }
  body.ccx-enabled .chaos-hero-art:hover {
    transform: rotate(-.3deg) translateY(-2px);
    box-shadow: 0 0 0 5px #090620, 0 0 30px #30e9ffbd, 0 14px 0 #09051e;
  }
}
@media (max-width:720px) {
  body.ccx-enabled .topbar { align-items: center; }
  body.ccx-enabled .topbar .brand { flex: 1 1 160px; min-width: 0; }
  body.ccx-enabled .chaos-tagline { max-width: 34rem; }
}
@media (max-width:430px) {
  body.ccx-enabled .chaos-hero-title { padding-inline: 6px; }
  body.ccx-enabled .chaos-tagline { font-size: 1rem; }
}


/* Paramètres d'ambiance : vrais interrupteurs, toujours au premier plan. */
body.ccx-enabled .ccx-options {
  position:fixed;top:var(--ccx-options-top,calc(env(safe-area-inset-top,0px) + 14px));right:var(--ccx-options-right,calc(env(safe-area-inset-right,0px) + 14px));
  z-index:5000;isolation:isolate;flex:0 0 auto;
}
body.ccx-enabled .ccx-options summary {
  list-style:none;cursor:pointer;white-space:nowrap;
}
body.ccx-enabled .ccx-options summary.btn.outline.tiny {
  min-height:43px;border-radius:999px;border-width:2px;
}
body.ccx-enabled .ccx-options summary::-webkit-details-marker {display:none}
body.ccx-enabled .ccx-options summary:focus-visible {
  outline:3px solid var(--ccx-cyan);outline-offset:3px;
}
body.ccx-enabled .ccx-options-inline {
  position:relative;top:auto;right:auto;display:block;flex:0 0 auto;
}
body.ccx-enabled .ccx-options-body {
  position:fixed;right:var(--ccx-options-right,calc(env(safe-area-inset-right,0px) + 14px));top:var(--ccx-options-panel-top,calc(env(safe-area-inset-top,0px) + 76px));z-index:5001;
  width:min(308px,calc(100vw - 30px));
  max-height:min(70vh,460px);overflow:auto;
  background:linear-gradient(140deg,#1f1547,#0e0c29);
  padding:17px;border:3px solid #ac7ef9;border-radius:21px;
  box-shadow:0 8px 0 #060318,0 0 22px #ad66ff66,0 12px 45px #05020dcc;
}
body.ccx-enabled .ccx-options-inline .ccx-options-body {
  position:fixed;top:var(--ccx-options-panel-top,calc(env(safe-area-inset-top,0px) + 76px));right:var(--ccx-options-right,calc(env(safe-area-inset-right,0px) + 14px));
}
body.ccx-enabled .ccx-options-body>strong {
  font-size:1rem;color:var(--ccx-yellow);display:block;
  font-weight:1000;line-height:1.35;margin:0 0 13px;
}
body.ccx-enabled .ccx-options-body label {
  display:flex;align-items:center;justify-content:space-between;
  gap:13px;min-height:49px;margin:5px 0;
  border-radius:999px;border:1px solid #6d58a4;
  padding:6px 10px 6px 15px;background:#1b153c;
  font-size:1rem;line-height:1.3;color:white;
}
body.ccx-enabled .ccx-options-body label:has(input:checked){
  border-color:var(--ccx-lime);background:#203f39;
}
body.ccx-enabled .ccx-options-body input {
  appearance:none;-webkit-appearance:none;
  flex:0 0 52px;width:52px;height:29px;margin:0;
  background:linear-gradient(#aaa6b5,#666373);
  border:2px solid #b2a8bd;border-radius:999px;
  cursor:pointer;position:relative;transition:background .15s;
}
body.ccx-enabled .ccx-options-body input::before {
  content:"";display:block;position:absolute;left:2px;top:2px;
  width:21px;height:21px;border-radius:50%;background:white;
  box-shadow:0 2px 3px #0006;transition:transform .15s;
}
body.ccx-enabled .ccx-options-body input:checked {
  background:linear-gradient(#c6ff66,#88ec0d);border-color:#e1ffac;
}
body.ccx-enabled .ccx-options-body input:checked::before {transform:translateX(23px)}
body.ccx-enabled .ccx-options-body input:disabled {opacity:.45;cursor:not-allowed}
body.ccx-enabled .ccx-options-body input:focus-visible {
  outline:3px solid var(--ccx-cyan);outline-offset:3px;
}
body.ccx-enabled .ccx-options-body small {
  display:block;margin-top:12px;color:#d5cbe9;line-height:1.45;font-size:.72rem;
}
@media(prefers-reduced-motion:reduce){
  body.ccx-enabled .ccx-options-body input,body.ccx-enabled .ccx-options-body input::before {transition:none}
}
@media(max-width:600px){
  body.ccx-enabled .ccx-options-body{width:min(308px,calc(100vw - 20px))}
}

/* En-tête local : logo à gauche, lieu centré, commandes dans un ovale dédié. */
body.ccx-enabled .local-topbar {
  position:relative;z-index:6000;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:transparent;border:0;border-radius:0;box-shadow:none;margin:6px 0 24px;padding:0;
}
body.ccx-enabled .local-topbar-line {
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  width:100%;min-height:52px;
}
body.ccx-enabled .local-topbar-line .brand {grid-column:1;justify-self:start;min-width:0;}
body.ccx-enabled .local-topbar-line .header-chip {grid-column:2;justify-self:center;}
body.ccx-enabled .local-topbar-spacer {grid-column:3;}
body.ccx-enabled .local-topbar-actions {
  display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:nowrap;min-width:0;max-width:100%;
  width:max-content;padding:8px 12px;border:2px solid #a76bf7;border-radius:999px;
  background:#100b2fdb;box-shadow:0 4px 0 #050318,0 0 14px #922eff6a;
}
body.ccx-enabled .local-topbar-actions > * {flex:0 0 auto;}
body.ccx-enabled .ccx-options-host {display:flex;align-items:center;}
body.ccx-enabled .local-screen-lock-host {display:flex;align-items:center;flex:0 0 auto;}
body.ccx-enabled .local-topbar-progress {display:block;width:min(100%,875px);}
body.ccx-enabled .local-topbar-progress .chaos-round-progress {margin:0 0 13px;width:100%;}
body.ccx-enabled .local-topbar-progress-line {display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;}
body.ccx-enabled .local-topbar-progress-line .chaos-round-progress {flex:0 0 50%;width:auto;min-width:0;}
body.ccx-enabled .local-active-reader {flex:0 0 auto;margin:0 0 13px;padding:9px 13px;border:2px solid #23e2f1;border-radius:999px;background:#1e1642;color:#fff;font-weight:950;line-height:1;white-space:nowrap;text-shadow:0 0 10px #cc8fff;}
body.ccx-enabled.ccx-local-playing .local-answering .secret-stage-compact .secret-player {display:none;}
body.ccx-enabled.ccx-local-playing .play-layout.local-gage-view {margin-top:0;padding-top:0;}
body.ccx-enabled.ccx-local-playing .play-layout.local-gage-view::before {display:none;}
body.ccx-enabled.ccx-local-playing .local-topbar {gap:6px;margin-bottom:0;}
@media(max-width:720px){
  body.ccx-enabled .local-topbar-line {grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  body.ccx-enabled .local-topbar-line .brand {font-size:18px;}
  body.ccx-enabled .local-topbar-line .brand small {display:none;}
  body.ccx-enabled .local-topbar-actions {width:min(100%,calc(100vw - 32px));justify-content:flex-start;overflow-x:auto;padding:8px 10px;}
  body.ccx-enabled .local-active-reader {padding:8px 10px;font-size:.82rem;}
}


/* Accueil : œuvre centrale sélectionnée, uniquement dans le thème Chaos Explosif.
   Les textes et boutons du vrai jeu restent des éléments HTML interactifs.
   Ne pas réutiliser cette image comme face d'une carte imprimable. */
body.ccx-enabled .hero.chaos-game-home .chaos-hero-art {
  max-width:790px;
  width:min(100%,790px);
  overflow:visible;
  border:4px solid #a7efff;
  border-radius:23px;
  isolation:isolate;
  background:#100c30;
  box-shadow:0 0 0 5px #090620,0 0 20px #30e9ff9c,0 12px 0 #09051e;
}
body.ccx-enabled .hero.chaos-game-home .chaos-hero-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:contain;
  border-radius:18px;
  background:#130c2d;
}
body.ccx-enabled .hero.chaos-game-home .chaos-card-counter {
  position:absolute;
  right:10px;
  bottom:13px;
  left:auto;
  z-index:2;
  max-width:calc(100% - 20px);
  padding:6px 10px;
  line-height:1.2;
  text-align:center;
  font-size:clamp(.68rem,1.8vw,.95rem);
  white-space:normal;
  overflow-wrap:anywhere;
  transform:rotate(-3deg);
}
body.ccx-enabled .local-setup .chaos-setup-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:contain;
  background:#110d2b;
}
@media(max-width:720px) {
  body.ccx-enabled .hero.chaos-game-home .chaos-hero-art {
    width:100%;
    margin:15px auto 20px;
  }
  body.ccx-enabled .hero.chaos-game-home .chaos-card-counter {
    right:8px;bottom:10px;
  }
}
@media(max-width:375px) {
  body.ccx-enabled .hero.chaos-game-home .chaos-card-counter {
    font-size:.62rem;
    padding:5px 8px;
  }
}

/* V149 — accueil : l’illustration reste seule, centrée et resserrée sur sa
   vraie largeur. Le panneau néon et la pastille superposée ajoutaient une
   bulle vide autour des personnages ; ils ne doivent pas entourer l’image. */
body.ccx-enabled .hero.chaos-game-home .chaos-hero-art {
  width:clamp(280px,64vw,520px);
  max-width:100%;
  margin:10px auto 16px;
  overflow:visible;
  border:0;
  border-radius:0;
  isolation:auto;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body.ccx-enabled .hero.chaos-game-home .chaos-hero-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:0;
  background:transparent;
}
body.ccx-enabled .hero.chaos-game-home .chaos-card-counter {display:none;}

/* Page dédiée au jeu à plusieurs : l'accueil reste une vitrine, cette page porte l'action. */
body.ccx-enabled .multiplayer-hero {
  max-width:760px;
  padding:28px 12px 16px;
  margin-inline:auto;
}
body.ccx-enabled .multiplayer-hero h1 {
  max-width:700px;
  margin:10px auto 14px;
  font-size:clamp(2rem,5vw,3.8rem);
  letter-spacing:-.055em;
  line-height:.98;
  text-wrap:balance;
}
body.ccx-enabled .multiplayer-hero-art {
  position:relative;
  width:min(100%,520px);
  margin:12px auto 16px;
  overflow:hidden;
  border:3px solid #a7efff;
  border-radius:22px;
  background:#100c30;
  box-shadow:0 0 0 4px #090620,0 0 18px #30e9ff80,0 8px 0 #09051e;
}
body.ccx-enabled .multiplayer-hero-art img {
  display:block;
  width:100%;
  height:auto;
  max-height:240px;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
body.ccx-enabled .multiplayer-hero-badge {
  position:absolute;
  right:9px;
  bottom:9px;
  max-width:calc(100% - 18px);
  padding:5px 9px;
  border:2px solid #fff7a3;
  border-radius:999px;
  background:var(--ccx-yellow);
  color:var(--ccx-ink);
  box-shadow:2px 3px 0 #08051e;
  font-size:.68rem;
  font-weight:1000;
  line-height:1.1;
  text-align:center;
}
body.ccx-enabled .multiplayer-step-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:min(100%,560px);
  margin:8px auto 12px;
  color:#fff;
  font-size:.78rem;
  font-weight:1000;
  letter-spacing:.035em;
  text-transform:uppercase;
}
body.ccx-enabled .multiplayer-step-bar > span {
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 12px;
  border:2px solid #b8a3fc;
  border-radius:999px;
  background:linear-gradient(160deg,#33215e,#1b113e);
  box-shadow:0 4px 0 #080419;
}
body.ccx-enabled .multiplayer-step-bar .chaos-menu-link {
  min-height:38px;
  padding:7px 12px;
  font-size:.78rem;
  letter-spacing:0;
  text-transform:none;
}
body.ccx-enabled .multiplayer-selected-mode {
  width:min(100%,560px);
  margin:4px auto 12px;
  text-align:center;
}
body.ccx-enabled .multiplayer-actions {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  width:min(100%,760px);
  max-width:560px;
  margin:22px auto 18px;
  gap:10px;
}
body.ccx-enabled .multiplayer-action-card {
  min-width:0;
  padding:9px;
  border:3px solid #fffec8;
  border-radius:24px;
  background:linear-gradient(160deg,#33215d,#1b1239);
  box-shadow:0 5px 0 #080419,0 0 16px #a467ff66;
}
body.ccx-enabled .multiplayer-action-card.chaos-menu-pink {
  border-color:#d2ffff;
  box-shadow:0 5px 0 #007788,0 0 17px #17d9fb91;
}
body.ccx-enabled .multiplayer-action-form { display:flex; flex-direction:column; gap:7px; }
body.ccx-enabled .multiplayer-action-heading {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:7px 10px;
  border:3px solid #fffec8;
  border-radius:999px;
  color:#15081e;
  font-size:.94rem;
  font-style:italic;
  font-weight:1000;
  line-height:1.08;
  box-shadow:0 4px 0 #a86810;
}
body.ccx-enabled .multiplayer-action-card.chaos-menu-gold .multiplayer-action-heading {
  background:linear-gradient(#ffff6d 0%,#ffe529 40%,#ffbb17);
}
body.ccx-enabled .multiplayer-action-card.chaos-menu-pink .multiplayer-action-heading {
  border-color:#d2ffff;
  background:linear-gradient(#61faff,#21eaf2 40%,#00bccc);
  box-shadow:0 4px 0 #007788;
}
body.ccx-enabled .multiplayer-action-heading .location-mode-icon {
  flex:0 0 1.25rem;
  font-size:1.15rem;
  line-height:1;
}
body.ccx-enabled .multiplayer-action-heading strong { flex:1 1 auto; min-width:0; }
body.ccx-enabled .multiplayer-action-heading .location-mode-arrow { font-size:.85rem; }
body.ccx-enabled .multiplayer-action-form .field { margin:0; }
body.ccx-enabled .multiplayer-action-form label {
  display:block;
  margin:0 0 3px;
  color:#fff;
  font-size:.72rem;
  font-weight:950;
}
body.ccx-enabled .multiplayer-action-form input {
  width:100%;
  min-height:40px;
  padding:8px 10px;
  border:2px solid #cfc4ed;
  border-radius:14px;
  background:#120d2d;
  color:#fff;
  box-shadow:inset 0 2px 0 #070416,0 3px 0 #080419;
}
body.ccx-enabled .multiplayer-action-form input::placeholder { color:#bcb5d4; opacity:1; }
body.ccx-enabled .multiplayer-action-form .code-input { letter-spacing:.22em; text-align:center; }
body.ccx-enabled .multiplayer-action-submit {
  width:100%;
  min-height:40px!important;
  margin:1px 0 0!important;
  padding:8px 10px!important;
  border-width:3px!important;
  border-radius:999px!important;
  font-size:.88rem!important;
  line-height:1.05!important;
}
body.ccx-enabled .multiplayer-action-card.chaos-menu-gold .multiplayer-action-submit {
  background:linear-gradient(#ffff6d 0%,#ffe529 40%,#ffbb17);
  color:#15081e;
  border-color:#fffec8;
  box-shadow:0 4px 0 #a86810,0 0 13px #ffe83170;
}
body.ccx-enabled .multiplayer-action-card.chaos-menu-pink .multiplayer-action-submit {
  background:linear-gradient(#61faff,#21eaf2 40%,#00bccc);
  color:#15081e;
  border-color:#d2ffff;
  box-shadow:0 4px 0 #007788,0 0 13px #17d9fb78;
}
@media(max-width:900px) {
  body.ccx-enabled .multiplayer-hero {padding:24px 6px 14px;}
  body.ccx-enabled .multiplayer-hero h1 {font-size:clamp(2rem,8vw,3.3rem);}
  body.ccx-enabled .multiplayer-hero-art {width:min(100%,460px);margin-top:10px;}
  body.ccx-enabled .multiplayer-hero-art img {max-height:210px;}
  body.ccx-enabled .multiplayer-actions {width:min(100%,560px);gap:10px;}
  body.ccx-enabled .multiplayer-action-card {padding:8px;}
}
@media(max-width:720px) {
  body.ccx-enabled .multiplayer-actions {grid-template-columns:1fr;width:min(100%,560px);}
  body.ccx-enabled .chaos-location-menu {grid-template-columns:1fr;max-width:560px;}
}
@media(max-width:430px) {
  body.ccx-enabled .multiplayer-hero {padding:18px 0 10px;}
  body.ccx-enabled .multiplayer-hero h1 {font-size:clamp(1.9rem,10vw,2.7rem);}
  body.ccx-enabled .multiplayer-hero-art {border-width:2px;border-radius:17px;box-shadow:0 0 0 3px #090620,0 6px 0 #09051e;}
  body.ccx-enabled .multiplayer-hero-badge {right:6px;bottom:6px;padding:4px 7px;font-size:.58rem;}
  body.ccx-enabled .multiplayer-actions {margin-top:18px;}
  body.ccx-enabled .multiplayer-action-card {padding:8px;}
}

/* Les choix de lieu suivent désormais la même grammaire de boutons que le menu principal. */
body.ccx-enabled .location-modes {
  max-width:640px;
  margin:20px auto 24px;
  padding-inline:0;
  text-align:center;
}
body.ccx-enabled .location-modes .chaos-section-title {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 auto 10px;
  padding:10px 18px;
  border:3px solid #b8a3fc;
  border-radius:999px;
  background:linear-gradient(160deg,#33215d,#1b1239);
  color:#fff;
  box-shadow:0 5px 0 #080419,0 0 16px #a467ff66;
  font-size:clamp(1.05rem,2.8vw,1.4rem);
  line-height:1.15;
  text-shadow:2px 3px 0 #0c0926;
}
body.ccx-enabled .location-modes > .subtle {
  max-width:620px;
  margin:0 auto 17px;
}
body.ccx-enabled .chaos-location-menu {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  width:min(100%,560px);
  max-width:560px;
  margin:0 auto;
}
body.ccx-enabled .location-mode-card.chaos-menu-link {
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-height:48px;
  padding:7px 10px;
  text-align:left;
  text-decoration:none;
  border-bottom-width:3px;
  border-radius:999px;
}
body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-icon {
  flex:0 0 1.35rem;
  color:inherit;
  font-size:clamp(1.15rem,2.3vw,1.35rem);
  line-height:1;
}
body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-copy {
  display:grid;
  flex:1 1 auto;
  min-width:0;
  gap:3px;
}
body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-copy strong {
  color:inherit;
  font-size:clamp(.84rem,1.8vw,.96rem);
  line-height:1.2;
}
body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-copy small {
  color:inherit;
  opacity:.84;
  font-size:clamp(.7rem,1.55vw,.82rem);
  line-height:1.35;
}
body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-arrow {
  order:4;
  flex:0 0 auto;
  margin-left:auto;
  color:inherit;
  opacity:.82;
  font-size:.9rem;
  line-height:1;
}
body.ccx-enabled .location-mode-card.chaos-menu-pink .location-mode-copy,
body.ccx-enabled .location-mode-card.chaos-menu-pink .location-mode-icon,
body.ccx-enabled .location-mode-card.chaos-menu-pink .location-mode-arrow {
  color:var(--ccx-ink);
}
body.ccx-enabled .location-mode-card.chaos-menu-gold .location-mode-copy,
body.ccx-enabled .location-mode-card.chaos-menu-gold .location-mode-icon,
body.ccx-enabled .location-mode-card.chaos-menu-gold .location-mode-arrow {
  color:#15081e;
}
body.ccx-enabled .location-mode-card.chaos-menu-pink .location-mode-copy small { opacity:.72; }
body.ccx-enabled .location-mode-card.chaos-menu-link.selected {
  border-color:#fff;
  outline:2px solid var(--ccx-lime);
  outline-offset:2px;
}
body.ccx-enabled .location-mode-card.chaos-menu-gold.selected {
  background:linear-gradient(#ffff6d 0%,#ffe529 40%,#ffbb17);
  color:#15081e;
  box-shadow:0 5px 0 #a86810,0 0 17px #ffe83185,0 12px 20px #0007;
}
body.ccx-enabled .location-mode-card.chaos-menu-pink.selected {
  background:linear-gradient(#61faff,#21eaf2 40%,#00bccc);
  color:#15081e;
  box-shadow:0 5px 0 #007788,0 0 17px #17d9fb91,0 12px 20px #0008;
}
body.ccx-enabled .location-mode-card.chaos-menu-link.selected::after {
  content:none;
  display:none;
}
body.ccx-enabled .location-modes > .safety-info {
  display:inline-flex;
  max-width:640px;
  margin:10px auto 0;
  padding:7px 10px;
  border-radius:14px;
  font-size:.78rem;
  line-height:1.3;
  text-align:center;
}
@media(max-width:430px) {
  body.ccx-enabled .location-modes { margin-top:18px; }
  body.ccx-enabled .location-modes .chaos-section-title { padding:8px 12px; }
  body.ccx-enabled .location-mode-card.chaos-menu-link { min-height:46px; padding:7px 9px; gap:7px; }
  body.ccx-enabled .location-mode-card.chaos-menu-link .location-mode-icon { flex-basis:1.3rem; font-size:1.2rem; }
}

/* V150 — le même traitement s'applique à chaque emplacement de
   ccx-party-hero.webp : accueil, création de salle et configuration locale.
   Aucun de ces écrans ne doit ajouter un panneau ou une bordure autour de la
   scène centrale. Cette règle arrive en dernier pour neutraliser aussi les
   variantes responsives des anciens panneaux. */
body.ccx-enabled :is(.multiplayer-hero-art,.local-setup .chaos-setup-art) {
  width:clamp(280px,64vw,520px);
  max-width:100%;
  margin:10px auto 16px;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
}
body.ccx-enabled :is(.multiplayer-hero-art,.local-setup .chaos-setup-art) img {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:3 / 2;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:0;
  background:transparent;
}
body.ccx-enabled .multiplayer-hero-badge {display:none;}