:root{
  color-scheme:dark;
  --bg:#0f0d16; --panel:rgba(20,17,31,.78); --panel-solid:#1a1628;
  --fg:#ece8f5; --muted:#a39cb8; --seek:#ff7a59; --hide:#4cc9f0; --gold:#ffd166; --bad:#ff5d5d;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,"Segoe UI",sans-serif;line-height:1.5;user-select:none;touch-action:none}
.ui{font-size:clamp(11px,1.15vw,19px)}
#game canvas{position:fixed;inset:0;display:block;width:100%;height:100%}
.hidden{display:none!important}
.nojs{position:fixed;inset:0;display:grid;place-items:center;z-index:9}
.ov{position:fixed;inset:0;padding:2.4em;z-index:2}
.dim{background:rgba(10,8,16,.55)}
button{font:inherit;color:inherit;border:0;background:none;outline:none}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:99em;background:var(--panel);backdrop-filter:blur(6px);font-weight:600}
.dot{width:.7em;height:.7em;border-radius:50%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1.6em;border-radius:.8em;font:600 1.1em Fredoka,ui-rounded,sans-serif;background:var(--hide);color:#0b1a22;cursor:pointer;transition:background .15s}
.btn:hover,.btn:focus-visible{background:#7ad9f6}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--fg)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:rgba(255,255,255,.16)}
.btn.sm{padding:.45em 1em;font-size:.95em}
.key{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;padding:0 .4em;border-radius:.35em;background:rgba(255,255,255,.12);font:600 .85em Inter,system-ui,sans-serif;margin-right:.35em}

/* chargement */
.load{background:radial-gradient(120% 90% at 50% 110%,#3a2350 0,#120f1c 60%);display:grid;place-items:center;text-align:center;z-index:5}
.logo{font:700 5.2em/1 Fredoka,ui-rounded,sans-serif;letter-spacing:-.02em}
.logo span{color:var(--hide)} .logo i{font-style:normal;color:var(--seek)}
.eyes{display:flex;gap:1.2em;justify-content:center;margin:1.4em 0 1.8em}
.eyes div{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;font-size:1.8em;animation:hop 1.2s ease-in-out infinite}
.eyes div:nth-child(2){animation-delay:.15s} .eyes div:nth-child(3){animation-delay:.3s}
@keyframes hop{0%,60%,100%{transform:none}30%{transform:translateY(-.25em)}}
.bar{width:28em;max-width:80vw;height:.9em;border-radius:99em;background:rgba(255,255,255,.08);overflow:hidden;margin:0 auto}
.bar b{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--hide),var(--gold));transition:width .25s}
.loadinfo{display:flex;justify-content:space-between;width:28em;max-width:80vw;margin:.7em auto 0;color:var(--muted);font-size:.95em;font-variant-numeric:tabular-nums}
.tip{position:absolute;bottom:2.2em;left:1em;right:1em;color:var(--muted);font-size:1em;transition:opacity .35s}
.tip b{color:var(--gold);font-weight:600}

/* menu */
.menu{display:grid;grid-template-columns:1fr 1.25fr;gap:2em;align-items:center;height:100%;max-width:70em;margin:0 auto}
.menu h2{font:700 4em/1 Fredoka,ui-rounded,sans-serif}
.menu h2 span{color:var(--hide)}
.menu p{color:var(--muted);font-size:1.1em;margin:.8em 0 1.6em;max-width:18em}
.menu .btn + .btn{margin-left:.5em}
.msg{min-height:1.5em;margin-top:1em;font-weight:600}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.9em}
.card{background:var(--panel);border-radius:1em;padding:1em .8em;text-align:center;cursor:pointer;transition:background .15s}
.card:hover,.card:focus-visible{background:rgba(40,34,58,.9)}
.card.on{background:rgba(76,201,240,.22)}
.avatar{aspect-ratio:1;border-radius:.8em;display:grid;place-items:center;font-size:3.4em;margin-bottom:.5em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.card b{font:600 1.15em Fredoka,ui-rounded,sans-serif;display:block}
.card small{color:var(--muted);font-size:.85em}
.card.on small{color:var(--hide)}
.side-lbl{font-size:.85em;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.7em}
.foot{position:absolute;bottom:1.6em;left:2.4em;right:2.4em;display:flex;justify-content:space-between;color:var(--muted);font-size:.9em}
.foot a{color:inherit}

/* attente */
.center{display:grid;place-items:center;text-align:center}
.box{background:var(--panel-solid);border-radius:1.2em;padding:2.2em 3em;min-width:26em;max-width:92vw}
.spin{width:3.4em;height:3.4em;margin:0 auto 1.2em;border-radius:50%;background:conic-gradient(var(--hide) 0 30%,rgba(255,255,255,.08) 30%);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(1turn)}}
.box h3{font:600 1.8em Fredoka,ui-rounded,sans-serif;margin-bottom:.3em}
.box p{color:var(--muted);margin-bottom:1.4em}
.link{display:flex;gap:.6em;align-items:center;justify-content:center;margin-bottom:1.4em;user-select:text}
.link code{background:rgba(255,255,255,.06);padding:.45em .8em;border-radius:.6em;font-size:.95em;color:var(--gold);user-select:all}
.slots{display:flex;gap:1em;justify-content:center;margin-bottom:1.6em}
.slot{width:5em;padding:.6em 0;border-radius:.8em;background:rgba(255,255,255,.05)}
.slot .avatar{width:3em;margin:0 auto .3em;font-size:1.6em}
.slot small{color:var(--muted);font-size:.8em}
.slot.empty .avatar{background:rgba(255,255,255,.05);color:var(--muted)}

/* HUD */
.hud,.blind,.res,.resume{pointer-events:none}
.tl{position:absolute;top:1.6em;left:1.6em;display:flex;gap:.8em;align-items:center}
.timer{position:absolute;top:1.4em;left:50%;transform:translateX(-50%);text-align:center}
.timer .t{font:700 2.8em/1 Fredoka,ui-rounded,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.timer small{display:block;color:var(--muted);font-size:.8em;text-transform:uppercase;letter-spacing:.1em;margin-top:.2em}
.tbar{width:12em;height:.35em;border-radius:99em;background:rgba(255,255,255,.12);margin:.5em auto 0;overflow:hidden}
.tbar b{display:block;height:100%;transition:width .3s linear}
.tr{position:absolute;top:1.6em;right:1.6em;background:var(--panel);border-radius:1em;padding:.7em 1em;min-width:11em;backdrop-filter:blur(6px)}
.row{display:flex;justify-content:space-between;gap:1em;font-weight:600}
.row + .row{margin-top:.3em}
.row span{color:var(--muted);font-weight:500}
.bl{position:absolute;bottom:1.6em;left:1.6em;display:flex;gap:.8em;align-items:flex-end}
.disg{background:var(--panel);border-radius:1em;padding:.8em 1.1em;display:flex;gap:.8em;align-items:center;backdrop-filter:blur(6px)}
.disg .ic{width:2.8em;height:2.8em;border-radius:.7em;background:rgba(76,201,240,.2);display:grid;place-items:center;font-size:1.5em}
.disg small{display:block;color:var(--muted);font-size:.8em}
.disg b{font:600 1.2em Fredoka,ui-rounded,sans-serif}
.ability{width:5.6em;height:5.6em;border-radius:1em;background:var(--panel);position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;backdrop-filter:blur(6px)}
.ability .cd{position:absolute;inset:0}
.ability .em{font-size:1.7em;position:relative}
.ability .n{position:absolute;font:700 1.5em Fredoka,ui-rounded,sans-serif}
.ability .k{position:absolute;bottom:.35em;left:0;right:0;font-size:.75em;color:var(--muted)}
.ability.ready{background:rgba(255,209,102,.22)}
.ability.ready .k{color:var(--gold)}
.keys{position:absolute;bottom:1.8em;right:1.6em;color:var(--muted);font-size:.85em;text-align:right;line-height:2.1}
.toast{position:absolute;top:7.6em;left:50%;transform:translate(-50%,-.4em);padding:.6em 1.2em;border-radius:99em;background:rgba(20,17,31,.85);font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translate(-50%,0)}
.cross{position:absolute;left:50%;top:50%;width:1.8em;height:1.8em;transform:translate(-50%,-50%)}
.cross::before,.cross::after{content:"";position:absolute;background:#fff;border-radius:2px;opacity:.9}
.cross::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  -webkit-mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%);mask:linear-gradient(#000 0 35%,transparent 35% 65%,#000 65%)}
.cross::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%);
  -webkit-mask:linear-gradient(90deg,#000 0 35%,transparent 35% 65%,#000 65%);mask:linear-gradient(90deg,#000 0 35%,transparent 35% 65%,#000 65%)}
.target{position:absolute;left:50%;top:calc(50% + 2em);transform:translateX(-50%);font-size:.9em;padding:.35em .8em;border-radius:99em;background:rgba(255,122,89,.85);color:#1a0d08;font-weight:600;white-space:nowrap}
.target.hide{background:rgba(76,201,240,.85);color:#08202a}
.resume{position:fixed;left:50%;top:72%;transform:translateX(-50%);z-index:3}

/* ecran noir du chercheur */
.blind{background:#07060b;display:grid;place-items:center;text-align:center;z-index:3}
.blind .big{font:700 9em/1 Fredoka,ui-rounded,sans-serif;color:var(--seek);font-variant-numeric:tabular-nums}
.blind p{color:var(--muted);font-size:1.3em;margin-top:.4em}
.blind .hint{position:absolute;bottom:2em;left:0;right:0;color:var(--muted);font-size:.95em}

/* resultat */
.res .tag{font-size:.9em;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.res h3{font:700 5em/1.05 Fredoka,ui-rounded,sans-serif;color:var(--gold);margin:.15em 0 .2em}
.res .sub{color:var(--fg);font-size:1.25em;margin-bottom:1.6em}
.res .sub b{color:var(--hide)}
.pts{display:flex;gap:1em;justify-content:center;margin-bottom:1.8em}
.pt{background:var(--panel-solid);border-radius:1em;padding:.9em 1.4em;min-width:10em}
.pt small{display:block;color:var(--muted);font-size:.85em}
.pt b{font:700 2em Fredoka,ui-rounded,sans-serif}
.pt em{font-style:normal;color:var(--gold);font-size:.9em;margin-left:.3em}
.next{width:22em;margin:0 auto;color:var(--muted);font-size:.95em}
.next .bar{width:100%;height:.4em;margin-top:.6em}
.next .bar b{background:var(--muted);transition:width .3s linear}

@media (max-width:760px){
  .ui{font-size:13px}
  .menu{grid-template-columns:1fr;align-content:center}
  .menu h2{font-size:3em}
  .box{min-width:0;padding:1.6em}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){.eyes div,.spin{animation:none}}