/* Brouille-moji — the one style sheet (CONSTATS E12), ordered by component. Tokens first; docs/DA.md explains them.
   Every screen fits 100svh without scrolling (E1): fixed rows are `flex: none` (E17), one row per screen takes the
   rest (the QR code in the lobby, the action zone in play) and shrinks first. */

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #1a1033;
  --bg-2: #2a1650;
  --bg-3: #3b1d78;
  --surface: rgba(255, 255, 255, 0.07);
  --surface-2: rgba(255, 255, 255, 0.13);
  --line: rgba(255, 255, 255, 0.16);
  --ink: #fff8ec;
  --ink-dim: #d4c8f0;
  --ink-mute: #a497cc;
  --ink-dark: #1a1033;

  --sun: #ffd23f;        /* accent: the emoji yellow, primary buttons, hints */
  --pink: #ff4d8d;       /* the Brouilleur */
  --teal: #2ee6d6;       /* the Juge */
  --green: #22c55e;      /* buzzer ready, right answer */
  --red: #ef4444;        /* buzzer locked, wrong answer, last 15 s */
  --grey: #6b6390;       /* someone else is answering */
  --orange: #ff9f43;     /* connection trouble */

  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --pad: 16px;
  --gap: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: max(30px, env(safe-area-inset-bottom, 0px));
  --tap: 44px;

  /* An emoji slot of the frise: a quarter of the width, capped by the height on short screens. */
  --slot: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 12vh, 96px);
  --slot-reveal: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 9vh, 80px);
  /* Expert: up to 4 big emojis in one row (taller cards, bigger glyphs than the Facile frise). */
  --xslot: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 15vh, 112px);
  --xslot-h: min(calc(var(--xslot) * 1.25), 16vh, 132px);
  --xslot-reveal: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 11vh, 90px);

  --t-fast: 180ms;
  --t-pop: 280ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@supports (height: 100svh) {
  :root {
    --slot: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 12svh, 96px);
    --slot-reveal: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 9svh, 80px);
    --xslot: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 15svh, 112px);
    --xslot-h: min(calc(var(--xslot) * 1.25), 16svh, 132px);
    --xslot-reveal: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 11svh, 90px);
  }
}

/* ---------------------------------------------------------------- page */
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink); font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}
body {
  background:
    radial-gradient(120% 70% at 50% -10%, var(--bg-3) 0%, rgba(59, 29, 120, 0) 60%),
    radial-gradient(90% 50% at 100% 110%, rgba(255, 77, 141, 0.18) 0%, rgba(255, 77, 141, 0) 70%),
    var(--bg);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#app { position: relative; max-width: 520px; height: 100%; margin: 0 auto; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: 0.45; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
h1, h2, h3, p { margin: 0; }
small { font-size: 0.8em; }
.emo, .emo-inline, .av, .role-emoji, .big-emo, .devil, .brand-emojis { font-family: var(--emoji); font-weight: 400; line-height: 1; }

/* ---------------------------------------------------------------- screen frame */
.screen {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: var(--gap);
  height: 100vh;
  padding: calc(var(--safe-top) + 8px) var(--pad) var(--safe-bottom);
  overflow: hidden;
}
@supports (height: 100svh) { .screen { height: 100svh; } }
.screen > * { flex: none; }
.screen.boot { justify-content: center; align-items: center; }

.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--tap); gap: 8px; }
.bar-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.round { font-size: 15px; color: var(--ink-dim); white-space: nowrap; }
.round b { color: var(--ink); font-size: 18px; }
.logo { font-weight: 900; letter-spacing: 0.02em; color: var(--sun); font-size: clamp(13px, 4.6vw, 18px); white-space: nowrap; }
.badge { padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 15px; white-space: nowrap; color: var(--ink-dark); }
.badge.juge { background: var(--teal); }
.badge.brouilleur { background: var(--pink); color: #fff; }
.badge.decodeur { background: var(--sun); }
.icon-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--surface); font-size: 20px; font-family: var(--emoji); }
.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.25); }
.conn-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.conn-strip {
  position: absolute; z-index: 40; top: calc(var(--safe-top) + 54px); left: 50%; transform: translateX(-50%);
  max-width: 90%; padding: 6px 14px; border-radius: 999px; background: var(--orange); color: var(--ink-dark);
  font-size: 14px; font-weight: 700; text-align: center;
}
.toast {
  position: absolute; z-index: 50; left: 50%; bottom: calc(var(--safe-bottom) + 72px); transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px;
  background: #fff; color: var(--ink-dark); font-size: 16px; font-weight: 700; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: toast-in var(--t-fast) ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------------------------------------------------------------- buttons */
.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; border-radius: var(--radius); font-size: 20px; font-weight: 800; }
.btn.primary { background: var(--sun); color: var(--ink-dark); box-shadow: 0 5px 0 #c99a0e; }
.btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #c99a0e; }
.btn.secondary { background: var(--surface-2); border: 1px solid var(--line); }
.btn.link { min-height: var(--tap); font-size: 16px; font-weight: 600; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.hint { color: var(--ink-mute); font-size: 15px; text-align: center; }
.notice { padding: 10px 14px; border-radius: 14px; background: rgba(255, 77, 141, 0.16); border: 1px solid rgba(255, 77, 141, 0.4); text-align: center; font-weight: 600; }
.say { font-size: 17px; color: var(--ink-dim); text-align: center; line-height: 1.3; }
.say b { color: var(--ink); }
.soon { text-align: center; color: var(--ink-dim); font-size: 17px; }
.soon b { color: var(--sun); font-variant-numeric: tabular-nums; }
.wait { text-align: center; font-size: 18px; color: var(--ink-dim); }

/* ---------------------------------------------------------------- home */
.home { justify-content: center; }
.home-top { position: absolute; top: calc(var(--safe-top) + 8px); right: var(--pad); }
.brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.brand-emojis { display: flex; gap: 10px; font-size: 44px; }
.brand-emojis span { animation: bob 2.4s ease-in-out infinite; }
.brand-emojis span:nth-child(2) { animation-delay: -0.6s; }
.brand-emojis span:nth-child(3) { animation-delay: -1.2s; }
.brand-emojis span:nth-child(4) { animation-delay: -1.8s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-6deg); } }
.brand h1 { font-size: clamp(48px, 15vw, 68px); font-weight: 900; letter-spacing: 0.02em; color: var(--sun); text-shadow: 0 4px 0 var(--pink); }
.brand p { max-width: 320px; color: var(--ink-dim); font-size: 17px; line-height: 1.35; }
.home-form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-dim); }
.field input { height: 56px; padding: 0 16px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-size: 20px; font-weight: 700; outline: none; }
.field input:focus { border-color: var(--sun); }

