/* ==========================================================================
   Jeux de manipulation — « toucher, puis toucher »
   Portage de content/authoring/jeux/reference-jeux.html sur les tokens du
   produit. Toute cible manipulable fait au moins 44 px de haut, le focus est
   visible, et la couleur ne porte jamais seule l'information : juste et faux
   s'écrivent aussi en toutes lettres dans la liste de correction.
   ========================================================================== */

.game{
  display:grid;gap:14px;
  padding:clamp(18px,3vw,24px);
  border:1px solid var(--color-border);
  border-radius:var(--radius-card);
  background:var(--color-surface);
  box-shadow:var(--shadow-card);
  container-type:inline-size;
}
.game-head{display:grid;gap:6px}
.game-title{font-size:clamp(1.35rem,2.6vw,1.6rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;max-width:none;text-wrap:balance}
.game-brief{font-size:.96rem;line-height:1.5}
.game-how{font-family:var(--font-mono);font-size:.72rem;line-height:1.5}
.game-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.game-play{display:grid;gap:12px}
.game-incident{padding:10px 12px;border-radius:var(--radius-xs);background:var(--color-cream);font-family:var(--font-mono);font-size:.78rem;line-height:1.5}

/* --- éléments manipulables ------------------------------------------------ */
.game-token{
  display:block;width:100%;min-height:44px;
  padding:9px 12px;
  border:1px solid var(--color-border);border-radius:12px;
  background:var(--color-surface);color:var(--color-text);
  font-size:.88rem;line-height:1.35;text-align:left;
  transition:background var(--motion-fast),border-color var(--motion-fast);
}
.game-token:hover{border-color:var(--color-border-strong)}
.game-token[aria-pressed="true"]{border:2px solid var(--color-accent);background:var(--color-accent-tint);padding:8px 11px}
.game-token.is-used{opacity:.4}
.game-token.is-placed{width:auto;cursor:pointer}
.game-token.is-right{border-color:var(--color-success);background:var(--color-success-soft)}
.game-token.is-wrong{border-color:var(--color-error);background:var(--color-error-soft)}
.game-bank{display:grid;gap:8px}

/* --- emplacements (build_prompt) ----------------------------------------- */
.game-slots{display:grid;gap:8px}
.game-slot{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;
  min-height:48px;padding:7px 10px;
  border:1.5px dashed var(--color-border-strong);border-radius:12px;
  background:transparent;color:var(--color-text);
  font-size:.88rem;line-height:1.35;text-align:left;
}
.game-slot-value{min-width:0;overflow-wrap:anywhere}
.game-slot-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.game-slot.is-filled{border-style:solid;border-color:var(--color-border);background:var(--color-bg)}
.game-slot.is-armed{border-color:var(--color-accent);background:var(--color-accent-soft)}
.game-slot.is-right{border-style:solid;border-color:var(--color-success);background:var(--color-success-soft)}
.game-slot.is-wrong{border-style:solid;border-color:var(--color-error);background:var(--color-error-soft)}

/* --- bacs (sort_bins) ----------------------------------------------------- */
.game-bins{display:grid;gap:10px}
@container (min-width:560px){.game-bins{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.game-bin{
  display:grid;gap:8px;align-content:start;
  min-height:96px;padding:12px;
  border:1.5px dashed var(--color-border-strong);border-radius:14px;
  background:transparent;cursor:pointer;
}
.game-bin.is-armed{border-color:var(--color-accent);background:var(--color-accent-soft)}
.game-bin-label{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.game-bin-items{display:grid;gap:6px}

/* --- actions et correction ------------------------------------------------ */
.game-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.game-action{min-height:48px}
.game-action.primary{flex:1 1 auto}
.game-reset{margin-left:auto}
.game-output:empty{display:none}
.game-output{display:grid;gap:10px}
.game-score{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.9rem}
.game-score-value{
  display:inline-flex;align-items:center;min-height:30px;padding:3px 10px;
  border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent-strong);
  font-family:var(--font-mono);font-size:.82rem;font-variant-numeric:tabular-nums;
}
.game-score-value.is-perfect{background:var(--color-success-soft);color:var(--color-success)}
.game-feedback{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.game-feedback li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:.88rem;line-height:1.5}
.game-feedback .game-feedback-mark{font-weight:700}
.game-feedback li.is-ok .game-feedback-mark{color:var(--color-success)}
.game-feedback li.is-ko .game-feedback-mark{color:var(--color-error)}

@media(max-width:420px){
  .game-slot{grid-template-columns:minmax(0,1fr);gap:4px}
  .game-reset{margin-left:0}
}

/* --- relier les paires (match_pairs) ------------------------------------- */
.game-pairs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.game-pair-column{display:grid;gap:8px;align-content:start}
.game-token.is-done{border-color:var(--color-success);background:var(--color-success-soft);opacity:1}
.game-pair-rank{
  display:inline-block;margin-right:6px;padding:1px 6px;border-radius:5px;
  background:var(--color-success);color:var(--color-on-dark);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;vertical-align:2px;
}
.game-token.is-shaking{animation:game-shake .35s ease;border-color:var(--color-error)}
@keyframes game-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.game-token.is-shaking{animation:none}}

/* --- réparer le prompt (fill_gaps) --------------------------------------- */
.game-prompt{
  padding:14px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-cream);font-size:1rem;line-height:2.1;
}
.game-gap{
  min-height:44px;padding:4px 10px;
  border:1.5px dashed var(--color-accent);border-radius:10px;
  background:var(--color-surface);color:var(--color-accent-strong);
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1.4;text-align:left;
}
.game-gap.is-filled{border-style:solid;border-color:var(--color-border);color:var(--color-text);font-weight:400}
.game-gap.is-right{border-color:var(--color-success);background:var(--color-success-soft)}
.game-gap.is-wrong{border-color:var(--color-error);background:var(--color-error-soft)}
.game-veil{position:fixed;inset:0;z-index:60;background:rgba(20,20,19,.45)}
.game-sheet{
  position:fixed;z-index:61;right:0;bottom:0;left:0;
  display:grid;gap:8px;
  max-height:80vh;overflow-y:auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;
  background:var(--color-surface);
  box-shadow:0 -10px 40px rgba(20,20,19,.2);
}
@media(min-width:720px){
  .game-sheet{right:auto;bottom:auto;top:50%;left:50%;width:min(520px,92vw);transform:translate(-50%,-50%);border-radius:18px}
}

/* --- caviarder (redact) --------------------------------------------------- */
.game-mail{
  padding:14px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-cream);font-size:1rem;line-height:2.2;
}
.game-chunk{
  display:inline;padding:6px 3px;border-radius:5px;
  border-bottom:1.5px dotted var(--color-border-strong);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  cursor:pointer;
}
.game-chunk:hover{background:var(--color-accent-soft)}
.game-chunk[aria-pressed="true"]{background:var(--color-text);color:var(--color-text)}
.game-chunk.is-good[aria-pressed="true"]{background:var(--color-success);color:var(--color-success)}
.game-chunk.is-missed{outline:2px solid var(--color-error);outline-offset:1px}
.game-chunk.is-over{outline:2px dashed var(--color-accent);outline-offset:1px}

