.g-coinflip .cf-wrap { display: grid; grid-template-columns: minmax(270px, 320px) minmax(0, 1fr); gap: 16px; height: 100%; padding: 16px; box-sizing: border-box; }
.g-coinflip .cf-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; }
.g-coinflip .cf-pane { display: flex; flex-direction: column; gap: 12px; }
.g-coinflip .cf-seg { display: flex; width: 100%; }
.g-coinflip .cf-seg > button { flex: 1; }
.g-coinflip .cf-lbl { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 3px; }
.g-coinflip .field .cf-seg { margin-top: 6px; }
.g-coinflip .cf-other { margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.g-coinflip .cf-main { width: 100%; font-family: var(--font-num); }
.g-coinflip .cf-locked { pointer-events: none; opacity: .5; }
.g-coinflip .cf-need { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.g-coinflip .cf-need p { margin: 0; }
.g-coinflip .cf-bt { margin: 4px 0 -4px; }
.g-coinflip .cf-board { display: flex; flex-direction: column; gap: 6px; }
.g-coinflip .cf-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 14px; }
.g-coinflip .cf-row.is-top { border-color: var(--gold); color: var(--gold-hi); }
.g-coinflip .cf-empty, .g-coinflip .cf-total { margin: 0; font-size: 13px; }
.g-coinflip .cf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-coinflip .cf-stat { font-family: var(--font-num); font-size: 18px; color: var(--gold-hi); }
.g-coinflip .cf-keys { font-size: 12px; margin: 0; line-height: 1.6; }
.g-coinflip .cf-msg { font-size: 13px; min-height: 0; }

.g-coinflip .cf-stage { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; border-radius: var(--radius); border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 42%, rgba(222,184,92,.16), rgba(0,0,0,0) 55%), var(--bg-1); box-shadow: var(--shadow-2); }
.g-coinflip .cf-stage::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px); pointer-events: none; }
.g-coinflip .cf-sun { position: absolute; left: 50%; top: 42%; width: 1100px; height: 1100px; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(222,184,92,.08) 0deg 3deg, rgba(0,0,0,0) 3deg 10deg); -webkit-mask: radial-gradient(circle, #000 0 22%, transparent 60%); mask: radial-gradient(circle, #000 0 22%, transparent 60%); pointer-events: none; }
.g-coinflip .cf-arena { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 28px; width: 100%; padding: 0 32px; box-sizing: border-box; }
.g-coinflip .cf-seat { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; transition: opacity .3s; }
.g-coinflip .cf-pick { font-family: var(--font-display); font-size: 30px; letter-spacing: .06em; color: var(--gold); }
.g-coinflip .cf-seat.is-win .cf-pick { color: var(--win); text-shadow: 0 0 18px rgba(62,224,143,.55); }
.g-coinflip .cf-seat.is-lose { opacity: .4; }

/* l'ancre : la case de la pièce dans l'arène (la vue 2D y pose la pièce, la 3D y cadre la sienne) */
.g-coinflip .cf-toss { --coin: clamp(150px, 30vh, 250px); width: var(--coin); height: var(--coin); }
/* la vue (3D ou 2D, Casino.trois.aiguillage) couvre la scène, sous l'arène */
.g-coinflip .cf-vue { position: absolute; inset: 0; }
.g-coinflip .cf-vue .trois-cadre[data-vue="3d"]::after { content: ''; position: absolute; inset: 10px; z-index: 2; border: 1px solid var(--line); border-radius: calc(var(--radius) - 6px); pointer-events: none; }
.g-coinflip .cf-outils { position: absolute; top: 16px; right: 18px; z-index: 3; }
/* la pièce 2D, menée à chaque image par la physique (transform seulement) ; son ombre reste sur la table */
.g-coinflip .cf-p2d { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.g-coinflip .cf-p2d-saut { position: absolute; inset: 0; perspective: 1000px; will-change: transform; }
.g-coinflip .cf-ombre { position: absolute; left: 3%; top: calc(3% + 16px); width: 94%; height: 94%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.62) 55%, rgba(0,0,0,.3) 80%, rgba(0,0,0,0)); filter: blur(9px); will-change: transform, opacity; }
.g-coinflip .cf-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.g-coinflip .cf-edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, var(--gold-lo), #b9923d 50%, var(--gold-lo)); }
.g-coinflip .cf-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: radial-gradient(circle at 34% 28%, var(--gold-hi), var(--gold) 46%, var(--gold-lo) 100%);
  box-shadow: inset 0 0 0 5px var(--gold-lo), inset 0 0 0 8px rgba(247,221,143,.75), inset 0 0 0 12px rgba(140,106,34,.6), inset 0 -10px 30px rgba(80,55,10,.45); }
