:root{--red:#c4141c;--redd:#8e1015;--cream:#f3e8cc;--mut:#c2ac82;--ink:#2a1a0e;--acc:#d9ad58;--ok:#1f7a35;
  --paper:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .08 0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hand:"Ink Free","Segoe Script","Bradley Hand","Segoe Print","Comic Sans MS","Chalkboard SE",cursive;
  --print:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS","Ink Free",cursive}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#050302;overflow:hidden;touch-action:none;font-family:Georgia,"Palatino Linotype","Book Antiqua","Times New Roman",serif;font-weight:600;color:var(--cream)}
#stage{position:fixed;left:50%;top:50%;width:540px;height:960px;transform-origin:center;overflow:hidden;background:#120a05;border-radius:10px}
#world{position:absolute;inset:0}
#gl{position:absolute;left:0;top:0;width:540px;height:960px}
#flat{position:absolute;inset:0;display:none;background:radial-gradient(120% 90% at 20% 0%,#4a3220,#1c1008 70%)}
#flat canvas{position:absolute;left:43px;top:100px;width:453px;height:571px;transform-origin:center;box-shadow:0 14px 30px rgba(0,0,0,.65)}
button{font:inherit;color:inherit;border:0;cursor:pointer}
#stage.inmenu #hud,#stage.inmenu #timer,#stage.inmenu #bar,#stage.inmenu #help,#stage.inmenu #chips{display:none}
#stage.nobar #timer,#stage.nobar #help{display:none}

/* ---------- boutons ---------- */
.bb{position:relative;padding:11px 20px 12px;border-radius:14px;color:#fff3e0;font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 1px rgba(60,0,0,.6);
  background:linear-gradient(#ea5148 0%,#c4141c 48%,#a10e15 52%,#c8212a 100%);border:2px solid #5a0a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #4a090c,0 9px 16px rgba(0,0,0,.5)}
.bb:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #4a090c,0 4px 8px rgba(0,0,0,.5)}
.bb:disabled{filter:grayscale(.75) brightness(.55);cursor:default}
.bb.alt{color:#f4e3b8;text-shadow:0 1px 1px #000;background:linear-gradient(#5a3a22,#2e1c0f 55%,#3d2615);border-color:#a37a34;box-shadow:inset 0 1px 0 rgba(255,225,160,.3),0 3px 0 #1a0f07,0 9px 16px rgba(0,0,0,.5)}
.bb.big{font-size:21px;padding:14px 30px 15px;min-width:250px}
.bb.dark{background:linear-gradient(#7e1a20,#4e0a10 55%,#5e1016);border:2px solid #3a0508;box-shadow:inset 0 1px 0 rgba(255,150,140,.45),0 0 0 2px rgba(255,200,170,.28) inset,0 3px 0 #2a0306,0 8px 14px rgba(0,0,0,.5)}
.lnk{background:none;color:#6a4a22;font-size:16px;text-decoration:underline;padding:10px;margin-top:2px}
.rnd{position:absolute;top:17px;width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;color:#f7e6cf;z-index:30;
  background:radial-gradient(circle at 36% 28%,#e8584e 0%,#c4241b 55%,#8a0f10 100%);border:2px solid #6a0c0c;box-shadow:inset 0 2px 0 rgba(255,200,180,.45),inset 0 -3px 5px rgba(60,0,0,.4),0 0 0 3px rgba(120,20,10,.5),0 6px 12px rgba(0,0,0,.6)}
#bHow{left:17px}.snd{right:17px}.rnd svg{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(80,0,0,.7))}.snd .x{display:none}.snd.off .w{display:none}.snd.off .x{display:block}

/* ---------- bandeau ---------- */
#hud{position:absolute;left:16px;right:16px;top:13px;height:60px;z-index:8;border-radius:16px;padding:8px 14px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#2c1a0c,#120a04);border:2px solid #6a4c2a;
  box-shadow:inset 0 0 0 1px #4a3012,inset 0 1px 0 rgba(255,225,160,.22),0 4px 10px rgba(0,0,0,.4)}
#bPause{width:42px;height:42px;border-radius:12px;padding:0;display:flex;gap:6px;align-items:center;justify-content:center;background:linear-gradient(#4a3020,#24160b);border:2px solid #a37a34;box-shadow:inset 0 1px 0 rgba(255,225,160,.3),0 2px 6px rgba(0,0,0,.5)}
#bPause i{display:block;width:6px;height:18px;border-radius:2px;background:#f3e8cc}
#hMid{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
#hSpe{font-size:21px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f6efe0}
#hLvl{font-size:14px;color:#e2d6bb;font-weight:400;letter-spacing:.02em}
#copies{display:flex;gap:10px;align-items:center}
#copies i{position:relative;width:21px;height:28px;border-radius:2px;background:#f6efdc;border:2px solid #7a6a4a;box-shadow:0 2px 4px rgba(0,0,0,.5);opacity:.42;transition:transform .2s,opacity .2s}
#copies i::after{content:"";position:absolute;left:3px;right:3px;top:5px;height:2px;background:#7e8cc4;box-shadow:0 5px 0 #7e8cc4,0 10px 0 #7e8cc4}
#copies i.cur{opacity:1;border-color:#e0262b;transform:scale(1.06)}
#copies i.done{opacity:1;border-color:#1f7a35;animation:dPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes dPop{from{transform:scale(.6) rotate(-12deg)}}
#copies i.done::before{content:"";position:absolute;right:-6px;top:-7px;width:14px;height:14px;border-radius:50%;background:#1f7a35;box-shadow:0 0 0 2px #170d06}

/* ---------- règle du temps (entre la page et la barre) ---------- */
#timer{position:absolute;left:43px;width:410px;top:702px;height:20px;z-index:6;border-radius:3px;overflow:hidden;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(40,24,8,.55) 9px 10px),linear-gradient(#f0dca8,#d9bf82);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 8px rgba(0,0,0,.6)}
#timer::before{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:repeating-linear-gradient(90deg,transparent 0 49px,rgba(40,24,8,.7) 49px 50px)}
#tz{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(18,10,5,.82);box-shadow:inset -3px 0 6px rgba(0,0,0,.6)}
#tmark{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1px;background:var(--red);box-shadow:0 0 6px rgba(255,60,50,.9)}
#tnum{position:absolute;right:8px;top:2px;font-size:13px;color:#3a2410;font-weight:700;letter-spacing:.05em}
#timer.low #tmark{animation:fl .4s infinite alternate}
#timer.low{animation:shiver .5s infinite}
@keyframes shiver{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}
@keyframes fl{to{opacity:.4}}
#help{position:absolute;left:30px;right:30px;top:738px;margin:0;z-index:6;text-align:center;font-size:15px;font-weight:400;font-style:italic;color:#d9c79a;text-shadow:0 1px 2px #000}

/* ---------- la barre du bas ---------- */
#bar{position:absolute;left:29px;right:27px;top:871px;height:74px;z-index:7;display:flex;gap:8px}
#cells{flex:1;display:flex;border-radius:12px;background:linear-gradient(180deg,#3a2818,#1f1308);border:2px solid #9a7440;box-shadow:inset 0 0 0 3px rgba(20,10,4,.6),inset 0 0 0 4px rgba(200,150,70,.35),0 8px 18px rgba(0,0,0,.55);overflow:hidden}
.cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;padding:6px 4px;border-right:1.5px solid rgba(180,140,80,.28);color:var(--cream);text-align:center}
.cell:last-child{border-right:0}
button.cell:active{background:rgba(255,200,120,.1)}
.cell b{font-size:14px;letter-spacing:.07em;text-transform:uppercase;color:#e8b84a}
.cell.main b{color:#ff6a5a}.cell:nth-child(3) b{color:#7fe0a0}
.cell span{font-size:15px;font-weight:600;color:#f1e6cc;display:flex;align-items:center;gap:6px;line-height:1.1}
.cell span em{font-style:normal;color:#ffe9b0;font-size:19px}
.cell span svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cell:disabled{opacity:.4;cursor:default}
#tbox{flex:0 0 97px;border-radius:12px;border:2px dashed rgba(200,150,70,.5);background:rgba(20,10,4,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:0 8px 18px rgba(0,0,0,.45)}
#tbox b{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#d9c79a;font-weight:600}
#tbox span{font-size:24px;color:#f6efe0;font-variant-numeric:tabular-nums}

#lens{position:absolute;left:0;top:0;width:68px;height:68px;z-index:7;pointer-events:none;opacity:0;border-radius:50%;border:5px solid #b98a3e;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),rgba(255,255,255,.12) 55%,rgba(255,240,200,.18));box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 8px rgba(255,255,255,.5)}
#lens.on{opacity:1}
#lens i{position:absolute;right:-27px;bottom:-26px;width:32px;height:9px;border-radius:5px;background:linear-gradient(#6a4220,#3a2210);transform:rotate(45deg);transform-origin:left center;box-shadow:0 2px 3px rgba(0,0,0,.5)}
#toast{position:absolute;left:50px;right:50px;top:380px;z-index:9;text-align:center;opacity:0;pointer-events:none;font-size:24px;line-height:1.15;padding:11px 16px 13px;border-radius:12px;
  background:rgba(250,244,226,.96);color:var(--ink);border:2px solid var(--red);box-shadow:0 10px 26px rgba(0,0,0,.6);transform:rotate(-1.5deg)}
#toast b{color:var(--red)}#toast small{display:block;font-size:15px;font-weight:400;font-style:italic;margin-top:3px;color:#5a3a1a}
#toast.go{animation:toast 1.9s ease-out}
@keyframes toast{0%{opacity:0;transform:translateY(16px) rotate(-1.5deg) scale(.9)}10%{opacity:1;transform:rotate(-1.5deg)}85%{opacity:1}100%{opacity:0;transform:translateY(-12px) rotate(-1.5deg)}}
#flash{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;background:#ff4a2a}

/* ---------- la rectification : on choisit la bonne réponse ---------- */
#chips{position:absolute;left:29px;right:29px;top:683px;height:181px;z-index:7;display:none;border-radius:12px;padding:21px 14px 10px 18px;color:var(--ink);
  background:var(--paper),radial-gradient(120% 90% at 28% 0%,#efe0be 0%,#e4d0a6 55%,#d2b98c 100%);border:2px solid #6a4a22;box-shadow:inset 0 0 36px rgba(120,80,20,.28),0 10px 22px rgba(0,0,0,.6)}
#chips.show{display:block;animation:up .3s cubic-bezier(.2,.9,.3,1.1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
#chips .holes{position:absolute;left:14px;right:14px;top:5px;height:14px;background:radial-gradient(circle at 7px 7px,#1a120a 0 4.6px,transparent 5.2px) 0 0/25.6px 14px repeat-x}
#chTop{display:flex;align-items:center;justify-content:space-between;gap:10px;height:32px;margin-bottom:2px}
#chQ{margin:0;font-family:var(--print);font-size:16px;font-weight:600;line-height:1.1;color:#2a2018;flex:1}
#bSuite{display:none;padding:7px 16px 8px;font-size:15px;white-space:nowrap}
#chips.done #bSuite{display:block;animation:sPop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes sPop{from{transform:scale(.4);opacity:0}}
#chBtns{display:flex;flex-direction:column;gap:6px}
#chBtns .row{display:flex;align-items:center;gap:0;height:36px;animation:rowIn .34s cubic-bezier(.2,.9,.3,1.25) backwards;animation-delay:calc(var(--i,0)*80ms + 120ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-26px)}}
#chBtns .mk svg{animation:mkPop .42s cubic-bezier(.2,1.5,.4,1) backwards}
@keyframes mkPop{from{transform:scale(0) rotate(-40deg)}}
#chBtns button{flex:1;height:36px;border-radius:8px;padding:0 16px;text-align:left;font-size:17px;font-weight:600;color:#2a2018;background:rgba(250,244,226,.9);border:2px solid #a8957a;font-family:var(--print);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chBtns button:active{transform:translateY(1px)}
#chBtns button.ok{background:#c3e6c7;border-color:#2e9a4e;color:#175a2c}
#chBtns button.ko{background:#f1c5c3;border-color:#c4241b;color:#8a1410}
#chBtns button:disabled{cursor:default;opacity:1}
#chBtns .mk{flex:0 0 64px;height:24px;display:block}
#chBtns .mk svg{display:block;margin:0 auto;width:24px;height:24px;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- écrans ---------- */
.screen{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:center}
.screen.show{display:flex;animation:scr .3s ease-out}
@keyframes scr{from{opacity:0}}
@keyframes spIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
#sMenu .mt{position:absolute;left:0;right:0;top:279px;margin:0;text-align:center;font-size:41px;line-height:1.1;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,#f1d9ae 0%,#d6b27d 45%,#b68850 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #2a160a) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.orn{position:absolute;left:0;right:0;top:331px;display:flex;align-items:center;justify-content:center;gap:10px;color:#c9a46a}
.orn i{display:block;width:100px;height:1.5px;background:linear-gradient(90deg,transparent,#c9a46a 25%,#c9a46a 75%,transparent)}.orn b{font-size:15px;line-height:1}
.tag{margin:8px 24px 14px;text-align:center;font-size:18px;font-weight:400;font-style:italic;color:#e0cfa6}
#sMenu .tag{position:absolute;left:0;right:0;top:348px;margin:0;font-size:15.5px;font-style:normal;color:#e4d3ab}
#spes{position:absolute;left:30px;right:30px;top:380px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
.sp{position:relative;min-width:0;display:flex;align-items:center;gap:10px;height:96px;padding:6px 10px 6px 20px;border-radius:9px;text-align:left;color:var(--ink);overflow:hidden;
  background:var(--paper),radial-gradient(120% 140% at 30% 0%,#f0dfb6 0%,#e2c993 60%,#d3b57c 100%);border:2px solid #7a5a2c;box-shadow:inset 0 0 0 1px rgba(255,235,190,.5),inset 0 -8px 14px rgba(120,80,30,.22),0 5px 10px rgba(0,0,0,.65);animation:spIn .45s cubic-bezier(.2,.9,.3,1.1) backwards;animation-delay:calc(var(--i,0)*45ms)}
.sp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#1a0f08),var(--c) 60%,color-mix(in srgb,var(--c) 70%,#1a0f08));box-shadow:2px 0 4px rgba(0,0,0,.35)}
@media (hover:hover){.sp:hover,.chrow:not(.off):hover{transform:translateY(-3px);filter:brightness(1.06);transition:transform .15s,filter .15s}.rnd:hover{filter:brightness(1.12)}}
.sp:active{transform:translateY(2px)}
.sp .ic{flex:0 0 66px;height:54px;margin-left:0;color:color-mix(in srgb,var(--c) 70%,#241810);opacity:.92}
.sp .ic svg{width:100%;height:100%;stroke-width:4.2px}
.sp .tx{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.sp b{font-size:19px;line-height:1.02;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#20150c;font-weight:700}
.sp small{font-size:12.5px;font-weight:500;color:#3a2a1a;margin-top:3px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
.sp .st{margin-top:5px;font-size:19px;letter-spacing:1px;color:#9a6f10;text-shadow:0 1px 0 rgba(255,235,190,.6)}.sp .st i{font-style:normal}.sp .st i.o{color:rgba(120,90,40,.45)}
.foot{position:absolute;left:0;right:0;top:918px;margin:0;text-align:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#cdb998;font-weight:500}
.foot i{font-style:normal;color:#c9a46a;margin:0 8px}

#sChap{padding-top:14px}
.back{align-self:flex-start;margin-left:14px;margin-top:3px;display:flex;align-items:center;gap:4px;padding:8px 16px 8px 8px;border-radius:14px;font-size:17px;background:linear-gradient(#5a3a22,#2e1c0f);border:2px solid #a37a34;box-shadow:0 4px 10px rgba(0,0,0,.5);z-index:30}
.back svg{width:22px;height:22px}
#chTitle{margin:0;font-size:38px;letter-spacing:.03em;position:absolute;top:278px;left:0;right:0;text-align:center;font-weight:700;background:linear-gradient(180deg,#f1d9ae 0%,#d6b27d 45%,#b68850 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #2a160a) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
#chTitle.long{font-size:30px}
#sChap .tag{position:absolute;top:330px;left:0;right:0;margin:0;font-size:15.5px;font-style:normal}
#chList{position:absolute;left:18px;right:18px;top:366px;bottom:14px;overflow-y:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:9px;padding:2px 2px 8px}
#chList::-webkit-scrollbar{width:6px}#chList::-webkit-scrollbar-thumb{background:#7a5a24;border-radius:3px}
.chrow{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 24px;min-height:62px;border-radius:9px;text-align:left;color:var(--ink);overflow:hidden;
  background:var(--paper),radial-gradient(120% 140% at 30% 0%,#f0dfb6 0%,#e2c993 60%,#d3b57c 100%);border:2px solid #7a5a2c;box-shadow:inset 0 0 0 1px rgba(255,235,190,.5),inset 0 -8px 14px rgba(120,80,30,.2),0 5px 10px rgba(0,0,0,.6);animation:spIn .38s cubic-bezier(.2,.9,.3,1.1) backwards;animation-delay:calc(var(--i,0)*32ms)}
.chrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc,#c4141c) 70%,#1a0f08),var(--rc,#c4141c) 60%,color-mix(in srgb,var(--rc,#c4141c) 70%,#1a0f08))}
.chrow.all{background:var(--paper),radial-gradient(120% 140% at 30% 0%,#fbecc2 0%,#efd48c 60%,#dcbb74 100%)}
.chrow.off{opacity:.45;cursor:default}
.chrow .ci{flex:0 0 40px;height:40px;color:color-mix(in srgb,var(--rc,#c4141c) 70%,#241810)}.chrow .ci svg{width:100%;height:100%;stroke-width:3.2px}
.chrow .cn{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.12}
.chrow .cn b{font-size:18px;color:#20150c}.chrow .cn small{font-size:12.5px;font-weight:500;color:#3a2a1a;margin-top:2px}
.chrow .st{display:flex;gap:3px}.chrow .st i{width:20px;height:20px;color:#9a6f10}.chrow .st i.o{color:rgba(120,90,40,.4)}.chrow .st svg{width:100%;height:100%;fill:currentColor;display:block}
.chrow .soon{font-size:12px;color:#6a4a22}

.sheet{margin-top:250px;width:488px;border-radius:12px;padding:22px 26px 22px;color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;
  background:var(--paper),linear-gradient(90deg,transparent 0 56px,rgba(200,40,50,.45) 56px 57px,transparent 57px),repeating-linear-gradient(180deg,transparent 0 33px,rgba(88,112,196,.3) 33px 34px),#f6efdb;
  border:2px solid #7a5a2c;box-shadow:inset 0 0 42px rgba(120,80,20,.3),0 14px 30px rgba(0,0,0,.7)}
.sheet h2{margin:0 0 12px;font-size:32px;letter-spacing:.05em;color:#3a2410}
.sheet ol{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:12px}
.sheet li{display:flex;gap:14px;align-items:center;font-size:19px;line-height:1.22;font-weight:600}
.sheet li b{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:21px;color:#fff3e0;background:radial-gradient(circle at 35% 30%,#ea5148,#8e1015);border:2px solid #5a0a0d}
.sheet .mini{margin:14px 0 16px;font-size:16px;font-weight:400;font-style:italic;color:#5a3a1a}
.sheet.small{margin-top:330px;width:380px;gap:12px}.sheet.small .bb{width:100%}
#sHow .sheet{margin-top:290px}
#sBilan .sheet,#sEnd .sheet{margin-top:150px;max-height:780px;padding-top:16px}
#bKick{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#7a4d16;font-weight:700}
#bNote{font-family:var(--hand);font-weight:400;font-size:84px;line-height:1;color:var(--red);transform:rotate(-4deg);margin:4px 0 0;text-shadow:0 1px 0 rgba(0,0,0,.15)}
#bNote small{font-size:38px}
#bSub{margin:2px 0 8px;font-size:18px;font-style:italic;font-weight:400;color:#5a3a1a}
#eTitle{font-size:34px!important;margin-bottom:2px!important}
#eSub{margin:0 0 6px;font-size:17px;font-weight:400;font-style:italic;color:#5a3a1a}
#eStars{display:flex;gap:6px;height:44px;justify-content:center}
#eStars i{width:42px;height:42px;color:#c4141c;filter:drop-shadow(0 2px 0 rgba(60,0,0,.35))}#eStars i.o{color:rgba(90,60,20,.3);filter:none}#eStars svg{width:100%;height:100%;fill:currentColor}
#bStats,#eStats{display:flex;gap:8px;margin:6px 0 6px;width:100%}
.tile{flex:1;padding:8px 6px 9px;border-radius:8px;background:rgba(255,248,224,.6);border:1.5px solid rgba(110,70,20,.4);line-height:1.1}
.tile b{display:block;font-size:25px;color:#3a2410;font-variant-numeric:tabular-nums}.tile span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6a4a22;font-weight:600}
#bMissT,#eMissT{margin:6px 0 4px;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#7a4d16;align-self:flex-start}
#bMiss,#eMiss{flex:1 1 auto;width:100%;overflow-y:auto;touch-action:pan-y;text-align:left;display:flex;flex-direction:column;gap:8px;padding-right:4px;min-height:0;max-height:330px;margin-bottom:12px}
#bMiss::-webkit-scrollbar,#eMiss::-webkit-scrollbar{width:6px}#bMiss::-webkit-scrollbar-thumb,#eMiss::-webkit-scrollbar-thumb{background:#a8843c;border-radius:3px}
.mc{flex:0 0 auto;padding:8px 12px 9px;border-radius:7px;background:rgba(255,252,240,.78);border-left:5px solid #c4141c}
.mc .mq{display:block;font-size:15.5px;line-height:1.18}.mc .ma{font-size:19px;margin-top:2px;color:#1f7a35;font-weight:400;font-family:var(--hand)}
.mc .me{font-size:14px;font-style:italic;font-weight:400;color:#5a3a1a;line-height:1.2;margin-top:1px}
.mc.okc{border-left-color:#1f7a35;font-size:18px;text-align:center;padding:16px}
.eBtns{display:flex;gap:10px;margin-top:6px}.eBtns .bb{font-size:15px;padding:10px 16px 11px}
#sEnd .lnk{color:#6a4a22}

/* ouverture sans saut */
#stage{transform:translate(-50%,-50%) scale(var(--k,1))}
html:not(.pret) #stage{opacity:0}
html.pret #stage{animation:stageEntree .25s ease-out}
@keyframes stageEntree{from{opacity:0}to{opacity:1}}
html:not(.pret) body::before{content:"";position:fixed;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid rgba(255,255,255,.18);border-top-color:#f5b942;border-radius:50%;animation:stageTourne .8s linear infinite}
@keyframes stageTourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.pret #stage{animation:none}}

/* ---------- sur le site : le verrou des chapitres réservés, le retour aux jeux (09/11/2026) ---------- */
.site-only{display:none}
html.site .site-only{display:flex}
#sMenu .back.site-only{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);margin:0;padding-right:18px;z-index:5;text-decoration:none;color:inherit;white-space:nowrap}
#lock{position:absolute;left:18px;right:18px;bottom:18px;z-index:8;padding:11px 16px;border-radius:12px;display:none;font-size:15px;line-height:1.3;color:#f3e3bd;background:linear-gradient(#5a3a22,#2e1c0f);border:2px solid #a37a34;box-shadow:0 6px 16px rgba(0,0,0,.55)}
#lock.show{display:block}
#lock a{color:#ffd37a;font-weight:700;white-space:nowrap}
/* sans l'accès complet (10/11/2026) : le disponible encadré de vert avec sa pastille, le réservé grisé avec la sienne, deux blocs titrés */
.chsec{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:6px 2px 0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.chsec::after{content:"";flex:1;height:2px;background:currentColor;opacity:.4;border-radius:1px}
.chsec.ok{color:#9be3a8}.chsec.no{color:#c2ac82}
.chrow.libre{box-shadow:inset 0 0 0 3px #2f9e44,0 3px 12px rgba(47,158,68,.5)}
.chrow.lock{opacity:.5;filter:grayscale(.6)}
.pil{flex:none;padding:3px 10px;border-radius:11px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.pil.ok{background:#1f7a35;color:#f3ffe9;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.pil.no{background:#4d3b2b;color:#e8d7b4}
.chrow .rt{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.nb{white-space:nowrap}
.chrow.vise{outline:3px solid #c4141c;outline-offset:-3px}