/* ============================================================
   MODE COUPLE — refonte NEO-BRUTALISM / DARK MODE
   Remplacement de l'ancien mode Boudoir.
   ============================================================ */

/* THÈME PAR DÉFAUT : NEO-BRUTALISM */
#cp-root.cp-root {
  --magenta: #FF2E93;
  --yellow: #FFD600;
  --cyan: #5BD8E5;
  --green: #5BE885;
  --red: #FF5252;
  --purple: #C271FF;
  --blue: #4D7CFF;
  --orange: #FF9F45;
  --pink: #FF80AB;

  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: stretch; justify-content: center;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(10,10,10,.1) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: 'Anton', sans-serif;
  overflow: hidden;   /* seul .cp-scroll défile → top bar (et footer) restent fixes */
}
#cp-root.cp-root.active {
  display: flex;
}

/* THÈME ALTERNATIF : DARK MODE */
#cp-root.cp-root.theme-dark {
  --paper: #121212;
  --ink: #EEEEEE;
  --magenta: #E21B70;
  --yellow: #F0A500;
  --cyan: #3CAEA3;
  --green: #4E9F3D;
  background-color: #050505;
  background-image: radial-gradient(rgba(238,238,238,.05) 1.5px, transparent 1.6px);
}

@keyframes cp-fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
#cp-root .cp-stage {
  width: 100%; max-width: 480px; margin: 0 auto;
  height: 100%; display: flex; flex-direction: column;
}
#cp-root .cp-topbar { flex-shrink: 0; }   /* top bar FIXE en haut (hors scroll) */
/* zone scrollable (le reste de l'écran) */
#cp-root .cp-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
/* l'animation d'entrée ne joue QU'au changement d'écran (pas à chaque re-render → plus de flash blanc au clic) */
#cp-root .cp-scroll.enter { animation: cp-fade .3s ease; }
#cp-root .cp-title { font-family:'Anton',sans-serif; font-size:30px; letter-spacing:1px; line-height:1; color:var(--ink); margin:0; }
#cp-root * { box-sizing: border-box; }

/* En-tête */
#cp-root .cp-head { display: flex; flex-direction: column; gap: 10px; position:relative; }
#cp-root .cp-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  border: 4px solid var(--ink); border-radius:0; background: var(--yellow);
  padding: 6px 14px; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
#cp-root .cp-theme-btn {
  position: absolute; right: 0; top: 0;
  border: 4px solid var(--ink); border-radius:0; background: var(--paper); color: var(--ink);
  padding: 6px 10px; cursor: pointer; box-shadow: 3px 3px 0 var(--magenta);
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 14px;
  transition: transform 0.1s;
}
#cp-root .cp-theme-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--magenta); }

#cp-root .cp-h {
  font-size: 32px; letter-spacing: 1px; color: var(--ink); font-family: 'Anton', sans-serif;
  text-transform: uppercase; line-height: 1.1;
}
#cp-root .cp-sub { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; color: var(--ink); opacity: 0.8; }

/* Grille des sous-modes (Hub) */
#cp-root .cp-modes { display: flex; flex-direction: column; gap: 12px; }
#cp-root .cp-tile {
  position: relative; display: flex; align-items: center; gap: 14px;
  border: 4px solid var(--ink); border-radius:0;
  background: var(--paper); padding: 16px 14px; cursor: pointer; text-align: left; width: 100%;
  color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform 0.1s, box-shadow 0.1s;
}
#cp-root .cp-tile:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
#cp-root .cp-tile[disabled] { opacity: .5; pointer-events: none; }
#cp-root .cp-tile .emo {
  width: 52px; height: 52px; flex-shrink: 0; border: 3px solid var(--ink); border-radius:0;
  background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 28px;
  box-shadow: 2px 2px 0 var(--ink);
}
#cp-root .cp-tile .tt { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: .5px; line-height: 1; margin-bottom: 5px; }
#cp-root .cp-tile .cp-ds { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 10px; opacity: 0.8; line-height: 1.3; }
#cp-root .cp-tile .cp-soon {
  position: absolute; top: -10px; right: 10px; font-family: 'Anton', sans-serif; font-size: 12px;
  color: var(--paper); background: var(--ink); border: 2px solid var(--ink); padding: 2px 8px; transform: rotate(5deg);
}

/* Grille des Packs (Quiz-like) */
#cp-root .cp-modes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 0; padding-bottom: 80px;
}
#cp-root .cp-pk-tile {
  background: var(--paper); border: 4px solid var(--ink); border-radius:0;
  padding: 10px; display: flex; flex-direction: column; position: relative;
  box-shadow: 4px 4px 0 var(--ink);
}
#cp-root .cp-pk-tile.on { }
#cp-root .cp-pk-tile { border-radius:0; padding: 12px; }
#cp-root .cp-pk-tile.on { box-shadow: 6px 6px 0 var(--ink); }
#cp-root .cp-pk-tile .nemoji-wrap {
  display: grid; place-items: center; border: 3px solid var(--ink); background: var(--paper);
  width: 42px; height: 42px; margin-bottom: 9px; border-radius:0; box-shadow: 2px 2px 0 var(--ink);
}
#cp-root .cp-pk-tile .nemoji { width: 26px; height: 26px; font-size: 22px !important; }
#cp-root .cp-pk-tile .pk-tt {
  font-family: 'Anton', sans-serif; font-size: 16px; color: inherit;
  line-height: 1; letter-spacing: .5px; margin-bottom: 4px;
}
#cp-root .cp-pk-tile .pk-ds {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  color: inherit; opacity: 0.75; margin-bottom: 12px;
}
/* boutons neutres (blanc) pour ne PAS clasher avec les tuiles colorées */
#cp-root .cp-pk-tile .pk-add {
  background: var(--paper); border: 3px solid var(--ink); border-radius:0;
  color: var(--ink); padding: 6px 8px; font-family: 'Anton', sans-serif; font-size: 11px;
  margin-top: auto; box-shadow: 2px 2px 0 var(--ink); text-align: center; cursor: pointer;
  width: 100%; transition: transform 0.1s;
}
#cp-root .cp-pk-tile .pk-add:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
#cp-root .cp-pk-tile .pk-step {
  background: var(--paper); border: 3px solid var(--ink); border-radius:0;
  color: var(--ink); padding: 5px; font-family: 'Anton', sans-serif; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; margin-top: auto;
  box-shadow: 2px 2px 0 var(--ink); width: 100%;
}
#cp-root .cp-pk-tile .pk-st-btn {
  cursor: pointer; width: 24px; height: 24px; text-align: center; background: var(--yellow);
  border: 2px solid var(--ink); border-radius:0; display: grid; place-items: center;
  user-select: none;
}
#cp-root .cp-pk-tile .pk-st-btn:active { transform: translate(1px,1px); }

#cp-root .cp-sticky-bot {
  position: sticky; bottom: 0; margin: auto -18px calc(-20px - env(safe-area-inset-bottom)); padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 4px solid var(--ink); z-index: 100;
}
#cp-root .cp-sticky-btn {
  background: var(--green); border: 4px solid var(--ink); border-radius:0;
  color: var(--ink); font-family: 'Anton', sans-serif; font-size: 22px;
  padding: 12px; text-align: center; box-shadow: 4px 4px 0 var(--ink); cursor: pointer;
}
#cp-root .cp-sticky-btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
#cp-root .cp-sticky-btn span {
  background: white; padding: 2px 8px; border: 3px solid var(--ink);
  border-radius:0; margin: 0 4px; display: inline-block;
}