/* ---------------------------------------------------------------- lobby */
.lobby { gap: 8px; }
.qr { flex: 1 1 0; min-height: 96px; max-height: min(222px, 58vw); display: flex; justify-content: center; }
.qr svg { height: 100%; width: auto; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 0 0 4px var(--sun), 0 12px 32px rgba(0, 0, 0, 0.4); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 15px; font-weight: 700; }
.chip .av { font-size: 20px; }
.chip small { color: var(--sun); font-weight: 700; }
.chip.away { opacity: 0.5; }
.settings { display: flex; flex-direction: column; gap: 6px; }
.setrow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setlabel { font-size: 13px; font-weight: 800; color: var(--ink-dim); padding-left: 4px; }
.pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pill { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 3px 5px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); line-height: 1.1; text-align: left; }
.pill .pe { flex: none; font-family: var(--emoji); font-size: 20px; line-height: 1; }
.pill .pt { display: flex; flex-direction: column; min-width: 0; }
.pill b { font-size: 14px; font-weight: 800; }
.pill small { font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.pill.on { background: var(--sun); border-color: var(--sun); color: var(--ink-dark); }
.pill.on small { color: rgba(26, 16, 51, 0.75); }
/* The « Mode » question: two pills, their line under the name may wrap (« 3 emojis, le Brouilleur en ajoute un »). */
.pills.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pills.two .pill { justify-content: flex-start; padding: 3px 8px; }
.pills.two .pill small { white-space: normal; line-height: 1.15; }
.theme-line { text-align: center; font-size: 14px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-line b { color: var(--ink); }
/* With the mode named at the end, the line may take two balanced lines on a narrow phone rather than lose its end. */
.theme-line.with-mode { white-space: normal; text-wrap: balance; line-height: 1.25; }
.theme-line .soon-tag { color: var(--orange); }
.lobby .hint b { color: var(--ink); }
.lobby-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.big-emo { font-size: 64px; }
.lobby-hero h2 { font-size: 26px; font-weight: 900; }
.lobby.guest .wait { margin-top: auto; }
.summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 auto; padding: 0; list-style: none; }
.summary.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary .pe { font-family: var(--emoji); font-weight: 400; }
.summary li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--surface); text-align: center; }
.summary small { color: var(--ink-mute); font-size: 12px; }
.summary b { font-size: 17px; }

