/* MDC — thème « Ula'tek » · CSS pur, aucune dépendance */
@import url('https://fonts.googleapis.com/css2?family=Metamorphous&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&family=Alegreya+Sans+SC:wght@500;700;800&display=swap');
html,body{margin:0;background:#030605}
html{scrollbar-color:#2f6b2c #050a08}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#050a08;box-shadow:inset 1px 0 0 #16241e}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3d8a33,#16431d);border:3px solid #050a08;border-radius:12px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#8dff3a,#2f7a2a)}
::selection{background:rgba(141,255,58,.35);color:#fff}

.mdc{--void:#030605;--venom:#8dff3a;--venom2:#52e03c;--acid:#e4ff3a;--bronze:#9a6431;--bronze2:#c48a45;--gold:#f0c258;--goldhi:#ffe9a8;--violet:#a24bff;--violet2:#cf9bff;--bone:#eef3e2;--bone2:#cbd8c2;--mute:#9aae97;
--fd:'Metamorphous','Cinzel',Georgia,serif;--fb:'Alegreya Sans','Segoe UI',system-ui,sans-serif;--fs:'Alegreya Sans SC','Alegreya Sans','Segoe UI',sans-serif;
position:relative;min-height:100vh;color:var(--bone);font:400 17px/1.45 var(--fb);background:var(--void);overflow-x:clip;isolation:isolate}
.mdc *{box-sizing:border-box}
:where(.mdc) button{font:inherit;color:inherit} /* MDC : spécificité abaissée pour que la police des classes (.score-num, .tab, .btn…) s'applique */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============ LIVING TEMPLE BACKGROUND ============ */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(90% 60% at 50% -10%,#1b3a24 0%,rgba(12,26,18,.6) 40%,transparent 70%),radial-gradient(70% 45% at 50% 108%,rgba(64,190,50,.2),transparent 70%),linear-gradient(180deg,#07100c 0%,#040806 60%,#030504 100%)}
.bg-wall,.bg-glow{position:absolute;inset:-20px}
.wall-svg{display:block;width:100%;height:100%}
.bg-glow{opacity:.2;animation:glyphPulse 7s ease-in-out infinite}
.bg-glow.g1{-webkit-mask-image:radial-gradient(30% 36% at 14% 32%,#000,transparent 72%);mask-image:radial-gradient(30% 36% at 14% 32%,#000,transparent 72%)}
.bg-glow.g2{animation-delay:-2.4s;-webkit-mask-image:radial-gradient(30% 36% at 86% 40%,#000,transparent 72%);mask-image:radial-gradient(30% 36% at 86% 40%,#000,transparent 72%)}
.bg-glow.g3{animation-delay:-4.7s;-webkit-mask-image:radial-gradient(40% 30% at 50% 80%,#000,transparent 72%);mask-image:radial-gradient(40% 30% at 50% 80%,#000,transparent 72%)}
@keyframes glyphPulse{0%,100%{opacity:.12}50%{opacity:.95}}
.throne{position:absolute;left:50%;top:-6px;width:780px;margin-left:-390px;opacity:.5}
.throne svg{display:block;width:100%}
.thr-eye{animation:thrEye 4s ease-in-out infinite}
@keyframes thrEye{0%,100%{opacity:.55}50%{opacity:1}}
.brazier{position:absolute;top:96px;width:84px}
.brazier.l{left:.8%}.brazier.r{right:.8%}
.brazier svg{display:block;width:100%;overflow:visible}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.4s ease-in-out infinite alternate}
.flame.f2{animation-duration:1.1s;animation-delay:-.4s}.flame.f3{animation-duration:.8s;animation-delay:-.2s}
@keyframes flicker{0%{transform:scale(1,1) skewX(0)}30%{transform:scale(.92,1.08) skewX(3deg)}60%{transform:scale(1.05,.94) skewX(-2deg)}100%{transform:scale(.96,1.12) skewX(1deg)}}
.mist{position:absolute;width:1100px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(141,255,58,.1),transparent);animation:drift 46s ease-in-out infinite alternate;will-change:transform}
.mist.m1{left:-320px;top:28%}
.mist.m2{right:-360px;top:4%;background:radial-gradient(closest-side,rgba(162,75,255,.09),transparent);animation-duration:58s;animation-delay:-12s}
.mist.m3{left:18%;bottom:-320px;animation-duration:64s;animation-delay:-30s}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(240px,-60px,0) scale(1.15)}100%{transform:translate3d(-120px,40px,0) scale(.95)}}
.pool{position:absolute;left:-10%;right:-10%;bottom:-40px;height:230px;background:radial-gradient(50% 70% at 50% 100%,rgba(141,255,58,.42),rgba(47,191,58,.15) 45%,transparent 72%)}
.pool i{position:absolute;left:50%;bottom:34px;width:900px;height:120px;margin-left:-450px;border-radius:50%;border:1.5px solid rgba(190,255,90,.35);opacity:0;animation:ripple 6s ease-out infinite}
.pool i:nth-child(2){animation-delay:-2s}.pool i:nth-child(3){animation-delay:-4s}
@keyframes ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.crystals{position:absolute;bottom:0;width:250px}.crystals.l{left:0}.crystals.r{right:0;transform:scaleX(-1)}
.crystals svg{display:block;width:100%}
.foliage{position:absolute;top:0;bottom:0;width:230px}.foliage.l{left:-20px}.foliage.r{right:-20px;transform:scaleX(-1)}
.foliage svg{display:block;width:100%;height:100%}
.sway{transform-origin:50% 0;animation:sway 9s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.72) 100%)}
.idle-eyes{position:absolute;left:5%;top:60%;width:130px;opacity:0;transition:opacity 2.5s}
.idle-eyes.on{opacity:1}
.idle-eyes svg{display:block;width:100%}
.idle-eyes .lid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(0)}95%{transform:scaleY(1)}}
.fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:250;pointer-events:none}

/* ============ LAYOUT / HEADER ============ */
.wrap{position:relative;z-index:2;max-width:1380px;margin:0 auto;padding:0 44px 90px}
.top{display:flex;align-items:center;justify-content:space-between;height:86px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer}
.brand-snake{width:70px;height:54px;overflow:visible;filter:drop-shadow(0 0 10px rgba(141,255,58,.25))}
.brand-snake .pupil{transition:transform .08s linear}
.tongue{transform-box:fill-box;transform-origin:50% 0;animation:tongue 3.6s ease-in-out infinite}
@keyframes tongue{0%,78%,100%{transform:scaleY(0)}82%,90%{transform:scaleY(1)}86%{transform:scaleY(.6)}}
.logo{font:400 46px/1 var(--fd);letter-spacing:.02em;background:linear-gradient(180deg,#fff6c9 0%,#f0c258 35%,#9a6431 60%,#e8b64c 80%,#6b4520 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px rgba(141,255,58,.3))}
.brand-sub{font:400 20px/1 var(--fd);letter-spacing:.05em;color:#d9f5b8;text-shadow:0 0 14px rgba(141,255,58,.35);margin-left:6px}
.who{position:relative;display:flex;align-items:center;gap:14px}
.live{position:relative;width:12px;height:12px;border-radius:50%;background:var(--venom);box-shadow:0 0 10px var(--venom)}
.live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--venom);animation:livePing 2s ease-out infinite}
@keyframes livePing{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.role{display:inline-block;padding:6px 14px 7px;font:800 13px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
.role-team{background:linear-gradient(#23874f,#0f4a2c);color:#e0ffec}
.role-arb{background:linear-gradient(#f0c258,#9a6431);color:#1a1004}
.role-admin{background:linear-gradient(#d23a55,#7a1024);color:#ffe8ee}
.who-name{font:500 20px/1 var(--fb)}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border:0;border-radius:5px;cursor:pointer;font:800 15px/1 var(--fs);letter-spacing:.12em;text-transform:uppercase;overflow:hidden;transition:transform .15s,box-shadow .25s,filter .2s;text-decoration:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible,.tab:focus-visible,.chip:focus-visible,.tile:focus-visible,.rrow:focus-visible,.brand:focus-visible,.dbtn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.btn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.btn-venom{color:#f2ffe4;background:linear-gradient(180deg,#43a336 0%,#1f6a25 50%,#113f16 100%);box-shadow:inset 0 1px 0 rgba(228,255,58,.55),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 1px #0a1d0c,0 0 0 2px rgba(196,138,69,.75),0 6px 16px rgba(0,0,0,.55),0 0 22px rgba(141,255,58,.2);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn-venom:hover{box-shadow:inset 0 1px 0 rgba(228,255,58,.7),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 1px #0a1d0c,0 0 0 2px rgba(240,194,88,.9),0 6px 16px rgba(0,0,0,.55),0 0 34px rgba(141,255,58,.5);filter:brightness(1.08)}
.btn-blood{color:#fff0f2;background:linear-gradient(180deg,#b8293f,#7a1227 55%,#4e0a18);box-shadow:inset 0 1px 0 rgba(255,160,180,.45),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 1px #1d0409,0 0 0 2px rgba(196,138,69,.7),0 6px 16px rgba(0,0,0,.55);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn-blood:hover{box-shadow:inset 0 1px 0 rgba(255,160,180,.6),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 1px #1d0409,0 0 0 2px rgba(240,194,88,.9),0 6px 16px rgba(0,0,0,.55),0 0 30px rgba(255,60,90,.45)}
.btn-ghost{color:var(--goldhi);background:linear-gradient(180deg,rgba(26,40,34,.95),rgba(10,18,15,.95));box-shadow:inset 0 0 0 1px rgba(196,138,69,.9),inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 0 4px rgba(196,138,69,.25),0 4px 12px rgba(0,0,0,.5)}
.btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 3px rgba(0,0,0,.55),inset 0 0 0 4px rgba(240,194,88,.45),0 4px 12px rgba(0,0,0,.5),0 0 20px rgba(240,194,88,.3)}
.btn-dark{min-height:52px;color:var(--goldhi);background:radial-gradient(90% 140% at 50% 130%,rgba(141,255,58,.18),transparent 60%),linear-gradient(180deg,#1f3029,#0b1411);box-shadow:inset 0 1px 0 rgba(255,233,168,.15),0 0 0 1px #050907,0 0 0 2px rgba(196,138,69,.8),0 0 0 4px #050907,0 0 0 5px rgba(196,138,69,.3),0 8px 18px rgba(0,0,0,.6)}
.btn-dark:hover{color:#fff;box-shadow:inset 0 1px 0 rgba(255,233,168,.25),0 0 0 1px #050907,0 0 0 2px var(--gold),0 0 0 4px #050907,0 0 0 5px rgba(141,255,58,.5),0 8px 18px rgba(0,0,0,.6),0 0 26px rgba(141,255,58,.3)}
.btn-block{width:100%}
.btn-sm{min-height:36px;padding:0 14px;font-size:13px}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--bone2);transition:transform .3s,color .2s}
.icon-btn:hover{color:var(--venom);transform:rotate(90deg)}
.icon-btn svg{width:20px;height:20px}

/* tabs */
.nav{display:flex;justify-content:center;gap:12px;margin:0 0 26px}
.tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:170px;height:58px;padding:0 26px;border:0;cursor:pointer;font:400 21px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:#b9c9b2;background:linear-gradient(180deg,#1a2922,#0b1310);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);box-shadow:inset 0 0 0 1px #3a5245,inset 0 2px 0 rgba(255,255,255,.05),inset 0 -12px 20px rgba(0,0,0,.5);transition:color .2s}
.tab:hover{color:#eaffd6}
.tab.on{color:var(--acid);text-shadow:0 0 12px rgba(228,255,58,.6);background:radial-gradient(90% 130% at 50% 125%,rgba(141,255,58,.45),transparent 60%),linear-gradient(180deg,#1d3b2a,#0a1611);box-shadow:inset 0 0 0 1px rgba(141,255,58,.75),inset 0 0 0 3px rgba(0,0,0,.6),inset 0 0 0 4px rgba(196,138,69,.6),inset 0 -12px 24px rgba(141,255,58,.18)}
.tab.on::before{content:"";position:absolute;left:18px;right:18px;bottom:7px;height:3px;background:repeating-linear-gradient(90deg,var(--venom) 0 7px,transparent 7px 10px);box-shadow:0 0 8px var(--venom);transform-origin:0 50%;animation:vineGrow .6s ease-out}
@keyframes vineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.drop-badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px 12px 12px 3px;background:radial-gradient(circle at 35% 30%,#f6ff9a,#c6f22a 45%,#5aa01c);color:#132003;font:800 13px/1 var(--fb);letter-spacing:0;text-shadow:none;box-shadow:0 0 12px rgba(228,255,58,.55)}
.drop-badge.pop{animation:dropPop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes dropPop{from{transform:scale(0)}to{transform:scale(1)}}

/* ============ PANELS ============ */
.panel{position:relative;padding:34px 34px 30px;border-radius:8px;background:radial-gradient(120% 60% at 50% 0%,rgba(141,255,58,.07),transparent 55%),repeating-linear-gradient(174deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px),repeating-linear-gradient(94deg,rgba(0,0,0,.18) 0 2px,transparent 2px 23px),linear-gradient(180deg,#15241e 0%,#0d1714 55%,#0a120f 100%);box-shadow:inset 0 1px 0 rgba(255,233,168,.1),inset 0 0 0 1px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.55),0 0 0 3px #070c0a,0 0 0 4px rgba(196,138,69,.6),0 0 0 7px #070c0a,0 0 0 8px rgba(196,138,69,.22),0 24px 60px rgba(0,0,0,.7),0 0 80px rgba(141,255,58,.06)}
.corner{position:absolute;width:44px;height:44px;pointer-events:none;z-index:3}
.corner.tl{left:-10px;top:-10px}.corner.tr{right:-10px;top:-10px;transform:scaleX(-1)}.corner.bl{left:-10px;bottom:-10px;transform:scaleY(-1)}.corner.br{right:-10px;bottom:-10px;transform:scale(-1,-1)}
.drape{position:absolute;top:-22px;left:-18px;width:250px;height:130px;pointer-events:none;z-index:4}
.drape.r{left:auto;right:-18px;transform:scaleX(-1)}
.drape svg{display:block;width:100%;height:100%;overflow:visible}
.ptitle{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 18px;font:400 22px/1.1 var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--goldhi);text-shadow:0 0 18px rgba(240,194,88,.35),0 2px 0 #000}
.ptitle .tk{width:36px;height:13px;color:var(--bronze2)}
.ptitle .tk.flip{transform:scaleX(-1)}
.ptitle .ic{width:24px;height:26px;color:var(--gold)}
.count-drop{font-size:14px}
.panel-peek{position:absolute;right:-8px;top:110px;width:120px;height:62px;z-index:-1;pointer-events:none;transform:translateX(-85%);transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.panel-peek.on{transform:translateX(42%)}
.panel-peek svg{width:100%;height:100%;overflow:visible}

/* ============ BOARD / GRID ============ */
.view{position:relative;animation:viewIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes viewIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.smoke-sweep{position:absolute;inset:-60px -80px;pointer-events:none;z-index:20;overflow:hidden}
.smoke-sweep i{position:absolute;top:10%;left:0;width:60%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(141,255,58,.3),rgba(141,255,58,.08) 55%,transparent);opacity:0;animation:sweep 1.2s ease-out forwards}
.smoke-sweep i:nth-child(2){top:-10%;animation-delay:.08s;background:radial-gradient(closest-side,rgba(162,75,255,.24),transparent)}
.smoke-sweep i:nth-child(3){top:40%;animation-delay:.16s}
@keyframes sweep{0%{transform:translateX(-80%) scale(.8);opacity:0}30%{opacity:1}100%{transform:translateX(190%) scale(1.3);opacity:0}}
.view-narrow{max-width:1180px;margin:0 auto}
.board{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:34px;align-items:start}
.panel-grid{padding:30px 40px 34px}
.grid-head{text-align:center;margin-bottom:22px}
.mdc-carved{font:400 62px/1 var(--fd);letter-spacing:.04em;background:linear-gradient(180deg,#e8ffb8,#8dff3a 40%,#2c7a24 70%,#c8ff6a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 18px rgba(141,255,58,.45))}
.grid-team{margin-top:6px;font:400 25px/1.1 var(--fd);letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.grid-wrap{position:relative;width:min(100%,700px);margin:0 auto}
.gframe{position:relative;z-index:2;padding:26px;border-radius:10px;background:repeating-linear-gradient(45deg,rgba(0,0,0,.22) 0 2px,transparent 2px 8px),linear-gradient(145deg,#5a3716,#c48a45 22%,#6b4520 42%,#e8b64c 58%,#7a4a1c 78%,#b07a2e);box-shadow:inset 0 0 0 2px #2a1808,inset 0 2px 0 rgba(255,233,168,.6),inset 0 -2px 0 rgba(0,0,0,.5),0 0 0 2px #050807,0 18px 40px rgba(0,0,0,.7),0 0 60px rgba(141,255,58,.14)}
.grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:5px;border-radius:4px;background:radial-gradient(circle at 50% 50%,#0c2a10,#020403 70%);box-shadow:inset 0 0 0 2px #0a0f0c,0 0 0 2px #2a1808}
.glyphs{position:absolute;inset:26px;pointer-events:none;z-index:3}
.gs{position:absolute;width:17px;height:17px;transform:translate(-50%,-50%);color:#3a2410;transition:color .6s,filter .6s}
.gs svg{display:block;width:100%;height:100%}
.gs.lit{color:#f6ff9a;filter:drop-shadow(0 0 3px var(--venom)) drop-shadow(0 0 7px rgba(141,255,58,.8));animation:glyphLit 2.4s ease-in-out infinite}
@keyframes glyphLit{50%{opacity:.65}}

/* heads of the hydra around the grid */
.hh{position:absolute;z-index:1;width:124px;height:76px;pointer-events:none;opacity:0;transition:transform 1.1s cubic-bezier(.3,1.3,.4,1),opacity .8s}
.hh svg{display:block;width:100%;height:100%;overflow:visible}
.hh-l{right:calc(100% - 50px);top:40%;transform:translateX(75%)}
.hh-l svg{transform:scaleX(-1)}
.hh-r{left:calc(100% - 50px);top:52%;transform:translateX(-75%)}
.hh-tl{right:calc(100% - 50px);top:-24px;transform:translate(60%,40%) rotate(-30deg)}
.hh-tl svg{transform:scaleX(-1)}
.hh-tr{left:calc(100% - 50px);top:-24px;transform:translate(-60%,40%) rotate(30deg)}
.heads-rest .hh{opacity:1}
.heads-rest .hh-l{transform:translateX(30%)}
.heads-rest .hh-r{transform:translateX(-30%)}
.heads-rest .hh-tl{transform:translate(28%,24%) rotate(-30deg)}
.heads-rest .hh-tr{transform:translate(-28%,24%) rotate(30deg)}
.heads-rise .hh{opacity:1;filter:drop-shadow(0 0 16px rgba(141,255,58,.7))}
.heads-rise .hh-l{transform:translateX(-8%) rotate(-8deg)}
.heads-rise .hh-r{transform:translateX(8%) rotate(8deg)}
.heads-rise .hh-tl{transform:translate(-10%,-18%) rotate(-38deg)}
.heads-rise .hh-tr{transform:translate(10%,-18%) rotate(38deg)}

/* ---- tiles ---- */
.tile{position:relative;aspect-ratio:1/1;padding:0;border:0;background:none;cursor:pointer;text-align:center;z-index:1;display:block;width:100%}
.tile:hover,.tile:focus-visible{z-index:6}
.tile::before{content:"";position:absolute;inset:-2px;border-radius:6px;box-shadow:0 0 26px rgba(141,255,58,.5),0 14px 26px rgba(0,0,0,.65);opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.tile:hover::before,.tile:focus-visible::before{opacity:1;transform:translateY(-4px) scale(1.035)}
.t-face{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:12px 9px;border-radius:4px;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tile:hover .t-face,.tile:focus-visible .t-face{transform:translateY(-4px) scale(1.035)}
.ty-easy .t-face{background:radial-gradient(120% 90% at 50% 18%,#21382f 0%,#111e19 55%,#0a130f 100%);box-shadow:inset 0 0 0 1px #34493e,inset 0 1px 0 rgba(255,255,255,.07),inset 0 -14px 24px rgba(0,0,0,.45)}
.ty-hard .t-face{background:repeating-linear-gradient(128deg,transparent 0 18px,rgba(162,75,255,.08) 18px 19px,transparent 19px 41px),radial-gradient(120% 90% at 50% 18%,#262040 0%,#141122 55%,#0b0a14 100%);box-shadow:inset 0 0 0 1px #433668,inset 0 1px 0 rgba(207,155,255,.12),inset 0 -14px 24px rgba(0,0,0,.5)}
.ty-center .t-face{background:radial-gradient(circle at 50% 48%,#2a1f63 0%,#100c28 55%,#06050d 100%);box-shadow:inset 0 0 0 1px rgba(240,194,88,.6),inset 0 0 30px rgba(90,77,255,.35)}
.t-tint,.t-rim{position:absolute;inset:0;pointer-events:none;border-radius:inherit;transition:opacity .45s,box-shadow .45s}
.t-tint{opacity:0}
.t-runes{--rune:rgba(141,255,58,.9);position:absolute;inset:5px;border-radius:3px;pointer-events:none;opacity:.22;transition:opacity .3s;background:repeating-linear-gradient(90deg,var(--rune) 0 6px,transparent 6px 8px,var(--rune) 8px 9px,transparent 9px 14px) 0 0/100% 1.5px no-repeat,repeating-linear-gradient(90deg,var(--rune) 0 6px,transparent 6px 8px,var(--rune) 8px 9px,transparent 9px 14px) 0 100%/100% 1.5px no-repeat,repeating-linear-gradient(180deg,var(--rune) 0 6px,transparent 6px 8px,var(--rune) 8px 9px,transparent 9px 14px) 0 0/1.5px 100% no-repeat,repeating-linear-gradient(180deg,var(--rune) 0 6px,transparent 6px 8px,var(--rune) 8px 9px,transparent 9px 14px) 100% 0/1.5px 100% no-repeat}
.ty-hard .t-runes{--rune:rgba(207,155,255,.95)}
.ty-center .t-runes{--rune:rgba(240,194,88,.95)}
.tile:hover .t-runes,.tile:focus-visible .t-runes{opacity:1;filter:drop-shadow(0 0 4px var(--rune))}
.t-name{position:relative;z-index:2;font:800 16px/1.12 var(--fs);letter-spacing:.03em;color:#dfe9d6;text-shadow:0 1px 0 #000,0 0 10px rgba(0,0,0,.9);transition:color .3s,text-shadow .3s}
.ty-hard .t-name{color:#ebe2ff}
.ty-center .t-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.s-ok .t-tint{opacity:1;background:radial-gradient(110% 90% at 50% 35%,rgba(170,255,90,.34),rgba(46,140,44,.34) 45%,rgba(6,30,10,.55) 100%)}
.s-pending .t-tint{opacity:1;background:radial-gradient(120% 75% at 50% 118%,rgba(228,255,58,.42),rgba(150,170,30,.14) 45%,transparent 72%)}
.s-ko .t-tint{opacity:1;background:radial-gradient(110% 90% at 50% 40%,rgba(162,75,255,.26),rgba(30,12,48,.62) 70%)}
.s-ok .t-rim{box-shadow:inset 0 0 0 1.5px rgba(141,255,58,.9),inset 0 0 24px rgba(141,255,58,.3)}
.s-pending .t-rim{box-shadow:inset 0 0 0 1.5px rgba(228,255,58,.75)}
.s-ko .t-rim{box-shadow:inset 0 0 0 2px rgba(190,110,255,.9),inset 0 0 18px rgba(162,75,255,.45)}
.in-line .t-rim{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 4px rgba(0,0,0,.5),inset 0 0 0 5px rgba(240,194,88,.45),inset 0 0 28px rgba(141,255,58,.35)}
.in-line .t-face::after{content:"";position:absolute;inset:4px;pointer-events:none;background:linear-gradient(var(--gold),var(--gold)) 0 0/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/2px 12px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 12px no-repeat;filter:drop-shadow(0 0 3px var(--gold))}
.s-ok .t-name{color:#f3ffdf;text-shadow:0 1px 0 #000,0 0 14px rgba(141,255,58,.75)}
.s-pending .t-name{color:#fbffd8}
.s-ko .t-name{color:#e2d0ff}
/* pending */
.t-bubbles{position:absolute;inset:0;pointer-events:none;display:none}
.s-pending .t-bubbles{display:block}
.t-bubbles i{position:absolute;bottom:-8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fbffc4,#c6f22a 50%,rgba(90,160,28,.2));animation:bubble 2.6s ease-in infinite}
.t-bubbles i:nth-child(1){left:18%}
.t-bubbles i:nth-child(2){left:44%;width:6px;height:6px;animation-delay:-.9s}
.t-bubbles i:nth-child(3){left:70%;width:10px;height:10px;animation-delay:-1.7s}
.t-bubbles i:nth-child(4){left:58%;width:5px;height:5px;animation-delay:-2.2s}
@keyframes bubble{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}80%{opacity:.8}100%{transform:translateY(-72px) scale(1.1);opacity:0}}
.t-coil{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible;z-index:2}
.s-pending .t-coil{opacity:1;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(.965)}}
.t-coil .cb{fill:none;stroke:#1d2a0c;stroke-width:6;stroke-linecap:round}
.t-coil .cm{fill:none;stroke:url(#gr-neck);stroke-width:4.4;stroke-linecap:round}
.t-coil .cs{fill:none;stroke:#2a3d14;stroke-width:4.2;stroke-dasharray:1.2 1.6;opacity:.7}
.t-coil .ch{fill:url(#gr-head);stroke:#07071a;stroke-width:.6}
/* ko */
.t-crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:1}
.s-ko .t-crack{opacity:1}
.t-crack .ck-d{fill:none;stroke:#050308;stroke-width:3.4;stroke-linejoin:bevel}
.t-crack .ck-l{fill:none;stroke:#e6ccff;stroke-width:1.2;stroke-linejoin:bevel;filter:drop-shadow(0 0 3px rgba(162,75,255,.95))}
/* marks */
.t-mark{position:absolute;top:6px;right:6px;width:30px;height:30px;z-index:4;opacity:0;pointer-events:none}
.t-mark svg{display:block;width:100%;height:100%}
.t-mark-ok{color:var(--venom);filter:drop-shadow(0 0 5px rgba(141,255,58,.8))}
.t-mark-pend{color:var(--acid);width:22px;height:22px;top:8px;right:8px}
.t-mark-ko{color:#dcb0ff;width:22px;height:22px;top:8px;right:8px;filter:drop-shadow(0 0 4px rgba(162,75,255,.9))}
.s-ok .t-mark-ok{opacity:1;transform:rotate(-14deg)}
.s-pending .t-mark-pend{opacity:1;animation:spinSlow 8s linear infinite}
.s-ko .t-mark-ko{opacity:1}
@keyframes spinSlow{to{transform:rotate(360deg)}}
/* hover peek snake */
.t-peek{position:absolute;left:50%;top:0;width:32px;height:54px;margin-left:-16px;z-index:0;transform:translateY(22%);transition:transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.t-peek svg{display:block;width:100%;height:100%;overflow:visible}
.tile:hover .t-peek,.tile:focus-visible .t-peek{transform:translateY(-64%)}
.t-peek .tongue{animation-duration:1.6s;transform-origin:50% 100%}
/* tooltip */
.t-tip{position:absolute;z-index:30;top:calc(100% + 12px);left:50%;width:330px;padding:16px 18px 14px;text-align:left;border-radius:6px;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .2s,transform .25s,visibility 0s .25s;pointer-events:none;background:linear-gradient(180deg,#17261f,#0b1411);box-shadow:inset 0 0 0 1px rgba(196,138,69,.75),inset 0 0 0 3px #060b09,inset 0 0 0 4px rgba(141,255,58,.25),0 18px 40px rgba(0,0,0,.85),0 0 30px rgba(141,255,58,.15)}
.tile:hover .t-tip,.tile:focus-visible .t-tip{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.15s,.15s,0s}
.tip-l .t-tip{left:0;transform:translate(0,8px)}
.tip-l:hover .t-tip,.tip-l:focus-visible .t-tip{transform:none}
.tip-r .t-tip{left:auto;right:0;transform:translate(0,8px)}
.tip-r:hover .t-tip,.tip-r:focus-visible .t-tip{transform:none}
.tip-up .t-tip{top:auto;bottom:calc(100% + 12px)}
.badge{align-self:flex-start;display:inline-block;padding:4px 10px 5px;font:800 11.5px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.b-easy{background:#1f7a4a;color:#e6fff0}
.b-hard{background:#5b2aa8;color:#f3eaff}
.b-center{background:linear-gradient(90deg,#b27a34,#f0c258);color:#1d1204}
.tip-title{font:400 19px/1.15 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--goldhi)}
.tip-desc{font:400 16.5px/1.45 var(--fb);color:var(--bone)}
.tip-status{font:italic 500 15px/1.3 var(--fb);color:var(--mute)}
/* centre: Ula'tek's scale */
.scale{position:absolute;left:12%;top:6%;width:76%;height:88%;z-index:2;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));transition:filter .6s}
.s-ok .scale{filter:drop-shadow(0 0 10px rgba(141,255,58,.55)) drop-shadow(0 0 22px rgba(240,194,88,.35))}
.scale .lid{transform-box:fill-box;transition:transform .8s cubic-bezier(.5,0,.2,1)}
.scale .lid-t{transform-origin:50% 100%}.scale .lid-b{transform-origin:50% 0}
.s-ok .scale .lid{transform:scaleY(0)}
.scale .eye-glow{opacity:0;transition:opacity .6s}
.s-ok .scale .eye-glow{opacity:.55}
.scale .pupil{transform-box:fill-box;transform-origin:50% 50%}
.s-ok .scale .pupil{animation:pupilLook 7s ease-in-out infinite}
@keyframes pupilLook{0%,40%,100%{transform:translateX(0)}50%,60%{transform:translateX(-3px)}70%,80%{transform:translateX(3px)}}
/* ---- tile event effects ---- */
.t-smoke{position:absolute;inset:-25%;pointer-events:none;opacity:0;z-index:5}
.t-smoke i{position:absolute;width:70%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(141,255,58,.6),rgba(141,255,58,0))}
.t-smoke i:nth-child(1){left:0;top:30%}.t-smoke i:nth-child(2){right:0;top:15%}.t-smoke i:nth-child(3){left:15%;top:0}
.fx-offer .t-smoke,.fx-refuse .t-smoke{opacity:1}
.fx-offer .t-smoke i{animation:puff 1.5s ease-out both}
.fx-offer .t-smoke i:nth-child(2){animation-delay:.12s}.fx-offer .t-smoke i:nth-child(3){animation-delay:.24s}
.fx-refuse .t-smoke i{background:radial-gradient(closest-side,rgba(190,110,255,.65),transparent);animation:puff 1.3s .1s ease-out both}
@keyframes puff{0%{transform:translateY(20%) scale(.3);opacity:0}30%{opacity:1}100%{transform:translateY(-30%) scale(1.5);opacity:0}}
.fx-offer .t-coil{animation:none}
.fx-offer .t-coil .cb,.fx-offer .t-coil .cm,.fx-offer .t-coil .cs{stroke-dasharray:100;animation:coilDraw 1.1s .55s cubic-bezier(.5,0,.3,1) both}
.fx-offer .t-coil .cs{stroke-dasharray:1.2 1.6;animation:fadeIn .4s 1.5s both}
.fx-offer .t-coil .ch{animation:fadeIn .3s 1.55s both}
@keyframes coilDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.t-flash{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff 0%,rgba(228,255,58,.85) 30%,rgba(141,255,58,0) 72%)}
.fx-validate .t-flash{animation:flash .8s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.t-bolt{position:absolute;left:50%;bottom:55%;width:40%;height:140%;margin-left:-20%;z-index:8;pointer-events:none;opacity:0;color:#f6ff9a;filter:drop-shadow(0 0 6px #8dff3a) drop-shadow(0 0 14px #8dff3a)}
.t-bolt svg{width:100%;height:100%}
.fx-validate .t-bolt{animation:bolt .5s ease-out}
@keyframes bolt{0%{opacity:0;transform:scaleY(0);transform-origin:50% 0}20%{opacity:1;transform:scaleY(1)}60%{opacity:1}100%{opacity:0;transform:scaleY(1)}}
.t-bigseal{position:absolute;left:20%;top:20%;width:60%;height:60%;z-index:7;pointer-events:none;opacity:0;color:var(--venom);filter:drop-shadow(0 0 8px rgba(141,255,58,.9))}
.t-bigseal svg{width:100%;height:100%}
.fx-validate .t-bigseal{animation:bigStamp 1.5s .2s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bigStamp{0%{transform:scale(2.8) rotate(-40deg);opacity:0}22%{transform:scale(.95) rotate(-12deg);opacity:1}30%{transform:scale(1) rotate(-12deg)}75%{opacity:1}100%{transform:scale(.5) translate(60%,-60%) rotate(-14deg);opacity:0}}
.t-ring{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;z-index:7;pointer-events:none;opacity:0;border:3px solid var(--acid)}
.fx-validate .t-ring{animation:ring .7s .3s ease-out}
@keyframes ring{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(4)}}
.fx-validate .t-mark-ok{animation:stamp .5s 1.4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{0%{transform:scale(2) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(-14deg);opacity:1}}
.fx-validate .t-face{animation:thump .5s .25s}
@keyframes thump{0%{transform:scale(1)}30%{transform:scale(.94)}100%{transform:scale(1)}}
.fx-refuse .t-face{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.fx-refuse .t-crack .ck-d,.fx-refuse .t-crack .ck-l{stroke-dasharray:100;animation:crackDraw .55s .1s ease-out both}
@keyframes crackDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.fx-refuse .t-peek{animation:hissRecoil 1.3s ease-out}
@keyframes hissRecoil{0%{transform:translateY(22%)}25%{transform:translateY(-78%) scale(1.15)}45%{transform:translateY(-70%) rotate(-8deg)}55%{transform:translateY(-72%) rotate(8deg)}100%{transform:translateY(22%)}}
.fx-awaken .scale,.fx-validate.ty-center .scale{animation:scaleFlare 1.9s ease-out}
@keyframes scaleFlare{0%{transform:scale(1)}18%{transform:scale(1.16);filter:brightness(1.9) drop-shadow(0 0 30px #e4ff3a) drop-shadow(0 0 40px #f0c258)}100%{transform:scale(1)}}
.fx-blink .scale .lid{animation:lidBlink .5s ease-in-out}
@keyframes lidBlink{0%,100%{transform:scaleY(0)}45%,55%{transform:scaleY(1)}}
.line-run{position:absolute;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);z-index:9;pointer-events:none;overflow:visible}
.line-run line{stroke-linecap:round;stroke-dasharray:22 140;stroke-dashoffset:22;animation:runSnake 1.5s cubic-bezier(.45,0,.2,1) forwards}
.line-run .glow{stroke:rgba(141,255,58,.8);stroke-width:4.5;filter:blur(1.4px)}
.line-run .core{stroke:#fbffc9;stroke-width:1.5}
.line-run .gold{stroke:rgba(240,194,88,.9);stroke-width:2.4;stroke-dasharray:6 156;animation-delay:.06s}
@keyframes runSnake{to{stroke-dashoffset:-140}}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:24px 0 0;padding:0;list-style:none;font:500 15.5px/1 var(--fb);color:var(--bone2)}
.legend li{display:flex;align-items:center;gap:8px}
.lg{display:inline-block;width:18px;height:18px;border-radius:3px}
.lg-easy{background:#15241e;box-shadow:inset 0 0 0 1.5px #587565}
.lg-hard{background:#1a1530;box-shadow:inset 0 0 0 1.5px #7a62c0}
.lg-pend{background:radial-gradient(circle at 50% 100%,rgba(228,255,58,.75),#2a2e0c);box-shadow:inset 0 0 0 1.5px var(--acid)}
.lg-ok{background:radial-gradient(circle,rgba(141,255,58,.65),#123a16);box-shadow:inset 0 0 0 1.5px var(--venom)}
.lg-ko{background:linear-gradient(120deg,transparent 45%,#e6ccff 46% 52%,transparent 53%),#1c0f2a;box-shadow:inset 0 0 0 1.5px #b56eff}
.lg-line{background:#0d1a10;box-shadow:inset 0 0 0 2px var(--gold),0 0 8px rgba(240,194,88,.55)}
.grid-foot{display:flex;justify-content:center;margin-top:22px}
.plaque{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 30px;font:800 14px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase;color:#dfffc9;background:linear-gradient(180deg,#153524,#0a1c12);box-shadow:inset 0 0 0 1px rgba(141,255,58,.55),inset 0 0 0 3px #04100a,inset 0 0 0 4px rgba(196,138,69,.5);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%)}
.plaque.closed{color:#f3d9ff;background:linear-gradient(180deg,#2a1640,#150a22);box-shadow:inset 0 0 0 1px rgba(190,110,255,.6),inset 0 0 0 3px #0a0512,inset 0 0 0 4px rgba(196,138,69,.5)}
.grid-hint{text-align:center;color:var(--bone2);margin:22px 0 0;font-size:16.5px}

/* ============ SIDE PANELS ============ */
.side{display:flex;flex-direction:column;gap:30px}
.score-big{display:flex;flex-direction:column;align-items:center;margin:0 0 20px}
.score-num{display:inline-block;font:400 98px/.95 var(--fd);font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#f7ffd0 0%,#b8ff5a 35%,#3fae2e 65%,#e4ff3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 22px rgba(141,255,58,.5));border:0;padding:0;cursor:pointer}
.score-num.rolling{animation:scoreBump .5s ease-out infinite alternate}
@keyframes scoreBump{from{transform:scale(1)}to{transform:scale(1.12)}}
.score-unit{margin-top:6px;font:italic 500 19px/1 var(--fb);color:var(--mute)}
.kv{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:18px}
.kv b{font:800 19px/1 var(--fb);color:var(--goldhi)}
.sbar{position:relative;height:18px;border-radius:10px;background:linear-gradient(#030605,#0b1411);box-shadow:inset 0 2px 4px #000,0 0 0 1px #2b4036,0 1px 0 rgba(255,255,255,.05)}
.sbar-fill{position:absolute;left:3px;top:3px;bottom:3px;max-width:calc(100% - 6px);border-radius:8px;background:radial-gradient(ellipse 4px 3px at 50% 100%,transparent 60%,rgba(20,50,8,.6) 66% 88%,transparent 92%) 0 0/8px 6px,linear-gradient(#f0ff9a,#9fd24a 45%,#4a7a1e);box-shadow:0 0 12px rgba(141,255,58,.45);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.sbar-head{position:absolute;right:-22px;top:50%;width:34px;height:17px;margin-top:-9px}
.sbar-head svg{display:block;width:100%;height:100%;overflow:visible}
.sbar-sm{flex:1;height:12px}
.sbar-sm .sbar-fill{top:2px;bottom:2px;left:2px}
.subcounts{display:flex;align-items:center;gap:6px;margin:12px 0 18px;font-size:15px;color:var(--mute)}
.subcounts svg{width:18px;height:18px;color:var(--venom)}
.statboxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.statbox{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border-radius:5px;background:linear-gradient(180deg,#060b09,#0f1a16);box-shadow:inset 0 2px 8px rgba(0,0,0,.85),inset 0 0 0 1px #2c4136,0 1px 0 rgba(255,255,255,.05)}
.sb-label{font-size:14.5px;color:var(--mute)}
.sb-val{font:400 34px/1 var(--fd);color:var(--bone)}
.sb-val small{margin-left:4px;font:500 15px var(--fb);color:var(--mute)}
.pending-line{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 4px;font:800 18px/1 var(--fb);color:var(--acid);text-shadow:0 0 12px rgba(228,255,58,.35)}
.pending-line svg{width:22px;height:22px;animation:spinSlow 6s linear infinite}
.disclose{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 0;background:none;border:0;cursor:pointer;font:italic 500 16px/1 var(--fb);color:var(--bone2)}
.disclose:hover{color:var(--venom)}
.disclose svg{width:11px;height:11px;transition:transform .25s}
.disclose.open svg{transform:rotate(90deg)}
.bareme{margin:8px 0 0;animation:viewIn .4s both}
.bareme div{display:flex;justify-content:space-between;padding:8px 2px;border-bottom:1px dashed rgba(141,255,58,.2);font-size:16px}
.bareme dt{color:var(--bone2)}.bareme dd{margin:0;font-weight:800;color:var(--goldhi)}
.top3{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.top3 li{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:5px;font-size:19px}
.top3 li.me{background:linear-gradient(90deg,rgba(141,255,58,.16),rgba(141,255,58,.03));box-shadow:inset 0 0 0 1px rgba(141,255,58,.35)}
.t3-name{flex:1}
.t3-score{font:400 24px/1 var(--fd);color:var(--goldhi)}
.medal{position:relative;flex:none;display:inline-grid;place-items:center;width:34px;height:34px;overflow:hidden;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);font:800 15px/1 var(--fb);transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.medal span{position:relative;z-index:1}
.m1{background:radial-gradient(circle at 35% 30%,#fff3bf,#f0c258 40%,#8a5a20);color:#2a1a04}
.m2{background:radial-gradient(circle at 35% 30%,#ffffff,#c9d2cc 45%,#5d6a66);color:#162020}
.m3{background:radial-gradient(circle at 35% 30%,#ffd3a8,#c48a45 45%,#5a3210);color:#1f0f02}
.m4{background:radial-gradient(circle at 35% 30%,#4a5f55,#22332b 60%,#0e1612);color:var(--bone2)}
@keyframes shine{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.medal:hover,.top3 li:hover .medal,.rrow:hover .medal{transform:rotateY(360deg)}
.medal-wrap{display:inline-block;filter:drop-shadow(0 0 6px rgba(240,194,88,.55))}
.medal-wrap.w4{filter:none}
.team-members{text-align:center;font:italic 500 19px/1.4 var(--fb);color:var(--bone2);margin:0 0 14px}
.code-row{display:flex;align-items:center;gap:10px;font-size:17px}
.code-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:0;border-radius:4px;cursor:pointer;font:600 16px/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:var(--acid);background:#050a08;box-shadow:inset 0 0 0 1px rgba(196,138,69,.7);transition:box-shadow .2s}
.code-btn:hover{box-shadow:inset 0 0 0 1px var(--venom),0 0 12px rgba(141,255,58,.25)}
.code-btn svg{width:16px;height:16px;color:var(--bone2)}
.bonus-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.bonus-list li{display:flex;align-items:center;gap:14px;padding:10px 6px;border-bottom:1px dashed rgba(141,255,58,.18);animation:viewIn .5s both}
.b-pts{width:40px;font:400 22px/1 var(--fd);color:var(--venom)}
.b-pts.neg{color:#ff7a90}
.b-body{flex:1;display:flex;flex-direction:column;gap:3px}
.b-why{font-size:18px}.b-meta{font-size:14px;color:var(--mute)}
.empty-mini{text-align:center;color:var(--mute);font-style:italic;margin:0 0 18px}
.dropzone{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:10}
.falling{position:absolute;left:50%;top:40px;width:58px;height:58px;margin-left:-29px;animation:fall 1.4s cubic-bezier(.4,0,.6,1) both}
.falling svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(240,194,88,.7))}
.falling.skull{color:#e8e0c8}.falling.skull svg{filter:drop-shadow(0 0 10px rgba(255,60,90,.7))}
@keyframes fall{0%{transform:translateY(-240px) rotateY(0);opacity:0}15%{opacity:1}55%{transform:translateY(110px) rotateY(540deg)}70%{transform:translateY(80px) rotateY(620deg)}85%{transform:translateY(110px) rotateY(700deg)}100%{transform:translateY(110px) rotateY(720deg);opacity:0}}

/* chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:-4px 0 28px}
.chip{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border:0;border-radius:24px;cursor:pointer;font:500 19px/1 var(--fb);color:var(--bone);background:linear-gradient(180deg,#1a2922,#0b1310);box-shadow:inset 0 0 0 1px #3a5245,0 4px 10px rgba(0,0,0,.5);transition:box-shadow .2s}
.chip:hover{box-shadow:inset 0 0 0 1px rgba(141,255,58,.6),0 0 14px rgba(141,255,58,.2)}
.chip.on{color:#fff;background:radial-gradient(100% 140% at 50% 120%,rgba(141,255,58,.38),transparent 60%),linear-gradient(180deg,#1d3b2a,#0a1611);box-shadow:inset 0 0 0 1.5px var(--venom),inset 0 0 0 3px #04100a,inset 0 0 0 4px rgba(196,138,69,.6),0 0 18px rgba(141,255,58,.25)}
.chip-count{font:500 14px/1 var(--fb);color:var(--mute)}
.chip.on .chip-count{color:#d9f5b8}

/* ============ CLASSEMENT ============ */
.rank-cols{display:grid;grid-template-columns:64px minmax(0,1.6fr) minmax(0,1.4fr) 90px 90px 90px;align-items:center;gap:12px;padding:0 16px}
.rank-head{height:46px;font:800 13.5px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:2px solid rgba(196,138,69,.55)}
.rank-body{position:relative}
.rrow{position:absolute;left:0;right:0;top:0;height:62px;width:100%;border:0;border-bottom:1px solid rgba(141,255,58,.1);background:none;cursor:pointer;text-align:left;font:500 19px/1 var(--fb);color:var(--bone);transition:transform .9s cubic-bezier(.5,0,.2,1),background .3s}
.rrow:hover{background:rgba(141,255,58,.06)}
.rrow.me{background:linear-gradient(90deg,rgba(141,255,58,.18),rgba(141,255,58,.04))}
.rrow.moved{background:linear-gradient(90deg,rgba(240,194,88,.25),rgba(240,194,88,.03))}
.rrow em{font-style:italic;color:var(--venom);font-size:17px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.rk-score{font:400 24px/1 var(--fd);color:var(--goldhi)}
.rk-prog{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--bone2)}
.rank-note{margin:24px 0 6px;text-align:center;font-size:17px;color:var(--bone2)}

/* ============ VALIDATIONS ============ */
.req-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.rq-slot{position:relative}
.rq{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#14221b,#0a120e);box-shadow:inset 0 0 0 1px #2e4439,inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.5)}
.rq-glyph{position:absolute;right:-16px;top:-16px;width:92px;height:92px;opacity:.16;pointer-events:none}
.rq-glyph svg{width:100%;height:100%}
.rq.t-easy .rq-glyph{color:#3fd57e}.rq.t-hard .rq-glyph{color:#b56eff}.rq.t-center .rq-glyph{color:var(--gold);opacity:.24}
.rq.t-center{box-shadow:inset 0 0 0 1px rgba(240,194,88,.45),inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.5),0 0 24px rgba(240,194,88,.08)}
.rq-head{font-size:16.5px;color:var(--bone2)}
.rq-head b{font-weight:800;color:var(--bone)}
.rq-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font:400 20px/1.15 var(--fd);letter-spacing:.05em;text-transform:uppercase;color:var(--goldhi)}
.rq-desc{margin:0;font-size:17px;color:var(--bone)}
.rq-note{padding:12px 14px;border-radius:4px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(141,255,58,.16);font-size:16.5px;white-space:pre-line}
.rq-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.rq-seal{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:5;opacity:0;pointer-events:none;color:var(--venom);filter:drop-shadow(0 0 12px rgba(141,255,58,.9))}
.rq-seal svg{width:100%;height:100%}
.rq.fx-seal .rq-seal{animation:cardSeal .6s cubic-bezier(.2,1.5,.4,1) forwards}
.rq.fx-seal{animation:cardOut .5s 1s ease-in forwards}
.rq.fx-seal::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(141,255,58,.35),transparent 70%);animation:flash .8s .15s ease-out both}
@keyframes cardSeal{0%{transform:scale(2.6) rotate(-30deg);opacity:0}55%{transform:scale(.92) rotate(-12deg);opacity:1}100%{transform:scale(1) rotate(-12deg);opacity:1}}
@keyframes cardOut{to{transform:scale(.9) translateY(12px);opacity:0}}
.rq-slash{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0}
.rq.fx-fang .rq-slash{opacity:1}
.rq-slash .sl{fill:none;stroke:#f1e0ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px #a24bff)}
.rq.fx-fang .rq-slash .sl{animation:crackDraw .3s ease-out forwards}
.rq.fx-fang .rq-slash .sl:nth-child(2){animation-delay:.1s}.rq.fx-fang .rq-slash .sl:nth-child(3){animation-delay:.2s}
.rq.fx-fang{animation:cardOutKo .6s .9s ease-in forwards}
.rq.fx-fang::after{content:"";position:absolute;inset:0;background:rgba(80,20,120,.35);animation:fadeIn .3s both}
@keyframes cardOutKo{to{transform:translateY(20px) rotate(3deg);opacity:0}}
.rq-slot.fresh .rq{animation:cardDrop 1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes cardDrop{0%{transform:translateY(-160px) rotate(-5deg);opacity:0}50%{opacity:1}100%{transform:none}}
.dropper{position:absolute;left:50%;bottom:100%;width:40px;height:220px;margin-left:-20px;z-index:4;pointer-events:none;opacity:0}
.rq-slot.fresh .dropper{animation:dropper 1.6s ease-in-out both}
.dropper svg{width:100%;height:100%;overflow:visible}
@keyframes dropper{0%{transform:translateY(-160px);opacity:1}45%{transform:translateY(40px);opacity:1}70%{transform:translateY(20px);opacity:1}100%{transform:translateY(-260px);opacity:0}}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 20px 44px;text-align:center;color:var(--bone2)}
.empty svg{width:200px;height:90px}
.empty h3{margin:0;font:400 22px/1.2 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--goldhi)}
.empty p{margin:0;max-width:420px}

/* ============ JOURNAL ============ */
.journal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ptitle-left{justify-content:flex-start;margin:0}
.journal{list-style:none;margin:0;padding:0;max-height:760px;overflow:auto;padding-right:6px}
.jrow{display:grid;grid-template-columns:62px 30px minmax(0,1fr);align-items:start;gap:12px;padding:11px 6px;border-bottom:1px solid rgba(141,255,58,.09)}
.jrow time{font:500 15px/1.5 var(--fb);color:var(--mute);font-variant-numeric:tabular-nums}
.j-ic{display:grid;place-items:center;width:26px;height:26px}
.j-ic svg{width:21px;height:21px}
.jk-ok .j-ic{color:var(--venom)}.jk-send .j-ic{color:var(--acid)}.jk-ko .j-ic{color:#d2a4ff}.jk-bonus .j-ic{color:var(--gold)}.jk-malus .j-ic{color:#ff8ea0}.jk-team .j-ic{color:var(--bronze2)}.jk-reset .j-ic{color:var(--venom)}.jk-zero .j-ic{color:var(--bone2)}
.j-line{display:block;font-size:17px}.j-line b{font-weight:800}
.j-sub{display:block;margin-top:3px;font-size:14.5px;color:var(--mute)}
.jrow.new{animation:jIn .8s ease-out}
@keyframes jIn{from{background:rgba(141,255,58,.25);transform:translateX(-12px)}to{background:transparent;transform:none}}
.journal-foot{margin:18px 0 0;text-align:center;font-size:15px;color:var(--mute)}
.select{-webkit-appearance:none;appearance:none;height:44px;min-width:230px;padding:0 44px 0 16px;border:0;border-radius:5px;cursor:pointer;font:500 16px/1 var(--fb);color:var(--bone);background:linear-gradient(45deg,transparent 50%,var(--gold) 50%) calc(100% - 22px) 52%/7px 7px no-repeat,linear-gradient(135deg,var(--gold) 50%,transparent 50%) calc(100% - 15px) 52%/7px 7px no-repeat,linear-gradient(180deg,#0a120f,#131f1a);box-shadow:inset 0 0 0 1px rgba(196,138,69,.75),inset 0 2px 6px rgba(0,0,0,.6)}
.select:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--venom),0 0 0 4px rgba(141,255,58,.15)}
.select option{background:#0b1411;color:var(--bone)}

/* ============ ADMIN ============ */
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 34px;align-items:start}
.settings-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 20px;font-size:19px}
.toggle-pill{height:44px;padding:0 20px;border:0;border-radius:6px;cursor:pointer;font:800 15px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase}
.toggle-pill.open{color:#e0ffec;background:linear-gradient(#23874f,#0f4a2c);box-shadow:inset 0 0 0 1px var(--venom),0 0 16px rgba(141,255,58,.3)}
.toggle-pill.closed{color:#f3d9ff;background:linear-gradient(#5b2aa8,#2a1650);box-shadow:inset 0 0 0 1px #c98bff,0 0 16px rgba(162,75,255,.3)}
.bareme-lg div{font-size:18px;padding:10px 2px}
.row-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ptable-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tcols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 118px auto;align-items:center;gap:12px}
.thead{padding:0 8px 10px;font:800 13px/1 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border-bottom:2px solid rgba(196,138,69,.55)}
.trow{padding:12px 8px;border-bottom:1px solid rgba(141,255,58,.09);font-size:17px}
.trow b{font-weight:700}
.t-players{color:var(--bone2);font-size:16px}
.t-acts{display:flex;gap:8px;justify-content:flex-end}
.scols{display:grid;grid-template-columns:minmax(0,1fr) 96px 118px auto;align-items:center;gap:12px}
.staff-note{margin:16px 0 0;color:var(--bone2);font-size:16px}
.panel-danger{box-shadow:inset 0 1px 0 rgba(255,233,168,.1),inset 0 0 60px rgba(60,0,10,.55),0 0 0 3px #070c0a,0 0 0 4px rgba(255,90,116,.65),0 0 0 7px #070c0a,0 0 0 8px rgba(255,90,116,.2),0 24px 60px rgba(0,0,0,.7),0 0 60px rgba(255,60,90,.12)}
.panel-danger .ptitle{color:#ffc2cc}
.panel-danger p{margin:0 0 20px;font-size:18px}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:8px}
.label{font:700 16px/1.2 var(--fb);color:var(--bone)}
.input,.textarea{width:100%;padding:14px 16px;border:0;border-radius:5px;font:400 17px/1.4 var(--fb);color:var(--bone);background:linear-gradient(180deg,#050a08,#0d1714);box-shadow:inset 0 0 0 1px rgba(196,138,69,.6),inset 0 3px 8px rgba(0,0,0,.7);transition:box-shadow .2s}
.input::placeholder,.textarea::placeholder{color:#82977e}
.input:focus,.textarea:focus,.input.is-focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--venom),inset 0 3px 8px rgba(0,0,0,.7),0 0 0 4px rgba(141,255,58,.15),0 0 22px rgba(141,255,58,.22)}
.textarea{min-height:118px;resize:vertical}
.input-code{height:74px;text-align:center;font:400 30px/1 var(--fd);letter-spacing:.34em;text-transform:uppercase;color:var(--acid)}
.radio,.check{-webkit-appearance:none;appearance:none;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin:0;cursor:pointer;background:#050a08;box-shadow:inset 0 0 0 1.5px var(--bronze2),inset 0 2px 4px rgba(0,0,0,.8);transition:box-shadow .2s,background .2s}
.radio{border-radius:50%}
.radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--venom);box-shadow:0 0 8px var(--venom);transform:scale(0);transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.radio:checked{box-shadow:inset 0 0 0 1.5px var(--venom),0 0 10px rgba(141,255,58,.45)}
.radio:checked::after{transform:scale(1)}
.check{border-radius:4px}
.check::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid #0b1d05;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .2s cubic-bezier(.3,1.7,.5,1)}
.check:checked{background:linear-gradient(#c8ff6a,#5fc43a);box-shadow:inset 0 0 0 1px #e4ff3a,0 0 10px rgba(141,255,58,.5)}
.check:checked::after{transform:rotate(45deg) scale(1)}
.radio:focus-visible,.check:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.conds{margin:0;padding:10px 20px 14px;border:1px solid rgba(196,138,69,.6);border-radius:6px;background:rgba(0,0,0,.25)}
.conds legend{padding:0 8px;font:800 17px var(--fb);color:var(--goldhi)}
.cond{display:flex;align-items:flex-start;gap:12px;padding:7px 0;font-size:17.5px;cursor:pointer}
.cond .radio{margin-top:2px}
.checkline{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}

/* ============ MODALS ============ */
.modal-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:40px}
.backdrop{position:absolute;inset:0;border:0;padding:0;cursor:default;background:radial-gradient(60% 60% at 50% 60%,rgba(20,70,30,.55),rgba(0,0,0,.86));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}
.modal-wrap{position:relative;width:min(720px,100%)}
.modal-wrap.sm{width:min(600px,100%)}
.pool-under{position:absolute;left:10%;right:10%;bottom:-46px;height:80px;border-radius:50%;background:radial-gradient(closest-side,rgba(141,255,58,.55),rgba(141,255,58,.12) 60%,transparent);animation:poolIn .8s ease-out both;pointer-events:none}
@keyframes poolIn{0%{transform:scaleX(.2);opacity:0}40%{transform:scaleX(1.15);opacity:1}100%{transform:scaleX(1);opacity:.55}}
.drips{position:absolute;left:0;right:0;bottom:-4px;height:0;pointer-events:none}
.drips i{position:absolute;top:0;width:6px;height:9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#b8ff5a;box-shadow:0 0 6px var(--venom);animation:drip 1.6s ease-in both}
.drips i:nth-child(1){left:22%;animation-delay:.6s}.drips i:nth-child(2){left:58%;animation-delay:.9s}.drips i:nth-child(3){left:81%;animation-delay:1.2s}
@keyframes drip{0%{transform:translateY(0) scaleY(.4);opacity:0}20%{opacity:1;transform:translateY(0) scaleY(1)}100%{transform:translateY(46px);opacity:0}}
.modal{position:relative;max-height:calc(100vh - 100px);overflow:auto;padding:34px 36px 30px;border-radius:8px;background:radial-gradient(120% 60% at 50% 0%,rgba(141,255,58,.08),transparent 55%),repeating-linear-gradient(174deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px),linear-gradient(180deg,#16261f 0%,#0d1714 60%,#0a120f 100%);box-shadow:inset 0 1px 0 rgba(255,233,168,.12),inset 0 0 50px rgba(0,0,0,.5),0 0 0 3px #070c0a,0 0 0 4px rgba(196,138,69,.75),0 0 0 7px #070c0a,0 0 0 8px rgba(141,255,58,.3),0 30px 80px rgba(0,0,0,.85),0 0 90px rgba(141,255,58,.15);animation:rise .7s cubic-bezier(.2,.9,.25,1) both}
@keyframes rise{0%{transform:translateY(90px) scale(.94);clip-path:inset(100% -80px -80px -80px round 8px);opacity:.3}60%{clip-path:inset(-80px round 8px);opacity:1}100%{transform:none;clip-path:inset(-80px round 8px);opacity:1}}
.modal .x{position:absolute;top:14px;right:14px}
.m-kicker{margin-bottom:10px;font:800 14px/1 var(--fs);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.m-title{margin:10px 0 14px;font:400 30px/1.1 var(--fd);letter-spacing:.05em;text-transform:uppercase;color:var(--goldhi);text-shadow:0 0 18px rgba(240,194,88,.3)}
.m-desc{margin:0 0 18px;font-size:19px;line-height:1.5}
.m-stack{display:flex;flex-direction:column;gap:16px}
.m-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:4px}
.sbox{display:flex;flex-direction:column;gap:8px;padding:16px 20px;border-radius:6px}
.sbox-none{font:800 18px var(--fb);background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(196,138,69,.5)}
.sbox-pend{background:radial-gradient(120% 140% at 0 0,rgba(228,255,58,.17),rgba(40,50,10,.35));box-shadow:inset 0 0 0 1px rgba(228,255,58,.6)}
.sbox-ok{background:radial-gradient(120% 140% at 0 0,rgba(141,255,58,.2),rgba(10,40,14,.35));box-shadow:inset 0 0 0 1px rgba(141,255,58,.6)}
.sbox-ko{background:radial-gradient(120% 140% at 0 0,rgba(162,75,255,.22),rgba(30,10,50,.4));box-shadow:inset 0 0 0 1px rgba(190,110,255,.65)}
.sbox-h{display:flex;align-items:center;gap:10px;font:800 19px var(--fb)}
.sbox-h svg{width:24px;height:24px}
.sbox-pend .sbox-h svg{color:var(--acid)}.sbox-ok .sbox-h svg{color:var(--venom)}.sbox-ko .sbox-h svg{color:#dcb0ff}
.sbox-meta{font-size:16px;color:var(--bone2)}
.quote{padding:12px 16px;border-radius:4px;background:rgba(0,0,0,.38);font-size:17px}
.quote.em{font-style:italic}
.fiche-head{display:flex;align-items:center;gap:14px}
.fiche-head .m-title{margin:0}
.fiche-count{margin:22px 0 4px;text-align:center;font:400 90px/1 var(--fd);color:var(--venom);text-shadow:0 0 30px rgba(141,255,58,.5)}
.fiche-sub{text-align:center;font:italic 500 19px var(--fb);color:var(--bone2);margin-bottom:16px}
.fiche-boxes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 22px}
.fiche-foot{display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;color:var(--bone2)}
.fiche-foot svg{width:40px;height:20px}
.m-confirm p{font-size:18px;margin:0 0 20px}

/* ============ TOASTS ============ */
.toasts{position:fixed;right:24px;bottom:24px;z-index:150;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.toast{--tc:rgba(196,138,69,.8);--tg:rgba(240,194,88,.2);display:flex;align-items:center;gap:12px;min-width:340px;max-width:520px;padding:16px 20px;border-radius:6px;font:500 17px/1.35 var(--fb);color:var(--bone);background:linear-gradient(180deg,#1a2a23,#0c1512);box-shadow:inset 0 0 0 1px var(--tc),inset 0 0 0 3px #050907,inset 0 0 0 4px rgba(196,138,69,.4),0 14px 30px rgba(0,0,0,.7),0 0 26px var(--tg);animation:tabletIn .55s cubic-bezier(.2,1.2,.4,1) both;pointer-events:auto}
.toast.ok{--tc:rgba(141,255,58,.85);--tg:rgba(141,255,58,.32)}
.toast.ko{--tc:rgba(190,110,255,.9);--tg:rgba(162,75,255,.38)}
.toast.danger{--tc:rgba(255,90,116,.85);--tg:rgba(255,60,90,.3)}
.toast.gold{--tc:rgba(240,194,88,.9);--tg:rgba(240,194,88,.35)}
.toast svg{flex:none;width:26px;height:26px;color:var(--tc)}
.toast.out{animation:tabletOut .45s ease-in forwards}
.toast.static{animation:none}
@keyframes tabletIn{from{transform:translateX(120%) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
@keyframes tabletOut{to{transform:translateX(120%) rotate(-2deg);opacity:0}}

/* ============ LOGIN / LOADING ============ */
.login{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:60px 40px}
.login-card{width:580px;padding:46px 54px 40px;text-align:center}
.login-card.shake{animation:shake .5s}
.login-coil{position:absolute;inset:-18px;width:calc(100% + 36px);height:calc(100% + 36px);pointer-events:none;overflow:visible;z-index:5}
.login-coil .lb{fill:none;stroke:#1d2a0c;stroke-width:15;stroke-linecap:round}
.login-coil .lm{fill:none;stroke:url(#gr-neck);stroke-width:11;stroke-linecap:round}
.login-coil .ls{fill:none;stroke:#2a3d14;stroke-width:10;stroke-dasharray:3 5;opacity:.6;animation:slither 2.5s linear infinite}
@keyframes slither{to{stroke-dashoffset:-32}}
.login-head{position:absolute;right:-60px;top:-50px;width:120px;height:60px;z-index:6;transform:rotate(18deg)}
.login-head svg{width:100%;height:100%;overflow:visible}
.login-logo{font:400 118px/1 var(--fd);letter-spacing:.03em;background:linear-gradient(180deg,#fff6c9 0%,#f0c258 30%,#9a6431 55%,#e8b64c 75%,#6b4520 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 26px rgba(141,255,58,.35))}
.login-sub{margin:10px 0 34px;font:400 27px/1.1 var(--fd);letter-spacing:.07em;color:#e2f7cc;text-shadow:0 0 16px rgba(141,255,58,.35)}
.login-form{display:flex;flex-direction:column;gap:18px;text-align:left}
.login-err{margin:-6px 0 0;text-align:center;font-size:16px;color:#e2c0ff}
.login-foot{margin:28px 0 0;font-size:17px;color:var(--bone2)}
.loading{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}
.ouro{width:170px;height:170px;overflow:visible;filter:drop-shadow(0 0 20px rgba(141,255,58,.35));animation:spinSlow 2.6s linear infinite}
.loading p{margin:0;font:400 23px var(--fd);letter-spacing:.12em;color:#d9f5b8;animation:thrEye 2s ease-in-out infinite}

/* ============ BIG OVERLAYS ============ */
.door{position:fixed;inset:0;z-index:180;display:flex;pointer-events:none}
.door-half{position:relative;width:50%;height:100%;overflow:hidden;background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 60px),repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 3px,transparent 3px 120px),linear-gradient(180deg,#16251f,#0a120f);box-shadow:inset 0 0 120px rgba(0,0,0,.8)}
.door-half.l{box-shadow:inset -6px 0 0 #c48a45,inset 0 0 120px rgba(0,0,0,.8);animation:doorL 1.7s .55s cubic-bezier(.6,0,.2,1) forwards}
.door-half.r{box-shadow:inset 6px 0 0 #c48a45,inset 0 0 120px rgba(0,0,0,.8);animation:doorR 1.7s .55s cubic-bezier(.6,0,.2,1) forwards}
.door-med{position:absolute;top:50%;width:84vh;height:84vh;margin-top:-42vh}
.door-half.l .door-med{right:-42vh}.door-half.r .door-med{left:-42vh}
.door-med svg{width:100%;height:100%}
.door-seam{position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;background:#e4ff3a;box-shadow:0 0 40px 14px #8dff3a;opacity:0;animation:seam 1.4s .35s forwards}
@keyframes doorL{to{transform:translateX(-104%)}}
@keyframes doorR{to{transform:translateX(104%)}}
@keyframes seam{0%{opacity:0;transform:scaleY(0)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1) scaleX(14)}}
.cine{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;padding:0;cursor:pointer;color:inherit;font:inherit;background:radial-gradient(60% 60% at 50% 60%,rgba(30,110,30,.6),rgba(0,0,0,.95));animation:fadeIn .5s both;overflow:hidden}
.cine-hydra{width:min(980px,86vw);height:auto;overflow:visible}
.cine .wing{transform-origin:440px 470px;animation:wingOpen 1.9s .5s cubic-bezier(.2,1.1,.3,1) both}
@keyframes wingOpen{0%{transform:rotate(-62deg) scale(.3);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
.cine-heads{animation:headsUp 1.4s .2s cubic-bezier(.2,1.2,.3,1) both}
@keyframes headsUp{from{transform:translateY(260px);opacity:0}to{transform:none;opacity:1}}
.cine-eye{opacity:0;animation:eyeFlare 1.2s 1.6s ease-out both}
@keyframes eyeFlare{0%{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}40%{opacity:.95;transform:scale(1.6)}100%{opacity:.5;transform:scale(1)}}
.cine-ripple{transform-box:fill-box;transform-origin:center;animation:ripple 2.4s ease-out infinite}
.cine-title{margin:-40px 0 0;font:400 92px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fff6c9,#f0c258 40%,#9a6431 70%,#ffe9a8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #000) drop-shadow(0 0 30px rgba(141,255,58,.6));animation:titleIn 1s 2s cubic-bezier(.2,1.4,.4,1) both}
.cine-sub{font:400 24px var(--fd);letter-spacing:.1em;color:#e2f7cc;animation:fadeIn .8s 2.6s both}
.cine-hint{margin-top:14px;font-size:15px;color:var(--mute);animation:fadeIn .8s 3.4s both}
@keyframes titleIn{from{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}
.purge{position:fixed;inset:0;z-index:190;pointer-events:none;overflow:hidden}
.purge-wave{position:absolute;left:-10%;right:-10%;top:100%;height:135%;border-radius:45% 55% 0 0/14% 18% 0 0;background:linear-gradient(180deg,rgba(220,255,120,.97) 0%,rgba(110,230,60,.95) 4%,rgba(30,120,34,.97) 30%,#052a0c 100%);box-shadow:0 -20px 60px rgba(141,255,58,.6);animation:purgeWave 3.4s cubic-bezier(.6,0,.3,1) forwards}
@keyframes purgeWave{0%{transform:translateY(0)}40%,58%{transform:translateY(-100%)}100%{transform:translateY(0)}}
.purge-text{position:absolute;left:0;right:0;top:44%;text-align:center;font:400 64px var(--fd);letter-spacing:.1em;text-transform:uppercase;color:#062a0c;text-shadow:0 0 30px rgba(228,255,58,.8);opacity:0;animation:purgeText 3.4s forwards}
@keyframes purgeText{0%,32%{opacity:0;transform:scale(.8)}42%,56%{opacity:1;transform:none}66%,100%{opacity:0}}
.purge-bubbles i{position:absolute;bottom:-40px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fbffc4,#8dff3a 50%,rgba(30,120,34,.2));animation:purgeBubble 2.6s ease-in both}
.purge-bubbles i:nth-child(1){left:10%}.purge-bubbles i:nth-child(2){left:26%;animation-delay:.3s}.purge-bubbles i:nth-child(3){left:44%;animation-delay:.1s;width:40px;height:40px}.purge-bubbles i:nth-child(4){left:62%;animation-delay:.5s}.purge-bubbles i:nth-child(5){left:80%;animation-delay:.2s;width:34px;height:34px}.purge-bubbles i:nth-child(6){left:92%;animation-delay:.6s}
@keyframes purgeBubble{to{transform:translateY(-110vh)}}
.snake-cross{position:fixed;left:0;bottom:14vh;z-index:170;width:640px;height:118px;pointer-events:none;animation:crossScreen 4.3s linear forwards}
.snake-cross svg{width:100%;height:100%;overflow:visible}
.snake-cross .wig{animation:wiggle .45s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes crossScreen{from{transform:translateX(-700px)}to{transform:translateX(calc(100vw + 100px))}}
@keyframes wiggle{from{transform:skewY(-3deg) translateY(-4px)}to{transform:skewY(3deg) translateY(4px)}}
.tiki-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:40;display:flex;align-items:flex-start;gap:10px;pointer-events:none;animation:tikiPop .5s cubic-bezier(.3,1.6,.5,1) both}
.tiki-pop svg{width:60px;height:76px;color:#b07a2e;filter:drop-shadow(0 0 10px rgba(141,255,58,.4))}
.tiki-pop .jaw{transform-box:fill-box;animation:chatter .16s steps(2) infinite}
@keyframes chatter{to{transform:translateY(3px)}}
@keyframes tikiPop{from{transform:translateY(-20px) scale(.4);opacity:0}to{transform:none;opacity:1}}
.tiki-bubble{margin-top:10px;padding:10px 14px;border-radius:12px 12px 12px 2px;white-space:nowrap;font:italic 500 16px var(--fb);background:#0f1a15;box-shadow:inset 0 0 0 1px var(--venom),0 0 16px rgba(141,255,58,.25)}

/* ============ DEMO PANEL + FX BAR ============ */
.demo{position:fixed;left:0;top:110px;z-index:160;display:flex;align-items:flex-start;transform:translateX(calc(-100% + 42px));transition:transform .45s cubic-bezier(.3,1.2,.4,1)}
.demo.open{transform:none}
.demo-body{width:310px;max-height:calc(100vh - 170px);overflow:auto;padding:14px 16px 18px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,#15241e,#0a120f);box-shadow:inset 0 0 0 1px rgba(196,138,69,.6),0 20px 50px rgba(0,0,0,.8)}
.demo-tab{align-self:flex-start;width:42px;padding:18px 0;border:0;border-radius:0 8px 8px 0;cursor:pointer;writing-mode:vertical-rl;font:800 14px/1 var(--fs);letter-spacing:.2em;text-transform:uppercase;color:#132003;background:linear-gradient(90deg,#8dff3a,#c8ff6a);box-shadow:0 0 18px rgba(141,255,58,.45)}
.demo h3{margin:14px 0 8px;font:800 12.5px var(--fs);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.demo h3:first-child{margin-top:4px}
.demo-btns{display:flex;flex-wrap:wrap;gap:6px}
.dbtn{min-height:34px;padding:0 11px;border:0;border-radius:4px;cursor:pointer;font:600 14px/1 var(--fb);color:var(--bone);background:#13211b;box-shadow:inset 0 0 0 1px #34503f;transition:box-shadow .15s,color .15s}
.dbtn:hover{color:#fff;box-shadow:inset 0 0 0 1px var(--venom),0 0 10px rgba(141,255,58,.2)}
.demo-note{margin:14px 0 0;font-size:13.5px;line-height:1.4;color:var(--mute)}
.fxbar{position:fixed;left:16px;bottom:16px;z-index:160;display:flex;gap:8px}
.fxbtn{height:38px;padding:0 14px;border:0;border-radius:19px;cursor:pointer;font:700 14px/1 var(--fb);color:var(--bone);background:rgba(10,18,15,.92);box-shadow:inset 0 0 0 1px rgba(196,138,69,.7),0 6px 16px rgba(0,0,0,.6)}
.fxbtn:hover{box-shadow:inset 0 0 0 1px var(--venom),0 0 14px rgba(141,255,58,.3)}
.fxbtn b{color:var(--acid)}

/* ============ REDUCED EFFECTS ============ */
.fx-low *,.fx-low *::before,.fx-low *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.12s!important}
.fx-low .fx-canvas,.fx-low .mist,.fx-low .pool i,.fx-low .t-bubbles,.fx-low .smoke-sweep{display:none}
.fx-low .bg-glow{opacity:.4}

/* ============ KIT ============ */
.kit{padding:56px 64px 80px;position:relative;z-index:2}
.kit h1{margin:0;font:400 54px/1 var(--fd);letter-spacing:.04em;color:var(--goldhi);text-shadow:0 0 24px rgba(240,194,88,.35)}
.kit .kit-sub{margin:10px 0 40px;font-size:19px;color:var(--bone2)}
.kit h2{margin:0 0 20px;font:400 24px/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;color:#d9f5b8}
.kit-sec{margin-bottom:34px}
.matrix{display:grid;grid-template-columns:150px repeat(5,150px);gap:16px 18px;align-items:center}
.matrix .mh{font:800 13px/1.2 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-align:center}
.matrix .rh{font:400 18px/1.2 var(--fd);letter-spacing:.06em;text-transform:uppercase;color:var(--bone)}
.matrix .rh small{display:block;margin-top:4px;font:italic 500 14px var(--fb);letter-spacing:0;text-transform:none;color:var(--mute)}
.kit-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.kit-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.kit-cap{font-size:13.5px;color:var(--mute);margin-top:8px}

/* ============ INTÉGRATION ============ */
/* Tout conteneur de contenu du site doit passer au-dessus du décor fixe (.bg, z-index 0) */
.mdc-layer{position:relative;z-index:2}
.rq-slot{position:relative}