/* Playcard */
#cp-root .cp-play-mid { flex:1; display:flex; flex-direction:column; justify-content:center; gap:14px; }
#cp-root .cp-card {
  border: 4px solid var(--ink); border-radius:0; background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink); padding: 24px 20px; display: flex; flex-direction: column; gap: 20px;
}
#cp-root .cp-q { font-family: 'Anton', sans-serif; font-size: 22px; text-align: center; color: var(--ink); line-height: 1.2; }
#cp-root .cp-opts { display: flex; flex-direction: column; gap: 14px; }
#cp-root .cp-opt {
  display: flex; align-items: center; gap: 13px; border: 4px solid var(--ink); border-radius:0;
  background: var(--paper); padding: 16px 14px; cursor: pointer; color: var(--ink);
  text-align: left; transition: transform .1s; box-shadow: 4px 4px 0 var(--ink);
}
#cp-root .cp-opt:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
#cp-root .cp-opt .lb {
  width: 38px; height: 38px; flex-shrink: 0; border: 3px solid var(--ink); border-radius:0;
  display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 18px;
  background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
#cp-root .cp-opt .ot { font-family: 'Anton', sans-serif; font-size: 20px; line-height: 1.1; }
#cp-root .cp-opt.sel { background: var(--cyan); }
#cp-root .cp-opt.lock { opacity: .8; pointer-events: none; }
#cp-root .cp-opt.you { background: var(--yellow); }
#cp-root .cp-opt.them { background: var(--magenta); color: var(--paper); }
#cp-root .cp-opt .tags { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
#cp-root .cp-opt .tg {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 10px; border: 2px solid var(--ink);
  padding: 3px 7px; background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* Attente et score */
#cp-root .cp-wait { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin: auto 0; padding: 20px; }
#cp-root .cp-wait .cp-ic { font-size: 50px; }
#cp-root .cp-wait .tx { font-family: 'Anton', sans-serif; font-size: 24px; color: var(--ink); }
#cp-root .cp-wait .sx { font-family: 'IBM Plex Mono', monospace; font-style: italic; font-size: 12px; color: var(--ink); opacity: 0.8; }
#cp-root .cp-dots { display: inline-flex; gap: 6px; }
#cp-root .cp-dots i { width: 8px; height: 8px; border-radius:0; background: var(--magenta); animation: cp-bounce 1.1s infinite; }
#cp-root .cp-dots i:nth-child(2){ animation-delay: .15s; }
#cp-root .cp-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes cp-bounce { 0%,80%,100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-7px); opacity:1; } }


#cp-root .cp-result {
  border: 4px solid var(--ink); border-radius:0; background: var(--green);
  box-shadow: 4px 4px 0 var(--ink); padding: 20px; text-align: center; color: var(--ink);
}
#cp-root .cp-result .cp-big { font-family: 'Anton', sans-serif; font-size: 32px; }
#cp-root .cp-result .cp-sm { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; margin-top: 5px; }

#cp-root .cp-score { display: flex; flex-direction: column; gap: 6px; }
#cp-root .cp-score .cp-lab { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; color: var(--ink); }
#cp-root .cp-bar { height: 16px; border: 3px solid var(--ink); border-radius:0; background: var(--paper); overflow: hidden; margin-top: 6px; box-shadow: inset 2px 2px 0 rgba(0,0,0,0.1); }
#cp-root .cp-bar > i { display: block; height: 100%; filter: brightness(0.9); background: var(--magenta); border-right: 3px solid var(--ink); transition: width .3s; }

/* Boutons generiques */
#cp-root .cp-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
#cp-root .cp-cta {
  border: 4px solid var(--ink); border-radius:0; padding: 18px;
  font-family: 'Anton', sans-serif; font-size: 20px; color: var(--ink); background: var(--cyan);
  box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
  display: flex; justify-content: center; align-items: center; width: 100%;
}
#cp-root .cp-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
#cp-root .cp-cta.gold { background: var(--yellow); }
#cp-root .cp-cta.ghost { background: var(--paper); }

/* Qui est qui */
#cp-root .cp-who { display: flex; gap: 14px; }
#cp-root .cp-w { flex: 1; border: 4px solid var(--ink); border-radius:0; padding: 20px 10px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); text-align: center; position: relative; }
#cp-root .cp-w.lui { background: var(--cyan); color: var(--ink); }
#cp-root .cp-w.elle { background: var(--magenta); color: var(--paper); }
#cp-root .cp-w .cp-sx { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); border: 3px solid var(--ink); background: var(--paper); color: var(--ink); border-radius:0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: 'Anton', sans-serif; box-shadow: 2px 2px 0 var(--ink); }
#cp-root .cp-av { width: 70px; height: 70px; margin: 0 auto 10px; border: 3px solid var(--ink); border-radius:0; background: var(--paper); overflow: hidden; box-shadow: 2px 2px 0 var(--ink); display:flex; justify-content:center; align-items:center; }
#cp-root .cp-av img, #cp-root .cp-av svg { width:100%; height:100%; }
#cp-root .cp-role { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 1px; }
#cp-root .cp-w.lui .cp-role, #cp-root .cp-w.elle .cp-role { color: inherit; }
#cp-root .cp-who-nm { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; margin-top: 5px;}
#cp-root .cp-swap { align-self: center; border: 3px solid var(--ink); background: var(--yellow); color: var(--ink); border-radius:0; padding: 10px 16px; font-family: 'Anton', sans-serif; font-size: 16px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; transition: transform 0.1s;}
#cp-root .cp-swap:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

#cp-root .cp-mine { text-align: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; margin-top: auto; opacity: 0.8; }
#cp-root .cp-mine .cp-b { color: var(--magenta); }

/* MODE COUPLE v1 — tuiles de sous-modes pas encore finis (BIENTÔT) */
#cp-root .cp-pk-tile.soon { opacity: .5; filter: grayscale(.4); cursor: not-allowed; position: relative; }
#cp-root .cp-pk-tile.soon .pk-soon {
  position: absolute; top: 6px; right: 6px; background: var(--ink); color: var(--paper);
  font-family: 'Anton', sans-serif; font-size: 10px; letter-spacing: 1px; padding: 2px 8px;
  border: 2px solid var(--paper); border-radius:0; transform: rotate(6deg); z-index: 3;
}

/* MODE COUPLE v1 — sélecteur d'intensité ACTION/VÉRITÉ */
#cp-root .cp-intensity { margin: 10px 4px 0; padding: 12px 14px; border: 3px solid var(--ink); border-radius:0; background: var(--paper); }
#cp-root .cp-int-lbl { font-family: 'Anton', sans-serif; font-size: 13px; letter-spacing: .5px; color: var(--ink); margin-bottom: 9px; }
#cp-root .cp-int-opts { display: flex; gap: 6px; }
#cp-root .cp-int { flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 10.5px; padding: 9px 3px; border: 2.5px solid var(--ink); border-radius:0; background: transparent; color: var(--ink); cursor: pointer; transition: transform .05s; }
#cp-root .cp-int:active { transform: translateY(1px); }
#cp-root .cp-int.on { background: var(--magenta); color: #fff; box-shadow: 2px 2px 0 var(--ink); }

/* MODE COUPLE v1 — carte "code à partager" dans le salon */
#cp-root .cp-code-card {
  margin: 8px auto 4px; max-width: 340px; text-align: center;
  border: 4px solid var(--ink); border-radius:0; background: var(--yellow);
  box-shadow: 6px 6px 0 var(--ink); padding: 16px 18px 18px;
}
#cp-root .cp-code-lbl { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; letter-spacing: 2px; color: var(--ink); opacity: .75; }
#cp-root .cp-code-big {
  font-family: 'Anton', sans-serif; font-size: 52px; letter-spacing: 6px; line-height: 1.05; color: var(--ink);
  margin: 4px 0 2px;
}
#cp-root .cp-code-hint { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 11px; line-height: 1.4; color: var(--ink); opacity: .8; }

