@font-face{font-family:'Poppins';src:url(../fonts/poppins-bold.woff) format('woff');font-weight:600 900;font-display:swap}
@font-face{font-family:'Poppins';src:url(../fonts/poppins-medium.woff) format('woff');font-weight:300 599;font-display:swap}
:root{--u:1px;--ink:#3a2a8a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#1b1050;font-family:Poppins,'Arial Rounded MT Bold',system-ui,-apple-system,sans-serif;color:#fff;touch-action:manipulation;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;padding:0;margin:0}
img{-webkit-user-drag:none}
#app{position:fixed;inset:0;overflow:hidden}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- décor ---------- */
#world{position:absolute;inset:0;overflow:hidden}
.sky{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.s-dusk{background:linear-gradient(180deg,#160c58 0%,#432aa6 30%,#a73fa0 60%,#ff8a6e 86%,#ffc47d 100%)}
.s-day{background:linear-gradient(180deg,#2b82ff 0%,#58b4ff 36%,#a3e3ff 68%,#e4fbff 100%)}
.s-candy{background:linear-gradient(180deg,#6f55f5 0%,#cf67ff 34%,#ff8ac4 66%,#ffd3a0 100%)}
.s-night{background:linear-gradient(180deg,#050530 0%,#171468 38%,#472b99 74%,#7a3eaf 100%)}
.s-meadow{background:linear-gradient(180deg,#32aeff 0%,#78dcff 46%,#d4ffe0 100%)}
.th-dusk .s-dusk,.th-day .s-day,.th-candy .s-candy,.th-night .s-night,.th-meadow .s-meadow{opacity:1}
.stars{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.th-dusk .stars{opacity:.9}.th-night .stars{opacity:1}.th-candy .stars{opacity:.35}
.stars i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.8);animation:twinkle ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.glow{position:absolute;inset:0;opacity:0;transition:opacity 1s;background:radial-gradient(ellipse at 50% 100%,rgba(255,196,120,.5),transparent 62%)}
.th-dusk .glow{opacity:1}
.orb{position:absolute;right:7%;top:5%;width:calc(118*var(--u));filter:drop-shadow(0 0 28px rgba(255,236,160,.75));animation:orbfloat 7s ease-in-out infinite;pointer-events:none}
@keyframes orbfloat{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 calc(10*var(--u));rotate:4deg}}
.clouds{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;left:0;animation:drift linear infinite;filter:drop-shadow(0 8px 14px rgba(40,20,120,.22));pointer-events:none}
.th-dusk .cloud{filter:brightness(.8) saturate(1.1) hue-rotate(-20deg) drop-shadow(0 8px 14px rgba(40,20,120,.3))}
.th-night .cloud{filter:brightness(.5) saturate(1.3) hue-rotate(200deg)}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(125vw)}}
.hills{position:absolute;left:-2%;bottom:0;width:104%;height:36%;pointer-events:none}
.hills path{transition:fill 1s}
.th-dusk{--h1:#8e4cd9;--h2:#4a3dbb;--h3:#2a1d7f}.th-day{--h1:#77de7c;--h2:#3fc96d;--h3:#26a95a}.th-candy{--h1:#ff9fe0;--h2:#c97fff;--h3:#8e5cf5}.th-night{--h1:#3d319c;--h2:#281f7a;--h3:#171355}.th-meadow{--h1:#8fe56d;--h2:#53d05a;--h3:#2cb34a}
.h1{fill:var(--h1)}.h2{fill:var(--h2)}.h3{fill:var(--h3)}
.floaties b{position:absolute;bottom:-20px;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(.6px);animation:rise linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translate(30px,-110vh);opacity:0}}

/* ---------- écrans ---------- */
#screen{position:absolute;inset:0}
.shake{animation:shake .42s}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-9px) rotate(-.4deg)}35%{transform:translateX(8px) rotate(.4deg)}55%{transform:translateX(-6px)}75%{transform:translateX(4px)}}
#fx{position:absolute;inset:0;pointer-events:none;z-index:55}
#overlay-fx{position:absolute;inset:0;pointer-events:none;z-index:56;overflow:hidden}
.floattext{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:calc(28*var(--u));text-shadow:0 2px 0 rgba(0,0,0,.3),0 0 12px rgba(0,0,0,.25);animation:floatup 1.1s ease-out forwards;white-space:nowrap}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.flystar{position:absolute;width:calc(46*var(--u));height:calc(46*var(--u));margin:calc(-23*var(--u)) 0 0 calc(-23*var(--u));transition:transform .85s cubic-bezier(.55,-.25,.6,1),opacity .85s;filter:drop-shadow(0 0 10px #ffe27a)}
.flash{position:absolute;inset:0;background:#fff;animation:flash .5s forwards}
@keyframes flash{from{opacity:.7}to{opacity:0}}
.iris{position:absolute;inset:0;z-index:60;clip-path:circle(0 at var(--x) var(--y))}
.iris.close{animation:irisC .4s cubic-bezier(.65,0,.35,1) forwards}
.iris.open{animation:irisO .46s cubic-bezier(.65,0,.35,1) forwards}
@keyframes irisC{to{clip-path:circle(150vmax at var(--x) var(--y))}}
@keyframes irisO{from{clip-path:circle(150vmax at var(--x) var(--y))}to{clip-path:circle(0 at var(--x) var(--y))}}

/* ---------- boutons & puces ---------- */
.rbtn{--bg1:#ffe27a;--bg2:#ffb12e;--edge:#cf7a00;position:relative;width:calc(54*var(--u));height:calc(54*var(--u));flex:none;border:0;border-radius:50%;color:#6a3a00;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.9),rgba(255,255,255,0) 42%),linear-gradient(180deg,var(--bg1),var(--bg2));
  box-shadow:0 calc(5*var(--u)) 0 var(--edge),0 calc(11*var(--u)) calc(16*var(--u)) rgba(30,10,90,.38),inset 0 calc(-3*var(--u)) calc(6*var(--u)) rgba(0,0,0,.12),inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.55);transition:transform .08s,box-shadow .08s}
.rbtn:active{transform:translateY(calc(4*var(--u)));box-shadow:0 calc(1*var(--u)) 0 var(--edge),0 calc(4*var(--u)) calc(8*var(--u)) rgba(30,10,90,.35),inset 0 0 0 calc(2*var(--u)) rgba(255,255,255,.55)}
.rbtn .ico{width:54%;height:54%}
.rbtn.small{width:calc(44*var(--u));height:calc(44*var(--u))}
.rbtn.big{width:calc(80*var(--u));height:calc(80*var(--u))}
.rbtn.go{--bg1:#8dffb0;--bg2:#1fd16a;--edge:#0c8c45;color:#04532a}
.rbtn.homebtn,.rbtn.back{--bg1:#ffb3d6;--bg2:#ff4f9c;--edge:#b02466;color:#fff}
.rbtn.blue{--bg1:#9fe0ff;--bg2:#2f8bff;--edge:#1559b8;color:#fff}
.rbtn.violet{--bg1:#d5b3ff;--bg2:#8b4dff;--edge:#5427b8;color:#fff}
.rbtn.off{opacity:.7;filter:saturate(.4)}
.rbtn.off::after{content:'';position:absolute;left:18%;right:18%;top:50%;height:calc(4*var(--u));background:#ff3d71;border-radius:4px;transform:rotate(-45deg);box-shadow:0 0 0 2px #fff}
.rbtn img{width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.rbtn em{position:absolute;right:-4px;top:-4px;min-width:calc(20*var(--u));height:calc(20*var(--u));padding:0 4px;border-radius:99px;background:#ff3d71;color:#fff;font-style:normal;font-weight:700;font-size:calc(12*var(--u));display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.rbtn .ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.rbtn .ring circle{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:107;stroke-dashoffset:107;opacity:0}
.rbtn.holding .ring circle{opacity:1;animation:ringfill .9s linear forwards}
@keyframes ringfill{to{stroke-dashoffset:0}}
.pill{border:0;border-radius:99px;padding:calc(12*var(--u)) calc(22*var(--u));font-weight:700;font-size:calc(16*var(--u));background:#fff;color:var(--ink);box-shadow:0 calc(4*var(--u)) 0 rgba(0,0,0,.18)}
.pill.danger{background:#ffe1e8;color:#c21f4d}
.chip{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(44*var(--u));padding:0 calc(16*var(--u)) 0 calc(8*var(--u));border-radius:99px;font-weight:700;font-size:calc(21*var(--u));
  background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.14));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 calc(6*var(--u)) calc(14*var(--u)) rgba(30,10,90,.3);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.chip img{width:calc(32*var(--u));height:calc(32*var(--u));filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.chip.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.22)}}

/* ---------- personnages ---------- */
.char{--s:150px;--ar:1;position:relative;width:calc(var(--s)*var(--ar));height:var(--s);flex:none;pointer-events:auto}
.c-zibou{--ar:1.0215}.c-plume{--ar:1.0595}
.cshadow{position:absolute;left:20%;right:20%;bottom:1%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,5,70,.5),transparent 70%)}
.cbody{position:absolute;inset:0;transform-origin:50% 94%;animation:breath 3.2s ease-in-out infinite}
.c-zibou .cbody{animation-delay:-1.1s}
.cstack{position:absolute;inset:0}
.char.flip .cstack{transform:scaleX(-1)}
.cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;visibility:hidden;pointer-events:none;filter:drop-shadow(0 calc(6*var(--u)) calc(8*var(--u)) rgba(20,5,70,.3))}
.cimg.on{visibility:visible}
@keyframes breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
.a-hop{animation:hop .65s cubic-bezier(.3,.7,.4,1)!important}
.a-hopbig{animation:hopbig .9s cubic-bezier(.3,.7,.4,1)!important}
.a-pop{animation:popc .6s cubic-bezier(.3,1.6,.4,1)!important}
.a-droop{animation:droop .9s ease-out!important}
.a-sway{animation:sway .52s ease-in-out infinite alternate!important}
@keyframes hop{0%{transform:scale(1,1)}18%{transform:scale(1.14,.82)}50%{transform:translateY(-26%) scale(.93,1.1)}78%{transform:translateY(0) scale(1.12,.88)}100%{transform:scale(1,1)}}
@keyframes hopbig{0%{transform:scale(1,1)}15%{transform:scale(1.16,.8)}35%{transform:translateY(-46%) scale(.9,1.14)}55%{transform:translateY(-4%) scale(1,1)}70%{transform:translateY(-20%) scale(.95,1.06)}85%{transform:translateY(0) scale(1.1,.9)}100%{transform:scale(1,1)}}
@keyframes popc{0%{transform:scale(1)}40%{transform:scale(1.26,1.18)}100%{transform:scale(1)}}
@keyframes droop{0%{transform:scale(1)}30%{transform:scale(1.06,.88)}100%{transform:scale(1)}}
@keyframes sway{from{transform:rotate(-6deg) translateY(0)}to{transform:rotate(6deg) translateY(-6%)}}
.bubble{--tx:-50%;--sx:0px;position:absolute;left:50%;bottom:90%;transform:translateX(calc(var(--tx) + var(--sx))) scale(.6);transform-origin:50% 100%;opacity:0;z-index:20;pointer-events:none;width:max-content;max-width:calc(240*var(--u));text-align:center;
  background:#fff;color:var(--ink);font-weight:700;font-size:calc(17*var(--u));line-height:1.22;text-wrap:balance;padding:calc(10*var(--u)) calc(16*var(--u));border-radius:calc(20*var(--u));
  box-shadow:0 calc(5*var(--u)) 0 rgba(60,30,140,.22),0 calc(12*var(--u)) calc(22*var(--u)) rgba(20,5,70,.3);transition:transform .28s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.bubble::after{content:'';position:absolute;left:50%;bottom:calc(-9*var(--u));width:calc(18*var(--u));height:calc(18*var(--u));background:#fff;transform:translateX(-50%) rotate(45deg);translate:calc(-1*var(--sx)) 0;border-radius:0 0 calc(5*var(--u)) 0}
.bubble.left{left:6%;--tx:0%;transform-origin:20% 100%}.bubble.left::after{left:calc(34*var(--u))}
.bubble.right{left:auto;right:6%;--tx:0%;transform-origin:80% 100%}.bubble.right::after{left:auto;right:calc(22*var(--u))}
.bubble.in{opacity:1;transform:translateX(calc(var(--tx) + var(--sx))) scale(1)}
.bubble.out{opacity:0;transform:translateX(calc(var(--tx) + var(--sx))) scale(.8)}
.bubble.big{font-size:calc(22*var(--u));max-width:calc(300*var(--u))}
.ghost{position:absolute;z-index:4;pointer-events:none}
.pos-bl{left:calc(2*var(--u));bottom:calc(-4*var(--u))}
.pos-br{right:calc(2*var(--u));bottom:calc(-4*var(--u))}
.pos-tl{left:calc(2*var(--u));top:calc(60*var(--u))}
.pos-tr{right:calc(2*var(--u));top:calc(60*var(--u))}
.pos-tl .bubble,.pos-tr .bubble{bottom:auto;top:84%;transform-origin:50% 0}
.pos-tl .bubble::after,.pos-tr .bubble::after{bottom:auto;top:calc(-9*var(--u));border-radius:calc(5*var(--u)) 0 0 0}

/* ---------- splash ---------- */
#splash{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6*var(--u));padding:20px;
  background:radial-gradient(circle at 50% 30%,rgba(130,70,230,.35),rgba(20,8,80,.78));transition:opacity .6s,transform .7s}
#splash.leaving{opacity:0;transform:scale(1.18);pointer-events:none}
.splash-title{width:calc(300*var(--u));max-width:84vw;filter:drop-shadow(0 calc(8*var(--u)) calc(12*var(--u)) rgba(20,5,70,.5));animation:titlefloat 4s ease-in-out infinite}
#splashchars{display:flex;margin-top:calc(-4*var(--u))}
#playbtn{display:none;align-items:center;gap:calc(10*var(--u));border:0;border-radius:99px;padding:calc(14*var(--u)) calc(40*var(--u)) calc(14*var(--u)) calc(30*var(--u));font-weight:700;font-size:calc(34*var(--u));color:#04532a;margin-top:calc(8*var(--u));
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),rgba(255,255,255,0) 40%),linear-gradient(180deg,#9bffb9,#22d56b);box-shadow:0 calc(8*var(--u)) 0 #0c8c45,0 calc(16*var(--u)) calc(26*var(--u)) rgba(0,0,0,.35),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.6);animation:pulse 1.4s ease-in-out infinite}
#playbtn .ico{width:calc(38*var(--u));height:calc(38*var(--u))}
#playbtn:active{transform:translateY(calc(6*var(--u)));box-shadow:0 calc(2*var(--u)) 0 #0c8c45}
#splash.ready #playbtn{display:flex;animation:pulse 1.4s ease-in-out infinite,popin .6s both}
#splash.ready #loadbar{display:none}
@keyframes pulse{0%,100%{scale:1}50%{scale:1.07}}
@keyframes popin{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
#loadbar{width:calc(200*var(--u));height:calc(14*var(--u));border-radius:99px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);overflow:hidden;margin-top:calc(14*var(--u))}
#loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe27a,#ff9ec8);border-radius:99px;transition:width .2s}
.splash-foot{position:absolute;bottom:calc(16*var(--u) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;font-weight:500;font-size:calc(13*var(--u));opacity:.85}
.splash-foot img{height:calc(26*var(--u))}
@keyframes titlefloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(calc(-7*var(--u))) rotate(.6deg)}}

/* ---------- accueil ---------- */
.home{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:calc(10*var(--u) + env(safe-area-inset-top)) calc(14*var(--u)) calc(30*var(--u));display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .5s;scrollbar-width:none}
.home::-webkit-scrollbar{display:none}
.home.in{opacity:1}
.htop{width:100%;max-width:calc(620*var(--u));display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none}
.hbtns{display:flex;gap:calc(8*var(--u))}
.hhero{display:flex;flex-direction:column;align-items:center;width:100%;flex:none;margin-top:calc(8*var(--u))}
.titlewrap{position:relative;width:calc(270*var(--u));margin-top:calc(2*var(--u))}
.title{width:100%;display:block;filter:drop-shadow(0 calc(6*var(--u)) calc(10*var(--u)) rgba(30,10,90,.45));animation:titlefloat 4s ease-in-out infinite}
.tw{position:absolute;width:calc(16*var(--u));height:calc(16*var(--u));background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:twink 2.4s ease-in-out infinite}
.tw.s1{left:8%;top:10%}.tw.s2{right:6%;top:30%;animation-delay:-.8s;scale:1.3}.tw.s3{left:44%;bottom:6%;animation-delay:-1.6s}
@keyframes twink{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.duo{display:flex;justify-content:center;margin-top:calc(-2*var(--u));position:relative}
.slot{position:relative}
.hgrid{width:100%;max-width:calc(620*var(--u));display:grid;grid-template-columns:repeat(2,1fr);gap:calc(16*var(--u));margin-top:calc(10*var(--u))}
.hfoot{margin-top:calc(22*var(--u));display:flex;align-items:center;gap:8px;opacity:.85;font-size:calc(13*var(--u));font-weight:500;flex:none}
.hfoot img{height:calc(26*var(--u))}
.tile{position:relative;height:calc(152*var(--u));border:0;border-radius:calc(28*var(--u));background:linear-gradient(160deg,var(--c1),var(--c2));overflow:visible;
  box-shadow:0 calc(8*var(--u)) 0 rgba(0,0,0,.26),0 calc(16*var(--u)) calc(22*var(--u)) rgba(20,5,80,.4),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.5);animation:tilebob 4.2s ease-in-out infinite;animation-delay:var(--d);transition:transform .1s}
.tile:active{transform:translateY(calc(6*var(--u))) scale(.97);box-shadow:0 calc(2*var(--u)) 0 rgba(0,0,0,.26),0 calc(6*var(--u)) calc(10*var(--u)) rgba(20,5,80,.4),inset 0 0 0 calc(3*var(--u)) rgba(255,255,255,.5)}
.tile.go{animation:none;transform:scale(1.08)}
.tile.wiggle{animation:wiggle .6s}
.tshine{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 40%);pointer-events:none;overflow:hidden}
.tshine::after{content:'';position:absolute;top:-20%;bottom:-20%;width:30%;left:-50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 5s ease-in-out infinite;animation-delay:calc(var(--i)*.6s)}
.tglow{position:absolute;left:50%;top:44%;width:70%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%);pointer-events:none}
.ticon{position:absolute;left:50%;top:calc(12*var(--u));width:calc(92*var(--u));height:calc(88*var(--u));object-fit:contain;translate:-50% 0;filter:drop-shadow(0 calc(8*var(--u)) calc(8*var(--u)) rgba(0,0,0,.28));animation:iconjig 3.4s ease-in-out infinite;animation-delay:var(--d);pointer-events:none}
.tname{position:absolute;left:0;right:0;bottom:calc(28*var(--u));text-align:center;font-weight:700;font-size:calc(18*var(--u));text-shadow:0 2px 0 rgba(0,0,0,.25);pointer-events:none}
.tstars{position:absolute;left:0;right:0;bottom:calc(7*var(--u));display:flex;justify-content:center;gap:calc(3*var(--u));font-size:calc(15*var(--u));line-height:1;pointer-events:none}
.tstars i{font-style:normal;color:rgba(0,0,0,.22)}.tstars i.on{color:#ffe34d;text-shadow:0 1px 0 #c98a00,0 0 8px rgba(255,230,80,.7)}
.tbadge{position:absolute;right:calc(9*var(--u));top:calc(9*var(--u));min-width:calc(30*var(--u));height:calc(30*var(--u));padding:0 6px;border-radius:99px;background:#fff;color:var(--c2);font-weight:700;font-size:calc(15*var(--u));display:grid;place-items:center;box-shadow:0 calc(3*var(--u)) 0 rgba(0,0,0,.2);pointer-events:none}
@keyframes tilebob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-5*var(--u)))}}
@keyframes iconjig{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(4deg) scale(1.06)}}
@keyframes sweep{0%,60%{left:-50%}100%{left:150%}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg) scale(1.04)}40%{transform:rotate(5deg) scale(1.04)}60%{transform:rotate(-3deg)}80%{transform:rotate(3deg)}}
body.land .home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;gap:0 calc(24*var(--u));align-content:start}
body.land .htop{grid-column:1/3;justify-self:center}
body.land .hhero{grid-column:1;grid-row:2;justify-content:center;align-self:start}
body.land .hgrid{grid-column:2;grid-row:2;grid-template-columns:repeat(auto-fill,minmax(calc(136*var(--u)),1fr));align-content:start;max-width:none;margin-top:0}
body.land .hfoot{grid-column:1/3;justify-self:center}
body.land .tile{height:calc(138*var(--u))}
body.land .titlewrap{width:calc(300*var(--u))}

/* ---------- coquille de jeu ---------- */
.gscreen{position:absolute;inset:0}
.gbar{position:absolute;left:0;right:0;top:0;height:calc(64*var(--u) + env(safe-area-inset-top));padding:calc(10*var(--u) + env(safe-area-inset-top)) calc(12*var(--u)) 0;display:flex;align-items:center;gap:calc(10*var(--u));z-index:6}
.gtitle{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(44*var(--u));padding:0 calc(16*var(--u)) 0 calc(6*var(--u));border-radius:99px;background:linear-gradient(135deg,var(--c1),var(--c2));font-weight:700;font-size:calc(17*var(--u));box-shadow:inset 0 0 0 calc(2.5*var(--u)) rgba(255,255,255,.65),0 calc(5*var(--u)) 0 rgba(0,0,0,.24);text-shadow:0 2px 0 rgba(0,0,0,.22);white-space:nowrap}
.gtitle img{width:calc(34*var(--u));height:calc(34*var(--u));object-fit:contain}
.gprog{flex:1;min-width:calc(30*var(--u));height:calc(16*var(--u));border-radius:99px;background:rgba(10,0,60,.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.4);overflow:hidden}
.gfill{height:100%;width:0;border-radius:99px;background:linear-gradient(180deg,#fff9b0,#ffcc2e 50%,#ff9d00);transition:width .6s cubic-bezier(.3,1.4,.5,1);position:relative;overflow:hidden}
.gfill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.8s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.gstage{position:absolute;left:0;right:0;bottom:0;top:calc(62*var(--u) + env(safe-area-inset-top));overflow:hidden;touch-action:none}

/* ---------- victoire ---------- */
#overlay{position:absolute;inset:0;z-index:40;display:none}
#overlay.on{display:block}
.backdrop{position:absolute;inset:0;background:rgba(15,5,60,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadein .3s}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.win{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,rgba(70,25,160,.55),rgba(14,4,58,.88));animation:fadein .4s;overflow:hidden}
.rays{position:absolute;left:50%;top:40%;width:260vmax;height:260vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,226,110,.24) 0 9deg,transparent 9deg 18deg);animation:spin 26s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 24%);mask-image:radial-gradient(circle,#000 0,transparent 24%)}
@keyframes spin{to{rotate:360deg}}
.wincard{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--u));padding:calc(14*var(--u))}
.winrow{display:flex;align-items:flex-end;justify-content:center}
.winrow .wc{margin:0 calc(-14*var(--u))}
.medal{width:calc(158*var(--u));height:calc(158*var(--u));object-fit:contain;filter:drop-shadow(0 calc(10*var(--u)) calc(16*var(--u)) rgba(0,0,0,.4));animation:medalin .9s cubic-bezier(.2,1.5,.4,1) both,medalfloat 3.2s 1s ease-in-out infinite;z-index:2}
@keyframes medalin{0%{transform:scale(0) rotate(-200deg)}100%{transform:scale(1) rotate(0)}}
@keyframes medalfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(calc(-8*var(--u))) rotate(3deg)}}
.wintitle{margin:calc(2*var(--u)) 0 0;font-size:calc(42*var(--u));line-height:1.08;text-align:center;text-wrap:balance;max-width:92vw;color:#fff;text-shadow:0 calc(3*var(--u)) 0 #e0336f,0 calc(6*var(--u)) 0 #a3194f,0 calc(12*var(--u)) calc(18*var(--u)) rgba(0,0,0,.45);animation:popin .6s .35s both}
.winsub{margin:0;font-weight:500;font-size:calc(18*var(--u));opacity:.95;text-align:center;max-width:calc(320*var(--u))}
.winstars{display:flex;gap:calc(8*var(--u));margin:calc(4*var(--u)) 0}
.wstar{width:calc(80*var(--u));height:calc(80*var(--u));position:relative}
.wstar:nth-child(2){transform:translateY(calc(-10*var(--u)))}
.wstar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.wstar .off{filter:grayscale(1) brightness(.55) opacity(.5)}
.wstar .on{opacity:0;transform:scale(2.6) rotate(-50deg);filter:drop-shadow(0 0 14px #ffe27a)}
.wstar.lit .on{opacity:1;transform:scale(1) rotate(0);transition:transform .5s cubic-bezier(.2,1.7,.4,1),opacity .2s}
.newsticker{display:flex;align-items:center;gap:calc(10*var(--u));background:rgba(255,255,255,.18);border-radius:99px;padding:calc(6*var(--u)) calc(20*var(--u)) calc(6*var(--u)) calc(6*var(--u));font-weight:700;font-size:calc(16*var(--u));transform:scale(0);transition:transform .55s cubic-bezier(.2,1.7,.4,1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.newsticker.show{transform:scale(1)}
.stk{width:calc(58*var(--u));height:calc(58*var(--u));border-radius:calc(17*var(--u));background:#fff;display:grid;place-items:center;box-shadow:0 calc(4*var(--u)) 0 rgba(0,0,0,.22);rotate:-6deg}
.stk img{width:86%;height:86%;object-fit:contain}
.winbtns{display:flex;gap:calc(22*var(--u));margin-top:calc(12*var(--u))}

/* ---------- panneaux (album, réglages) ---------- */
.panel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(94vw,calc(540*var(--u)));max-height:92%;overflow:auto;background:linear-gradient(180deg,#fff,#efe6ff);color:var(--ink);border-radius:calc(30*var(--u));padding:calc(16*var(--u));box-shadow:0 calc(14*var(--u)) calc(40*var(--u)) rgba(10,0,50,.55),inset 0 0 0 calc(3*var(--u)) #fff;animation:panelin .4s cubic-bezier(.2,1.4,.4,1);z-index:2}
@keyframes panelin{from{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:none}}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:calc(10*var(--u))}
.phead h2{margin:0;flex:1;font-size:calc(22*var(--u))}
.phead .count{font-weight:700;color:#8b4dff;background:#f0e6ff;border-radius:99px;padding:4px 12px;font-size:calc(15*var(--u))}
.agrid{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(9*var(--u))}
.sk{aspect-ratio:1;border-radius:calc(16*var(--u));background:#f1eafe;box-shadow:inset 0 0 0 calc(3*var(--u)) #e3d6ff;display:grid;place-items:center;position:relative}
.sk.own{background:linear-gradient(135deg,#fff8c9,#ffe5f4);box-shadow:inset 0 0 0 calc(3*var(--u)) #ffd86a,0 calc(3*var(--u)) 0 #e4b93d}
.sk img{width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.sk:not(.own) img{filter:brightness(0) opacity(.1)}
.sk i{position:absolute;font-style:normal;font-weight:700;font-size:calc(24*var(--u));color:#c6b5f4}
.sk.wig{animation:wiggle .6s}
.ahint{margin:calc(12*var(--u)) 0 0;text-align:center;font-weight:500;font-size:calc(13*var(--u));color:#7a6bc0}
.albumhost{position:absolute;right:calc(6*var(--u));top:calc(-70*var(--u));pointer-events:none}
.srow{display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(10*var(--u)) calc(6*var(--u));font-weight:700;font-size:calc(17*var(--u));border-bottom:2px solid #efe8ff;position:relative;cursor:pointer}
.srow .sico{width:calc(36*var(--u));height:calc(36*var(--u));border-radius:50%;background:#f0e6ff;color:#8b4dff;display:grid;place-items:center}.srow .sico .ico{width:60%;height:60%}
.srow span:nth-child(2){flex:1}
.srow input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.sw{width:calc(54*var(--u));height:calc(30*var(--u));border-radius:99px;background:#d9cff3;position:relative;transition:background .2s}
.sw::after{content:'';position:absolute;left:3px;top:3px;width:calc(24*var(--u));height:calc(24*var(--u));border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.srow input:checked~.sw{background:#33d17a}.srow input:checked~.sw::after{transform:translateX(calc(24*var(--u)))}
.sstats{display:flex;justify-content:space-around;margin:calc(14*var(--u)) 0}
.sstats div{text-align:center}.sstats b{display:block;font-size:calc(28*var(--u));color:#8b4dff}.sstats span{font-size:calc(12*var(--u));font-weight:500;color:#7a6bc0}
.settings .pill{display:block;margin:0 auto}
.sfoot{text-align:center;font-weight:500;font-size:calc(12*var(--u));color:#8d80c9;margin:calc(12*var(--u)) 0 0;line-height:1.5}