.g-coinflip .cf-p { transform: translateZ(9px); }
.g-coinflip .cf-f { transform: rotateX(180deg) translateZ(9px); }
.g-coinflip .cf-rays { position: absolute; inset: 15%; border-radius: 50%; background: repeating-conic-gradient(rgba(120,88,24,.32) 0deg 4deg, rgba(0,0,0,0) 4deg 12deg); box-shadow: 0 0 0 2px rgba(120,88,24,.45); }
.g-coinflip .cf-l { position: relative; font-family: var(--font-display); font-size: calc(var(--coin) * .42); line-height: 1; color: #5e440f; text-shadow: 0 2px 0 rgba(255,240,190,.75), 0 -1px 0 rgba(50,32,4,.55); }
.g-coinflip .cf-w { position: relative; margin-top: 3%; font-family: var(--font-ui); font-weight: 600; font-size: calc(var(--coin) * .065); letter-spacing: .4em; padding-left: .4em; color: #5e440f; }

.g-coinflip .cf-announce { position: relative; min-height: 1.2em; padding: 0 20px; text-align: center; font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 44px); color: var(--gold-hi); text-shadow: 0 0 24px rgba(222,184,92,.35); }
.g-coinflip .cf-announce.is-win { color: var(--win); text-shadow: 0 0 24px rgba(62,224,143,.4); animation: cf-pop .5s ease-out; }
.g-coinflip .cf-announce.is-lose { color: var(--lose); text-shadow: none; }
.g-coinflip .cf-sub { position: relative; min-height: 1.3em; padding: 0 20px; text-align: center; font-size: 15px; }
@keyframes cf-pop { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (max-width: 1100px) { .g-coinflip .cf-wrap { grid-template-columns: 260px minmax(0, 1fr); } .g-coinflip .cf-arena { gap: 12px; padding: 0 14px; } .g-coinflip .cf-pick { font-size: 24px; } }

/* ===================== EN LIGNE : duel entre potes ===================== */
.g-coinflip.is-online .cf-side { gap: 10px; }
.g-coinflip .cf-pals { display: flex; flex-direction: column; gap: 6px; max-height: 232px; overflow: auto; scrollbar-width: thin; }
.g-coinflip .cf-pal { --pc: var(--gold); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,6,11,.45); color: var(--text); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, transform .15s, box-shadow .2s; }
.g-coinflip .cf-pal:hover { border-color: var(--line-strong); background: rgba(222,184,92,.06); transform: translateX(2px); }
.g-coinflip .cf-pal.is-sel { border-color: var(--gold); background: linear-gradient(90deg, rgba(222,184,92,.16), rgba(222,184,92,.03)); box-shadow: 0 0 0 1px rgba(247,221,143,.25) inset, 0 6px 18px rgba(0,0,0,.35); }
.g-coinflip .cf-pal-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 21px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 55%, #fff 10%), color-mix(in srgb, var(--pc) 35%, #000 55%)); box-shadow: 0 0 0 2px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 45%, transparent); }
.g-coinflip .cf-pal.is-sel .cf-pal-av { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 0 4px var(--pc), 0 0 20px color-mix(in srgb, var(--pc) 60%, transparent); }
.g-coinflip .cf-pal-txt { display: flex; flex-direction: column; min-width: 0; }
.g-coinflip .cf-pal-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-coinflip .cf-pal-where { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-coinflip .cf-pal-bal { font-size: 13px; color: var(--gold-hi); }
.g-coinflip .cf-warn { min-height: 0; font-size: 12.5px; color: var(--warn); }
.g-coinflip .cf-warn:empty { display: none; }
.g-coinflip .cf-main.is-cancel { border-color: var(--line-strong); color: var(--gold-hi); font-family: var(--font-num); animation: cf-breathe 1.6s ease-in-out infinite; }
@keyframes cf-breathe { 50% { box-shadow: 0 0 0 1px rgba(247,221,143,.4) inset, 0 0 22px rgba(222,184,92,.25); } }
.g-coinflip.is-online .cf-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.g-coinflip .cf-row-n { font-family: var(--font-num); color: var(--text-dim); text-align: center; }
.g-coinflip .cf-row-p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-coinflip .cf-row-wl { font-size: 12px; color: var(--text-dim); }
.g-coinflip .cf-row-net { font-size: 13px; min-width: 56px; text-align: right; }
.g-coinflip .cf-row-net.is-up { color: var(--win); }
.g-coinflip .cf-row-net.is-down { color: var(--lose); }
.g-coinflip .cf-row.is-me { box-shadow: inset 3px 0 0 var(--gold); }
.g-coinflip .cf-recent { display: flex; flex-direction: column; gap: 4px; }
.g-coinflip .cf-rec { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 4px; border-bottom: 1px dashed rgba(222,184,92,.12); }
.g-coinflip .cf-rec-c { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--font-display); color: #5e440f; background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); }
.g-coinflip .cf-rec-v { color: var(--win); }

/* scène du duel */
.g-coinflip.is-online .cf-arena { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.g-coinflip .cf-mid { position: relative; display: grid; place-items: center; }
.g-coinflip .cf-vs { position: absolute; z-index: -1; font: 400 clamp(90px, 13vw, 190px)/1 var(--font-display); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(222,184,92,.18); pointer-events: none; opacity: 0; transition: opacity .6s; }
.g-coinflip.is-duel .cf-vs { opacity: 1; }
.g-coinflip .cf-seat-in { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.g-coinflip .cf-av { --pc: var(--gold); position: relative; display: grid; place-items: center; width: clamp(78px, 11vh, 118px); height: clamp(78px, 11vh, 118px); border-radius: 50%; font-size: clamp(38px, 5.6vh, 60px);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--pc) 60%, #fff 12%), color-mix(in srgb, var(--pc) 30%, #05060b 65%) 72%);
  box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--pc), 0 0 0 6px rgba(247,221,143,.35), 0 0 38px color-mix(in srgb, var(--pc) 45%, transparent), 0 14px 30px rgba(0,0,0,.5); transition: transform .5s cubic-bezier(.2,.9,.3,1.3), filter .5s, box-shadow .5s; }
.g-coinflip .cf-av.is-ghost { --pc: #3a3f5c; color: var(--text-faint); font-family: var(--font-display); box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px rgba(222,184,92,.18); background: rgba(5,6,11,.5); }
.g-coinflip .cf-seat-name { max-width: 100%; font: 400 clamp(18px, 2vw, 26px)/1.1 var(--font-display); letter-spacing: .04em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-coinflip .cf-seat-bal { font-size: 14px; color: var(--gold-hi); opacity: .85; }
.g-coinflip .cf-seat.is-live .cf-av { animation: cf-glow 1.1s ease-in-out infinite alternate; }
@keyframes cf-glow { to { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--pc), 0 0 0 6px rgba(247,221,143,.6), 0 0 60px color-mix(in srgb, var(--pc) 70%, transparent), 0 14px 30px rgba(0,0,0,.5); } }
.g-coinflip .cf-seat.is-wait .cf-av { filter: saturate(.5) brightness(.8); }
.g-coinflip .cf-seat.is-win .cf-av { transform: scale(1.12); box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 5px var(--win), 0 0 0 7px rgba(62,224,143,.35), 0 0 70px rgba(62,224,143,.55), 0 14px 30px rgba(0,0,0,.5); }
.g-coinflip.is-online .cf-seat.is-lose { opacity: 1; }
.g-coinflip .cf-seat.is-lose .cf-av { filter: grayscale(.85) brightness(.6); transform: scale(.92) rotate(-6deg); }
.g-coinflip .cf-seat.is-lose .cf-seat-name { color: var(--text-dim); text-decoration: line-through; text-decoration-color: rgba(255,90,103,.6); }
.g-coinflip .cf-gain, .g-coinflip .cf-loss { font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; animation: cf-rise .9s cubic-bezier(.2,.9,.3,1.2) both; }
.g-coinflip .cf-gain { color: var(--win); text-shadow: 0 0 20px rgba(62,224,143,.6); }
.g-coinflip .cf-loss { color: var(--lose); opacity: .85; }
@keyframes cf-rise { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.g-coinflip .cf-dots { display: flex; gap: 6px; }
.g-coinflip .cf-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: cf-dot 1.2s infinite ease-in-out; }
.g-coinflip .cf-dots i:nth-child(2) { animation-delay: .15s; }
.g-coinflip .cf-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cf-dot { 0%, 80%, 100% { transform: scale(.5); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }
.g-coinflip .cf-actions { position: relative; display: flex; gap: 12px; justify-content: center; min-height: 48px; }
.g-coinflip .cf-again { min-width: 240px; animation: cf-rise .6s .5s cubic-bezier(.2,.9,.3,1.2) both; }
.g-coinflip .cf-back { height: 48px; animation: cf-rise .6s .7s both; }
.g-coinflip .cf-flash { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; background: radial-gradient(circle, rgba(247,221,143,.55), rgba(222,184,92,.12) 40%, transparent 65%); opacity: 0; pointer-events: none; }
.g-coinflip .cf-flash.is-on { animation: cf-flash 1.1s ease-out; }
@keyframes cf-flash { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
.g-coinflip.is-shake .cf-stage { animation: cf-shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes cf-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.g-coinflip.is-duel .cf-sun { animation: cf-sun 24s linear infinite; }
@keyframes cf-sun { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* cartes d'invitation : posées sur <body>, visibles dans tout le casino */
.cf-cards { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column-reverse; gap: 12px; width: min(400px, calc(100vw - 36px)); pointer-events: none; }
.cf-card { --pc: #deb85c; pointer-events: auto; position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px 16px 14px; border-radius: 18px; color: #f4ecd8; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pc) 22%, transparent), transparent 55%), linear-gradient(160deg, rgba(26,32,64,.97), rgba(8,10,20,.98));
  border: 1px solid rgba(222,184,92,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.65), 0 0 40px color-mix(in srgb, var(--pc) 22%, transparent), inset 0 1px 0 rgba(247,221,143,.18);
  transform: translateX(120%) rotate(4deg); opacity: 0; transition: transform .55s cubic-bezier(.2,1.1,.3,1), opacity .35s; }
.cf-card::before { content: ''; position: absolute; inset: 5px; border-radius: 14px; border: 1px solid rgba(222,184,92,.16); pointer-events: none; }
.cf-card.is-in { transform: none; opacity: 1; }
/* au hall : rangées en tête de la colonne de droite (au téléphone : tout en haut du hall), comme la bannière du défi flash */
.hall-side > .cf-cards.is-colonne, .hall-inner > .cf-cards.is-colonne { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; z-index: auto; flex-direction: column; }
.hall-inner > .cf-cards.is-colonne { grid-column: 1 / -1; }
.cf-cards.is-colonne:empty { display: none; }
.cf-card.is-out { transform: translateX(110%) scale(.96); opacity: 0; transition: transform .4s ease-in, opacity .4s; }
.cf-card.is-rematch { border-color: rgba(255,79,216,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.65), 0 0 46px rgba(255,79,216,.28); }
.cf-card-coin { width: 58px; height: 58px; perspective: 400px; }
.cf-card-coin span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font: 400 28px/1 'Limelight','Bodoni MT',Georgia,serif; color: #5e440f;
  background: radial-gradient(circle at 34% 28%, #f7dd8f, #deb85c 46%, #8c6a22); box-shadow: inset 0 0 0 3px #8c6a22, inset 0 0 0 5px rgba(247,221,143,.7), 0 6px 16px rgba(0,0,0,.5); animation: cf-card-spin 2.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes cf-card-spin { 0%, 55% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.cf-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cf-card-k { font: 600 10.5px/1 'Segoe UI', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #deb85c; }
.cf-card.is-rematch .cf-card-k { color: #ff8be6; }
.cf-card-t { display: flex; align-items: center; gap: 8px; font: 400 21px/1.15 'Limelight','Bodoni MT',Georgia,serif; color: #f7dd8f; min-width: 0; }
.cf-card-t b { font-weight: 400; color: #fff6dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-card-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; font-size: 19px; background: color-mix(in srgb, var(--pc) 35%, #05060b); box-shadow: 0 0 0 2px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 50%, transparent); }
.cf-card-s { font-size: 14px; color: #d9d0b8; }
.cf-card-s b { color: #fff6dc; }
.cf-card-s b.cf-card-mine { color: #3ee08f; }
/* textes secondaires de la carte (pot, « Refuser ») : au moins 4,5:1 même sur le halo d'un joueur clair (cyan), au hall comme ailleurs */
.cf-card-pot { font-size: 12.5px; color: #d9d0b8; }
.cf-card-pot b { color: #f7dd8f; }
.cf-card-sec { color: #f7dd8f; }
.cf-card.is-late .cf-card-sec { color: #ff5a67; }
.cf-card-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 4px; }
.cf-card-bar i { display: block; height: 100%; transform-origin: left center; background: linear-gradient(90deg, #8c6a22, #deb85c, #f7dd8f); transition-property: transform; transition-timing-function: linear; }
.cf-card.is-late .cf-card-bar i { background: linear-gradient(90deg, #d2323f, #ff5a67); }
.cf-card-a { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 2px; }
.cf-card-a .btn { height: 42px; }
.cf-card-a .cf-card-no { color: #d9d0b8; }
.cf-card-a .cf-card-no:hover { color: var(--text); }
html.reduce-motion .cf-card, html.reduce-motion .cf-card-coin span { transition: none; animation: none; }
@media (max-width: 1100px) { .g-coinflip .cf-av { width: 72px; height: 72px; font-size: 34px; } .g-coinflip .cf-again { min-width: 0; } }

/* ---------- TÉLÉPHONE (N1b, 13/10 ; revue au téléphone, défaut n° 19) ----------
   À côté du panneau (260 px), la scène gardait ~80 px : la pièce prenait toute l'arène et les deux places s'écrasaient à 0 px, celle de
   l'adversaire (avatar, nom, « Face ») sortait de l'écran à droite ; couché, les avatars étaient rognés par le haut de la scène et la
   place de l'adversaire passait sous la réglette des potes et le sélecteur 2D | 3D. En PORTRAIT : une colonne qui défile — la scène
   d'abord (les deux places et la pièce à la largeur de l'écran), puis le panneau (adversaire, mise, côté, « Défier »). En PAYSAGE :
   les deux colonnes restent ; l'arène se resserre sous le sélecteur 2D | 3D, la scène commence sous la réglette quand elle flotte.
   Règles bornées au téléphone (portrait ≤ 480 px de large, paysage ≤ 560 px de haut) : le PC ne change pas (s5-tel-jeux.mjs, D). */
@media (orientation: portrait) and (max-width: 480px) {
  /* rangées à la taille de leur contenu (scène et panneau gardent min-height: 0, règles du PC) ; voie de la réglette au-dessus */
  .g-coinflip .cf-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content; align-content: start; gap: 12px;
    padding: 10px 10px 18px; overflow-y: auto; overscroll-behavior: contain; }
  body:has(.so-dock.is-float) .g-coinflip .cf-wrap { margin-top: var(--so-float-h, 58px); height: calc(100% - var(--so-float-h, 58px)); }
  /* l'arène commence sous le sélecteur 2D | 3D (16 px du haut, 34 px de haut) : il mordait l'avatar de l'adversaire */
  .g-coinflip .cf-stage { order: -1; height: clamp(330px, 44vh, 380px); justify-content: flex-start; gap: 10px; padding-top: 58px; }
  .g-coinflip .cf-side { overflow: visible; }
  .g-coinflip .cf-arena { gap: 8px; padding: 0 10px; }
  .g-coinflip .cf-toss { --coin: clamp(100px, 30vw, 136px); }
  .g-coinflip .cf-av { width: 60px; height: 60px; font-size: 30px; }
  .g-coinflip .cf-seat-name { font-size: 18px; }
  .g-coinflip .cf-pick { font-size: 22px; }
  .g-coinflip .cf-vs { font-size: 84px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .g-coinflip .cf-wrap { gap: 10px; padding: 8px 10px 10px; }
  body:has(.so-dock.is-float) .g-coinflip .cf-stage { margin-top: calc(var(--so-float-h, 58px) - 8px); }
  .g-coinflip .cf-stage { gap: 6px; }
  /* le sélecteur 2D | 3D en colonne le long du bord droit (comme le blackjack couché) ; l'arène lui laisse cette voie, des deux côtés
     pour que la pièce reste au milieu */
  .g-coinflip .trois-cadre .trois-coin .trois-vue { flex-direction: column; border-radius: 16px; }
  .g-coinflip .trois-vue-choix { min-width: 30px; height: 30px; padding: 0 4px; }
  .g-coinflip .cf-arena { padding: 0 54px; }
  /* la scène tient l'arène, l'annonce et la rangée des actions (48 px, même vide) : places resserrées, sinon les avatars débordaient
     par le haut de la scène */
  .g-coinflip .cf-toss { --coin: clamp(84px, 26vh, 120px); }
  .g-coinflip .cf-av { width: 48px; height: 48px; font-size: 24px; }
  .g-coinflip .cf-seat { gap: 2px; }
  .g-coinflip .cf-seat-name { font-size: 16px; }
  .g-coinflip .cf-seat-bal { font-size: 13px; }
  .g-coinflip .cf-pick { font-size: 20px; }
  .g-coinflip .cf-announce { font-size: 22px; }
}
.g-coinflip .cf-again.is-hot { box-shadow: 0 0 0 1px rgba(255,236,170,.7) inset, 0 0 0 3px rgba(255,79,216,.45), 0 0 34px rgba(255,79,216,.45); animation: cf-rise .5s cubic-bezier(.2,.9,.3,1.2) both, cf-hot 1s .5s ease-in-out infinite alternate; }
@keyframes cf-hot { to { transform: scale(1.04); } }
/* TÉLÉPHONE — N11 (annexe A de la revue au téléphone, REMESURÉE sur 1bedc6a) : les libellés « Choisis ton adversaire », « Mise (chacun) », « Duels de la soirée » (11 px) et l'endroit où est un pote (11,5 px) : 12 px. Mêmes polices, même interlettrage,
   même couleur ; on agrandit le texte, on ne redessine pas. Bornée au téléphone : le PC ne change pas (dev/tests-client/s5-tel-textes.mjs, D et D2). */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-coinflip .cf-lbl, .g-coinflip .cf-pal-where { font-size: 12px; }
}
/* TÉLÉPHONE — N23 (revue finale R2, n° 19) : en portrait, la page de Pile ou Face défile (la scène en haut, le panneau dessous) et « Lancer »
   est en bas : touché là où il est, la pièce et l'annonce (« Gagné ! … en jeu ») partaient hors de l'écran, sous la réglette flottante.
   games/coinflip.js (ramenerScene, au départ de chaque lancer à soi) ramène la scène à l'écran ; il lit --cf-ramener : la borne ne vit
   qu'ici (comme --wh-ramener de la Grande Roue, N20). Bornée au téléphone en portrait : au PC et couché, la scène est toujours à l'écran. */
@media (orientation: portrait) and (max-width: 480px) {
  .g-coinflip .cf-wrap { --cf-ramener: 1; }
}