/* Jeu des 5 conditions : les 5 cercles de la diapo 5 flottent dans une arène, les étiquettes éparpillées en bas. */
.logos{max-width:980px;margin:0 auto 14px;display:flex;align-items:center;gap:14px}
.logo{height:64px;width:auto;border-radius:10px;display:block}
.logo-text{display:grid;place-items:center;height:64px;padding:0 14px;border:2px solid var(--line);font-weight:800;font-size:.8rem;line-height:1.15;text-align:center;color:var(--ink)}
.rule{height:3px;background:var(--c3);border-radius:2px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.score{font-weight:800;font-variant-numeric:tabular-nums;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.circles{position:relative;height:clamp(420px,58vh,540px);border-radius:18px;background:var(--surface);border:1px solid var(--line);overflow:hidden;--size:clamp(112px,17vw,168px)}
.circle{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border-radius:50%;border:3px dashed var(--col);background:var(--bg);display:grid;place-items:center;text-align:center;padding:12px;transition:background .25s,transform .15s;will-change:left,top}
.circle .hint{font-size:clamp(.66rem,1.5vw,.85rem);color:var(--muted);line-height:1.25}
.circle .ico{font-size:clamp(1.3rem,3.5vw,2rem);line-height:1}
.circle .name{display:none;color:#fff;font-weight:800;text-transform:uppercase;font-size:clamp(.7rem,1.8vw,1.05rem);line-height:1.15}
.circle.hot{transform:scale(1.08);border-style:solid}
.circle.done{background:var(--col);border-style:solid}
.circle.done .hint,.circle.done .ico{display:none}
.circle.done .name{display:block}
.circle.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.field{position:relative;min-height:200px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;align-content:center;padding:22px}
.label{font:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:999px;padding:12px 18px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:rotate(var(--rot,0deg)) translateY(var(--dy,0px))}
.label.sel{background:var(--ink);color:var(--bg)}
.label:focus-visible{outline:3px solid var(--c2);outline-offset:3px}
.drag{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) rotate(-4deg);box-shadow:0 10px 26px rgba(0,0,0,.25)}
.tip{color:var(--muted);font-size:.92rem;margin:0}
.flash{min-height:1.5em;font-weight:700;margin:0}
.flash.ok{color:var(--good)} .flash.ko{color:var(--bad)}
.win{background:var(--ink);color:var(--bg);border-radius:18px;padding:26px;text-align:center;display:grid;gap:12px;justify-items:center}
.win h2{margin:0;font-size:1.7rem}
.win p{margin:0}
.btn{font:inherit;font-weight:800;border:0;border-radius:999px;padding:14px 26px;background:var(--c3);color:#fff;cursor:pointer}
@media (max-width:640px){
  .logo,.logo-text{height:52px}
  .circles{height:520px}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}