/* ---------------------------------------------------------------- roles */
.roles { --accent: var(--sun); --accent-soft: rgba(255, 210, 63, 0.3); }
.roles.juge { --accent: var(--teal); --accent-soft: rgba(46, 230, 214, 0.3); }
.roles.brouilleur { --accent: var(--pink); --accent-soft: rgba(255, 77, 141, 0.3); }
.rolecard {
  flex: 1 1 0 !important; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  border-radius: var(--radius-lg); padding: 20px;
  background: radial-gradient(80% 60% at 50% 30%, var(--accent-soft), rgba(0, 0, 0, 0)), var(--surface);
  border: 2px solid var(--accent);
}
.role-emoji { font-size: clamp(72px, 16svh, 120px); animation: deal 420ms var(--ease-pop) both; }
@keyframes deal { from { transform: scale(0.2) rotate(-25deg); opacity: 0; } }
.kicker { font-size: 20px; color: var(--ink-dim); font-weight: 700; }
.rolecard h1 { font-size: clamp(34px, 10vw, 48px); font-weight: 900; color: var(--accent); letter-spacing: 0.02em; }
.mission { max-width: 300px; font-size: 18px; line-height: 1.35; }
.cast { text-align: center; color: var(--ink-dim); font-size: 16px; }
.cast b { color: var(--ink); }

