/* Jeu des 5 conditions : tout tient sur un seul écran, sans défilement.
   En-tête sur une ligne, l'arène des cercles prend toute la hauteur restante, les étiquettes en bas.
   La taille des cercles est calculée par le script selon la taille de l'arène (--size). */
[hidden]{display:none!important}
html,body{height:100%}
body{display:flex;flex-direction:column;overflow:hidden;padding-block:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-bottom,0px))}
main{flex:1;min-height:0;width:100%;max-width:1500px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:10px}

.entete{display:flex;align-items:center;gap:14px;min-width:0}
.logos{display:flex;align-items:center;gap:10px;flex:none}
.logo{height:clamp(64px,11vh,120px);width:auto;border-radius:10px;display:block}
.logo-text{display:grid;place-items:center;height:clamp(64px,11vh,120px);padding:0 14px;border:2px solid var(--line);font-weight:800;font-size:.75rem;line-height:1.15;text-align:center;color:var(--ink)}
.titres{flex:1;min-width:0}
.titres h1{font-size:clamp(1.15rem,2.6vw,2rem)}
.titres .sub{margin:2px 0 0;font-size:clamp(.8rem,1.4vw,1rem)}
.score{flex:none;font-weight:800;font-size:clamp(1rem,2vw,1.4rem);font-variant-numeric:tabular-nums;background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:6px 16px}

/* Arène : halos aux couleurs des 5 conditions et grand emblème de l'OMS en filigrane, qui « respire » doucement. */
:root{--oms:#0093D5}
.circles{user-select:none;-webkit-user-select:none;position:relative;min-height:0;border-radius:22px;overflow:hidden;--size:140px;border:2px solid color-mix(in srgb,var(--oms) 30%,var(--line));
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb,var(--c1) 22%,transparent), transparent 38%),
    radial-gradient(circle at 88% 22%, color-mix(in srgb,var(--c2) 22%,transparent), transparent 38%),
    radial-gradient(circle at 20% 90%, color-mix(in srgb,var(--c4) 20%,transparent), transparent 38%),
    radial-gradient(circle at 85% 88%, color-mix(in srgb,var(--c5) 20%,transparent), transparent 38%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--oms) 14%,var(--surface)), var(--surface) 70%)}
.circles::before{content:"";position:absolute;left:50%;top:50%;width:min(62%,80vh);aspect-ratio:528/466;transform:translate(-50%,-50%);
  background:var(--oms);opacity:.13;pointer-events:none;
  -webkit-mask:url("../img/embleme-oms.png") center/contain no-repeat;mask:url("../img/embleme-oms.png") center/contain no-repeat;
  animation:respire 9s ease-in-out infinite}
@keyframes respire{50%{transform:translate(-50%,-50%) scale(1.05);opacity:.18}}
.circle{z-index:1;box-shadow:0 8px 22px -10px color-mix(in srgb,var(--col) 70%,transparent);position:absolute;left:0;top:0;width:var(--size);height:var(--size);border-radius:50%;border:4px dashed var(--col);background:color-mix(in srgb,var(--col) 16%,var(--surface));display:grid;place-items:center;text-align:center;padding:calc(var(--size) * .1);transition:background .25s,transform .15s;will-change:left,top}
.circle .hint{font-size:calc(var(--size) * .085);font-weight:700;color:var(--ink);line-height:1.25}
.circle .ico{font-size:calc(var(--size) * .17);line-height:1}
.circle .name{display:none;color:#fff;font-weight:800;text-transform:uppercase;font-size:calc(var(--size) * .1);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)}}

.flash{min-height:1.4em;font-weight:700;margin:0;text-align:center;font-size:clamp(.9rem,1.6vw,1.15rem);color:var(--muted)}
.flash.ok{color:var(--good)} .flash.ko{color:var(--bad)}

.field{position:relative;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;align-items:center;padding:12px}
.label{font:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.8rem,1.5vw,1.05rem);color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:999px;padding:10px 16px;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)}

.end:empty{display:none}
.win{background:var(--ink);color:var(--bg);border-radius:18px;padding:16px 22px;text-align:center;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center}
.win h2{margin:0;font-size:clamp(1.2rem,2.4vw,1.7rem)}
.win p{margin:0}
.btn{font:inherit;font-weight:800;border:0;border-radius:999px;padding:12px 24px;background:var(--c3);color:#fff;cursor:pointer}

@media (max-width:640px){
  .entete{flex-wrap:wrap;gap:8px}
  .titres{order:3;flex-basis:100%}
  .score{margin-left:auto}
  .titres .sub{display:none}
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* Écran d'accueil « Jouer » : fond bleu OMS, grand emblème, les 5 couleurs des conditions. */
.accueil{position:fixed;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:clamp(10px,2vh,20px);text-align:center;color:#fff;
  padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(circle at 50% 35%, #1BA9E6, #0077B6 55%, #0B3D66);animation:apparait .4s ease-out}
.accueil-embleme{width:clamp(140px,30vh,300px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.25));animation:respire-img 6s ease-in-out infinite}
@keyframes respire-img{50%{transform:scale(1.05)}}
.accueil-sur{margin:0;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:clamp(.75rem,1.4vw,1rem);opacity:.9}
.accueil h2{margin:0;font-size:clamp(2rem,6vw,4.4rem);line-height:1.05;text-wrap:balance}
.accueil-texte{margin:0;max-width:34ch;font-size:clamp(1rem,2vw,1.4rem);line-height:1.4;opacity:.95}
.accueil-points{display:flex;gap:12px}
.accueil-points i{width:clamp(18px,2.6vw,30px);height:clamp(18px,2.6vw,30px);border-radius:50%;background:var(--col);box-shadow:0 0 0 3px rgba(255,255,255,.6);animation:saute 1.6s ease-in-out infinite}
.accueil-points i:nth-child(2){animation-delay:.15s}.accueil-points i:nth-child(3){animation-delay:.3s}.accueil-points i:nth-child(4){animation-delay:.45s}.accueil-points i:nth-child(5){animation-delay:.6s}
@keyframes saute{50%{transform:translateY(-10px)}}
.btn-jouer{font:inherit;font-weight:800;font-size:clamp(1.3rem,3vw,2rem);color:#0B3D66;background:#fff;border:0;border-radius:999px;padding:clamp(14px,2vh,22px) clamp(36px,5vw,64px);cursor:pointer;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);animation:pulse 2s ease-in-out infinite}
.btn-jouer:hover{transform:scale(1.05)}
@keyframes pulse{50%{box-shadow:0 12px 30px -8px rgba(0,0,0,.4),0 0 0 14px rgba(255,255,255,.18)}}
@keyframes apparait{from{opacity:0}}
.accueil.part{animation:part .35s ease-in forwards}
@keyframes part{to{opacity:0;transform:scale(1.04)}}