:root{--acc:#35c8ff;--ink:#e8f0ff;--mut:#9db0d3;--cy:#35c8ff;--vi:#a56bff;--mint:#7dffc4;--gold:#d6b25e;--bgd:#070b14;--pan:#0e1527}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#03050a;overflow:hidden;touch-action:none;
  font-family:"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--ink)}
#stage{position:fixed;left:50%;top:50%;width:540px;height:960px;transform-origin:center;overflow:hidden;background:var(--bgd);border-radius:10px}
#world{position:absolute;inset:0}
#gl,#cv,#cv2{position:absolute;left:0;top:0;width:540px;height:960px}
#cv{display:none}
#cv2{z-index:7;pointer-events:none}
button{font:inherit;color:inherit;border:0;cursor:pointer}

/* ---------- bandeau de jeu ---------- */
#hud{position:absolute;left:12px;right:12px;top:10px;height:100px;z-index:8;border-radius:26px;padding:9px 14px 0;color:#eef3ff;
  background:linear-gradient(180deg,#151d33 0%,#0a1020 100%) padding-box,
    linear-gradient(135deg,#eef1fb 0%,#8791ae 20%,#2b3452 46%,#6d7897 72%,#cdd4ea 100%) border-box;
  border:3px solid transparent;box-shadow:0 0 0 1px #02050c,0 12px 28px rgba(0,0,0,.7),0 0 34px rgba(60,130,255,.14)}
#hud::before{content:"";position:absolute;inset:0;border-radius:23px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%);pointer-events:none}
#hud .r1{display:flex;align-items:center;gap:12px;height:44px;position:relative}
#bPause{width:44px;height:44px;border-radius:13px;background:linear-gradient(#1b243b,#0d1424);border:2px solid #56627f;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.5);padding:0;display:grid;place-items:center}
#bPause i{display:block;width:15px;height:15px;border-radius:4px;background:#e9eefc;box-shadow:0 0 6px rgba(200,220,255,.5)}
#hMid{flex:1;display:flex;flex-direction:column;line-height:1.08;min-width:0}
#hSpe{font-size:23px;font-weight:600;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
#hSpe i{font-style:normal;font-size:19px;margin-right:6px;}
#hLvl{font-size:13.5px;color:#a8b6d4;font-weight:400}
#hearts{display:flex;gap:6px;align-items:center}
#hearts .h{width:31px;height:29px;transition:transform .2s;filter:drop-shadow(0 0 7px rgba(150,130,255,.75))}
#hearts .h svg{width:100%;height:100%;display:block;overflow:visible}
#hearts .h path{fill:url(#hg);stroke:rgba(255,255,255,.35);stroke-width:1}
#hearts .h.off{filter:none;transform:scale(.88)}
#hearts .h.off path{fill:#121a2b;stroke:#6c7691;stroke-width:1.6}
#hearts .h.pop{animation:hpop .5s}
#hearts .h.gain{animation:hgain .55s cubic-bezier(.2,.9,.3,1.3)}
@keyframes hgain{0%{transform:scale(1.9)}100%{transform:scale(1)}}
@keyframes hpop{0%{transform:scale(1.8)}100%{transform:scale(.88)}}
#hud .r2{display:flex;align-items:center;gap:12px;margin-top:6px;position:relative}
#gauge{position:relative;flex:1;height:32px;border-radius:17px;background:linear-gradient(#0d1527,#09101d);overflow:hidden;
  border:3px solid #35c8ff;box-shadow:0 0 12px rgba(53,200,255,.75),inset 0 0 10px rgba(53,200,255,.32)}
#gFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:14px;transition:width .25s;background:linear-gradient(90deg,#1d9fe6,#62e4ff);box-shadow:0 0 12px rgba(80,220,255,.8)}
#gauge.turbo #gFill{background:repeating-linear-gradient(-45deg,#ffe27a 0 9px,#ffb23a 9px 18px);background-size:25px 25px;animation:gstripe .5s linear infinite;box-shadow:0 0 14px rgba(255,200,80,.85)}
@keyframes gstripe{to{background-position:25px 0}}
#gLab{position:absolute;left:12px;top:0;line-height:26px;font-size:13.5px;letter-spacing:.03em;color:#eef4ff;text-shadow:0 1px 2px #000}
#gNum{position:absolute;right:14px;top:0;line-height:26px;font-size:15px;font-style:normal;color:#dfe9ff}
#score{min-width:108px;height:32px;line-height:32px;border-radius:17px;background:linear-gradient(#090d17,#0c121f);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),inset 0 0 0 1px #1a2236;padding:0 17px;text-align:right;font-size:23px;font-weight:700;font-variant-numeric:tabular-nums}
#score.bump{animation:sbump .25s}
@keyframes sbump{50%{transform:scale(1.14);color:#7dffe0}}

#combo{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:642px;z-index:7;display:none;align-items:center;gap:8px;padding:5px 14px 6px;border-radius:16px;
  background:rgba(10,16,30,.88);border:2px solid #35c8ff;color:#eaf4ff;font-size:17px;box-shadow:0 0 12px rgba(53,200,255,.5)}
#combo.show{display:flex}
#combo i{font-style:normal;color:#ffd96a;font-size:20px}
#combo.pulse{animation:sbump .3s}
#toast{position:absolute;left:60px;right:60px;top:500px;z-index:9;text-align:center;opacity:0;pointer-events:none;font-size:23px;line-height:1.15;
  padding:11px 16px 13px;border-radius:18px;background:rgba(14,10,22,.92);color:#ffe9ee;border:2px solid #ff4466;box-shadow:0 0 22px rgba(255,68,102,.65),0 10px 26px rgba(0,0,0,.6)}
#toast b{color:#ffd96a}
#toast small{display:block;font-size:15px;opacity:.75;margin-top:3px}
#toast.go{animation:toast 1.5s ease-out}
@keyframes toast{0%{opacity:0;transform:translateY(16px) scale(.9)}10%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#stamp{position:absolute;left:0;right:0;top:520px;z-index:9;text-align:center;font-size:58px;line-height:1;font-weight:700;pointer-events:none;opacity:0;
  color:#eafcff;text-shadow:0 0 14px #35c8ff,0 0 34px #35c8ff,0 4px 0 #04202e;letter-spacing:.03em}
#stamp.go{animation:stamp .95s ease-out}
@keyframes stamp{0%{opacity:0;transform:scale(2.2) rotate(-5deg)}15%{opacity:1;transform:scale(.94) rotate(-3deg)}
  28%{transform:scale(1.06) rotate(-3deg)}72%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.08) translateY(-26px) rotate(-3deg)}}
#coach{position:absolute;left:0;right:0;top:560px;z-index:7;text-align:center;font-size:19px;display:none;pointer-events:none}
#coach.show{display:block}
#coach span{position:relative;display:inline-block;padding:9px 40px 10px;border-radius:15px;background:linear-gradient(#1c1810,#0e0c08);border:2px solid #d2ab52;color:#f3e8c8;
  box-shadow:0 0 0 1px #4a3a14,inset 0 0 0 1px rgba(255,222,150,.22),0 8px 18px rgba(0,0,0,.65)}
#coach span::before,#coach span::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-5px;border:solid #d9b25a;border-width:0 3px 3px 0}
#coach span::before{left:15px;transform:rotate(-45deg)}#coach span::after{right:15px;transform:rotate(135deg)}
#coach .ar{display:flex;justify-content:space-between;padding:0 74px;margin-top:8px;font-size:22px;color:#d9b25a}
#coach.n2 .ar{padding:0 124px}#coach.n2 .ar u:nth-child(2){display:none}
#coach .ar u{text-decoration:none;animation:cbl 1s ease-in-out infinite alternate}
#coach .ar u:nth-child(2){animation-delay:.2s}#coach .ar u:nth-child(3){animation-delay:.4s}
@keyframes cbl{to{transform:translateY(6px);opacity:.4}}
#flash{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;background:#e5304f}
#flash.w{background:#bfeaff}

/* ---------- cartes : plaques de verre sombre ---------- */
#cards{position:absolute;left:0;top:0;width:540px;height:960px;z-index:4;pointer-events:none;clip-path:inset(100px 0 0 0)}
.card{position:absolute;left:0;top:0;width:352px;height:146px;margin:-73px 0 0 -176px;border-radius:26px;
  background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 34%),linear-gradient(160deg,#35505c 0%,#1a2c36 55%,#10202a 100%);
  border:2.5px solid rgba(170,215,218,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 24px rgba(110,190,180,.08),
    0 9px 0 -4px #0c1319,0 9px 0 -2px rgba(140,190,195,.55),0 18px 0 -9px #0a0f15,0 18px 0 -7px rgba(140,190,195,.38),0 27px 0 -14px #090d12,0 27px 0 -12px rgba(140,190,195,.24),0 30px 28px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:12px 24px;text-align:center;line-height:1.18;color:#e6fff2;will-change:transform;transform:translate(-999px,-999px);transition:border-color .22s,box-shadow .22s}
.card .tp{position:absolute;left:30px;top:-12px;width:74px;height:23px;border-radius:12px;background:linear-gradient(#69adff,#2f6df0);
  box-shadow:0 0 12px rgba(70,140,255,.85),inset 0 1px 0 rgba(255,255,255,.55)}
.card .dn{display:none}
.card .ct{font-size:24px;font-weight:600;letter-spacing:.005em}
.card .ct b{font-weight:700;color:#74ffbe}
.card.s1 .ct{font-size:28px}.card.s3 .ct{font-size:21.5px}.card.s4 .ct{font-size:19px}
.card.front{border-color:#a56bff;
  box-shadow:0 0 0 1px rgba(170,112,255,.5),0 0 24px rgba(150,90,255,.8),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 22px rgba(150,90,255,.3),
    0 8px 0 -4px #0f0c1c,0 8px 0 -2px rgba(160,110,255,.55),0 16px 0 -9px #0c0a16,0 16px 0 -7px rgba(160,110,255,.35),0 24px 28px rgba(0,0,0,.55)}
.card.front .tp{background:linear-gradient(#bf98ff,#7a4bff);box-shadow:0 0 14px rgba(165,107,255,.95),inset 0 1px 0 rgba(255,255,255,.6)}
.card.front .dn{display:block;position:absolute;left:50%;bottom:-64px;width:26px;height:30px;margin-left:-13px}
.card .dn::before,.card .dn::after{content:"";position:absolute;left:3px;width:17px;height:17px;border-right:4px solid #d9b25a;border-bottom:4px solid #d9b25a;transform:rotate(45deg);filter:drop-shadow(0 0 4px rgba(217,178,90,.7))}
.card .dn::before{top:0}.card .dn::after{top:10px;opacity:.55}
.card.back{opacity:.94}
.card.no{border-color:#ff4466;background:linear-gradient(160deg,#35121b,#150a0f)}

/* ---------- corbeilles : le 3D est dans le canvas, ici seulement les étiquettes et la zone tactile ---------- */
#fronts{position:absolute;left:0;top:0;width:540px;height:960px;z-index:6;pointer-events:none}
.fr{position:absolute;pointer-events:auto;left:0;top:0;width:0;height:0}
.fr .lb{position:absolute;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;color:#fff;
  font-weight:700;line-height:1.05;text-shadow:0 2px 6px rgba(0,0,0,.8),0 0 14px var(--lc,#fff)}
.fr .lb span{display:block;max-width:100%;overflow-wrap:anywhere}
.fr.k-red{--lc:rgba(255,80,110,.75)}.fr.k-red .lb{color:#ffe1e7}
.fr.k-blue{--lc:rgba(110,130,255,.75)}.fr.k-blue .lb{color:#e5e9ff}
.fr.k-green{--lc:rgba(70,240,170,.7)}.fr.k-green .lb{color:#e8fff4}
.fr.reveal::after{content:"C’était ici";position:absolute;left:50%;top:-24px;transform:translateX(-50%);z-index:5;background:linear-gradient(#ffe27a,#ffb23a);color:#1a1204;border-radius:12px;padding:2px 13px 4px;font-size:17px;font-weight:700;white-space:nowrap;box-shadow:0 0 16px rgba(255,200,80,.85)}

/* ---------- écrans ---------- */
.screen{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center;padding:24px 20px;color:var(--ink);
  background:radial-gradient(90% 55% at 50% 0%,rgba(60,120,230,.22),transparent 70%),
    linear-gradient(rgba(95,125,200,.06) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(95,125,200,.06) 1px,transparent 1px) 0 0/72px 72px,
    radial-gradient(120% 90% at 50% 40%,#0d1428,#05080f 80%)}
.screen.show{display:flex;animation:scrIn .3s ease-out}
@keyframes scrIn{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.97)}}
.screen.show .sp,.screen.show .chrow,.screen.show .tile,.screen.show .mb,.screen.show .chip,.screen.show .go{animation:rise .42s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0)*45ms)}
.tile:nth-child(2),.chip:nth-child(2),.mb:nth-child(2){--i:1}.tile:nth-child(3),.chip:nth-child(3),.mb:nth-child(3){--i:2}.go{--i:3}
@media (prefers-reduced-motion:reduce){.screen.show,.screen.show *{animation:none!important}}
#sPause{background:rgba(4,7,14,.9);justify-content:center;gap:16px}
.tag{margin:15px 0 9px;font-size:20px;text-align:center;line-height:1.2;color:#d3dff5;font-weight:400}
.mini{margin:0;font-size:14px;color:var(--mut);text-align:center;font-weight:400}
h2{margin:0;font-size:46px;text-align:center;line-height:1;color:#f1f7ff;text-shadow:0 0 18px rgba(53,200,255,.6),0 4px 0 #02101c;letter-spacing:.01em}
.big{padding:14px 38px;border-radius:18px;font-size:25px;font-weight:700;background:linear-gradient(#5be0ff,#1a95e0);color:#03121e;border:2px solid #b9f0ff;box-shadow:0 0 24px rgba(53,200,255,.65),0 6px 0 #0a4a72}
.big:active{transform:translateY(4px);box-shadow:0 0 18px rgba(53,200,255,.6),0 2px 0 #0a4a72}
.ghost{padding:10px 22px;border-radius:15px;font-size:18px;background:linear-gradient(#18213a,#0d1424);border:2px solid #56627f;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 4px 0 #04070f}

/* ---------- accueil : titre et barre dans le canvas 3D, ici seulement les textes et les cartes ---------- */
#stage.inmenu #hud,#stage.inmenu #cards,#stage.inmenu #fronts,#stage.inmenu #combo,#stage.inmenu #coach,#stage.inmenu #toast,#stage.inmenu #stamp{display:none}
#sMenu{background:none;padding:0;display:none}
#sMenu.show{display:block}
#sMenu .logo{position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none}
#sMenu .l1{position:absolute;left:0;right:0;top:34px;text-align:center;font-size:116px;line-height:1;font-weight:700;letter-spacing:.06em;visibility:hidden;
  background:linear-gradient(100deg,#6ff3e4,#58c8ff 45%,#b46bff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(80,200,255,.6))}
#sMenu .l2{position:absolute;left:0;right:0;top:158px;text-align:center;font-size:34px;line-height:1;font-weight:600;letter-spacing:.36em;padding-left:.36em;color:#eef6ff;text-shadow:0 0 14px rgba(110,220,255,.55),0 3px 0 rgba(0,20,30,.6)}
#sMenu .belt{position:absolute;left:30px;right:30px;top:210px;height:44px;visibility:hidden;border-radius:22px;border:2px solid rgba(160,235,255,.85);
  background:linear-gradient(rgba(140,225,245,.28),rgba(60,150,190,.16));box-shadow:0 0 14px rgba(80,220,255,.45),inset 0 1px 0 rgba(255,255,255,.5)}
#sMenu .belt i{position:absolute;top:9px;height:22px;border-radius:11px;border:2px solid #bfefff;box-shadow:0 0 10px #bfefff;left:5%;width:11%}
#sMenu .belt i:nth-child(2){left:42%;width:20%;border-color:#8f6bff;box-shadow:0 0 10px #8f6bff}
#sMenu .belt i:nth-child(3){left:76%;width:16%;border-color:#4dffa8;box-shadow:0 0 10px #4dffa8}
#stage.nogl #sMenu .l1,#stage.nogl #sMenu .belt{visibility:visible}
#sMenu .tag{position:absolute;left:0;right:0;top:268px;margin:0;font-size:19px;color:#dff3ff;font-weight:400;text-shadow:0 0 10px rgba(80,220,255,.4)}
#sMenu .tag .arr{width:23px;height:15px;vertical-align:-1px;margin-left:5px;color:#4de6d2;filter:drop-shadow(0 0 5px #4de6d2)}
#spes{position:absolute;left:13px;right:13px;top:304px;display:grid;grid-template-columns:1fr 1fr;gap:11px 12px}
.sp{position:relative;height:103px;border-radius:22px;padding:6px 10px 6px 4px;text-align:left;display:flex;align-items:center;gap:0;color:#fff;
  background:linear-gradient(118deg,rgba(255,255,255,.06),transparent 38%),linear-gradient(160deg,rgba(13,24,32,.9),rgba(4,9,14,.93));border:2px solid var(--c);
  box-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--c) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .12s}
.sp:active{transform:scale(.97)}
.sp .ic{width:96px;height:66px;flex:none;color:var(--c);filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 60%,transparent))}
.sp .ic svg{width:100%;height:100%;display:block;overflow:visible}
.sp .tx{min-width:0}
.sp b{display:block;font-size:17px;line-height:1.05;color:#fff;font-weight:700}
.sp small{display:block;font-size:11px;color:#aab8c8;line-height:1.15;margin-top:3px;font-weight:400}
.sp .st{display:flex;gap:3px;margin-top:5px;color:var(--c);font-size:17px;line-height:1;filter:drop-shadow(0 0 4px var(--c))}
.sp .st i{font-style:normal}.sp .st i.o{opacity:.28;filter:none}
.foot{position:absolute;left:0;right:0;bottom:15px;margin:0;font-size:12.5px;color:#8da2b8;text-align:center;font-weight:400}
.snd{position:absolute;right:14px;top:14px;width:46px;height:46px;padding:0;border-radius:50%;background:none;color:#58d6ff;filter:drop-shadow(0 0 5px #35c8ff)}
.snd svg{width:100%;height:100%}.snd .x{display:none}.snd.off .x{display:block}.snd.off{color:#5f7a8c;filter:none}

/* ---------- choix des chapitres ---------- */
#sChap{background:linear-gradient(rgba(3,8,14,.5),rgba(3,8,14,.7));padding:14px 14px 10px;justify-content:flex-start}
#bBack{position:absolute;left:14px;top:14px;z-index:2;display:flex;align-items:center;gap:6px;padding:9px 20px 9px 12px;border-radius:22px;font-size:19px;font-weight:600;color:#eaf4ff;
  background:linear-gradient(#2a5fd6,#1a3a99);border:2px solid #5aa2ff;box-shadow:0 0 14px rgba(70,140,255,.7),inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 #0b1b4d}
#bBack svg{width:18px;height:18px}
#bBack:active{transform:translateY(3px);box-shadow:0 0 10px rgba(70,140,255,.6),0 2px 0 #0b1b4d}
#chIcon{width:150px;height:96px;margin-top:6px;color:var(--acc);filter:drop-shadow(0 0 6px var(--acc)) drop-shadow(0 0 18px color-mix(in srgb,var(--acc) 70%,transparent));animation:chfloat 3.2s ease-in-out infinite alternate}
#chIcon svg{width:100%;height:100%;display:block;overflow:visible;stroke-width:2.2}
@keyframes chfloat{to{transform:translateY(-5px)}}
#sChap h2{margin:2px 0 0;font-size:64px;line-height:1;letter-spacing:.02em;font-weight:700;text-shadow:none;-webkit-text-stroke:0;
  background:linear-gradient(#ffffff 8%,#d3dae8 48%,#8e9ab0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(140,190,255,.25))}
#sChap h2.long{font-size:34px;margin-top:10px;line-height:1.3;padding-bottom:2px}
#sChap .tag{margin:6px 0 12px;font-size:15.5px;color:#aab8d0;line-height:1.25;padding:0 10px}
#chList{width:calc(100% + 24px);margin:0 -12px;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:10px 16px 16px;touch-action:pan-y}
.chrow{flex:none;display:flex;align-items:center;gap:12px;text-align:left;padding:8px 14px 8px 12px;min-height:70px;border-radius:19px;color:#fff;
  background:linear-gradient(118deg,rgba(255,255,255,.05),transparent 40%),linear-gradient(160deg,rgba(14,22,38,.92),rgba(6,10,18,.94));border:2px solid var(--rc);
  box-shadow:0 0 12px color-mix(in srgb,var(--rc) 45%,transparent),inset 0 0 16px color-mix(in srgb,var(--rc) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.1)}
.chrow:active:not(.off){transform:scale(.98)}
.chrow .ci{width:44px;height:44px;flex:none;color:var(--rc);filter:drop-shadow(0 0 5px var(--rc))}
.chrow .ci svg{width:100%;height:100%;display:block}
.chrow .cn{flex:1;min-width:0}
.chrow .cn b{display:block;font-size:19.5px;line-height:1.1;font-weight:600;color:#fff}
.chrow small{display:block;font-size:12.5px;color:#9fb0c8;margin-top:3px;font-weight:400}
.chrow .st{display:flex;gap:3px;flex:none;color:var(--rc);filter:drop-shadow(0 0 4px var(--rc))}
.chrow .st i{width:21px;height:21px;display:block}
.chrow .st svg{width:100%;height:100%;display:block}
.chrow .st path{fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.chrow .st i.o{filter:none}.chrow .st i.o path{fill:none;stroke-width:1.8;opacity:.9}
.chrow.all{--rc:#f6c445;border-color:#f6c445;min-height:74px;padding-left:16px;
  background:linear-gradient(118deg,rgba(255,225,120,.12),transparent 45%),linear-gradient(160deg,rgba(36,28,10,.9),rgba(14,10,4,.94));box-shadow:0 0 18px rgba(246,196,69,.6),inset 0 0 18px rgba(246,196,69,.16),inset 0 1px 0 rgba(255,235,160,.35)}
.chrow.all .cn b{color:#ffd45e;font-size:23px;font-weight:700}
.chrow.off{opacity:.45}
.chrow .soon{font-size:13px;opacity:.7;white-space:nowrap}

/* ---------- mise en route d'un niveau ---------- */
#sLevel{background:radial-gradient(90% 50% at 50% 0%,rgba(40,120,200,.18),transparent 70%),linear-gradient(rgba(3,8,16,.55),rgba(3,8,16,.78));justify-content:center;gap:0;padding:18px 16px 24px;overflow:hidden}
#sLevel .circ{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#sLevel>*:not(.circ){position:relative;z-index:1}
#lvKick{font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:#92a8c8;font-weight:500;text-shadow:0 0 8px rgba(80,160,255,.35)}
#sLevel h2{margin:16px 0 0;font-size:74px;line-height:1.1;font-weight:700;letter-spacing:.01em;color:#fff;-webkit-text-stroke:2px #7fe6ff;paint-order:stroke fill;
  text-shadow:0 0 10px #4fdcff,0 0 24px #1fb4f2,0 0 46px #0a86d8}
#sLevel h2.long{font-size:54px;margin-top:22px}
#lvBins{display:flex;gap:12px;width:100%;justify-content:center;margin:34px 0 34px}
.chip{position:relative;flex:none;color:var(--c);filter:drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 55%,transparent))}
.chip .fr2{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chip .fr2 .o{fill:color-mix(in srgb,var(--c) 13%,#05080f);stroke:var(--c);stroke-width:3.2;stroke-linejoin:round}
.chip .fr2 .i{fill:none;stroke:var(--c);stroke-width:1.5;opacity:.7;stroke-linejoin:round}
.chip .fr2 .i2{fill:none;stroke:var(--c);stroke-width:1.2;opacity:.4}
.chip .fr2 .g{fill:none;stroke:var(--c);stroke-width:14;opacity:.16;filter:blur(5px)}
.chip .bd{position:absolute;right:9px;top:9px;width:46px;height:46px;border-radius:50%;background:#10060b;border:3px solid var(--c);display:grid;place-items:center;box-shadow:inset 0 0 8px color-mix(in srgb,var(--c) 55%,transparent)}
.chip .bd svg{width:24px;height:18px;overflow:visible}
.chip .bd path{fill:none;stroke:var(--c);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.chip .ic{position:absolute;left:50%;transform:translateX(-50%);display:block}
.chip .ic svg{width:100%;height:100%;display:block;overflow:visible;stroke-width:1.9;filter:drop-shadow(0 0 3px var(--c))}
.chip .nm{position:absolute;left:8px;right:8px;text-align:center;color:#fff;font-weight:700;line-height:1.1;text-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent),0 2px 4px rgba(0,0,0,.6)}
.chip .fo{position:absolute;left:12px;top:12px;padding:2px 9px 3px;border-radius:10px;font-size:11px;letter-spacing:.08em;font-weight:700;color:#1a1204;background:linear-gradient(#ffe27a,#ffb23a);box-shadow:0 0 10px rgba(255,200,80,.7)}
.chip.n2{width:240px;height:300px}.chip.n2 .ic{top:40px;width:156px;height:156px}.chip.n2 .nm{bottom:22px;font-size:24px;left:16px;right:16px}
.chip.n3{width:160px;height:258px}.chip.n3 .ic{top:56px;width:104px;height:104px}.chip.n3 .nm{bottom:18px;font-size:18px;left:12px;right:12px}
.chip.n3 .bd{width:38px;height:38px}.chip.n3 .bd svg{width:20px}
#sLevel .tag{margin:0;font-size:30px;line-height:1.2;color:#fff;font-weight:400;text-shadow:0 0 12px rgba(120,190,255,.25)}
#sLevel .mini{margin:16px 0 0;font-size:14.5px;color:#8da2c0}
.go{position:relative;margin-top:36px;width:340px;height:104px;padding:0;background:none;border:0;filter:drop-shadow(0 0 10px #38d7ff) drop-shadow(0 0 24px rgba(170,90,255,.55))}
.go::before,.go::after,.go i{content:"";position:absolute}
.go::before{inset:0;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);background:linear-gradient(100deg,#42e3ff,#7d7bff 55%,#ff72d8)}
.go::after{inset:4px;clip-path:polygon(21px 0,calc(100% - 21px) 0,100% 21px,100% calc(100% - 21px),calc(100% - 21px) 100%,21px 100%,0 calc(100% - 21px),0 21px);
  background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 24%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),linear-gradient(#5b687d,#28313f 52%,#141a24)}
.go .r1{inset:11px;z-index:1;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);background:rgba(140,225,255,.45)}
.go .r2{inset:13px;z-index:1;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);background:linear-gradient(#323c4d,#1a212c)}
.go span{position:relative;z-index:2;display:block;font-size:38px;font-weight:700;letter-spacing:.01em;color:#fff;text-shadow:0 0 12px #6fe7ff,0 0 26px #2aa8ff}
.go:active{transform:translateY(3px)}

/* le nom des corbeilles est gravé dans le 3D ; le texte HTML ne sert qu'au repli sans WebGL */
.fr .lb{opacity:0}
#stage.nogl .fr .lb{opacity:1}

/* ---------- ecran de fin ---------- */
#sEnd{background:radial-gradient(90% 45% at 50% 0%,rgba(40,120,200,.2),transparent 70%),linear-gradient(rgba(3,8,16,.55),rgba(3,8,16,.8));justify-content:flex-start;gap:0;padding:30px 12px 16px;overflow:hidden}
#sEnd .circ{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#sEnd>*:not(.circ){position:relative;z-index:1}
#sEnd h2{margin:0;font-size:60px;line-height:1.12;font-weight:700;color:#fff;-webkit-text-stroke:2px #7fe6ff;paint-order:stroke fill;text-shadow:0 0 10px #4fdcff,0 0 24px #1fb4f2,0 0 46px #0a86d8}
#sEnd.win h2{-webkit-text-stroke-color:#ffe08a;text-shadow:0 0 10px #ffd45e,0 0 24px #ffb020,0 0 46px #d98a00}
#eSub{margin:10px 0 0;font-size:25px;color:#bcd2f2;font-weight:400;text-shadow:0 0 10px rgba(100,170,255,.3)}
#eStars{display:flex;gap:6px;justify-content:center;margin-top:6px;min-height:0}
#eStars:empty{display:none}
#eStars svg{width:54px;height:54px;filter:drop-shadow(0 0 8px rgba(255,200,90,.8))}
#eStars path{fill:#ffd45e;stroke:#fff3c4;stroke-width:1.2;stroke-linejoin:round}
#eStars .o path{fill:#2a3350;stroke:#5d6b8c;filter:none}
#eStats{display:flex;gap:10px;justify-content:center;align-items:center;margin:20px 0 18px}
.tile{position:relative;width:152px;height:124px;color:var(--c);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 70%,transparent));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.tile::before,.tile::after{content:"";position:absolute}
.tile::before{inset:0;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);background:linear-gradient(160deg,#a9b2c2,#5a6272 45%,#3a414f)}
.tile::after{inset:6px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 22%,#0a1220),#060a14)}
.tile .ln{position:absolute;inset:12px;border:3px solid var(--c);border-radius:12px;box-shadow:0 0 10px var(--c),inset 0 0 12px color-mix(in srgb,var(--c) 45%,transparent);z-index:1}
.tile b,.tile span{position:relative;z-index:2;display:block}
.tile b{font-size:50px;line-height:1;font-weight:700;color:#fff;text-shadow:0 0 12px var(--c)}
.tile span{margin-top:4px;font-size:16.5px;color:color-mix(in srgb,var(--c) 55%,#fff);font-weight:500}
.tile.big{width:172px;height:148px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;white-space:nowrap}.tile.big b{font-size:50px}.tile.big span{font-size:18px}
#eMissT{margin:0 0 12px;font-size:23px;font-weight:400;color:#dbe8ff;text-align:center;text-shadow:0 0 10px rgba(100,170,255,.3)}
#eMiss{width:calc(100% + 24px);margin:0 -12px;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:10px 16px 14px;touch-action:pan-x;flex:none;scrollbar-width:none}
#eMiss::-webkit-scrollbar{display:none}
.mc{--c:#ff4a6b;position:relative;flex:none;width:214px;min-height:300px;padding:30px 14px 16px;scroll-snap-align:center;color:#fff;display:flex;flex-direction:column;gap:10px;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 40%,transparent))}
.mc::before,.mc::after{content:"";position:absolute}
.mc::before{inset:0;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);background:linear-gradient(160deg,#aab3c3,#586071 45%,#38404d)}
.mc::after{inset:4px;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px),linear-gradient(#0e131c,#07090f)}
.mc>*{position:relative;z-index:1}
.mc .led{position:absolute;left:18px;top:12px;display:flex;gap:4px;z-index:1}
.mc .led i{display:block;height:7px;width:22px;border-radius:2px;background:var(--c);transform:skewX(-30deg);box-shadow:0 0 6px var(--c)}
.mc .led i:nth-child(2){width:34px;opacity:.75}.mc .led i:nth-child(3){width:16px;opacity:.4}
.mc .ch{align-self:center;max-width:100%;padding:7px 18px;text-align:center;font-size:14.5px;line-height:1.1;font-weight:600;color:#fff;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);background:color-mix(in srgb,var(--c) 85%,#fff);padding:2px}
.mc .ch span{display:block;padding:7px 16px;background:#0b0f18;color:#fff;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);text-shadow:0 0 8px var(--c)}
.mc .st{font-size:17.5px;line-height:1.24;font-weight:600;color:#fff;margin-top:6px}
.mc .st b{color:var(--c);font-weight:700;text-shadow:0 0 8px color-mix(in srgb,var(--c) 45%,transparent)}
.mc .ex{font-size:14px;line-height:1.28;color:#9fb0c8;font-weight:400;margin-top:auto}
.mc.ok{align-self:center;width:calc(100% - 8px);min-height:150px;justify-content:center;align-items:center;text-align:center;font-size:24px;--c:#3ee8a8}
.eBtns{display:flex;gap:12px;justify-content:center;margin-top:auto;padding-top:6px}
.mb{position:relative;height:76px;padding:0;background:none;border:0;filter:drop-shadow(0 0 9px var(--g,#38d7ff))}
.mb::before,.mb::after{content:"";position:absolute}
.mb::before{inset:0;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);background:linear-gradient(160deg,#b4bccb,#5d6575 50%,#3b4351)}
.mb::after{inset:5px;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);background:linear-gradient(180deg,rgba(255,255,255,.28),transparent 30%),var(--f)}
.mb span{position:relative;z-index:1;display:block;font-size:29px;font-weight:700;color:var(--t,#fff)}
.mb:active{transform:translateY(3px)}
.mb.cy{--g:#35f0e0;--f:linear-gradient(#37e6dc,#0e98aa);--t:#062434;width:208px}
.mb.vi{--g:#8a7bff;--f:linear-gradient(#6f68ff,#34309f);--t:#fff;width:224px}
.mb.sm{--g:rgba(160,175,200,.35);--f:linear-gradient(#59616f,#2b323d);--t:#e6edf7;width:210px;height:54px;margin:14px auto 0;display:block}
.mb.sm span{font-size:21px;font-weight:600}