/* ---------------------------------------------------------------- answer, frise, hints, news */
.answer-line {
  display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0;
  padding: 8px 14px; border-radius: 14px; background: rgba(46, 230, 214, 0.14); border: 1px solid rgba(46, 230, 214, 0.45);
}
.brouilleur .answer-line { background: rgba(255, 77, 141, 0.14); border-color: rgba(255, 77, 141, 0.5); }
.answer-line span { font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.answer-line b { flex: 0 1 auto; font-size: 22px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The precision (artist, role…) on its own short line under the answer, so it never squeezes the answer. */
.answer-line:has(em) { flex-wrap: wrap; row-gap: 0; padding-bottom: 6px; }
.answer-line em { flex: 1 0 100%; font-style: normal; font-size: 14px; line-height: 1.2; color: var(--ink-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.frise { display: grid; grid-template-columns: repeat(4, var(--slot)); gap: 8px; justify-content: center; }
.slot {
  position: relative; display: grid; place-items: center;
  width: var(--slot); height: var(--slot); border-radius: 18px;
  background: var(--surface-2); border: 2px solid transparent;
}
.slot .emo { font-size: calc(var(--slot) * 0.62); }
.slot.pop .emo { animation: pop var(--t-pop) var(--ease-pop) both; }
@keyframes pop { from { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } }
.slot.off { background: var(--surface); border: 2px dashed var(--line); }
.slot .q { font-size: calc(var(--slot) * 0.42); font-weight: 900; color: var(--ink-mute); opacity: 0.6; }
.slot.next { border-color: rgba(255, 210, 63, 0.55); }
.slot.next .q { color: var(--sun); opacity: 0.85; }
.next-fill { position: absolute; left: 12%; right: 12%; bottom: 7px; height: 4px; border-radius: 2px; background: var(--sun); transform-origin: left; transform: scaleX(0); }
.slot.up { background: var(--surface); border: 2px dashed var(--line); }
.slot.up .emo { opacity: 0.5; filter: saturate(0.6); }
.slot.swapped { border: 2px solid var(--pink); background: rgba(255, 77, 141, 0.16); }
.slot.swapped .emo { opacity: 1; filter: none; }
/* Final phase: an emoji the Brouilleur had replaced is back to its original, with a green halo (success green). */
.slot.restored { border: 2px solid var(--green); background: rgba(34, 197, 94, 0.16); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35), 0 0 18px rgba(34, 197, 94, 0.55); }
.slot.restored .emo { opacity: 1; filter: none; }
/* Expert frise: 1 to 4 big emoji cards in one centered row; the Brouilleur's « ＋ » insertion slots between them. */
.xfrise { display: flex; justify-content: center; align-items: stretch; gap: 8px; height: var(--xslot-h); }
.xslot {
  position: relative; display: grid; place-items: center; flex: 0 1 var(--xslot); min-width: 0;
  height: var(--xslot-h); border-radius: 20px; background: var(--surface-2); border: 2px solid transparent;
}
.xslot .emo { font-size: calc(var(--xslot) * 0.78); }
.xslot.pop .emo { animation: pop var(--t-pop) var(--ease-pop) both; }
.xslot.off { background: var(--surface); border: 2px dashed var(--line); }
.xslot .q { font-size: calc(var(--xslot) * 0.5); font-weight: 900; color: var(--ink-mute); opacity: 0.6; }
.xslot.next { border-color: rgba(255, 210, 63, 0.55); }
.xslot.next .q { color: var(--sun); opacity: 0.85; }
.xslot.up { background: var(--surface); border: 2px dashed var(--line); }
.xslot.up .emo { opacity: 0.5; filter: saturate(0.6); }
.xslot.added { border: 2px solid var(--pink); background: rgba(255, 77, 141, 0.16); }
.xslot.added .emo { opacity: 1; filter: none; }
/* Final phase: the Brouilleur's emoji is neutralised for everybody: grey, faded, dashed. */
.xslot.greyed { background: rgba(107, 99, 144, 0.18); border: 2px dashed var(--grey); }
.xslot.greyed .emo { filter: grayscale(1); opacity: 0.3; }
.xfrise.reveal { height: var(--xslot-reveal); }
.xfrise.reveal .xslot { flex-basis: var(--xslot-reveal); height: var(--xslot-reveal); }
.xfrise.reveal .xslot .emo { font-size: calc(var(--xslot-reveal) * 0.66); }
.xfrise.reveal .xslot.added .emo { animation: pop var(--t-pop) var(--ease-pop) 300ms both; }
.devil-tag { position: absolute; top: -8px; right: -6px; font-style: normal; font-size: 20px; font-family: var(--emoji); }
.pos-tag { position: absolute; left: 6px; bottom: 4px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-mute); }

.hints { display: flex; gap: 8px; justify-content: center; height: 36px; }
.hint.on, .hint.off { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.hint.on { background: var(--sun); color: var(--ink-dark); font-weight: 700; }
.hint.on b { font-size: 17px; font-weight: 900; }
.hint.on small { font-size: 12px; }
.hint.on.pop { animation: pop var(--t-pop) var(--ease-pop) both; }
.hint.off { border: 1.5px dashed var(--line); color: var(--ink-mute); font-size: 13px; }

.news { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.news.bad { color: var(--red); }
/* The final-phase banner may take two short lines on a narrow phone (the action zone below shrinks first). */
.news.final { height: auto; min-height: 26px; color: var(--green); font-size: min(16px, 4.6vw); line-height: 1.15; text-align: center; }

/* ---------------------------------------------------------------- clock */
.clock { position: relative; height: 30px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.clock-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--sun), #ffb703); transition: transform 240ms linear; }
.clock-sec { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; color: var(--ink-dark); font-variant-numeric: tabular-nums; mix-blend-mode: normal; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.clock.urgent .clock-fill { background: linear-gradient(90deg, var(--red), #ff7a7a); animation: throb 1s ease-in-out infinite; }
.clock.urgent .clock-sec { color: #fff; text-shadow: none; }
@keyframes throb { 50% { filter: brightness(1.25); } }
.clock.frozen .clock-fill { background: var(--grey); animation: none; }
.clock.frozen .clock-sec { color: #fff; text-shadow: none; }
/* Décodeur and Juge: the live value of a find beside the clock; it pulses when it drops. */
.clock-row { display: flex; align-items: center; gap: 8px; }
.clock-row .clock { flex: 1 1 auto; min-width: 0; }
.stake-badge { flex: none; height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-dim); font-size: 14px; font-weight: 700; white-space: nowrap; }
.stake-badge b { color: var(--green); font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stake-badge.pulse { animation: drop 300ms var(--ease-pop) both; }
@keyframes drop { from { transform: scale(1.25); background: rgba(255, 210, 63, 0.45); } }

/* ---------------------------------------------------------------- action zone */
.screen > .action { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }

/* The buzzer: readable from across the table — its colour, one big word, a countdown. */
.buzzer {
  height: min(100%, 300px, 72vw); aspect-ratio: 1; width: auto; min-height: 110px;
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 8%; line-height: 1.05; color: #fff;
  --c: var(--grey); --c-dark: #48416a;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 50% 50%, var(--c) 55%, var(--c-dark) 100%);
  box-shadow: 0 10px 0 var(--c-dark), 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.15);
}
.buzzer b { font-size: clamp(28px, 7svh, 48px); font-weight: 900; letter-spacing: 0.02em; }
.buzzer small { font-size: clamp(13px, 2.2svh, 17px); font-weight: 700; opacity: 0.9; }
.buzzer.ready { --c: var(--green); --c-dark: #15803d; box-shadow: 0 10px 0 var(--c-dark), 0 0 0 8px rgba(34, 197, 94, 0.18), 0 18px 40px rgba(0, 0, 0, 0.45); }
.buzzer.ready:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--c-dark), 0 0 0 8px rgba(34, 197, 94, 0.18); }
.buzzer.sent { --c: var(--green); --c-dark: #15803d; transform: translateY(8px); box-shadow: 0 2px 0 var(--c-dark); }
.buzzer.locked { --c: var(--red); --c-dark: #991b1b; }
.buzzer.locked b { font-size: clamp(24px, 5.5svh, 40px); }
.lock-sec { font-size: clamp(34px, 9svh, 64px); font-weight: 900; font-variant-numeric: tabular-nums; }
.buzzer.other { --c: var(--grey); --c-dark: #3c3560; }
.buzzer.other b { font-size: clamp(22px, 5svh, 36px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buzzer.me { --c: var(--sun); --c-dark: #b8860b; color: var(--ink-dark); }
.buzzer.me b { font-size: clamp(22px, 5svh, 34px); }

.judge { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.judge .say { font-size: 19px; }
.judge-sec { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.verdict { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: clamp(110px, 24svh, 170px); border-radius: var(--radius-lg); font-size: 22px; font-weight: 900; color: #fff; }
.verdict span { font-size: 44px; font-family: var(--emoji); }
.verdict.yes { background: var(--green); box-shadow: 0 7px 0 #15803d; }
.verdict.no { background: var(--red); box-shadow: 0 7px 0 #991b1b; }
.verdict:active { transform: translateY(5px); box-shadow: none; }
.calm { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink-dim); }
.calm span { font-size: 56px; font-family: var(--emoji); }
.calm b { font-size: 22px; color: var(--ink); }
.plot-zone { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.swaps { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 77, 141, 0.12); border: 1px solid rgba(255, 77, 141, 0.4); font-size: 15px; }
.swaps b { font-size: 20px; color: var(--pink); }
.swaps { flex-wrap: wrap; row-gap: 4px; }
.swaps > span:first-child { white-space: nowrap; }
.swaps .stake { flex: 1 1 200px; text-align: right; line-height: 1.2; font-size: 14px; }
.swaps .stake b { color: var(--sun); white-space: nowrap; }
.won { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 77, 141, 0.16); border: 2px solid var(--pink); font-size: 22px; font-weight: 900; }
.won span { font-family: var(--emoji); font-weight: 400; font-size: 30px; }
.won b { color: var(--sun); }

/* ---------------------------------------------------------------- the Juge's bet */
/* One short public line under the clock (and in PREP for the others): fixed height, teal like the Juge. */
.bet-line { height: 20px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.bet-line span { font-family: var(--emoji); }
.bet-line b { color: var(--teal); }
.bet-pick { flex: 1 1 0 !important; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.bets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bet-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 88px; padding: 8px 6px;
  border-radius: var(--radius); background: var(--surface); border: 2px solid rgba(46, 230, 214, 0.45); text-align: center; line-height: 1.1;
}
.bet-opt .be { font-family: var(--emoji); font-size: 30px; line-height: 1; }
.bet-opt b { font-size: 17px; font-weight: 900; }
.bet-opt small { font-size: 13px; color: var(--green); font-weight: 800; }
.bet-opt.on { background: var(--teal); border-color: var(--teal); color: var(--ink-dark); box-shadow: 0 0 0 3px rgba(46, 230, 214, 0.3); }
.bet-opt.on small { color: #0b5f3a; }
.bet-opt:active:not(:disabled) { transform: scale(0.96); }
.plot-mini { text-align: center; font-size: 16px; color: var(--ink-dim); }
.plot-mini span { font-family: var(--emoji); }
.plot-mini b { color: var(--pink); }
.bet-result { text-align: center; font-size: min(15px, 4.1vw); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bet-result span { font-family: var(--emoji); }
.bet-result.ok b { color: var(--teal); font-weight: 900; }

/* ---------------------------------------------------------------- PREP (waiting side) */
.prep.wait { justify-content: flex-start; }
.plotting { flex: 1 1 0 !important; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: 22px; }
.devil { font-size: clamp(80px, 18svh, 130px); animation: scheme 1.6s ease-in-out infinite; }
@keyframes scheme { 25% { transform: rotate(-8deg) scale(1.04); } 75% { transform: rotate(8deg) scale(1.04); } }
.plotting b { color: var(--pink); }

/* ---------------------------------------------------------------- the Brouilleur's tray and drag and drop */
.close { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 15px; white-space: nowrap; }
.screen > .spacer { flex: 1 1 0; min-height: 0; }
/* The tray: the round's decoys, big, at the bottom of the Brouilleur's screen; no scrolling while one is pressed. */
.tray { display: flex; justify-content: center; gap: 14px; padding: 8px; border-radius: 22px; background: rgba(255, 77, 141, 0.1); border: 1px solid rgba(255, 77, 141, 0.35); }
.tray-decoy {
  width: min(76px, 21vw); height: min(76px, 21vw, 10svh); min-height: 52px; border-radius: 18px; display: grid; place-items: center;
  background: var(--surface-2); border: 2px solid var(--pink); touch-action: none; cursor: grab;
}
.tray-decoy .emo { font-size: min(44px, 12vw, 6svh); }
.tray-decoy.on { background: rgba(255, 77, 141, 0.3); box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.35); transform: translateY(-3px); }
.tray-decoy.lifted { opacity: 0.25; }
.tray-decoy.gone { border-style: dashed; background: none; opacity: 0.35; cursor: default; }
.stake-line { text-align: center; font-size: 14px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stake-line b { color: var(--sun); }
.stake-line b.left { color: var(--pink); }
.drag-hint { text-align: center; font-size: 14px; line-height: 1.25; color: var(--ink-mute); }
/* The decoy under the finger: lifted (bigger, shadow), never in the way of the hit-testing. */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: grid; place-items: center; border-radius: 18px;
  background: rgba(42, 22, 80, 0.92); border: 2px solid var(--pink); will-change: transform;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 77, 141, 0.3);
}
.drag-ghost .emo { font-size: min(44px, 12vw, 6svh); }
.drag-ghost.back { transition: transform 200ms ease-out; }
/* Facile targets: nothing shows until a decoy is lifted (or picked by a tap); then the replaceable emojis get a pink
   frame, the others dim, the hovered one glows. */
.dragging .frise .slot.target, .picking .frise .slot.target { border: 2px dashed var(--pink); }
.dragging .frise .slot:not(.target), .picking .frise .slot:not(.target) { opacity: 0.35; }
.slot.target.hot { border: 2px solid var(--pink); background: rgba(255, 77, 141, 0.3); transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.4), 0 0 22px rgba(255, 77, 141, 0.7); }
/* Expert gaps: closed until a decoy is lifted, then open at the allowed places; the hovered one widens and glows. */
.xgap { flex: 0 0 0; width: 0; margin: 0 -4px; padding: 0; border-radius: 12px; overflow: hidden; opacity: 0; pointer-events: none; transition: flex-basis 150ms ease-out, opacity 150ms; }
.dragging .xgap, .picking .xgap { flex-basis: 24px; margin: 0; opacity: 1; pointer-events: auto; border: 2px dashed var(--pink); background: rgba(255, 77, 141, 0.12); }
.xgap.hot { flex-basis: 48px; border-style: solid; background: rgba(255, 77, 141, 0.32); box-shadow: 0 0 0 4px rgba(255, 77, 141, 0.35), 0 0 22px rgba(255, 77, 141, 0.7); }
.dragging .xfrise .xslot .emo, .picking .xfrise .xslot .emo { font-size: calc(var(--xslot) * 0.58); }

/* ---------------------------------------------------------------- REVEAL */
.reveal-screen { gap: 8px; }
.answer-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface); }
.answer-card small { color: var(--ink-mute); font-size: 14px; }
.answer-card b { font-size: clamp(24px, 7.5vw, 32px); font-weight: 900; color: var(--sun); text-align: center; line-height: 1.1; }
.answer-card em { font-style: normal; font-size: 15px; color: var(--ink-dim); text-align: center; }
.outcome { text-align: center; font-size: 21px; font-weight: 800; }
.outcome b { color: var(--green); }
.timeout .outcome b { color: var(--pink); }
.outcome.two { display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.outcome .devil-line b { color: var(--pink); }
.frise.reveal { grid-template-columns: repeat(4, var(--slot-reveal)); }
.frise.reveal .slot { width: var(--slot-reveal); height: var(--slot-reveal); }
.frise.reveal .slot .emo { font-size: calc(var(--slot-reveal) * 0.58); }
.frise.reveal .slot.swapped .emo { animation: pop var(--t-pop) var(--ease-pop) 300ms both; }
.orig { position: absolute; top: 3px; left: 5px; font-size: calc(var(--slot-reveal) * 0.26); font-family: var(--emoji); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; opacity: 0.9; }
.caption { text-align: center; font-size: 15px; color: var(--ink-dim); line-height: 1.3; }
.mini-scores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
.mini-scores.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-scores li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 34px; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 10px; background: var(--surface); font-size: 15px; }
.mini-scores li.me { outline: 2px solid var(--sun); }
.mini-scores .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-scores b { font-variant-numeric: tabular-nums; }
.mini-scores em { font-style: normal; font-weight: 900; color: var(--green); text-align: right; }

/* ---------------------------------------------------------------- FINISHED */
.end-title { text-align: center; font-size: 30px; font-weight: 900; color: var(--sun); }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.step .av { font-size: 34px; }
.step .nm { font-weight: 800; font-size: 16px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step > b { font-size: 18px; color: var(--sun); font-variant-numeric: tabular-nums; }
.step .block { width: 100%; display: grid; place-items: start center; padding-top: 8px; border-radius: 14px 14px 4px 4px; font-size: 30px; font-family: var(--emoji); background: var(--surface-2); }
.step.p1 .block { height: clamp(64px, 15svh, 120px); background: linear-gradient(var(--sun), #e0a800); }
.step.p2 .block { height: clamp(48px, 11svh, 90px); background: linear-gradient(#e6e1f5, #b5acd6); }
.step.p3 .block { height: clamp(36px, 8svh, 70px); background: linear-gradient(#f4a261, #c96f2f); }
.step.rise { animation: rise 600ms var(--ease-pop) both; }
.step.p3.rise { animation-delay: 200ms; }
.step.p2.rise { animation-delay: 700ms; }
.step.p1.rise { animation-delay: 1300ms; }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.ranking { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 0 1 auto !important; min-height: 0; overflow: hidden; }
.ranking li { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; background: var(--surface); font-size: 16px; }
.ranking li.me { outline: 2px solid var(--sun); }
.ranking .rk { color: var(--ink-mute); font-weight: 800; }
.ranking .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.end-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------------- 2 players (no Brouilleur) */
.duo-hint { font-size: 14px; line-height: 1.25; color: var(--ink-dim); }
.mission.duo { font-size: 16px; color: var(--sun); font-weight: 800; }
.plotting.duo p { max-width: 300px; font-size: 20px; line-height: 1.3; color: var(--sun); font-weight: 800; }
.plotting.duo .devil { animation: none; }
.plot-mini.duo b { color: var(--sun); }

/* ---------------------------------------------------------------- « Essayer seul » (the solo trial) */
/* Home: a discreet link under the main button. */
.essai-link { min-height: 40px; font-size: 16px; font-weight: 700; color: var(--ink-dim); }
/* INTRO: the three roles in three short rows, then « you are the Décodeur », then the button. */
.trial-intro { gap: 10px; }
.intro-title { text-align: center; font-size: clamp(24px, 7vw, 30px); font-weight: 900; color: var(--sun); }
.intro-roles { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.intro-roles li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.intro-roles li.juge { border-color: rgba(46, 230, 214, 0.55); }
.intro-roles li.brouilleur { border-color: rgba(255, 77, 141, 0.55); }
.intro-roles li.decodeur { border-color: rgba(255, 210, 63, 0.6); }
.intro-roles .ie { flex: none; font-family: var(--emoji); font-size: 30px; line-height: 1; }
.intro-roles p { font-size: 15px; line-height: 1.3; color: var(--ink-dim); }
.intro-roles li.juge b { color: var(--teal); }
.intro-roles li.brouilleur b { color: var(--pink); }
.intro-roles li.decodeur b { color: var(--sun); }
.intro-you { padding: 10px 14px; border-radius: 16px; background: rgba(255, 210, 63, 0.14); border: 2px solid var(--sun); font-size: 17px; line-height: 1.3; text-align: center; }
.intro-you b { color: var(--sun); }
.intro-robots { text-align: center; font-size: 14px; color: var(--ink-mute); }
.trial-intro .btn { margin-top: auto; }
/* JUDGING: the self-check sheet in the action zone (the frise stays above). */
.trial-sheet { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-2); border: 2px solid var(--sun); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.sheet-say { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.sheet-say span { font-family: var(--emoji); font-size: 40px; }
.sheet-say b { font-size: 22px; font-weight: 900; }
.sheet-say small { font-size: 14px; color: var(--ink-mute); }
.sheet-answer { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sheet-answer small { font-size: 13px; color: var(--ink-mute); }
.sheet-answer b { font-size: clamp(22px, 7vw, 30px); font-weight: 900; color: var(--sun); line-height: 1.1; }
.sheet-answer em { font-style: normal; font-size: 14px; color: var(--ink-dim); }
.trial-sheet .verdict { height: clamp(72px, 14svh, 120px); }
.trial-sheet .verdict span { font-size: 34px; }
/* REVEAL: no countdown, two ways out at the bottom; the robot's bet may take two lines. */
.trial-reveal .end-actions { gap: 10px; }
.trial-reveal .bet-result { white-space: normal; text-wrap: balance; line-height: 1.25; }
.essai-link, .trial-reveal .btn { gap: 8px; }

/* ---------------------------------------------------------------- small and narrow screens */
@media (max-height: 620px) {
  :root { --gap: 7px; }
  .btn { min-height: 48px; font-size: 18px; }
  .pill { min-height: 40px; }
  .chip { height: 28px; }
  .chip .av { font-size: 17px; }
  .bar { height: 40px; }
  .answer-line b { font-size: 19px; }
  .hints { height: 32px; }
  .mission { font-size: 16px; }
  /* The lobby has 4 questions on the Expert themes: the QR code shrinks further, the mode pills lose their line. */
  .qr { min-height: 56px; }
  .lobby { gap: 5px; }
  .settings { gap: 4px; }
  .pills.two .pill small { display: none; }
  .bet-opt { min-height: 64px; padding: 4px; }
  .bet-opt .be { font-size: 24px; }
  .bet-opt b { font-size: 15px; }
  .bet-line { font-size: 13px; height: 18px; }
  /* REVEAL holds one more line (the Juge's bet): the series shrinks a little on short phones. */
  .frise.reveal { --slot-reveal: min(calc((100vw - 2 * var(--pad) - 3 * 8px) / 4), 8svh, 80px); }
  .outcome.two { font-size: 16px; gap: 0; }
  .duo-hint { font-size: 12px; line-height: 1.15; }
  .trial-intro { gap: 6px; }
  .intro-roles { gap: 5px; }
  .intro-roles li { padding: 5px 10px; }
  .intro-roles .ie { font-size: 24px; }
  .intro-roles p { font-size: 13.5px; line-height: 1.25; }
  .intro-you { padding: 6px 10px; font-size: 15px; }
  .intro-robots { font-size: 13px; }
  .trial-sheet { padding: 10px; gap: 6px; }
  .sheet-say span { font-size: 30px; }
  .trial-reveal .end-actions { gap: 6px; }
}
@media (max-height: 520px) {
  :root { --gap: 5px; }
  .screen { padding-top: calc(var(--safe-top) + 4px); }
  .bar { height: 36px; }
  .icon-btn { width: 36px; height: 36px; font-size: 17px; }
  .close { min-height: 36px; }
  .btn { min-height: 44px; font-size: 17px; }
  .lobby { gap: 4px; }
  .chips { gap: 4px; }
  .pill { min-height: 34px; padding: 1px 4px; }
  .pill .pe { font-size: 16px; }
  .pill b { font-size: 13px; }
  .pill small { font-size: 9.5px; }
  .settings { gap: 3px; }
  .theme-line { font-size: 12.5px; }
  .chip { height: 26px; font-size: 13px; }
  .chip .av { font-size: 15px; }
  .lobby .hint { font-size: 13px; }
  .big-emo { font-size: 44px; }
  .lobby-hero h2 { font-size: 21px; }
  .summary li { padding: 6px; }
  .answer-card { padding: 4px 10px; }
  .answer-card small { display: none; }
  .outcome { font-size: 18px; }
  .caption { font-size: 13px; }
  .mini-scores li { height: 26px; font-size: 14px; }
  .soon { font-size: 15px; }
}
@media (max-width: 359px) {
  .mini-scores li { grid-template-columns: 20px minmax(0, 1fr) auto 26px; gap: 4px; padding: 0 6px; font-size: 14px; }
  :root { --pad: 12px; }
  .pills { gap: 4px; }
  .pill { gap: 3px; padding: 2px 3px; }
  .pill .pe { font-size: 17px; }
  .pill b { font-size: 12.5px; }
  .pill small { font-size: 9.5px; }
  .theme-line { font-size: 12.5px; }
  .badge { font-size: 13px; padding: 5px 9px; }
  .stake-line { font-size: 13px; }
}

/* ---------------------------------------------------------------- portrait only (E8), reduced motion */
.orientation-advice { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  #app { display: none; }
  .orientation-advice { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 800; }
  .orientation-advice span { font-size: 56px; font-family: var(--emoji); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Emojis drawn by Twemoji (src/ui/emoji-images.js): one picture per emoji on every phone. The picture follows the text
   size (1em), ignores the pointer (taps and drag and drop land on the tile around it) and cannot be dragged on its own. */
img.emo { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
/* A Twemoji picture always takes the size of the text it replaces: rules such as `.slot .emo` size the emoji's own span,
   and must not also resize a small emoji nested in a badge (😈 tag, crossed-out original) that the picture now carries. */
img.emo { font-size: inherit !important; }