/* MODE COUPLE — HEADER V1 (barre fine, titre centré, pleine largeur) */
#cp-root .cp-hb { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px;
  margin:-26px -20px 4px; padding:10px 16px; border-bottom:4px solid var(--ink); background:var(--paper); }
#cp-root .cp-hb-q { width:38px; height:38px; border:3px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink);
  font-family:'Anton',sans-serif; font-size:16px; box-shadow:2px 2px 0 var(--ink); cursor:pointer; display:grid; place-items:center; }
#cp-root .cp-hb-c { text-align:center; min-width:0; }
#cp-root .cp-hb-t { font-family:'Anton',sans-serif; font-size:17px; letter-spacing:.5px; line-height:1; color:var(--ink); }
#cp-root .cp-hb-t span { color:var(--magenta); }
#cp-root .cp-hb-s { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:8.5px; letter-spacing:1.5px; opacity:.55; margin-top:3px; color:var(--ink); }
#cp-root .cp-hb-th { justify-self:end; width:38px; height:38px; border:3px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink);
  font-size:15px; box-shadow:2px 2px 0 var(--magenta); cursor:pointer; display:grid; place-items:center; }

/* MODE COUPLE — cartes « VERSUS » (salon + qui-est-qui) */
#cp-root .cp-vs { display:flex; gap:14px; position:relative; margin-top:6px; align-items:stretch; }
#cp-root .cp-vcard { flex:1; border:4px solid var(--ink); border-radius:0; padding:16px 8px 14px; text-align:center; box-shadow:5px 5px 0 var(--ink); position:relative; }
#cp-root .cp-vcard.lui { background:var(--cyan); color:var(--ink); transform:rotate(-2deg); }
#cp-root .cp-vcard.elle { background:var(--magenta); color:#fff; transform:rotate(2deg); }
#cp-root .cp-vcard.empty { background:#efe9e0; color:#a49a90; border-style:dashed; box-shadow:none; transform:none; }
#cp-root .cp-vs.qq .cp-vcard { transform:none; }
#cp-root .cp-gd { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:'Anton',sans-serif; font-size:11px; background:var(--ink); color:#fff; padding:2px 10px; border-radius:0; white-space:nowrap; letter-spacing:.5px; }
#cp-root .cp-vav { width:64px; height:64px; margin:8px auto; border:3px solid var(--ink); border-radius:0; overflow:hidden; background:var(--paper); display:grid; place-items:center; font-size:32px; }
#cp-root .cp-vav.empty { background:#e2dcd2; border-style:dashed; }
#cp-root .cp-vav :is(img,svg) { width:100%; height:100%; object-fit:cover; display:block; }
#cp-root .cp-vnm { font-family:'Anton',sans-serif; font-size:18px; letter-spacing:.5px; }
#cp-root .cp-vst { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9.5px; margin-top:5px; display:inline-block; padding:2px 8px; border:2px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink); }
#cp-root .cp-vheart { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:48px; height:48px; border-radius:0; border:4px solid var(--ink); background:var(--yellow); display:grid; place-items:center; font-size:24px; box-shadow:3px 3px 0 var(--ink); }
#cp-root .cp-swapc { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; width:52px; height:52px; border-radius:0; border:4px solid var(--ink); background:var(--yellow); color:var(--ink); font-family:'Anton',sans-serif; font-size:22px; display:grid; place-items:center; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
#cp-root .cp-qq-hint { text-align:center; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; opacity:.7; margin-top:12px; }
#cp-root .cp-waitline { text-align:center; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; opacity:.7; }
#cp-root .grow { flex:1; }

/* MODE COUPLE — écran de TRANSITION (intro de manche) */
#cp-root .cp-tr { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; animation:cp-fade .3s ease; }
#cp-root .cp-tr-em { font-size:74px; line-height:1; }
#cp-root .cp-tr-nm { font-family:'Anton',sans-serif; font-size:38px; letter-spacing:1px; color:var(--ink); background:var(--yellow); border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:6px 18px; transform:rotate(-2deg); }
#cp-root .cp-tr-rule { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; color:var(--ink); opacity:.8; max-width:26ch; line-height:1.4; }
#cp-root .cp-tr-who { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; color:var(--ink); }
#cp-root .cp-tr-who b { color:var(--magenta); }
#cp-root .cp-tr-cd { font-family:'Anton',sans-serif; font-size:30px; color:#fff; background:var(--magenta); border:3px solid var(--ink); border-radius:0; padding:2px 18px; box-shadow:3px 3px 0 var(--ink); margin-top:6px; }