@media(max-width:480px){
  .game-pairs{grid-template-columns:minmax(0,1fr)}
}

/* --- contrôles carrés (flux, leviers) ------------------------------------ */
.game-icon-button{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;
  border:1px solid var(--color-border);border-radius:11px;
  background:var(--color-surface);color:var(--color-text);
}
.game-icon-button svg{width:18px;height:18px}
.game-icon-button:disabled{opacity:.35}
.game-empty{padding:14px;border:1.5px dashed var(--color-border-strong);border-radius:12px;font-size:.88rem}

/* --- construire le flux (build_flow) -------------------------------------- */
.game-tag{
  display:inline-block;margin-right:8px;padding:2px 8px;border-radius:6px;
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--color-cream);color:var(--color-text);vertical-align:1px;
}
.game-tag.is-ai{background:var(--color-accent-deep);color:var(--color-on-dark)}
.game-tag.is-human{background:var(--color-success);color:var(--color-on-dark)}
.game-tag.is-rule{background:var(--color-text);color:var(--color-on-dark)}
.game-tag.is-trigger{background:var(--color-accent-strong);color:var(--color-on-dark)}
.game-flow{display:grid;gap:8px}
.game-step{
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 10px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);
}
.game-step+.game-step{position:relative}
.game-step+.game-step::before{
  content:"";position:absolute;top:-9px;left:23px;width:1.5px;height:9px;background:var(--color-border-strong);
}
.game-step-rank{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--color-cream);font-family:var(--font-mono);font-size:.76rem;font-weight:600;
}
.game-step-body{font-size:.88rem;line-height:1.45}
.game-step-controls{display:flex;gap:4px}
.game-step.is-right{border-color:var(--color-success);background:var(--color-success-soft)}
.game-step.is-wrong{border-color:var(--color-error);background:var(--color-error-soft)}

