@font-face{font-family:"Fredoka";font-weight:600;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2")}
:root{--acc:#d9a441;--ochre:#d9a441;--cream:#f3ead4;--slate:#2a3139;--slate2:#1b2128;--ink:#0f1318;--moss:#86a24f;--mud:#8a6238}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:#0a0d10;overflow:hidden;touch-action:none;
  font-family:"Fredoka","Trebuchet MS",system-ui,sans-serif;font-weight:600;color:var(--cream)}
#stage{position:fixed;left:50%;top:50%;width:540px;height:960px;transform-origin:center;overflow:hidden;background:#1b2128;border-radius:10px}
#world{position:absolute;inset:0}
#cv,#gl{position:absolute;left:0;top:0;width:540px;height:960px}
#cv{pointer-events:none;z-index:3}
button{font:inherit;color:inherit;border:0;cursor:pointer}

/* ---------- bandeau du haut (d'après la maquette : plaques presque noires, liseré d'or fin) ---------- */
#top{position:absolute;left:0;top:0;width:540px;height:90px;z-index:5;pointer-events:none}
#top>*{pointer-events:auto}
#bPause{position:absolute;left:21px;top:23px;width:42px;height:42px;border-radius:50%;padding:0;font-size:0;color:transparent;
  background:radial-gradient(circle at 50% 40%,#2a2218,#0f0d0b 72%);border:2px solid #b98a3e;box-shadow:inset 0 0 0 2px #0a0908,inset 0 0 10px rgba(255,170,60,.18),0 3px 8px rgba(0,0,0,.6)}
#bPause::before,#bPause::after{content:"";position:absolute;top:11px;width:6px;height:18px;border-radius:2px;background:linear-gradient(#f4b552,#c9812a);box-shadow:0 0 6px rgba(255,170,60,.45)}
#bPause::before{left:11px}#bPause::after{left:23px}
#bPause:active{transform:translateY(2px)}
#hudMid,#alt{position:absolute;top:17px;height:56px;border-radius:12px;background:linear-gradient(180deg,rgba(32,31,33,.95),rgba(19,19,21,.96));border:1.5px solid rgba(176,130,62,.72);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,225,170,.08),0 5px 12px rgba(0,0,0,.55);line-height:1.05}
#hudMid{left:78px;width:320px;padding:8px 14px 0 58px;display:flex;flex-direction:column;justify-content:center}
#hudMid::before{content:attr(data-ico);position:absolute;left:12px;top:9px;width:36px;height:38px;display:grid;place-items:center;font-size:25px}
#hSpe{font-size:19.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);padding-bottom:2px}
#hRound{font-size:12px;color:#a9a8a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#alt{left:411px;width:99px;padding:8px 6px 0 40px;text-align:left}
#alt::before{content:"";position:absolute;left:11px;top:15px;width:24px;height:24px;border-radius:50%;border:2.5px solid #e2a23e;
  background:linear-gradient(#e2a23e,#e2a23e) 11px 5px/2.5px 8px no-repeat,linear-gradient(#e2a23e,#e2a23e) 11px 11px/7px 2.5px no-repeat}
#altNow{display:block;font-size:20px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
#altGoal{display:block;font-size:11.5px;color:#a9a8a6;font-weight:600}

/* ---------- plaque de la question ---------- */
#board{position:absolute;left:56px;width:436px;top:87px;min-height:114px;z-index:4;padding:26px 28px 14px;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(circle at 12px 12px,#b9babd 0 1.5px,#7c7e82 2.5px 4.5px,transparent 5.5px),radial-gradient(circle at calc(100% - 12px) 12px,#b9babd 0 1.5px,#7c7e82 2.5px 4.5px,transparent 5.5px),
    radial-gradient(circle at 12px calc(100% - 12px),#b9babd 0 1.5px,#7c7e82 2.5px 4.5px,transparent 5.5px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#b9babd 0 1.5px,#7c7e82 2.5px 4.5px,transparent 5.5px),
    linear-gradient(180deg,#232226,#161518);
  border:1.5px solid rgba(172,128,64,.75);box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,225,170,.07),0 8px 18px rgba(0,0,0,.6)}
#qtxt{font-size:23px;line-height:1.18;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
#qtxt.l2{font-size:19px}#qtxt.l3{font-size:16.5px;line-height:1.16}
#qtxt b{color:#ffd37a}
#qtag{position:absolute;left:0;right:0;top:9px;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;color:#d9a64c;font-weight:600}
#board.pop{animation:boardpop .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes boardpop{0%{transform:translateY(-12px) scale(.96);opacity:.2}100%{transform:none;opacity:1}}
#board{transition:opacity .7s}
#board.wait{opacity:0}

/* ---------- altimètre : barre fine dorée à gauche, drapeau rouge sur la hauteur de l'eau ---------- */
#gauge{position:absolute;left:0;top:316px;height:503px;width:70px;z-index:4;pointer-events:none}
#gTrack{position:absolute;left:48px;top:0;bottom:0;width:7px;border-radius:4px;background:linear-gradient(90deg,#0a0807,#2a1d12 60%,#120d09);border:1px solid #3d2a16;box-shadow:inset 0 0 4px #000d,0 0 6px rgba(0,0,0,.6);overflow:hidden}
#gUp{position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(#ffd27a,#e8a23a 55%,#b9772a);box-shadow:0 0 8px rgba(255,190,90,.7)}
#gPole{position:absolute;left:22px;width:4px;bottom:0;height:0;border-radius:2px;background:linear-gradient(90deg,#6a4a28,#3e2a16);box-shadow:0 1px 3px #000a}
#gFlag{position:absolute;left:4px;top:-1px;width:0;height:0;border-left:15px solid #d2381a;border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 4px rgba(255,70,30,.6))}
#gClimb{position:absolute;left:46px;bottom:0;width:11px;height:11px;margin:0 0 -5px 0;border-radius:50%;background:radial-gradient(circle,#fff6d6 0 28%,#ffc65a 56%,rgba(255,170,60,0) 72%);box-shadow:0 0 10px 3px rgba(255,185,70,.75)}
#gTicks{position:absolute;left:0;top:0;bottom:0;right:0}
.tick{position:absolute;left:0;width:56px;height:0;transform:translateY(50%);font-size:13px;color:#f2dca8;text-shadow:0 1px 2px #000,0 0 3px #000;white-space:nowrap}
.tick::before{content:"";position:absolute;left:36px;top:-1px;width:12px;height:2px;background:rgba(236,200,130,.8)}
.tick::after{content:"";position:absolute;left:47px;top:-4px;width:7px;height:7px;transform:rotate(45deg);background:#f2c870;box-shadow:0 0 4px rgba(255,200,100,.8)}
.tick span{position:absolute;right:23px;top:-9px;display:flex;align-items:center;gap:1px;color:#ffd24d;font-weight:700}
.tick span b{font-size:15px;color:#ffe9b0;font-weight:700}.tick span i{font-style:normal;font-size:14px}
.tick.s0{display:none}
.tick.hit span{text-shadow:0 0 8px #ffd24d,0 1px 2px #000}
#gClimbTxt{display:none}

#gap{position:absolute;left:0;right:0;top:838px;z-index:6;text-align:center;font-size:19px;letter-spacing:.04em;color:#ffb199;text-shadow:0 2px 0 #000b,0 0 10px rgba(255,80,40,.7);opacity:0;pointer-events:none;transition:opacity .25s}
#gap.on{opacity:1;animation:gapblink .7s infinite alternate}
@keyframes gapblink{to{opacity:.55}}
#topshade{position:absolute;left:0;top:0;width:100%;height:232px;z-index:1;pointer-events:none;transition:opacity 1.2s;background:linear-gradient(180deg,rgba(9,7,7,.92) 0,rgba(9,7,7,.8) 70px,rgba(9,7,7,.38) 165px,rgba(9,7,7,0) 232px)}
#stage.wide #topshade{opacity:0}
#danger{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(120,0,0,0) 40%,rgba(150,10,0,.5) 100%)}

/* ---------- explication, annonces ---------- */
#expl{position:absolute;left:22px;right:22px;top:728px;z-index:6;padding:11px 16px 13px;border-radius:12px;display:none;text-align:center;font-size:17px;line-height:1.2;
  background:linear-gradient(170deg,rgba(33,40,47,.96),rgba(18,23,28,.97));box-shadow:inset 0 0 0 2px #0b0e11,inset 0 0 0 3.5px rgba(217,164,65,.75),0 10px 22px rgba(0,0,0,.6)}
#expl.show{display:block;animation:boardpop .26s ease-out}
#expl b{color:#9ee06a;font-weight:700}
#expl.ko b{color:#9ee06a}#expl .no{color:#ff9d86;font-weight:700}
#expl small{display:block;margin-top:5px;font-size:15px;opacity:.9;font-weight:600}
#stamp{position:absolute;left:0;right:0;top:420px;text-align:center;z-index:7;font-size:54px;line-height:1;font-weight:700;pointer-events:none;opacity:0;
  -webkit-text-stroke:7px #0d1115;paint-order:stroke fill;text-shadow:0 6px 0 #0d1115;letter-spacing:.02em}
#stamp.go{animation:stamp .8s ease-out}#stamp.big{font-size:84px}
@keyframes stamp{0%{opacity:0;transform:scale(2) rotate(-6deg)}14%{opacity:1;transform:scale(.94) rotate(-3deg)}26%{transform:scale(1.05) rotate(-3deg)}70%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.08) translateY(-26px) rotate(-3deg)}}
#banner{position:absolute;left:0;right:0;top:330px;text-align:center;z-index:8;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(8,10,13,.82) 18%,rgba(8,10,13,.82) 82%,transparent);padding:20px 0}
#banner b{display:block;font-size:62px;line-height:1;color:var(--ochre);-webkit-text-stroke:6px #0d1115;paint-order:stroke fill;letter-spacing:.02em}
#banner span{display:block;font-size:23px;margin-top:6px;opacity:.95}
#banner.go{animation:banner 1.9s ease-out}
@keyframes banner{0%{opacity:0;transform:translateX(-80px)}14%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateX(80px)}}
#flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:#c43a22}#flash.w{background:#fff}

/* ---------- écrans ---------- */
.screen{position:absolute;inset:0;z-index:20;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0}
.screen.show{display:flex;animation:scrin .35s ease-out}
@keyframes scrin{from{opacity:0}to{opacity:1}}
#stage.inmenu #topshade,#stage.ending #topshade{display:none}
#stage.inmenu #top,#stage.inmenu #board,#stage.inmenu #gauge,#stage.inmenu #gap,#stage.inmenu #expl,#stage.inmenu #stamp,#stage.inmenu #banner,#stage.inmenu #danger,
#stage.ending #top,#stage.ending #board,#stage.ending #gauge,#stage.ending #gap,#stage.ending #expl,#stage.ending #danger{display:none}

.plaque{position:absolute;z-index:3;left:30px;right:30px;top:74px;height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:10px;
  background:
    radial-gradient(circle at 13px 13px,#c9ced4 0 3px,#4b535c 4px,transparent 5px),radial-gradient(circle at calc(100% - 13px) 13px,#c9ced4 0 3px,#4b535c 4px,transparent 5px),
    radial-gradient(circle at 13px calc(100% - 13px),#c9ced4 0 3px,#4b535c 4px,transparent 5px),radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#c9ced4 0 3px,#4b535c 4px,transparent 5px),
    linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.07) 46%,rgba(255,255,255,0) 58%),linear-gradient(170deg,rgba(66,76,86,.97),rgba(30,37,44,.97) 55%,rgba(24,30,36,.98));
  box-shadow:inset 0 0 0 2px #0e1216,inset 0 0 0 4px rgba(217,164,65,.75),0 12px 22px rgba(0,0,0,.6)}
.logo{display:flex;align-items:baseline;gap:8px;font-size:44px;line-height:1;font-weight:700;color:#f6eed9;white-space:nowrap;text-shadow:0 -1px 0 rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.14),0 0 18px rgba(255,200,110,.25)}
.logo small{font-size:19px;color:#c7b58a}.logo .y{color:#ffd37a}
.tag{margin:8px 0 0;font-size:15.5px;color:#e2d4ae;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.plaque h2{margin:0;font-size:32px;line-height:1.05;color:#f6eed9;text-shadow:0 -1px 0 rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.14)}
#sChap .plaque{height:106px;top:70px}
#sChap .tag{margin-top:6px}

#cards{position:absolute;left:16px;right:16px;top:222px;bottom:44px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);gap:11px 12px}
.card,.chrow{position:relative;color:var(--cream);border:0;border-radius:10px;text-align:left;
  background:linear-gradient(112deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 62%),linear-gradient(160deg,#3d464f,#262d35 62%,#1c2228);
  box-shadow:inset 0 0 0 2px #0e1216,inset 0 0 0 3.5px color-mix(in srgb,var(--c,var(--acc)) 55%,#d9a441),0 7px 12px rgba(0,0,0,.55);
  transition:transform .16s,filter .16s,box-shadow .16s}
.card{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;min-height:0;overflow:hidden}
.card::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:4px;border-radius:3px;background:var(--c);opacity:.9}
.card:hover{transform:translateY(-3px);filter:brightness(1.12)}
.card:active{transform:translateY(1px) scale(.985)}
.card .em{flex:none;width:50px;height:50px;border-radius:50%;margin-left:6px;display:grid;place-items:center;font-size:27px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 38%,#222a31),#161b20 78%);box-shadow:inset 0 0 0 2px #0b0e11,inset 0 0 0 3.5px color-mix(in srgb,var(--c) 70%,#d9a441)}
.card b{display:block;font-size:18.5px;line-height:1.05;color:#f8efd8;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.card small{display:block;font-size:11.5px;line-height:1.15;color:#c9bb97;margin-top:3px}
.card .st,.chrow .st{color:#ffd24d;letter-spacing:3px;font-size:14px;margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.foot{position:absolute;left:0;right:0;bottom:14px;margin:0;text-align:center;font-size:12.5px;color:#cbbd98;opacity:.9;text-shadow:0 1px 3px #000}
.snd,.back{position:absolute;top:14px;width:40px;height:40px;border-radius:50%;z-index:6;font-size:18px;color:#2e2108;background:linear-gradient(#e4be6e,#a97c2a);border:2px solid #5d4311;box-shadow:inset 0 1px 0 rgba(255,244,205,.8),0 3px 6px rgba(0,0,0,.55)}
.snd{right:14px}.back{left:14px;padding:0 0 4px;font-size:30px;line-height:1;font-weight:700}
.snd:active,.back:active{transform:translateY(2px)}

#chList{position:absolute;left:16px;right:16px;top:300px;bottom:16px;padding:6px 4px 12px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:none;touch-action:pan-y}
#chList::-webkit-scrollbar{display:none}
.chrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:11px 20px;font-size:17px;line-height:1.1}
.chrow .cn{font-weight:700;color:#f8efd8;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.chrow small{display:block;font-size:12px;font-weight:600;color:#c9bb97;margin-top:3px}
.chrow:first-child{font-size:19px;background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);color:#2e2108;box-shadow:inset 0 0 0 2px #5d4311,inset 0 0 0 3.5px rgba(255,244,200,.8),0 7px 12px rgba(0,0,0,.55)}
.chrow:first-child .cn{color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6)}.chrow:first-child small{color:#5b4210}.chrow:first-child .st{color:#5b4210;text-shadow:none}
.chrow:hover:not(.off){transform:translateX(3px);filter:brightness(1.1)}
.chrow:active:not(.off){transform:translateY(2px)}
.chrow.off{opacity:.5;filter:grayscale(.6) brightness(.8)}
.chrow .soon{font-size:12px;color:#cdb88a;white-space:nowrap}
.st i{font-style:normal;color:#4b4638;text-shadow:none}.st i.on{color:#ffd24d;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.chrow:first-child .st i{color:rgba(91,66,16,.35)}.chrow:first-child .st i.on{color:#5b4210}
.screen.show .card{animation:deal .55s cubic-bezier(.2,.85,.3,1.12) both;animation-delay:calc(var(--i,0)*50ms + 100ms)}
@keyframes deal{0%{opacity:0;transform:translateY(34px) rotate(calc(var(--r,0)*1.4deg)) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
.screen.show .chrow{animation:slidein .42s cubic-bezier(.2,.85,.3,1.05) both;animation-delay:calc(var(--i,0)*34ms + 90ms)}
@keyframes slidein{0%{opacity:0;transform:translateX(-30px)}100%{opacity:1;transform:none}}

h2{margin:0;font-size:48px;text-align:center;line-height:1}
#sPause,#sEnd{background:radial-gradient(ellipse at 50% 42%,rgba(26,32,39,.86),rgba(8,10,13,.93));backdrop-filter:blur(2px);align-items:center;justify-content:center;gap:15px;padding:24px 22px}
#sPause h2,#sEnd h2{font-size:42px;color:#f6eed9;text-shadow:0 -1px 0 rgba(0,0,0,.7),0 0 18px rgba(255,200,110,.3),0 3px 4px rgba(0,0,0,.7)}
.big,.ghost{border-radius:999px;font-weight:700}
.big{padding:13px 38px;font-size:24px;color:#2e2108;border:2px solid #5d4311;background:linear-gradient(#f0cf85,#c79a3e 55%,#a47a26);box-shadow:inset 0 1px 0 rgba(255,250,220,.9),0 5px 10px rgba(0,0,0,.55)}
.ghost{padding:10px 24px;font-size:17px;color:#e8dcbc;border:2px solid rgba(217,164,65,.7);background:linear-gradient(#323a43,#1d2329);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 8px rgba(0,0,0,.55)}
.big:active,.ghost:active{transform:translateY(2px)}
.row{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
#eStars{font-size:52px;color:#ffd24d;letter-spacing:6px;text-align:center;text-shadow:0 0 14px rgba(255,200,100,.7),0 3px 4px rgba(0,0,0,.7)}#eStars .o{color:#4b4638;text-shadow:none}
#eSub{font-size:17px;opacity:.85;text-align:center;margin-top:-6px}
#eStats{display:flex;gap:10px;justify-content:center}
#eStats div{border-radius:9px;padding:8px 14px;text-align:center;min-width:96px;background:linear-gradient(165deg,#3a424b,#222930);box-shadow:inset 0 0 0 2px #0e1216,inset 0 0 0 3.5px rgba(217,164,65,.7),0 4px 8px rgba(0,0,0,.5)}
#eStats b{display:block;font-size:25px;color:#ffe29a}#eStats span{font-size:12.5px;opacity:.75}
#eMiss{width:100%;max-height:290px;overflow:auto;display:flex;flex-direction:column;gap:8px;touch-action:pan-y;scrollbar-width:thin}
#eMiss h3{margin:0;font-size:17px;opacity:.85;text-align:center;color:#e2d4ae}
#eMiss .m{background:linear-gradient(#f3ebd6,#e3d6b2);color:#1d2229;border-left:5px solid #b3402e;border-radius:6px;padding:8px 12px;font-size:15px;line-height:1.2;box-shadow:0 3px 6px rgba(0,0,0,.45)}
#eMiss .m b{color:#25693a}#eMiss .m i{display:block;opacity:.7;font-style:normal;font-size:13px;margin-top:2px}

/* 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}}

/* Les trois vitesses de l'eau (écran des fiches) */
#lvl{position:absolute;z-index:4;left:16px;right:16px;top:240px;display:flex;gap:8px}
#lvl .lv{flex:1;border:0;border-radius:10px;padding:7px 4px 7px;color:#f1e6c7;font:inherit;font-weight:700;font-size:15px;line-height:1.1;text-align:center;background:linear-gradient(#343d48,#232a33);box-shadow:inset 0 0 0 2px #5a5037,0 3px 6px rgba(0,0,0,.5);text-shadow:0 1px 2px rgba(0,0,0,.7)}
#lvl .lv small{display:block;font-size:11px;font-weight:600;color:#bcae8a;margin-top:3px}
#lvl .lv.on{background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6);box-shadow:inset 0 0 0 2px #5d4311,inset 0 0 0 3.5px rgba(255,244,200,.8),0 4px 8px rgba(0,0,0,.55)}
#lvl .lv.on small{color:#5b4210}
#lvl .lv:active{transform:translateY(2px)}

/* Les mondes (décors) */
#mnd{position:absolute;z-index:4;left:16px;right:16px;top:184px;display:flex;gap:6px}
#mnd.wait{opacity:.65;pointer-events:none}
#mnd .mn{flex:1;border:0;border-radius:10px;padding:6px 2px 7px;color:#f1e6c7;font:inherit;font-weight:700;font-size:14px;line-height:1.1;text-align:center;background:linear-gradient(#343d48,#232a33);box-shadow:inset 0 0 0 2px #5a5037,0 3px 6px rgba(0,0,0,.5);text-shadow:0 1px 2px rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;gap:2px}
#mnd .mn .ei{font-size:18px;line-height:1}
#mnd .mn.on{background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6);box-shadow:inset 0 0 0 2px #5d4311,inset 0 0 0 3.5px rgba(255,244,200,.8),0 4px 8px rgba(0,0,0,.55)}
#mnd .mn:active{transform:translateY(2px)}

/* ---------- écran de choix : rubriques à cocher, règle, niveau ---------- */
#qk{position:absolute;z-index:4;left:16px;right:16px;top:184px;display:flex;gap:8px}
#qk button{flex:1;border:0;border-radius:10px;padding:8px 6px;font:inherit;font-weight:700;font-size:14px;color:#f1e6c7;background:linear-gradient(#343d48,#232a33);box-shadow:inset 0 0 0 1px rgba(217,164,65,.35),0 2px 4px rgba(0,0,0,.5);cursor:pointer}
#qk button:active{transform:translateY(2px)}
#rub{position:absolute;left:16px;right:16px;top:230px;bottom:262px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none;touch-action:pan-y;padding:2px 2px 6px}
#rub::-webkit-scrollbar{display:none}
.rb{flex:none;border-radius:10px;background:linear-gradient(160deg,#3d464f,#262d35 62%,#1c2228);box-shadow:inset 0 0 0 1px rgba(217,164,65,.28),0 3px 8px rgba(0,0,0,.5);color:#f8efd8}
.rb.on{box-shadow:inset 0 0 0 2px #e4be6e,0 3px 8px rgba(0,0,0,.5)}
.rb.part{box-shadow:inset 0 0 0 2px rgba(228,190,110,.5),0 3px 8px rgba(0,0,0,.5)}
.rbh{display:flex;align-items:stretch}
.rbm{flex:1;display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:12px 8px 12px 14px;cursor:pointer}
.ar{border:0;background:none;color:#e4be6e;font:inherit;font-weight:700;font-size:14px;width:82px;cursor:pointer}
.ck{flex:none;position:relative;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 2px #c9bb97}
.rb.on>.rbh .ck,.fr.on .ck{background:#e4be6e;box-shadow:inset 0 0 0 2px #5d4311}
.rb.part>.rbh .ck{background:linear-gradient(#e4be6e,#e4be6e) center/12px 4px no-repeat rgba(0,0,0,.28)}
.rn{display:block;font-weight:700;font-size:17px;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.rn small{display:block;font-size:12px;font-weight:600;color:#c9bb97;margin-top:3px}
.fl{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.fr{display:flex;align-items:center;gap:12px;border:0;border-radius:8px;padding:9px 12px;background:rgba(0,0,0,.28);color:#f8efd8;font:inherit;text-align:left;cursor:pointer}
.fr .rn{font-size:15px;flex:1}
.fr .st{letter-spacing:2px;font-size:12px}
.fr .st i{color:rgba(255,255,255,.22);font-style:normal}.fr .st i.on{color:#ffd24d}
.fr.on{background:rgba(228,190,110,.22)}
.screen.show .rb{animation:slidein .42s cubic-bezier(.2,.85,.3,1.05) both;animation-delay:calc(var(--i,0)*45ms + 90ms)}
#opt{position:absolute;z-index:4;left:16px;right:16px;bottom:102px;display:flex;flex-direction:column;gap:5px}
#opt .lab{font-size:12px;font-weight:700;color:#d9c9a0;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.orow{display:flex;gap:6px}
.opc{flex:1;border:0;border-radius:10px;padding:7px 2px;color:#f1e6c7;font:inherit;font-weight:700;font-size:14.5px;line-height:1.1;text-align:center;background:linear-gradient(#343d48,#232a33);box-shadow:inset 0 0 0 1px rgba(217,164,65,.35),0 2px 4px rgba(0,0,0,.5);cursor:pointer}
.opc small{display:block;font-size:11px;font-weight:600;color:#bcae8a;margin-top:3px}
.opc.on{background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6)}
.opc.on small{color:#5b4210}
.opc:active{transform:translateY(2px)}
#go{position:absolute;z-index:4;left:16px;right:16px;bottom:34px;height:58px;border:0;border-radius:14px;font:inherit;font-weight:800;font-size:20px;color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6);background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);box-shadow:0 4px 10px rgba(0,0,0,.55),inset 0 0 0 2px rgba(93,67,17,.6);cursor:pointer}
#go:active:not(:disabled){transform:translateY(2px)}
#go:disabled{opacity:.55;filter:grayscale(.5)}
#goSub{position:absolute;z-index:4;left:16px;right:16px;bottom:10px;text-align:center;font-size:12.5px;color:#e2d4ae;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ---------- explications : carte « À retenir », panneau « Comprendre » ---------- */
.fr{display:flex;align-items:center;gap:8px;border-radius:8px;padding:0 8px 0 0;background:rgba(0,0,0,.28);color:#f8efd8}
.fr.on{background:rgba(228,190,110,.22)}
.fr .frm{flex:1;display:flex;align-items:center;gap:12px;border:0;background:none;color:inherit;font:inherit;text-align:left;padding:9px 4px 9px 12px;cursor:pointer}
.fr .fi{flex:none;padding:6px 12px;border-radius:999px;border:2px solid #e4be6e;background:rgba(0,0,0,.3);color:#e4be6e;font:inherit;font-weight:700;font-size:13px;cursor:pointer;line-height:1}
.fr .fi:active{transform:translateY(1px)}
#sRappel,#sComp{background:radial-gradient(ellipse at 50% 42%,rgba(26,32,39,.9),rgba(8,10,13,.95));backdrop-filter:blur(2px);align-items:center;justify-content:center;padding:18px}
.rcard{width:100%;max-height:100%;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:10px;padding:20px 20px 18px;border-radius:14px;background:linear-gradient(160deg,#3d464f,#262d35 62%,#1c2228);box-shadow:inset 0 0 0 2px #0e1216,inset 0 0 0 4px rgba(217,164,65,.75),0 12px 22px rgba(0,0,0,.6);color:#f4ead0;touch-action:pan-y}
.rcard h2{margin:0;font-size:25px;line-height:1.1;color:#f6eed9;text-align:center;text-shadow:0 2px 3px rgba(0,0,0,.7)}
.rcard h3{margin:8px 0 2px;font-size:14px;letter-spacing:.7px;text-transform:uppercase;color:#e4be6e}
.rcard p,.rcard li{margin:0;font-size:16.5px;line-height:1.3}
.rcard ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.rcard .ex{margin-top:8px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.28);font-size:15.5px}
.rcard .cq{font-size:15px;color:#d9ccaa;text-align:center;font-style:italic}
#cRep{display:flex;flex-direction:column;gap:6px}
#cRep .ko,#cRep .ok{padding:8px 12px;border-radius:8px;font-size:17px}
#cRep .ko{background:rgba(179,64,46,.28);color:#ffc6b8}
#cRep .ok{background:rgba(54,130,70,.3);color:#c5f0a8}
#cRep b{color:#fff}
.rcard .big{align-self:center;margin-top:10px;font-size:21px;padding:11px 32px}
#bComp{position:absolute;z-index:7;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;padding:9px 18px;border-radius:999px;border:2px solid #5d4311;font:inherit;font-weight:700;font-size:15px;color:#2e2108;background:linear-gradient(#f0cf85,#c79a3e 55%,#a47a26);box-shadow:inset 0 1px 0 rgba(255,250,220,.9),0 4px 9px rgba(0,0,0,.55);cursor:pointer}
#bComp[hidden]{display:none}
#stage.inmenu #bComp,#stage.ending #bComp{display:none}
#eMiss .m{cursor:pointer}
#eMiss .rap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;color:#e2d4ae;font-size:14px}
#eMiss .rap .ghost{padding:6px 14px;font-size:14px}

/* ---------- gratuité étroite : le verrou ---------- */
#lock{position:absolute;z-index:8;left:16px;right:16px;bottom:252px;padding:9px 14px;border-radius:10px;display:none;font-size:14.5px;line-height:1.25;color:#f8efd8;background:linear-gradient(#3a2f1c,#2a2214);box-shadow:inset 0 0 0 2px rgba(217,164,65,.85),0 6px 14px rgba(0,0,0,.6)}
#lock.show{display:block;animation:boardpop .26s ease-out}
#lock a{color:#ffd37a;font-weight:700;white-space:nowrap}
.fr.lock{opacity:.78}
.fr.lock .ck{box-shadow:inset 0 0 0 2px rgba(201,187,151,.45)}
.fr .st{font-style:normal}

.fr .st em{font-style:normal;font-size:12px;font-weight:700;color:#c9bb97;letter-spacing:.3px}
.opc.lock{opacity:.78}

/* la classe se déplie au toucher : plus de case ni de flèche, des mots */
.rbm .ouv{margin-left:auto;padding-left:10px;color:#e4be6e;font-weight:700;font-size:14px;white-space:nowrap}
.rb.open{box-shadow:inset 0 0 0 2px #e4be6e,0 3px 8px rgba(0,0,0,.5)}
.fl .tout{align-self:flex-start;border:2px solid #e4be6e;border-radius:999px;background:rgba(0,0,0,.3);color:#e4be6e;font:inherit;font-weight:700;font-size:13.5px;padding:7px 16px;cursor:pointer}
.fl .tout:active{transform:translateY(1px)}

/* ---------- choix par classe : trois boutons, une liste dépliante (09/11/2026) ---------- */
#cls{position:absolute;z-index:4;left:16px;right:16px;top:188px;display:flex;gap:8px}
.cl{flex:1;border:0;border-radius:12px;padding:10px 4px 9px;color:#f1e6c7;font:inherit;text-align:center;line-height:1.1;background:linear-gradient(#343d48,#232a33);box-shadow:inset 0 0 0 1px rgba(217,164,65,.35),0 2px 4px rgba(0,0,0,.5);cursor:pointer}
.cl b{display:block;font-size:19px;font-weight:700}
.cl small{display:block;font-size:12px;font-weight:600;color:#bcae8a;margin-top:4px}
.cl.on{background:linear-gradient(135deg,rgba(255,250,220,.45),rgba(255,250,220,0) 45%,rgba(60,38,6,.3)),linear-gradient(145deg,#ecc977,#c79a3e 55%,#a47a26);color:#2e2108;text-shadow:0 1px 0 rgba(255,248,206,.6)}
.cl.on small{color:#5b4210}
.cl:active{transform:translateY(2px)}
#rub{top:262px}
.pn{display:flex;flex-direction:column;gap:8px;padding:12px 10px 10px;border-radius:12px;color:#f8efd8;background:linear-gradient(160deg,#3d464f,#262d35 62%,#1c2228);box-shadow:inset 0 0 0 2px #e4be6e,0 3px 8px rgba(0,0,0,.5)}
.pn .fl{padding:0}
.pn.ouvre{animation:deplie .26s ease-out}
@keyframes deplie{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.pnh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
#pnt{font-size:14.5px;font-weight:700;color:#f8efd8;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.pnh .tout{flex:none;border:2px solid #e4be6e;border-radius:999px;background:rgba(0,0,0,.3);color:#e4be6e;font:inherit;font-weight:700;font-size:13.5px;padding:7px 16px;white-space:nowrap;cursor:pointer}
.pnh .tout:active{transform:translateY(1px)}
.astuce{margin:14px 10px 0;padding:14px 16px;text-align:center;font-size:17px;line-height:1.3;color:#f4ead0;border-radius:12px;background:rgba(20,24,29,.86);box-shadow:inset 0 0 0 1px rgba(217,164,65,.55),0 3px 8px rgba(0,0,0,.5)}