/* MODE COUPLE — popup QUITTER (monté sur body → CSS global, hex en dur) */
.cp-modal-bg { position:fixed; inset:0; background:rgba(10,5,16,.82); z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; animation:cp-fade .2s ease; }
.cp-modal { background:#FFFEF7; border:4px solid #0A0A0A; border-radius:0; box-shadow:9px 9px 0 rgba(0,0,0,.55); padding:26px 22px; max-width:360px; width:100%; text-align:center; }
.cp-modal-em { font-size:46px; line-height:1; }
.cp-modal-t { font-family:'Anton',sans-serif; font-size:30px; letter-spacing:1px; color:#0A0A0A; margin-top:8px; }
.cp-modal-s { font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:13px; color:#0A0A0A; opacity:.8; margin-top:8px; line-height:1.45; }
.cp-modal-btns { display:flex; gap:12px; margin-top:22px; }
.cp-mbtn { flex:1; font-family:'Anton',sans-serif; font-size:16px; letter-spacing:.5px; border:4px solid #0A0A0A; border-radius:0; padding:13px; box-shadow:4px 4px 0 #0A0A0A; cursor:pointer; }
.cp-mbtn.cancel { background:#FFFEF7; color:#0A0A0A; }
.cp-mbtn.quit { background:#FF5252; color:#fff; }
.cp-mbtn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 #0A0A0A; }

/* MODE COUPLE — écran AMBIANCE (avant le hub) */
#cp-root .cp-vibes { display:flex; flex-direction:column; gap:14px; flex:1; justify-content:center; }
#cp-root .cp-vibe { display:flex; align-items:center; gap:14px; text-align:left; border:4px solid var(--ink); border-radius:0; box-shadow:6px 6px 0 var(--ink); padding:18px 16px; cursor:pointer; transition:transform .1s; }
#cp-root .cp-vibe:active { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
#cp-root .cp-vibe-e { font-size:44px; line-height:1; flex:0 0 auto; }
#cp-root .cp-vibe-tx { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
#cp-root .cp-vibe-t { font-family:'Anton',sans-serif; font-size:24px; letter-spacing:.5px; line-height:1; }
#cp-root .cp-vibe-d { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; opacity:.85; line-height:1.35; }
#cp-root .cp-vibe-go { font-family:'Anton',sans-serif; font-size:26px; flex:0 0 auto; }
#cp-root .cp-vibe-chip { align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; color:var(--ink); background:var(--paper); border:3px solid var(--ink); border-radius:0; box-shadow:2px 2px 0 var(--ink); padding:5px 12px; cursor:pointer; margin-top:-4px; }

/* MODE COUPLE — retours d'itération (sticky header, arrondis, back, écran de fin) */
#cp-root .cp-hb { position: sticky; top: 0; z-index: 20; }              /* header FIXE en haut */
#cp-root .cp-vcard { border-radius:0; }                            /* cartes plus rondes */
#cp-root .cp-card { border-radius:0; }
#cp-root .cp-opt { border-radius:0; }
#cp-root .cp-vibe { border-radius:0; }
#cp-root .cp-cta { border-radius:0; }                              /* boutons pilule */

/* chip retour (revenir en arrière) */
#cp-root .cp-back { align-self:flex-start; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; color:var(--ink);
  background:var(--paper); border:3px solid var(--ink); border-radius:0; box-shadow:2px 2px 0 var(--ink); padding:6px 13px; cursor:pointer; margin-top:-2px; }
#cp-root .cp-back:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }

/* écran de fin (couple:close) */
#cp-root .cp-end { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px; }
#cp-root .cp-end-em { font-size:64px; line-height:1; }
#cp-root .cp-end-t { font-family:'Anton',sans-serif; font-size:32px; letter-spacing:1px; color:var(--ink); }
#cp-root .cp-end-s { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; color:var(--ink); opacity:.8; }
#cp-root .cp-end .cp-cta { margin-top:12px; background:var(--cyan); color:var(--ink); border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:'Anton',sans-serif; font-size:18px; padding:13px 24px; cursor:pointer; }

/* =====================================================================
   REFONTE 2 — composants portés des maquettes s11/s12 (flat, .cg-*)
   Source de vérité : design-mockups/s11 + s12. Scoping strict #cp-root.
   ===================================================================== */
#cp-root { font-family:'IBM Plex Mono', monospace; }
/* fond de jeu teinté par mode (le motif de points reste, hérité de .cp-root) */
#cp-root.m-av{background-color:#ffe1e1} #cp-root.m-qui{background-color:#ffdcf0} #cp-root.m-con{background-color:#dbf5fa}
#cp-root.m-pref{background-color:#fff3c2} #cp-root.m-des{background-color:#ffe6d2} #cp-root.m-th{background-color:#ffe6d2}
#cp-root.m-lie{background-color:#efe1ff} #cp-root.m-flag{background-color:#dcf8e6} #cp-root.m-gate{background-color:var(--red)}

/* ---- TOP BAR (titre dans une CARD) ---- */
#cp-root .cg-top { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:4px solid var(--ink); background:var(--paper); }
#cp-root .cg-ic { width:42px; height:38px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); display:grid; place-items:center; font-family:'Anton',sans-serif; font-size:18px; color:var(--ink); cursor:pointer; }
#cp-root .cg-ic.red { background:var(--red); color:#fff; box-shadow:3px 3px 0 var(--ink); }
#cp-root .cg-title { border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); padding:6px 12px; font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cp-root .cg-step { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; color:var(--ink); opacity:.65; white-space:nowrap; }
#cp-root .cg-theme { margin-left:8px; }

/* ---- zone de jeu : contenu ALIGNÉ EN HAUT ---- */
#cp-root .cg-body { display:flex; flex-direction:column; gap:13px; }
#cp-root .cg-btn { border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); color:var(--ink); font-family:'Anton',sans-serif; font-size:19px; letter-spacing:.5px; padding:15px; text-align:center; cursor:pointer; display:block; width:100%; }
#cp-root .cg-btn:active { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
#cp-root .cg-btn.green{background:var(--green)} #cp-root .cg-btn.magenta{background:var(--magenta);color:#fff} #cp-root .cg-btn.cyan{background:var(--cyan)} #cp-root .cg-btn.yellow{background:var(--yellow)} #cp-root .cg-btn.orange{background:var(--orange)} #cp-root .cg-btn.red{background:var(--red);color:#fff} #cp-root .cg-btn.purple{background:var(--purple);color:#fff}
#cp-root .cg-row2 { display:flex; gap:10px; } #cp-root .cg-row2 > * { flex:1; }
#cp-root .cg-foot { margin-top:auto; }

/* bandeau "à qui le tour" */
#cp-root .cg-turn { display:flex; align-items:center; gap:11px; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:9px 12px; }
#cp-root .cg-turn .cg-av { width:44px; height:44px; flex-shrink:0; border:3px solid var(--ink); overflow:hidden; background:var(--paper); }
#cp-root .cg-turn .cg-av :is(img,svg){ width:100%; height:100%; display:block; }
#cp-root .cg-turn .tt { font-family:'Anton',sans-serif; font-size:17px; line-height:1; letter-spacing:.5px; }
#cp-root .cg-turn .ts { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; letter-spacing:1px; opacity:.6; margin-top:3px; }
#cp-root .cg-turn .badge { margin-left:auto; font-family:'Anton',sans-serif; font-size:14px; border:3px solid var(--ink); background:var(--yellow); box-shadow:2px 2px 0 var(--ink); padding:4px 9px; }

/* carte question / situation */
#cp-root .cg-qc { position:relative; }
#cp-root .cg-qc::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#cp-root .cg-qc .bd { position:relative; border:5px solid var(--ink); background:var(--paper); padding:18px 16px; text-align:center; }
#cp-root .cg-qc .qk { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; letter-spacing:2px; opacity:.55; }
#cp-root .cg-qc .qt { font-family:'Anton',sans-serif; font-size:23px; line-height:1.05; margin-top:7px; }

/* deux gros choix empilés */
#cp-root .cg-choice { display:flex; flex-direction:column; gap:11px; }
#cp-root .cg-bb { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:15px; display:flex; align-items:center; gap:13px; text-align:left; cursor:pointer; }
#cp-root .cg-bb:active { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
#cp-root .cg-bb.lock { pointer-events:none; }
/* checkbox de sélection (comme HOMIES) — présente sur chaque choix, cochée si sélectionné */
/* case ✓ : rien par défaut (pas de trou) — apparaît en vert quand on a voté */
#cp-root .cg-ck { display:none; margin-left:auto; width:30px; height:30px; flex-shrink:0; border:3px solid var(--ink); background:var(--green); box-shadow:2px 2px 0 var(--ink); place-items:center; font-family:'Anton',sans-serif; font-size:16px; color:var(--ink); }
#cp-root .cg-bb.sel .cg-ck, #cp-root .cg-opt.sel .cg-ck { display:grid; }
#cp-root .cg-bb .ic { width:46px; height:46px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:grid; place-items:center; font-size:24px; box-shadow:2px 2px 0 var(--ink); overflow:hidden; }
#cp-root .cg-bb .ic :is(img,svg){ width:100%; height:100%; }
#cp-root .cg-bb .bl { font-family:'Anton',sans-serif; font-size:22px; letter-spacing:1px; line-height:1; }
#cp-root .cg-bb .bs { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; opacity:.7; margin-top:3px; }
#cp-root .cg-bb.red{background:var(--red);color:#fff} #cp-root .cg-bb.cyan{background:var(--cyan)} #cp-root .cg-bb.blue{background:var(--blue);color:#fff}
#cp-root .cg-bb.magenta{background:var(--magenta);color:#fff} #cp-root .cg-bb.green{background:var(--green)} #cp-root .cg-bb.yellow{background:var(--yellow)} #cp-root .cg-bb.orange{background:var(--orange)}

/* carte tirée (action/vérité) */
#cp-root .cg-draw { position:relative; margin-top:2px; }
#cp-root .cg-draw::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
#cp-root .cg-draw .bd { position:relative; border:5px solid var(--ink); padding:16px; text-align:center; }
#cp-root .cg-draw.act .bd { background:var(--red); color:#fff; } #cp-root .cg-draw.ver .bd { background:var(--cyan); }
#cp-root .cg-draw .tag { display:inline-block; font-family:'Anton',sans-serif; font-size:13px; letter-spacing:2px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); padding:3px 12px; box-shadow:2px 2px 0 var(--ink); }
#cp-root .cg-draw .big { font-family:'Anton',sans-serif; font-size:22px; line-height:1.1; margin-top:12px; }

/* liste d'options (connaît / tu préfères) */
#cp-root .cg-opts { display:flex; flex-direction:column; gap:9px; }
#cp-root .cg-opt { display:flex; align-items:center; gap:11px; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:12px 13px; font-family:'Anton',sans-serif; font-size:16px; letter-spacing:.5px; color:var(--ink); cursor:pointer; text-align:left; }
#cp-root .cg-opt:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
#cp-root .cg-opt.lock { pointer-events:none; }
#cp-root .cg-opt.dim { opacity:.4; }
#cp-root .cg-opt .k { width:30px; height:30px; flex-shrink:0; border:3px solid var(--ink); background:var(--yellow); display:grid; place-items:center; font-size:15px; }
#cp-root .cg-opt .ot { flex:1; min-width:0; overflow-wrap:anywhere; white-space:normal; }
#cp-root .cg-opt .mini { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; }
#cp-root .cg-opt.sel { background:var(--yellow); box-shadow:4px 4px 0 var(--magenta); }
#cp-root .cg-opt.ok { background:var(--green); } #cp-root .cg-opt.ko { background:#ffd0d0; }

/* révélation : deux réponses côte à côte */
#cp-root .cg-duo { display:flex; gap:11px; }
#cp-root .cg-ans { flex:1; position:relative; }
#cp-root .cg-ans::before { content:''; position:absolute; top:5px; left:5px; right:-5px; bottom:-5px; background:var(--ink); }
#cp-root .cg-ans .bd { position:relative; border:4px solid var(--ink); padding:13px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px; }
#cp-root .cg-ans.a .bd{background:var(--blue);color:#fff} #cp-root .cg-ans.b .bd{background:var(--magenta);color:#fff}
#cp-root .cg-ans .cg-av { width:44px; height:44px; border:3px solid var(--ink); overflow:hidden; background:var(--paper); }
#cp-root .cg-ans .cg-av :is(img,svg){ width:100%; height:100%; display:block; }
#cp-root .cg-ans .who { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; opacity:.9; }
#cp-root .cg-ans .pick { font-family:'Anton',sans-serif; font-size:18px; line-height:1.05; }

/* verdict (accord / clash) */
#cp-root .cg-verdict { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:15px; text-align:center; font-family:'Anton',sans-serif; font-size:22px; letter-spacing:1px; color:var(--ink); }
#cp-root .cg-verdict.ok { background:var(--green); } #cp-root .cg-verdict.no { background:var(--yellow); }
#cp-root .cg-verdict .vs { display:block; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; opacity:.65; margin-top:5px; }

/* barre de complicité */
#cp-root .cg-compl { border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:12px 13px; }
#cp-root .cg-compl .cl { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; opacity:.6; display:flex; justify-content:space-between; }
#cp-root .cg-compl .track { height:22px; border:3px solid var(--ink); background:var(--paper); margin-top:7px; position:relative; overflow:hidden; }
#cp-root .cg-compl .fill { position:absolute; left:0; top:0; bottom:0; background:var(--green); border-right:3px solid var(--ink); }
#cp-root .cg-compl .score { font-family:'Anton',sans-serif; font-size:15px; margin-top:6px; text-align:right; }

/* hints vote secret */
#cp-root .cg-secret { text-align:center; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; opacity:.6; }
#cp-root .cg-status { display:flex; align-items:center; justify-content:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; }
#cp-root .cg-status .dot { width:9px; height:9px; border:2px solid var(--ink); background:var(--green); } #cp-root .cg-status .dot.wait{background:var(--yellow)}

/* thermomètre */
#cp-root .cg-thermos { display:flex; gap:14px; }
#cp-root .cg-thm { flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); padding:14px 10px 12px; }
#cp-root .cg-thm .lbl { font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.5px; }
#cp-root .cg-thm .tube { width:44px; height:168px; border:4px solid var(--ink); background:var(--paper); position:relative; overflow:hidden; }
#cp-root .cg-thm .merc { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(#ff9f45,var(--red)); border-top:3px solid var(--ink); }
#cp-root .cg-thm .lbl { font-family:'Anton',sans-serif; font-size:14px; } #cp-root .cg-thm .deg { font-family:'Anton',sans-serif; font-size:18px; }
#cp-root .cg-slider { border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:14px 13px; }
#cp-root .cg-slider .bar { height:26px; border:3px solid var(--ink); background:linear-gradient(90deg,#ffd600,#ff9f45,var(--red)); position:relative; margin:10px 0; }
#cp-root .cg-slider .knob { position:absolute; top:-6px; width:20px; height:34px; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); }
#cp-root .cg-slider .ends { display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; }
#cp-root .cg-slider .val { text-align:center; font-family:'Anton',sans-serif; font-size:20px; }

/* dés désir */
#cp-root .cg-dice { display:flex; gap:13px; }
#cp-root .cg-die { flex:1; min-width:0; position:relative; display:flex; }
/* animation de lancer : les dés tremblent, puis le combo apparaît en pop */
@keyframes cg-shake { 0%,100%{transform:translate(0,0) rotate(0)} 20%{transform:translate(-3px,2px) rotate(-5deg)} 45%{transform:translate(3px,-2px) rotate(5deg)} 70%{transform:translate(-2px,3px) rotate(-3deg)} }
#cp-root .cg-dice.cg-rolling .cg-die { animation:cg-shake .16s infinite; }
#cp-root .cg-dice.cg-rolling .cg-die .demo { font-size:36px; }
#cp-root .cg-hidden { display:none; }
@keyframes cg-pop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
#cp-root .cg-combo.cg-pop { animation:cg-pop .32s ease; }
#cp-root .cg-die::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#cp-root .cg-die .bd { flex:1; position:relative; border:5px solid var(--ink); background:var(--paper); padding:14px 8px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
#cp-root .cg-die .dk { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:8px; letter-spacing:1px; opacity:.55; }
#cp-root .cg-die .demo { font-size:34px; line-height:1; } #cp-root .cg-die .dv { font-family:'Anton',sans-serif; font-size:16px; line-height:.95; }
#cp-root .cg-die.act .bd { background:#ffe0e0; } #cp-root .cg-die.zone .bd { background:#e0f2ff; }
#cp-root .cg-combo { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--red); background:var(--paper); padding:16px; text-align:center; }
#cp-root .cg-combo .verb { font-family:'Anton',sans-serif; font-size:28px; color:var(--red); line-height:.95; } #cp-root .cg-combo .plus{font-family:'Anton',sans-serif;font-size:16px;opacity:.5;margin:4px 0} #cp-root .cg-combo .zn { font-family:'Anton',sans-serif; font-size:23px; }

/* kamasutra — carte riche (dégradé + nom + niveau + comment faire) */
#cp-root .cg-kama { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--purple); background:var(--paper); overflow:hidden; }
#cp-root .cg-kama .pic { position:relative; height:150px; background:linear-gradient(135deg,var(--magenta),var(--purple)); display:grid; place-items:center; font-size:64px; border-bottom:5px solid var(--ink); }
#cp-root .cg-kama .pic .pk-name { position:absolute; bottom:10px; left:0; right:0; text-align:center; font-family:'Anton',sans-serif; font-size:20px; letter-spacing:1px; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
#cp-root .cg-kama .body { padding:14px 15px; }
#cp-root .cg-kama .krow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#cp-root .cg-kama .kn { font-family:'Anton',sans-serif; font-size:23px; letter-spacing:.5px; }
#cp-root .cg-kama .klvl { flex-shrink:0; font-family:'Anton',sans-serif; font-size:11px; border:3px solid var(--ink); background:var(--orange); box-shadow:2px 2px 0 var(--ink); padding:3px 10px; }
#cp-root .cg-kama .kd { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; line-height:1.5; color:var(--ink); margin-top:9px; }
#cp-root .cg-kama .kh-t { font-family:'Anton',sans-serif; font-size:14px; letter-spacing:1px; color:var(--magenta); margin-top:14px; padding-left:10px; border-left:5px solid var(--magenta); }
#cp-root .cg-kama .kh { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13.5px; line-height:1.55; color:var(--ink); margin-top:6px; padding-left:10px; border-left:5px solid var(--magenta); }

/* dés désir — étiquette ACTION + minuteur */
#cp-root .cg-combo { position:relative; }
#cp-root .cg-combo .ctag { position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg); background:var(--magenta); color:#fff; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); font-family:'Anton',sans-serif; font-size:12px; letter-spacing:1px; padding:3px 12px; }
#cp-root .cg-timer { margin-top:14px; }
#cp-root .cg-timer .tlab { font-family:'Anton',sans-serif; font-size:17px; text-align:center; }
#cp-root .cg-timer .tbar { height:14px; border:3px solid var(--ink); background:var(--paper); margin-top:6px; overflow:hidden; }
#cp-root .cg-timer .tbar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--magenta),var(--red)); transition:width 1s linear; }

/* 2 vérités 1 mensonge */
#cp-root .cg-inputs { display:flex; flex-direction:column; gap:10px; }
#cp-root .cg-inp { display:flex; align-items:center; gap:10px; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:0 12px; }
#cp-root .cg-inp .n { width:26px; height:26px; flex-shrink:0; border:3px solid var(--ink); background:var(--purple); color:#fff; display:grid; place-items:center; font-family:'Anton',sans-serif; font-size:13px; }
#cp-root .cg-inp input { flex:1; border:0; background:transparent; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; color:var(--ink); padding:13px 0; outline:none; }
#cp-root .cg-lies { display:flex; flex-direction:column; gap:10px; }
#cp-root .cg-lc { border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:13px 14px; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; display:flex; align-items:center; gap:11px; color:var(--ink); cursor:pointer; text-align:left; }
#cp-root .cg-lc:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
#cp-root .cg-lc .pk { width:24px; height:24px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:grid; place-items:center; }
#cp-root .cg-lc.lie { background:var(--red); color:#fff; } #cp-root .cg-lc.truth { background:var(--green); }
#cp-root .cg-lc .stamp { margin-left:auto; font-family:'Anton',sans-serif; font-size:12px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); padding:2px 9px; }

/* red / green flag */
#cp-root .cg-flags { display:flex; gap:11px; } #cp-root .cg-flags > * { flex:1; }
#cp-root .cg-flag { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:18px 10px; text-align:center; cursor:pointer; }
#cp-root .cg-flag:active { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
#cp-root .cg-flag.lock { opacity:.55; pointer-events:none; }
#cp-root .cg-flag .fe { font-size:38px; line-height:1; } #cp-root .cg-flag .fl { font-family:'Anton',sans-serif; font-size:16px; margin-top:8px; }
#cp-root .cg-flag.red { background:#ffdada; } #cp-root .cg-flag.green { background:#d4f7df; }
#cp-root .cg-flag .fck { margin:10px auto 0; width:26px; height:26px; border:3px solid var(--ink); background:var(--paper); display:grid; place-items:center; font-family:'Anton',sans-serif; font-size:15px; color:transparent; }
#cp-root .cg-flag.sel .fck { background:var(--green); color:var(--ink); }
#cp-root .cg-flag.sel { box-shadow:6px 6px 0 var(--ink); }

/* thermo : input range brutaliste */
#cp-root .cg-range { -webkit-appearance:none; appearance:none; width:100%; height:26px; border:3px solid var(--ink); background:linear-gradient(90deg,#ffd600,#ff9f45,var(--red)); margin:12px 0; cursor:pointer; }
#cp-root .cg-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:36px; background:var(--paper); border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; }
#cp-root .cg-range::-moz-range-thumb { width:22px; height:36px; background:var(--paper); border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); cursor:pointer; }

/* mensonge : toggle FAUX sur chaque ligne */
#cp-root .cg-liax { flex-shrink:0; min-width:78px; text-align:center; font-family:'Anton',sans-serif; font-size:11px; letter-spacing:.5px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:5px 9px; cursor:pointer; }
#cp-root .cg-liax.vrai { background:var(--green); color:var(--ink); }
#cp-root .cg-liax.lie { background:var(--red); color:#fff; }
#cp-root .cg-liax.on { background:var(--red); color:#fff; }   /* rétro-compat */

/* ---- ÉCRAN DE FIN (bilan) ---- */
#cp-root .cg-over { border:5px solid var(--ink); box-shadow:6px 6px 0 var(--magenta); background:var(--paper); padding:22px 18px; text-align:center; }
#cp-root .cg-over .em { font-size:64px; line-height:1; }
#cp-root .cg-over .ttl { font-family:'Anton',sans-serif; font-size:30px; letter-spacing:1px; line-height:1; margin-top:10px; }
#cp-root .cg-over .msg { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12.5px; line-height:1.5; opacity:.8; margin-top:10px; max-width:30ch; margin-left:auto; margin-right:auto; }
#cp-root .cg-over-stats { display:flex; gap:12px; }
#cp-root .cg-over-stats .st { flex:1; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:12px 8px; text-align:center; }
#cp-root .cg-over-stats .st .n { font-family:'Anton',sans-serif; font-size:24px; line-height:1; } #cp-root .cg-over-stats .st .l { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; letter-spacing:1px; opacity:.6; margin-top:5px; }

/* =====================================================================
   WIZARD CONFIG COUPLE — réutilise les composants du quiz HOMIES
   (host.css : .cf-top .cr-prog .pk-tile .pk-step/.pk-sb .dif2 .cr-card …)
   Ces classes sont globales sur la page hôte ; on ajoute juste les
   correctifs de contexte pour l'overlay #cp-root.
   ===================================================================== */
#cp-root .cp-wiz { width:100%; max-width:480px; margin:0 auto; height:100%; display:flex; flex-direction:column; background:var(--paper); }
#cp-root .cr-wrap { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:14px 16px; width:100%; box-sizing:border-box; }
#cp-root .pk-tabs { display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch; }
#cp-root .pk-tab.on { background:var(--magenta); color:#fff; }
#cp-root .pk-ic { font-size:24px; line-height:1; }
#cp-root .pk-tile[data-mode] { cursor:pointer; }
/* bandeau 18+ pleine largeur en haut de la tuile (net, sans chevauchement) */
#cp-root .pk-tile .cp-18 { margin:-11px -11px 8px; background:var(--red); color:#fff; border-bottom:3px solid var(--ink); font-family:'Anton',sans-serif; font-size:11px; letter-spacing:1px; padding:5px 8px; text-align:center; }
#cp-root .pk-tile.x18 { border-color:var(--red); }
#cp-root .dif2.on { box-shadow:8px 8px 0 var(--magenta); transform:translate(-1px,-1px); }
#cp-root .cr-chips { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
#cp-root .cr-chip { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper); padding:5px 10px; }
#cp-root .pk-actions { display:flex; gap:10px; margin-top:12px; }
#cp-root .mini-btn { font-family:'Anton',sans-serif; font-size:12px; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); padding:7px 13px; cursor:pointer; color:var(--ink); }

/* ---- RÉCAP de la soirée ---- */
#cp-root .cg-rvibe { border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); font-family:'Anton',sans-serif; font-size:18px; letter-spacing:.5px; padding:12px; text-align:center; }
#cp-root .cg-recap { display:flex; flex-direction:column; gap:9px; }
#cp-root .cg-rrow { display:flex; align-items:center; gap:11px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); padding:10px 12px; }
#cp-root .cg-rrow .e { font-size:22px; } #cp-root .cg-rrow .n { flex:1; font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.5px; }
#cp-root .cg-rrow .c { font-family:'Anton',sans-serif; font-size:16px; border:3px solid var(--ink); background:var(--yellow); box-shadow:2px 2px 0 var(--ink); min-width:34px; text-align:center; padding:2px 8px; }
#cp-root .cg-rint { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; letter-spacing:1px; border:3px solid var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); padding:9px 12px; text-align:center; }
#cp-root .cg-rtot { font-family:'Anton',sans-serif; font-size:20px; letter-spacing:.5px; text-align:center; background:var(--magenta); color:#fff; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:11px; }

/* ---- SALON (fidèle LE SALON HOMIES) ---- */
#cp-root .cg-cc { position:relative; }
#cp-root .cg-cc::before { content:''; position:absolute; top:6px; left:6px; right:-6px; bottom:-6px; background:var(--ink); }
#cp-root .cg-cc .bd { position:relative; border:5px solid var(--ink); background:var(--yellow); padding:14px 16px; display:flex; align-items:center; gap:12px; }
#cp-root .cg-cc .l { flex:1; } #cp-root .cg-cc .k { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; letter-spacing:2px; opacity:.65; }
#cp-root .cg-cc .code { font-family:'Anton',sans-serif; font-size:34px; letter-spacing:4px; line-height:1; }
#cp-root .cg-cc .acts { display:flex; gap:6px; } #cp-root .cg-cc .a { width:38px; height:38px; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); display:grid; place-items:center; font-size:16px; cursor:pointer; }
#cp-root .cg-qrscan { display:flex; align-items:center; gap:13px; border:5px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--cyan); padding:11px; }
#cp-root .cg-qrscan .sq { width:88px; height:88px; flex-shrink:0; background:conic-gradient(#000 25%,#fff 0 50%,#000 0 75%,#fff 0) 0/18px 18px; border:3px solid var(--ink); }
#cp-root .cg-qrscan .qrtxt { display:flex; flex-direction:column; gap:8px; }
#cp-root .cg-qrscan .pill { align-self:flex-start; background:var(--magenta); color:#fff; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); font-family:'Anton',sans-serif; font-size:13px; letter-spacing:1px; padding:4px 10px; }
#cp-root .cg-qrscan .cap { font-family:'Anton',sans-serif; font-size:14px; line-height:1.05; }
#cp-root .cg-lan { border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:10px 12px; text-align:center; }
#cp-root .cg-lan .lbl { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; }
#cp-root .cg-lan .addr { display:inline-block; margin:6px 0; font-family:'Anton',sans-serif; font-size:18px; letter-spacing:1px; background:var(--yellow); border:3px solid var(--ink); padding:4px 12px; }
#cp-root .cg-lan .hint { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; opacity:.6; }
#cp-root .cg-cfg { display:flex; gap:8px; }
#cp-root .cg-cfg .chip { border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; padding:6px 11px; }
#cp-root .cg-jhead { display:flex; align-items:center; justify-content:space-between; }
#cp-root .cg-jhead .lbl { border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); font-family:'Anton',sans-serif; font-size:14px; letter-spacing:1px; padding:5px 12px; }
#cp-root .cg-jhead .cnt { font-family:'Anton',sans-serif; font-size:16px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:3px 12px; background:var(--paper); }
#cp-root .cg-prow { display:flex; align-items:center; gap:11px; border:4px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:8px 11px; }
#cp-root .cg-prow.you { background:var(--green); } #cp-root .cg-prow.her { background:var(--pink); } #cp-root .cg-prow.empty { background:var(--paper); border-style:dashed; box-shadow:none; opacity:.75; }
#cp-root .cg-prow .cg-av { width:40px; height:40px; flex-shrink:0; border:3px solid var(--ink); overflow:hidden; background:var(--paper); }
#cp-root .cg-prow .cg-av :is(img,svg){ width:100%; height:100%; display:block; }
#cp-root .cg-prow .pn { font-family:'Anton',sans-serif; font-size:17px; flex:1; letter-spacing:.5px; } #cp-root .cg-prow .ptag { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:9px; border:2px solid var(--ink); background:var(--paper); padding:2px 8px; }

/* ---- QUI EST QUI (duel) ---- */
#cp-root .cg-vsstage { position:relative; display:flex; align-items:stretch; gap:0; }
#cp-root .cg-qq { flex:1; position:relative; }
#cp-root .cg-qq::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
#cp-root .cg-qq .bd { position:relative; border:5px solid var(--ink); padding:22px 10px 18px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; min-height:210px; justify-content:center; }
#cp-root .cg-qq.h .bd { background:var(--blue); color:#fff; } #cp-root .cg-qq.f .bd { background:var(--magenta); color:#fff; }
#cp-root .cg-qq .role { font-family:'Anton',sans-serif; font-size:26px; letter-spacing:1px; } #cp-root .cg-qq .who { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; opacity:.9; }
#cp-root .cg-qq .cg-av { width:84px; height:84px; border:4px solid var(--ink); background:var(--paper); overflow:hidden; box-shadow:3px 3px 0 var(--ink); }
#cp-root .cg-qq .cg-av :is(img,svg){ width:100%; height:100%; display:block; }
#cp-root .cg-vsbadge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-8deg); z-index:5; background:var(--yellow); border:5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:'Anton',sans-serif; font-size:24px; letter-spacing:1px; padding:6px 12px; cursor:pointer; }
#cp-root .cg-swap { align-self:center; display:inline-flex; align-items:center; gap:9px; border:4px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--magenta); padding:11px 20px; font-family:'Anton',sans-serif; font-size:15px; letter-spacing:1px; cursor:pointer; }

/* ---- ÉCRAN INTRO / TRANSITION (par mode) ---- */
#cp-root .cg-intro { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:8px 4px; width:100%; min-width:0; }
#cp-root .cg-intro > * { max-width:100%; }
#cp-root .cg-intro .name { overflow-wrap:anywhere; }
#cp-root .cg-intro .badge { display:inline-flex; align-items:center; gap:6px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); font-family:'Anton',sans-serif; font-size:11px; letter-spacing:1px; padding:5px 12px; background:var(--paper); }
#cp-root .cg-intro .em { font-size:70px; line-height:1; }
#cp-root .cg-intro .name { font-family:'Anton',sans-serif; font-size:32px; line-height:.95; letter-spacing:1px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:8px 18px; transform:rotate(-1.5deg); color:var(--ink); }
#cp-root .cg-intro .how { border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:14px; text-align:left; display:flex; flex-direction:column; gap:9px; width:100%; }
#cp-root .cg-intro .how .step { display:flex; align-items:flex-start; gap:10px; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; line-height:1.35; color:var(--ink); }
#cp-root .cg-intro .how .step .n { flex-shrink:0; width:22px; height:22px; border:2.5px solid var(--ink); background:var(--yellow); display:grid; place-items:center; font-family:'Anton',sans-serif; font-size:12px; }
#cp-root .cg-intro .how .step .t { flex:1; min-width:0; white-space:normal; }
#cp-root .cg-intro .meta { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; letter-spacing:1px; opacity:.6; }
#cp-root .cg-intro .cd { font-family:'Anton',sans-serif; font-size:26px; color:#fff; background:var(--magenta); border:3px solid var(--ink); padding:2px 18px; box-shadow:3px 3px 0 var(--ink); }
#cp-root .m-av .cg-intro .name{background:var(--red);color:#fff} #cp-root .m-qui .cg-intro .name{background:var(--magenta);color:#fff}
#cp-root .m-con .cg-intro .name{background:var(--cyan)} #cp-root .m-pref .cg-intro .name{background:var(--yellow)}
#cp-root .m-des .cg-intro .name{background:var(--orange)} #cp-root .m-th .cg-intro .name{background:var(--orange)}
#cp-root .m-lie .cg-intro .name{background:var(--purple);color:#fff} #cp-root .m-flag .cg-intro .name{background:var(--green)}

/* ---- DÉS DÉSIR : menu des 5 ambiances (après le gate) ---- */
#cp-root .cp-dm-head { text-align:center; margin-bottom:2px; }
#cp-root .cp-dm-pill { display:inline-block; font-family:'Anton',sans-serif; font-size:11px; letter-spacing:1px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:2px 2px 0 var(--ink); padding:4px 12px; }
#cp-root .cp-dm-t { font-family:'Anton',sans-serif; font-size:26px; line-height:1; margin-top:8px; } #cp-root .cp-dm-t b { color:var(--magenta); }
#cp-root .cp-dm-sub { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; opacity:.65; margin-top:5px; }
#cp-root .cp-dm { position:relative; display:flex; align-items:center; gap:13px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); padding:13px 15px; cursor:pointer; }
#cp-root .cp-dm:active { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
#cp-root .cp-dm-ic { width:46px; height:46px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:grid; place-items:center; font-size:24px; box-shadow:2px 2px 0 var(--ink); }
#cp-root .cp-dm-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
#cp-root .cp-dm-nm { font-family:'Anton',sans-serif; font-size:20px; letter-spacing:.5px; line-height:1; }
#cp-root .cp-dm-ds { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11.5px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cp-root .cp-dm.hot { background:var(--magenta); color:#fff; } #cp-root .cp-dm.hot .cp-dm-ds { opacity:.92; }
#cp-root .cp-dm.cre { background:var(--red); color:#fff; } #cp-root .cp-dm.cre .cp-dm-ds { opacity:.92; }
/* sélection : PAS de case par défaut (aucun trou) — le ✓ apparaît quand on sélectionne */
#cp-root .cp-dm-ck { display:none; }
#cp-root .cp-dm.sel { box-shadow:7px 7px 0 var(--green); }
#cp-root .cp-dm.sel .cp-dm-ck { display:grid; flex-shrink:0; width:32px; height:32px; border:3px solid var(--ink); background:var(--green); box-shadow:2px 2px 0 var(--ink); place-items:center; font-family:'Anton',sans-serif; font-size:17px; color:var(--ink); }
#cp-root .cg-btn[disabled] { opacity:.4; pointer-events:none; }
#cp-root .cp-dm-badge { position:absolute; top:-11px; right:10px; font-family:'Anton',sans-serif; font-size:10px; letter-spacing:1px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); padding:2px 8px; transform:rotate(-5deg); }
#cp-root .cp-dm-badge.top { background:var(--yellow); color:var(--ink); } #cp-root .cp-dm-badge.auto { background:var(--cyan); color:var(--ink); }
#cp-root .cp-dm-dots { display:inline-flex; gap:5px; }
#cp-root .cp-dm-dots i { width:13px; height:13px; border:2px solid var(--ink); background:var(--paper); }
#cp-root .cp-dm-dots i.on:nth-child(1){ background:#5be885; } #cp-root .cp-dm-dots i.on:nth-child(2){ background:#ffd600; }
#cp-root .cp-dm-dots i.on:nth-child(3){ background:#ff9f45; } #cp-root .cp-dm-dots i.on:nth-child(4){ background:#ff5252; }
#cp-root .cp-dm-dots i.on:nth-child(5){ background:#9d4edd; }

/* ---- GATE 18+ (plein écran rouge) ---- */
#cp-root .cg-gate { flex:1; background:var(--red); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:26px 22px; color:#fff; }
#cp-root .cg-gate .em { font-size:78px; line-height:1; }
#cp-root .cg-gate .em img { width:82px; height:82px; }
#cp-root .cg-gate .big { font-family:'Anton',sans-serif; font-size:44px; line-height:.9; letter-spacing:1px; }
#cp-root .cg-gate .sub { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; max-width:26ch; opacity:.95; }
#cp-root .cg-gate .chk { display:flex; align-items:center; gap:11px; text-align:left; border:4px solid #fff; background:rgba(255,255,255,.12); padding:12px 13px; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; line-height:1.35; cursor:pointer; }
#cp-root .cg-gate .chk .box { width:26px; height:26px; flex-shrink:0; border:3px solid #fff; background:transparent; color:var(--red); display:grid; place-items:center; font-family:'Anton',sans-serif; font-size:16px; }
#cp-root .cg-gate .chk.on .box { background:#fff; }
#cp-root .cg-gate .g-btn { border:4px solid #fff; background:#fff; color:var(--red); font-family:'Anton',sans-serif; font-size:20px; letter-spacing:1px; padding:14px 26px; box-shadow:5px 5px 0 rgba(0,0,0,.3); cursor:pointer; }
#cp-root .cg-gate .g-btn[disabled] { opacity:.5; }
#cp-root .cg-gate .g-no { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:11px; opacity:.85; text-decoration:underline; cursor:pointer; }

/* ---- SALLE D'ATTENTE PARTENAIRE (écran du joueur qui rejoint) ---- */
#cp-root .cg-wait2 { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; padding:24px 18px; }
#cp-root .cg-wpill { display:inline-flex; align-items:center; gap:6px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--green); color:var(--ink); font-family:'Anton',sans-serif; font-size:12px; letter-spacing:.5px; padding:6px 14px; }
#cp-root .cg-wpair { display:flex; align-items:center; gap:8px; }
#cp-root .cg-wside { display:flex; flex-direction:column; align-items:center; gap:8px; }
#cp-root .cg-wav { width:84px; height:84px; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); overflow:hidden; background:var(--paper); }
#cp-root .cg-wav.a { transform:rotate(-4deg); } #cp-root .cg-wav.b { transform:rotate(4deg); }
#cp-root .cg-wav :is(img,svg) { width:100%; height:100%; display:block; }
#cp-root .cg-wnm { font-family:'Anton',sans-serif; font-size:14px; letter-spacing:.5px; border:2px solid var(--ink); background:var(--paper); padding:2px 10px; }
#cp-root .cg-wheart { font-size:36px; line-height:1; animation:cg-beat 1s ease-in-out infinite; z-index:2; }
@keyframes cg-beat { 0%,100%{transform:scale(1)} 28%{transform:scale(1.28)} 45%{transform:scale(1.05)} }
#cp-root .cg-wt { font-family:'Anton',sans-serif; font-size:27px; letter-spacing:.5px; line-height:1.02; }
#cp-root .cg-ws { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:12px; opacity:.75; max-width:28ch; line-height:1.45; margin-top:7px; }
#cp-root .cg-wchips { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:2px; }
#cp-root .cg-wchip { font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:10px; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper); padding:4px 10px; }