/* --- leviers de l'agent (levers) ------------------------------------------ */
.game-levers{display:grid;gap:8px}
.game-lever{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:8px 12px;
  border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);
}
.game-lever-text{display:grid;gap:2px;min-width:0}
.game-lever-label{font-size:.9rem;font-weight:600;line-height:1.3}
.game-lever-sub{font-family:var(--font-mono);font-size:.68rem;line-height:1.3}
.game-switch{
  position:relative;flex:0 0 56px;width:56px;height:44px;border:none;background:transparent;
}
.game-switch::before{
  content:"";position:absolute;top:7px;left:0;width:56px;height:30px;border-radius:15px;
  background:var(--color-border-strong);transition:background var(--motion-fast);
}
.game-switch::after{
  content:"";position:absolute;top:10px;left:3px;width:24px;height:24px;border-radius:12px;
  background:var(--color-surface);box-shadow:0 1px 3px rgba(20,20,19,.3);transition:transform var(--motion-fast);
}
.game-switch[aria-checked="true"]::before{background:var(--color-accent)}
.game-switch[aria-checked="true"]::after{transform:translateX(26px)}
.game-stepper{display:flex;align-items:center;gap:6px}
.game-stepper-value{min-width:28px;text-align:center;font-family:var(--font-mono);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.game-log{
  display:grid;gap:4px;min-height:72px;padding:12px;border-radius:12px;
  background:var(--color-text);color:var(--color-on-dark);
  font-family:var(--font-mono);font-size:.72rem;line-height:1.6;
}
.game-log-empty{opacity:.75}
.game-log-line{display:flex;gap:8px;align-items:baseline;animation:game-log-in .25s ease backwards;animation-delay:calc(var(--rank) * .14s)}
@keyframes game-log-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.game-log-line{animation:none}}
.game-log-tag{
  flex:0 0 auto;padding:1px 6px;border-radius:4px;
  font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
}
.game-log-tag.is-sure{background:var(--color-success);color:var(--color-on-dark)}
.game-log-tag.is-likely{background:#8A6A2B;color:var(--color-on-dark)}
.game-log-tag.is-risk{background:var(--color-error);color:var(--color-on-dark)}

@media(max-width:480px){
  .game-step{grid-template-columns:24px minmax(0,1fr);row-gap:6px}
  .game-step-controls{grid-column:1 / -1;justify-content:flex-end}
  .game-step+.game-step::before{left:21px}
}

/* --- placement dans le produit -------------------------------------------- */
.game-page{max-width:840px;margin-inline:auto}
.module-games{
  display:grid;gap:12px;
  padding:clamp(18px,3vw,26px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-cream);
  container-type:inline-size;
}
.module-game-list{display:grid;gap:10px}
@container (min-width:560px){.module-game-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
.module-game-card{
  display:grid;gap:6px;align-content:start;
  padding:14px;border:1px solid var(--color-border);border-radius:14px;
  background:var(--color-surface);color:var(--color-text);text-decoration:none;
  transition:border-color var(--motion-fast);
}
.module-game-card:hover{border-color:var(--color-accent)}
.module-game-card strong{font-size:1.05rem;line-height:1.2;letter-spacing:-.02em}
.module-game-card small{font-size:.85rem;line-height:1.5}
.module-game-action{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--color-accent-strong)}