@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900;1000&display=swap');
:root{font-family:'Nunito',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fff;background:#061432;font-synthesis:none;--navy:#0b1d48;--panel:#101e49df;--edge:#6389eaa6;--light:#cde8ff;--gold:#ffcc68;--orange:#ff9f55;--cell-size:0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#071734;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #fff0a6;outline-offset:3px}button:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.47}button:active:not(:disabled){transform:translateY(2px) scale(.985)}[hidden]{display:none!important}
.world{position:fixed;inset:0;z-index:-4;background:linear-gradient(#122d73b8,#081d4faa 45%,#060c23de),url('assets/royaume-2028-v12.webp') center 48%/cover no-repeat;filter:saturate(1.3);transform:scale(1.04)}.world::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,#2d60de31,transparent 52%),linear-gradient(90deg,#0d1952a3,transparent 28%,transparent 71%,#071638ba)}.starfield{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.starfield::before,.starfield::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#9fd5ff 1px,transparent 2px);background-size:127px 121px,177px 211px;background-position:28px 17px,65px 72px;opacity:.52;animation:twinkle 8s ease-in-out infinite alternate}.starfield::after{transform:translateX(90px) translateY(70px);opacity:.24;animation-delay:-4s}.float-crystal{position:fixed;z-index:-1;width:80px;filter:drop-shadow(0 0 20px #9ab6ff);opacity:.86;animation:drift 11s ease-in-out infinite;pointer-events:none}.crystal-a{top:10%;left:8%;transform:rotate(-12deg)}.crystal-b{top:17%;right:9%;width:55px;animation-delay:-5s}.crystal-c{bottom:15%;left:9%;width:52px;animation-delay:-9s}.aurora{position:fixed;z-index:-2;bottom:-22vh;left:15%;width:80%;height:43vh;pointer-events:none;background:radial-gradient(ellipse,#ff976345,transparent 57%);filter:blur(45px);animation:aurora 9s ease-in-out infinite alternate}
.app{width:min(1530px,100%);margin:auto;padding:26px 24px 32px}.glass{background:linear-gradient(165deg,#162e66e8 0%,#111f4de8 65%,#0a193fef 100%);border:1.5px solid #6796e6a8;box-shadow:inset 0 2px 2px #ffffff22,inset 0 -2px 5px #0007,0 15px 35px #020a2873;border-radius:24px;backdrop-filter:blur(12px)}.topbar{display:grid;grid-template-columns:minmax(200px,268px) minmax(0,1fr) minmax(200px,268px) 150px;gap:20px;align-items:center;animation:arrive .6s both}.score-box{min-height:100px;padding:15px 18px;display:flex;align-items:center;gap:14px}.score-cup{font-size:37px;filter:drop-shadow(0 3px 7px #fba042aa);animation:cup-breathe 5s ease-in-out infinite}.score-meta small{font-size:15px;color:#e4efff;font-weight:800}.score-meta strong{font-size:clamp(26px,2.4vw,38px);font-weight:1000;letter-spacing:.01em;line-height:1.18;display:block;white-space:nowrap;font-variant-numeric:tabular-nums}.score{position:relative}.score-float{position:absolute;color:#ffeaa0;font-size:22px;font-weight:1000;right:0;top:-25px;z-index:20;pointer-events:none;text-shadow:0 3px 12px #000;animation:score-rise 900ms both}.score-bump{animation:score-pulse .4s cubic-bezier(.23,1.4,.3,1)}.brand{text-align:center;min-width:0}.logo-wrap{display:inline-block;position:relative}.logo{font-family:'Nunito',system-ui,sans-serif;font-size:clamp(66px,7.5vw,110px);font-weight:1000;line-height:.95;margin:0;letter-spacing:-.08em;padding-right:.09em;background:linear-gradient(175deg,#fffbd0 3%,#ffcb74 40%,#ffa351 65%,#e6a3ff 94%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #fff6;filter:drop-shadow(0 7px 0 #281a68) drop-shadow(0 0 18px #7282ff99)}.logo-crown{position:absolute;font-size:40px;top:-29px;left:44%;transform:rotate(-10deg);filter:drop-shadow(0 0 10px #ffdb83)}.tag{font-size:clamp(15px,1.25vw,20px);color:#e1ecff;margin:8px 0 0;text-shadow:0 3px 8px #000a;font-weight:750}.quick-icons{display:flex;gap:10px;align-items:center;justify-content:flex-end}.round-btn{border:1px solid #849ce4a8;background:linear-gradient(#263e81e0,#13285ce0);color:#e9f1ff;width:45px;height:45px;border-radius:50%;font-size:23px;box-shadow:inset 0 2px 2px #ffffff35,0 6px 14px #050d2a99;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}.round-btn:hover{transform:translateY(-4px);box-shadow:inset 0 2px 2px #ffffff55,0 8px 15px #08112f,0 0 18px #74a5fd8c}
.badge-bar{width:min(950px,100%);margin:18px auto 19px;padding:10px 14px 11px;animation:arrive .65s .12s both;position:relative}.badge-bar::before{content:"";position:absolute;height:1px;left:15px;right:15px;top:0;background:linear-gradient(90deg,transparent,#a9caffdc,transparent)}.badge-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:8px}.badge-item{border-radius:15px;display:grid;justify-items:center;gap:1px;padding:5px 3px;min-width:0;transition:transform .25s,filter .25s;animation:badge-arrive .6s both}.badge-item:nth-child(2){animation-delay:.07s}.badge-item:nth-child(3){animation-delay:.14s}.badge-item:nth-child(4){animation-delay:.21s}.badge-item:nth-child(5){animation-delay:.28s}.badge-item:nth-child(6){animation-delay:.35s}.badge-item:nth-child(7){animation-delay:.42s}.badge-item:hover{transform:translateY(-6px) scale(1.06)}.badge-icon-wrap{width:clamp(48px,5vw,74px);height:clamp(48px,5vw,74px);display:grid;place-items:center;position:relative;filter:drop-shadow(0 6px 8px #0008)}.badge-icon-wrap img{height:100%;width:100%;object-fit:contain}.badge-item.is-unlocked .badge-icon-wrap::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#ffcb6340;filter:blur(15px);animation:badge-glow 3s ease-in-out infinite alternate}.badge-item.is-locked .badge-icon-wrap{filter:grayscale(1) brightness(.6) drop-shadow(0 3px 6px #0008)}.badge-item strong{font-size:clamp(11px,1vw,15px);font-weight:1000;white-space:nowrap}.badge-item small{font-size:10px;color:#b8c9ee}.badge-expand{display:block;margin:8px auto 0;padding:3px 10px;background:none;border:none;color:#dbe8ff;text-decoration:underline;text-underline-offset:3px;font-size:12px}.badge-expand:hover{color:#fff5c3}
.game-layout{display:grid;grid-template-columns:minmax(210px,290px) minmax(340px,1fr) minmax(235px,304px);gap:clamp(14px,2vw,24px);align-items:start}.commands{margin-top:122px;padding:13px;display:grid;gap:10px;animation:slide-left .8s .17s both}.action{height:61px;border-radius:17px;border:1px solid #718ee3a6;background:linear-gradient(#263e7f,#162c63);color:#f2f7ff;box-shadow:inset 0 2px 2px #ffffff29,inset 0 -3px 5px #06102ab3,0 6px 15px #04102f91;display:flex;align-items:center;justify-content:center;gap:12px;font-size:17px;font-weight:900;position:relative;overflow:hidden;transition:filter .25s,transform .25s,box-shadow .25s}.action::after{content:"";position:absolute;width:55%;height:155%;left:-100%;top:-25%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,#ffffff50,transparent);transition:left .5s}.action:hover:not(:disabled)::after{left:125%}.action:hover:not(:disabled){transform:translateY(-3px);box-shadow:inset 0 2px 3px #fff5,0 10px 21px #0009,0 0 18px #689cff55}.action .action-icon{font-size:25px;filter:drop-shadow(0 3px 3px #0005)}.action-primary{background:linear-gradient(180deg,#ffe18b,#ffbd60 45%,#fb9342 96%);color:#4c2b17;border:2px solid #fff1c4;font-size:18px;box-shadow:inset 0 3px 3px #fff9,0 6px 0 #a9592b,0 12px 28px #f59a5477}.action-small-count{margin-left:auto;background:#385396;border:1px solid #899cde80;box-shadow:inset 0 1px #fff3;border-radius:12px;min-width:35px;padding:5px;font-size:15px}.command-side{margin-top:15px;padding:13px 13px 15px}.progress-line{display:flex;gap:8px;justify-content:space-between;font-size:13px;color:#d4e3ff}.level-caption{display:flex;align-items:center;gap:9px}.level-icon{height:42px;width:42px;border-radius:15px;background:linear-gradient(155deg,#6b7efa,#aa61f0);display:grid;place-items:center;font-size:22px;box-shadow:0 7px 18px #4f5fe755}.level-caption span{font-size:11px;font-weight:900;letter-spacing:.13em;color:#bdd5ff}.level-caption strong{display:block;font-size:15px;font-weight:1000}.level-next{text-align:right;font-size:11px;color:#cedef6;max-width:80px}.progress-rail{height:10px;margin-top:12px;border:1px solid #7993d0a6;border-radius:20px;background:#060f2e;box-shadow:inset 0 3px 5px #000c;overflow:hidden}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#ffae54,#ffe185,#a9f8fe);box-shadow:0 0 16px #ffe3988a;transition:width .4s ease;position:relative}.progress-fill::after{content:"";position:absolute;top:0;left:-100%;width:30%;height:100%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:shimmer 3s infinite}.hint-msg{min-height:28px;padding-top:10px;color:#b8d7ff;font-size:12px;text-align:center}
.game-center{animation:rise .75s .16s both;min-width:0}.board-frame{width:min(100%,610px);margin:0 auto;padding:clamp(11px,1.6vw,20px);border-radius:52px;background:linear-gradient(140deg,#607db8,#243d85 20%,#15245c 82%,#29477f);border:2px solid #8ca8f4bb;box-shadow:inset 0 3px 5px #ffffff56,inset 0 -7px 8px #030e2c90,0 18px 0 #0b163d,0 24px 7px #070e2c,0 34px 45px #0009,0 0 45px #5873ec4f;position:relative;overflow:visible}.board-frame::before{content:"";position:absolute;inset:8px;border-radius:44px;border:1px solid #fff3;pointer-events:none}.board-wrap{position:relative;isolation:isolate;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none}.board{position:relative;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:clamp(7px,1.2vw,12px);padding:clamp(7px,1vw,12px);border-radius:37px;background:linear-gradient(145deg,#071632,#102857 50%,#081632);box-shadow:inset 0 5px 13px #000a,inset 0 -2px 3px #98b9ff4a,0 1px 0 #ffffff20}.board::before{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #7294f77d;border-radius:37px;box-shadow:inset 0 2px 2px #b8d2ff36}.cell{--lift:3px;--side:#ad8b69;position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:clamp(10px,1.3vw,18px);font-size:clamp(24px,3.4vw,49px);font-weight:1000;line-height:1;letter-spacing:-.07em;background:linear-gradient(150deg,#243e81,#172850);color:transparent;box-shadow:inset 0 2px 6px #000b,inset 0 -2px 2px #ffffff10}.cell[data-v]:not([data-v="0"]){z-index:2;background:var(--face);color:#fff;text-shadow:0 2px 3px #0003,0 -1px #fff5;box-shadow:inset 0 3px 2px #ffffffbd,inset 0 -2px 3px #fff3,0 calc(var(--lift) + 2px) 0 #2a25316b,4px calc(var(--lift) + 7px) 12px #040a2380,0 0 0 2px #ffffff8c;transform:translateY(calc(var(--lift) * -.25));}.cell[data-v]:not([data-v="0"])::before{content:"";position:absolute;z-index:-1;left:1px;right:1px;top:8px;bottom:calc(-1 * var(--lift));border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--side),#fff 17%),var(--side) 75%,color-mix(in srgb,var(--side),#000 10%));box-shadow:inset 2px 0 2px #fff3,inset -3px 0 5px #0004}.cell[data-v]:not([data-v="0"])::after{content:"";position:absolute;top:2px;left:4px;right:4px;height:9px;border-radius:99px;background:linear-gradient(#ffffffe8,transparent);opacity:.6}.cell[data-v="2"]{--lift:3px;--face:linear-gradient(135deg,#fffaf6,#ffe5d8);--side:#caa89b;color:#81645b!important}.cell[data-v="4"]{--lift:5px;--face:linear-gradient(135deg,#fff2d1,#ffcca3);--side:#c58c69;color:#835d49!important}.cell[data-v="8"]{--lift:7px;--face:linear-gradient(140deg,#ffc278,#ff884a);--side:#c36638}.cell[data-v="16"]{--lift:9px;--face:linear-gradient(140deg,#ff9d67,#ff6a45);--side:#b8532e}.cell[data-v="32"]{--lift:11px;--face:linear-gradient(140deg,#ff9085,#fa574d);--side:#a63b36}.cell[data-v="64"]{--lift:13px;--face:linear-gradient(140deg,#ff63bd,#d82ba6);--side:#9e277d}.cell[data-v="128"]{--lift:15px;--face:linear-gradient(140deg,#fff7a0,#ffbb45);--side:#bb7829;color:#fff!important;text-shadow:0 3px 3px #9f601f!important}.cell[data-v="256"]{--lift:17px;--face:linear-gradient(140deg,#ff9a94,#eb2fba);--side:#a22e91}.cell[data-v="512"]{--lift:19px;--face:linear-gradient(140deg,#ffe887,#ff9940);--side:#b96b2e}.cell[data-v="1024"]{--lift:21px;--face:linear-gradient(140deg,#ffa196,#ed384f);--side:#ad263d;font-size:clamp(21px,2.8vw,39px)}.cell[data-v="2048"],.cell[data-v="2028"]{--lift:23px;--face:linear-gradient(140deg,#b892ff,#7356fc);--side:#4f35a5;font-size:clamp(21px,2.8vw,39px);box-shadow:inset 0 3px 2px #ffffffbf,0 19px 0 #31246b,0 0 20px #c77bfffa!important}.cell[data-v="4096"],.cell[data-v="8192"],.cell[data-v="16384"],.cell[data-v="32768"],.cell[data-v="65536"]{--lift:25px;--face:linear-gradient(140deg,#86d8ff,#654cf6);--side:#422db1;font-size:clamp(17px,2.4vw,32px)}.board.in-motion .cell[data-v]:not([data-v="0"]){background:#102755;color:transparent!important;text-shadow:none;box-shadow:inset 0 2px 6px #0007;transform:none}.board.in-motion .cell[data-v]:not([data-v="0"])::before,.board.in-motion .cell[data-v]:not([data-v="0"])::after{display:none}.tile-fly{position:absolute;z-index:15;display:grid;place-items:center;pointer-events:none;will-change:transform;transition:transform 170ms cubic-bezier(.22,.8,.22,1)}.tile-fly[data-v]:not([data-v="0"]){transform:none}.tile-fly::before{bottom:-10px!important}.cell.appear{animation:tile-appear .23s cubic-bezier(.2,1.45,.3,1) both}.cell.merge{animation:tile-merge .29s cubic-bezier(.25,1.5,.3,1) both;z-index:8}.board-spark{pointer-events:none;position:absolute;inset:-7px;z-index:3;border-radius:44px;border:2px solid #93b8ff44;box-shadow:0 0 35px #6597ff4f;animation:board-breathe 4s ease-in-out infinite alternate}.game-label{text-align:center;font-size:12px;font-weight:900;letter-spacing:.17em;color:#d5e2ff;margin:29px auto 0;text-transform:uppercase;text-shadow:0 2px 5px #000a}.gamepad{display:none;justify-content:center;gap:7px;margin:15px auto}.gamepad>div{display:grid;justify-items:center;gap:7px}.gamepad .horizontal{display:flex;gap:7px}.gamepad button{width:56px;height:45px;background:linear-gradient(#284e9f,#152f6a);border:1px solid #7da4ef;border-radius:13px;color:#fff;font-size:23px;box-shadow:inset 0 1px 2px #fff4,0 4px 9px #0008}
.leader-panel{min-height:600px;padding:14px;animation:slide-right .8s .22s both;position:relative}.leader-head{display:flex;align-items:center;gap:13px;font-size:clamp(20px,1.7vw,28px);font-weight:1000;margin:0 0 15px 3px}.cup{font-size:30px;filter:drop-shadow(0 0 9px #f6b75cb0)}.leader-cols,.leader-list li{display:grid;grid-template-columns:37px minmax(0,1fr) 75px;gap:5px;align-items:center}.leader-cols{padding:9px 6px;background:#132652be;border:1px solid #678ad24d;border-radius:11px;color:#c5d7ff;font-size:12px}.leader-cols :last-child{text-align:right}.leader-list{list-style:none;display:grid;gap:2px;max-height:550px;overflow-y:auto;margin:0;padding:6px 0;scrollbar-color:#6b8bc3 #172a5d;scrollbar-width:thin}.leader-list li{padding:6px;border-bottom:1px solid #86a4e02e;font-size:14px;transition:background .2s,transform .2s;animation:rank-appear .45s both}.leader-list li:hover{background:#6385c42d;transform:translateX(2px)}.leader-list li:nth-child(1){color:#ffe8ad;font-weight:1000}.leader-list li:nth-child(2){color:#e5eeff;font-weight:900}.leader-list li:nth-child(3){color:#ffd0aa;font-weight:900}.rank{height:24px;width:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;background:linear-gradient(#2d4577,#152752);box-shadow:inset 0 1px 1px #fff2}.leader-list li:nth-child(1) .rank{background:linear-gradient(#ffe16a,#cc8e18);color:#5c320c}.leader-list li:nth-child(2) .rank{background:linear-gradient(#fff,#94b9d6);color:#234065}.leader-list li:nth-child(3) .rank{background:linear-gradient(#ffcf92,#b86c35);color:#5e2c18}.nick{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.leader-list strong{white-space:nowrap;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}.leader-foot{font-size:12px;color:#c1d4f6;text-align:center;margin:8px 0}.leader-cta{border:1px solid #789deeaa;color:#e7f1ff;background:linear-gradient(#254e9a,#18336e);width:100%;border-radius:11px;font-size:13px;font-weight:850;padding:10px;box-shadow:inset 0 1px 2px #fff3}.leader-cta:hover{filter:brightness(1.2)}.save-score{display:grid;gap:7px;margin:0 0 10px;padding:11px;border-radius:15px;background:#19316c99;border:1px solid #6b88d47a}.save-score label{font-size:12px;font-weight:800}.save-row{display:flex;gap:7px}.save-row input{min-width:0;flex:1;width:100%;padding:9px 10px;border-radius:10px;border:1px solid #7497ea96;background:#0b1d4b;color:#fff;font-size:13px}.save-row button{border:none;border-radius:10px;padding:8px 11px;background:linear-gradient(#ffe58d,#ffa445);color:#563010;font-weight:900;font-size:12px;white-space:nowrap}.save-msg{font-size:11px;min-height:14px;color:#d8e9ff}
.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:30;border-radius:35px;background:#081635dd;backdrop-filter:blur(7px);text-align:center;padding:16px}.overlay-card{padding:27px;border-radius:28px;background:linear-gradient(#274484,#152957);border:1px solid #a9bfff;box-shadow:0 20px 65px #0009}.overlay h2{font-size:34px;margin:0 0 8px}.overlay p{color:#dce9ff;line-height:1.5;max-width:320px;margin:0 auto 18px}.overlay-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.overlay-actions .action{height:auto;padding:12px 16px;font-size:14px}.footer{text-align:center;margin:21px 0 0;color:#d5e2ffb5;font-size:12px}
.celebration,.modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:#030b22e8;backdrop-filter:blur(11px)}.celebration-card,.modal-card{position:relative;text-align:center;width:min(100%,460px);padding:28px 22px;border-radius:30px;background:radial-gradient(circle at 50% 0,#314d93,#1a2e64 50%,#101c43);border:2px solid #ffe3a4;box-shadow:0 0 0 6px #edba6324,0 25px 80px #000d,0 0 80px #ebbf6a4b;overflow:hidden;animation:popup-in .55s cubic-bezier(.17,1.6,.32,1) both}.celebration-card::before{content:"";position:absolute;inset:-70%;background:conic-gradient(transparent,#fee09d34 20deg,transparent 44deg,transparent 95deg,#ffe09c30 115deg,transparent 135deg,transparent 220deg,#ffe09c2b 239deg,transparent 260deg);z-index:-1;animation:halo-spin 14s linear infinite}.celebration-kicker{color:#ffe0a0;font-size:13px;font-weight:1000;letter-spacing:.22em}.celebration-medal{height:118px;width:118px;margin:14px auto;display:grid;place-items:center;font-size:67px;border:5px solid #fff5d9;border-radius:50%;background:linear-gradient(140deg,#ffe9a4,#d9953d);box-shadow:0 0 0 10px #f9ba5627,0 0 55px #ffdb88b0;animation:medal-hop .8s .16s both}.celebration h2{font-size:32px;margin:12px 0 8px}.celebration-desc{font-size:16px;line-height:1.55;color:#e2ecff}.celebration-badge{display:inline-block;margin:0 auto 18px;padding:8px 14px;border-radius:40px;color:#ffe3a3;background:#f9d57d23;border:1px solid #ffdd986f;font-weight:900}.celebration-continue{display:block;margin:auto;border:none;border-radius:15px;padding:13px 25px;font-weight:1000;font-size:17px;color:#5b2d09;background:linear-gradient(#ffeaa6,#ffa341);box-shadow:0 6px 0 #b66830,0 10px 30px #e48a4977}.confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}.confetti i{position:absolute;top:-10%;left:var(--x);height:var(--h);width:var(--w);background:var(--c);border-radius:2px;opacity:0;animation:confetti-fall var(--dur) var(--delay) linear infinite}.modal-card{width:min(94vw,700px);max-height:88vh;overflow:auto;border-color:#7fa8ff;text-align:left}.modal-card h2{margin:0 0 14px;font-size:28px}.modal-close{position:absolute;right:16px;top:14px;color:white;border:1px solid #97b3e5;background:#203e83;font-size:21px;border-radius:50%;width:34px;height:34px}.allbadges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.modal .badge-item{background:#1d3976;border:1px solid #7897d96d;padding:10px 7px}.modal .badge-icon-wrap{height:56px;width:56px}.modal-leader{margin:0;padding:0 0 0 25px;columns:2;column-gap:24px;line-height:1.8}.modal-leader li{break-inside:avoid;font-size:14px}.modal-leader strong{float:right}.modal p{color:#d9e6ff;line-height:1.6}.modal-card label{display:block;font-weight:900;font-size:13px}.modal-card input[type=checkbox]{accent-color:#ffca69}.modal-card .action{width:100%;margin-top:10px}.helper-detail{display:grid;gap:11px}.helper-detail kbd{padding:2px 6px;background:#273c7a;border:1px solid #819bdf;border-radius:5px}
@keyframes arrive{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}@keyframes rise{from{opacity:0;transform:translateY(35px) scale(.97)}to{opacity:1;transform:none}}@keyframes slide-left{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:none}}@keyframes slide-right{from{opacity:0;transform:translateX(35px)}to{opacity:1;transform:none}}@keyframes badge-arrive{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}@keyframes drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:10px -28px;rotate:13deg}}@keyframes twinkle{to{opacity:.13;transform:translateY(-13px)}}@keyframes aurora{to{transform:translateX(-8%);opacity:.65}}@keyframes cup-breathe{50%{transform:scale(1.08);filter:drop-shadow(0 3px 13px #ffd081bb)}}@keyframes badge-glow{to{filter:blur(7px);opacity:.36;transform:scale(1.18)}}@keyframes shimmer{to{left:150%}}@keyframes tile-appear{from{opacity:.15;scale:.25}65%{opacity:1;scale:1.17}to{scale:1}}@keyframes tile-merge{0%{scale:1}48%{scale:1.23}100%{scale:1}}@keyframes board-breathe{to{box-shadow:0 0 56px #809dff55}}@keyframes popup-in{from{opacity:0;transform:translateY(35px) scale(.74)}to{opacity:1;transform:none}}@keyframes medal-hop{0%{scale:.1;rotate:-40deg;opacity:0}70%{scale:1.17;rotate:8deg;opacity:1}100%{scale:1;rotate:0deg}}@keyframes halo-spin{to{transform:rotate(360deg)}}@keyframes confetti-fall{0%{transform:translateY(-5vh) rotate(0);opacity:1}85%{opacity:1}100%{transform:translateY(110vh) translateX(var(--drift)) rotate(var(--spin));opacity:0}}@keyframes score-rise{0%{opacity:0;transform:translateY(12px)}25%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}@keyframes score-pulse{50%{transform:scale(1.13)}}@keyframes rank-appear{from{opacity:0;transform:translateX(11px)}to{opacity:1;transform:none}}
@media(max-width:1190px){.topbar{grid-template-columns:190px 1fr 190px 135px;gap:11px}.game-layout{grid-template-columns:minmax(190px,245px) minmax(330px,1fr) minmax(205px,255px);gap:11px}.app{padding:18px 12px}.commands{margin-top:95px}.action{font-size:14px;height:54px}.cell{font-size:clamp(27px,3vw,44px)}.badge-bar{max-width:800px}.leader-list li{font-size:12px}.leader-list strong{font-size:12px}}
@media(max-width:940px){.topbar{grid-template-columns:1fr 1fr;gap:8px}.brand{grid-column:1/-1;grid-row:1}.score-box{min-height:78px;padding:10px 13px}.score-cup{font-size:27px}.score-meta strong{font-size:25px}.quick-icons{grid-column:1/-1;justify-content:center}.badge-bar{margin:12px auto}.game-layout{grid-template-columns:minmax(0,1fr) minmax(225px,300px);gap:15px;align-items:start}.game-center{grid-column:1}.commands{grid-column:1/-1;grid-row:2;margin:5px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}.commands .action{font-size:12px;min-height:55px;height:auto;padding:10px 6px}.commands .action-icon{font-size:20px}.command-side{grid-column:1/-1;margin:0}.leader-panel{grid-column:2;grid-row:1;margin:0}.board-frame{max-width:610px}.leader-list{max-height:505px}}
@media(max-width:665px){.app{padding:14px 10px 26px}.topbar{gap:9px}.quick-icons{display:none}.logo{font-size:66px}.logo-crown{font-size:27px;top:-18px}.tag{font-size:13px}.score-box{min-height:65px;padding:8px;gap:8px}.score-cup{font-size:24px}.score-meta small{font-size:10px}.score-meta strong{font-size:21px}.badge-bar{padding:8px;margin:11px auto}.badge-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}.badge-icon-wrap{height:41px;width:41px}.badge-item strong{font-size:9px}.badge-item small{display:none}.game-layout{display:flex;flex-direction:column;gap:15px}.game-center,.leader-panel,.commands{width:100%}.game-center{order:0}.commands{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}.command-side{grid-column:1/-1}.leader-panel{order:2;max-width:none;min-height:0}.leader-list{max-height:300px}.board-frame{border-radius:32px;padding:11px;box-shadow:inset 0 3px 3px #ffffff55,0 11px 0 #0b163d,0 24px 38px #0009}.board{padding:8px;gap:9px;border-radius:24px}.board::before{border-radius:24px}.cell{font-size:clamp(23px,8vw,43px);border-radius:11px}.cell[data-v="1024"],.cell[data-v="2048"]{font-size:clamp(19px,6.2vw,32px)}.cell[data-v="4096"],.cell[data-v="8192"]{font-size:clamp(17px,5vw,26px)}.cell[data-v]:not([data-v="0"])::before{border-radius:10px}.board-spark{border-radius:26px}.gamepad{display:flex}.game-label{margin:21px auto 0}.allbadges{grid-template-columns:repeat(2,minmax(0,1fr))}.modal-leader{columns:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Explosion de lumière sur les grandes fusions, sans masquer le jeu */
.fusion-fx{position:absolute;z-index:17;pointer-events:none;border:2px solid #fff2a9;border-radius:50%;width:70px;height:70px;box-shadow:0 0 14px #fff8ab,0 0 32px #ffa95d;animation:fusion-wave .55s ease-out both}.fusion-spark{position:absolute;z-index:17;width:6px;height:12px;border-radius:3px;background:var(--spark-color,#ffdf8e);box-shadow:0 0 12px #ffeaa1;pointer-events:none;animation:spark-shoot .65s cubic-bezier(.1,.8,.3,1) both}@keyframes fusion-wave{from{opacity:1;transform:translate(-50%,-50%) scale(.3)}to{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}@keyframes spark-shoot{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--distance))) scale(.2)}}
@media(prefers-reduced-motion:reduce){.fusion-spark,.fusion-fx{animation:none;display:none}}
/* Plan de composition : le décor passe devant le fond du body, derrière l'UI. */
.world{z-index:0;background:linear-gradient(180deg,#08225731 0%,#061b4336 45%,#050d28b3 100%),url('assets/royaume-2028-v12.webp') center 48%/cover no-repeat;filter:saturate(1.28)}
.world::after{background:radial-gradient(ellipse at 50% 33%,#2567ef12,transparent 60%),linear-gradient(90deg,#071a4899,transparent 24%,transparent 74%,#06163b88)}
.starfield,.float-crystal{z-index:1}.aurora{z-index:1}.app{position:relative;z-index:2}

/* Les badges gardent leurs couleurs même avant déblocage : état verrouillé discret. */
.badge-item.is-locked .badge-icon-wrap{filter:saturate(.82) brightness(.83) drop-shadow(0 5px 8px #0008);opacity:.94}
.badge-item.is-locked .badge-icon-wrap::after{content:"🔒";position:absolute;right:-2px;bottom:0;font-size:11px;filter:drop-shadow(0 2px 4px #000a)}

/* === UX PREMIUM COMPACTE DESKTOP ===
   Objectif : tout le jeu utile visible sans scroll sur un écran standard. */
@media (min-width: 1100px){
  html,body{height:100%;overflow:hidden}
  .app{
    width:min(1460px,100%);
    height:100vh;
    min-height:680px;
    padding:12px 18px 10px;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:10px;
  }
  .topbar{
    grid-template-columns:210px minmax(360px,1fr) 210px 132px;
    gap:12px;
    min-height:76px;
  }
  .score-box{min-height:72px;height:72px;padding:9px 14px;border-radius:19px}
  .score-cup{font-size:30px}
  .score-meta small{font-size:12px}
  .score-meta strong{font-size:28px;line-height:1.05}
  .logo{font-size:70px}
  .logo-crown{font-size:28px;top:-20px}
  .tag{font-size:14px;margin-top:2px}
  .quick-icons{gap:8px}
  .round-btn{width:40px;height:40px;font-size:20px}

  .badge-bar{
    width:100%;max-width:none;
    margin:0;
    padding:7px 12px 6px;
    min-height:78px;
    border-radius:20px;
  }
  .badge-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
  .badge-item{padding:2px 2px;gap:0}
  .badge-icon-wrap{width:46px;height:46px}
  .badge-item strong{font-size:10px;line-height:1.05}
  .badge-item small{display:none}
  .badge-expand{
    position:absolute;right:14px;bottom:6px;margin:0;
    font-size:10px;text-decoration:none;opacity:.82;
  }

  .game-layout{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:220px minmax(430px,1fr) 280px;
    gap:14px;
    align-items:stretch;
  }
  .commands{
    margin:0;
    min-height:0;
    height:100%;
    padding:10px;
    gap:8px;
    align-content:start;
    border-radius:20px;
  }
  .action{height:48px;border-radius:14px;font-size:14px;gap:8px}
  .action-primary{font-size:15px}
  .action .action-icon{font-size:20px}
  .action-small-count{min-width:29px;padding:3px;font-size:12px}
  .command-side{margin-top:2px;padding:10px;border-radius:16px}
  .level-icon{width:36px;height:36px;border-radius:12px;font-size:18px}
  .level-caption span{font-size:9px}
  .level-caption strong{font-size:13px}
  .level-next{font-size:10px}
  .progress-rail{margin-top:8px;height:8px}
  .hint-msg{padding-top:7px;min-height:22px;font-size:10px}

  .game-center{
    min-height:0;height:100%;
    display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
  }
  .board-frame{
    width:min(100%, calc(100vh - 190px), 560px);
    max-width:560px;
    padding:12px;
    border-radius:38px;
    box-shadow:inset 0 3px 5px #ffffff56,inset 0 -7px 8px #030e2c90,0 11px 0 #0b163d,0 17px 6px #070e2c,0 24px 38px #0009,0 0 36px #5873ec4f;
  }
  .board-frame::before{inset:6px;border-radius:32px}
  .board{padding:8px;gap:9px;border-radius:28px}
  .board::before{border-radius:28px}
  .cell{border-radius:13px;font-size:clamp(28px,3.2vw,49px)}
  .cell[data-v="1024"],.cell[data-v="2048"]{font-size:clamp(24px,2.7vw,40px)}
  .cell[data-v="4096"],.cell[data-v="8192"]{font-size:clamp(20px,2.2vw,34px)}
  .cell[data-v]:not([data-v="0"])::before{border-radius:12px}
  .game-label,.gamepad,.footer{display:none}

  .leader-panel{
    margin:0;min-height:0;height:100%;
    padding:10px;
    border-radius:20px;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
  }
  .leader-head{font-size:22px;margin:0 0 6px 2px;gap:8px}
  .cup{font-size:24px}
  .leader-cols,.leader-list li{grid-template-columns:32px minmax(0,1fr) 68px}
  .leader-cols{padding:5px 6px;font-size:10px;border-radius:9px}
  .leader-list{max-height:none;min-height:0;padding:4px 0;gap:0}
  .leader-list li{padding:4px 5px;font-size:11px;line-height:1.15}
  .leader-list strong{font-size:11px}
  .rank{width:23px;height:20px;border-radius:6px;font-size:10px}
  .leader-foot{margin:4px 0;font-size:10px}
  .save-score{gap:4px;margin:0 0 5px;padding:7px;border-radius:11px}
  .save-score label{font-size:10px}
  .save-row{gap:4px}
  .save-row input{padding:6px 7px;border-radius:8px;font-size:11px}
  .save-row button{padding:6px 8px;border-radius:8px;font-size:10px}
  .save-msg{font-size:9px;min-height:10px}
  .leader-cta{padding:7px;font-size:10px;border-radius:9px}
}

/* Écrans desktop plus bas, typiques 1366×768 / petits portables. */
@media (min-width:1100px) and (max-height:800px){
  .app{padding-top:8px;gap:7px}
  .topbar{min-height:64px;grid-template-columns:190px minmax(330px,1fr) 190px 120px}
  .score-box{height:62px;min-height:62px;padding:7px 12px}
  .score-cup{font-size:25px}.score-meta small{font-size:10px}.score-meta strong{font-size:24px}
  .logo{font-size:58px}.logo-crown{font-size:24px;top:-17px}.tag{font-size:12px}
  .round-btn{width:36px;height:36px;font-size:18px}
  .badge-bar{min-height:66px;padding:5px 10px}
  .badge-icon-wrap{width:38px;height:38px}.badge-item strong{font-size:9px}.badge-expand{font-size:9px;bottom:4px}
  .game-layout{grid-template-columns:205px minmax(410px,1fr) 270px;gap:10px}
  .commands{padding:8px;gap:6px}.action{height:42px;font-size:12px}.action-primary{font-size:13px}.action .action-icon{font-size:18px}
  .command-side{padding:8px}.level-icon{width:32px;height:32px}.hint-msg{display:none}
  .board-frame{width:min(100%, calc(100vh - 160px), 500px);max-width:500px;padding:10px;border-radius:32px}
  .board{gap:8px;padding:7px;border-radius:24px}
  .leader-panel{padding:8px}.leader-head{font-size:19px}.leader-list li{padding:3px 4px;font-size:10px}.leader-list strong{font-size:10px}
  .leader-foot{display:none}.save-score{padding:6px}.leader-cta{padding:6px}
}



/* === FLUIDITE MOBILE/TABLETTE — PARITE DESKTOP ===
   Même rendu et mêmes animations que l'ordinateur.
   Les optimisations ci-dessous sont uniquement techniques et invisibles. */
#touch-area{
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* Composition GPU pour les éléments réellement animés. */
.tile-fly,
.cell.appear,
.cell.merge,
.fusion-fx,
.fusion-spark,
.float-crystal,
.score-cup{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.tile-fly{will-change:transform}

/* Sur tactile on garde EXACTEMENT les timings desktop. */
@media (max-width:940px), (pointer:coarse){
  .tile-fly{transition:transform 170ms cubic-bezier(.22,.8,.22,1)!important}
  .cell.appear{animation-duration:.23s}
  .cell.merge{animation-duration:.29s}
  .fusion-fx{animation-duration:.55s}
  .fusion-spark{animation-duration:.65s}
  .starfield::before,.starfield::after{animation-duration:8s}
  .float-crystal{animation-duration:11s}
  .aurora{animation-duration:9s}
  .score-cup{animation-duration:5s}
  button{touch-action:manipulation}
}

/* Important : aucune suppression d'effet sur mobile.
   On garde le backdrop, les 2 couches d'étoiles, tous les cristaux et les ombres desktop. */
@media (max-width:665px){
  .glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .world{filter:saturate(1.3);transform:scale(1.04)}
  .starfield::after{display:block}
  .crystal-c{display:block}
  .float-crystal{opacity:.86;filter:drop-shadow(0 0 20px #9ab6ff)}
  .aurora{opacity:1;filter:blur(45px)}
  .board-frame{box-shadow:inset 0 3px 5px #ffffff56,inset 0 -7px 8px #030e2c90,0 18px 0 #0b163d,0 24px 7px #070e2c,0 34px 45px #0009,0 0 45px #5873ec4f}
}


/* Badge celebration jackpot with balloons */
.celebration[data-kind='badge'] .celebration-card{animation:popup-in .55s cubic-bezier(.17,1.6,.32,1) both,badge-card-glow 1.3s .06s ease both}
.celebration[data-kind='badge'] .celebration-medal{animation:medal-hop .8s .16s both,badge-medal-pulse 1.6s .92s ease-in-out infinite}
.celebration[data-kind='badge'] .celebration-kicker{color:#fff0a8;text-shadow:0 0 12px #ffd56d99}
.confetti .balloon{position:absolute;left:var(--x);bottom:-18%;width:var(--size);height:calc(var(--size) * 1.22);border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 28%,#ffffffd6 0 9%,transparent 10%),radial-gradient(circle at 30% 30%,#ffffff92 0 18%,transparent 19%),var(--c);box-shadow:inset -10px -14px 0 #00000018,0 16px 32px #00000036;transform:translateX(-50%);opacity:0;animation:balloon-rise var(--dur) var(--delay) cubic-bezier(.22,.82,.18,1) both}
.confetti .balloon::after{content:"";position:absolute;left:50%;top:98%;width:2px;height:76px;background:linear-gradient(#fff6,#ffffff10);transform:translateX(-50%)}
.confetti .balloon::before{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:14px;background:var(--c);clip-path:polygon(50% 100%,0 0,100% 0);transform:translateX(-50%)}
.confetti .ribbon{position:absolute;top:-12%;left:var(--x);width:12px;height:116px;border-radius:18px;background:linear-gradient(180deg,var(--c),#ffffff24 55%,var(--c));opacity:0;filter:drop-shadow(0 8px 10px #00000030);animation:ribbon-swish var(--dur) var(--delay) ease-in both}
@keyframes balloon-rise{0%{opacity:0;transform:translate(-50%,16vh) scale(.6)}12%{opacity:1}60%{opacity:1}100%{opacity:.05;transform:translate(calc(-50% + var(--drift)), -90vh) rotate(calc(var(--drift) / 8)) scale(1.04)}}
@keyframes ribbon-swish{0%{opacity:0;transform:translateY(-8vh) rotate(0deg)}12%{opacity:1}100%{opacity:0;transform:translate(var(--drift),104vh) rotate(var(--spin))}}
@keyframes badge-card-glow{0%,100%{box-shadow:0 0 0 6px #edba6324,0 25px 80px #000d,0 0 80px #ebbf6a4b}35%{box-shadow:0 0 0 10px #edba6342,0 30px 95px #000d,0 0 120px #ffd76d80}70%{box-shadow:0 0 0 8px #e8aef44a,0 30px 95px #000d,0 0 120px #8fe6ff80}}
@keyframes badge-medal-pulse{50%{transform:scale(1.08);box-shadow:0 0 0 16px #f9ba5630,0 0 80px #ffdb88d0}}

/* Identité joueur + classement SQLite */
.player-card{margin:12px 14px 0;padding:12px 13px;border-radius:16px;background:linear-gradient(145deg,#182f67cc,#102453cc);border:1px solid #7897d954;text-align:center;display:grid;gap:3px}.player-card>span{font-size:10px;font-weight:1000;letter-spacing:.16em;color:#9fb9ed;text-transform:uppercase}.player-card>strong{font-size:19px;color:#ffe3a0;overflow:hidden;text-overflow:ellipsis}.player-card>small{font-size:11px;color:#bdd0f3;min-height:15px}.change-player{justify-self:center;margin-top:5px;padding:6px 10px;border-radius:10px;border:1px solid #708fd05c;background:#244486;color:#e8f0ff;font-size:11px;font-weight:900;cursor:pointer}.leader-list li.is-me{background:linear-gradient(90deg,#f0b85d2a,#8ccfff1c);box-shadow:inset 3px 0 #ffd071}.leader-empty{display:block!important;text-align:center!important;padding:18px!important;color:#9fb4dc!important}
.player-setup{position:fixed;z-index:180;inset:0;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 25%,#1d3c7ee8,#040b20f5 64%);backdrop-filter:blur(14px)}.player-setup[hidden]{display:none}.player-setup-card{position:relative;width:min(92vw,430px);padding:31px 28px 27px;text-align:center;border-radius:30px;background:radial-gradient(circle at 50% -5%,#3759a5,#192f68 52%,#0e1c43);border:2px solid #ffe0a0;box-shadow:0 28px 90px #000c,0 0 90px #dfb75d42;animation:popup-in .55s cubic-bezier(.17,1.6,.32,1) both;overflow:hidden}.player-setup-card::before{content:"";position:absolute;inset:-80%;z-index:-1;background:conic-gradient(transparent,#ffe09c2b 25deg,transparent 48deg,transparent 115deg,#8fdcff22 145deg,transparent 170deg);animation:halo-spin 16s linear infinite}.player-setup-icon{width:86px;height:86px;margin:0 auto 12px;display:grid;place-items:center;border-radius:50%;font-size:46px;background:linear-gradient(145deg,#fff2b9,#f4aa47);box-shadow:0 0 0 9px #f9c96722,0 0 46px #ffd37088}.player-setup-kicker{display:block;color:#ffe3a0;font-size:11px;font-weight:1000;letter-spacing:.18em}.player-setup h2{margin:8px 0 7px;font-size:31px}.player-setup p{margin:0 auto 18px;max-width:330px;color:#d5e3ff;line-height:1.5;font-size:14px}.player-setup form{text-align:left}.player-setup label{display:block;margin:0 0 6px;font-size:12px;font-weight:1000;color:#cbdcff}.player-setup input{box-sizing:border-box;width:100%;height:52px;border:1px solid #89aaf0;border-radius:14px;padding:0 15px;background:#0d1d47;color:white;outline:none;font-size:18px;font-weight:900;box-shadow:inset 0 4px 14px #0003}.player-setup input:focus{border-color:#ffda83;box-shadow:0 0 0 4px #ffcf6c24,inset 0 4px 14px #0003}.player-setup-help{margin:7px 2px 14px;color:#9fb5e0;font-size:10px}.player-setup button{width:100%;border:0;border-radius:15px;padding:14px 16px;color:#572c08;background:linear-gradient(#fff0b4,#ffa548);box-shadow:0 6px 0 #ad642d,0 13px 30px #d77d3c48;font-size:16px;font-weight:1000;cursor:pointer}.player-setup button:disabled{opacity:.6;cursor:wait}.player-setup-msg{min-height:19px;margin-top:10px;text-align:center;color:#ffd286;font-size:12px;font-weight:800}
@media(max-width:665px){.player-setup-card{padding:25px 20px 23px;border-radius:24px}.player-setup-icon{width:72px;height:72px;font-size:38px}.player-setup h2{font-size:26px}.player-setup input{height:50px}}

html.pseudo-required body{overflow:hidden;touch-action:none}
html.pseudo-required .app,html.pseudo-required .world,html.pseudo-required .starfield,html.pseudo-required .aurora,html.pseudo-required .float-crystal{pointer-events:none;user-select:none}
html.pseudo-required .player-setup{pointer-events:auto}


/* FIN DE PARTIE — animation PERDU */
.overlay[data-state='lose']{background:radial-gradient(circle at 50% 48%,#4b1026d9 0,#170b22ed 45%,#050716f5 100%);animation:lose-overlay-in .45s ease both;overflow:hidden}
.overlay[data-state='lose']::before{content:"";position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 70px,#ff335514 72px 75px,transparent 77px 145px);animation:lose-streaks 4s linear infinite;pointer-events:none}
.overlay[data-state='lose'] .overlay-card{position:relative;z-index:3;border:2px solid #ff6b7f;background:linear-gradient(180deg,#42172f,#1e1530 58%,#11152c);box-shadow:0 24px 80px #000c,0 0 0 7px #ff3d6220,0 0 75px #e4255352;animation:lose-card-in .62s cubic-bezier(.18,1.45,.32,1) both}
.overlay[data-state='lose'] h2{font-size:clamp(46px,7vw,74px);letter-spacing:.07em;color:#fff;text-shadow:0 3px 0 #9e1f3d,0 0 22px #ff315f,0 0 48px #ff234270;animation:lose-title .9s .12s cubic-bezier(.2,1.5,.3,1) both}
.overlay[data-state='lose'] p{font-size:17px}
.overlay[data-state='lose'] #end-restart{position:relative;z-index:5;background:linear-gradient(#ffe59a,#ff8a3c);box-shadow:0 7px 0 #a94a2c,0 12px 35px #ff663c66;cursor:pointer;pointer-events:auto}
.lose-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.lose-fx i{position:absolute;left:var(--x);top:-12%;opacity:0}
.lose-particle{width:var(--size);height:calc(var(--size)*1.8);border-radius:50%;background:linear-gradient(#ff90a4,#ff2f55 55%,#76142d);box-shadow:0 0 14px #ff315b;animation:lose-rain var(--dur) var(--delay) linear infinite}
.lose-shard{width:calc(var(--size)*1.5);height:calc(var(--size)*2.8);background:linear-gradient(145deg,#f9b0be,#ff3158 45%,#5d1024);clip-path:polygon(50% 0,100% 70%,58% 100%,0 64%);filter:drop-shadow(0 0 9px #ff315b9c);animation:lose-shard-fall var(--dur) var(--delay) linear infinite}
@keyframes lose-overlay-in{from{opacity:.25}to{opacity:1}}
@keyframes lose-streaks{to{transform:translate3d(-150px,80px,0)}}
@keyframes lose-card-in{0%{opacity:0;transform:scale(.72) translateY(30px);filter:blur(8px)}60%{opacity:1;transform:scale(1.06) translateY(-4px);filter:none}100%{transform:scale(1)}}
@keyframes lose-title{0%{opacity:0;transform:scale(2.1);filter:blur(12px)}55%{opacity:1;transform:scale(.88);filter:none}78%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes lose-rain{0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(0)}12%{opacity:.95}100%{opacity:0;transform:translate3d(var(--drift),118vh,0) rotate(var(--rot))}}
@keyframes lose-shard-fall{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0) scale(.7)}10%{opacity:1}100%{opacity:0;transform:translate3d(var(--drift),120vh,0) rotate(var(--rot)) scale(1.15)}}


/* PWA / iPhone / iPad */
html,body{min-height:100%;min-height:100dvh;overscroll-behavior:none}
body{padding-top:0;padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:#071432}
.pwa-standalone body{min-height:100dvh}
/* Sur iPhone/iPad installe : le decor monte derriere la zone systeme, sans bande vide en haut. */
.pwa-standalone .world,.pwa-standalone .starfield,.pwa-standalone .aurora{top:0!important}
.pwa-standalone .app{padding-top:max(8px,calc(env(safe-area-inset-top) * .42));padding-bottom:max(12px,env(safe-area-inset-bottom))}
.pwa-standalone .topbar{margin-top:0}
#touch-area,.board-wrap,.gamepad{-webkit-user-select:none;user-select:none;touch-action:none}
.pwa-install-hint{position:fixed;z-index:300;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:grid;grid-template-columns:54px 1fr 26px;align-items:center;gap:11px;padding:12px 40px 12px 12px;border:1px solid #9cbaff7a;border-radius:20px;background:linear-gradient(135deg,#132b66f5,#0b173df7);box-shadow:0 18px 55px #0009,0 0 32px #7597ff3d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform:translateY(140%);opacity:0;transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .3s ease;color:#fff}
.pwa-install-hint.show{transform:translateY(0);opacity:1}
.pwa-hint-icon{width:54px;height:54px;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px #0007}.pwa-hint-icon img{width:100%;height:100%;display:block}
.pwa-hint-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.pwa-hint-copy strong{font-size:15px}.pwa-hint-copy span{font-size:12px;line-height:1.35;color:#dce8ff}.pwa-share-symbol{font-size:25px;color:#8fc9ff;text-align:center}.pwa-hint-close{position:absolute;right:8px;top:7px;width:30px;height:30px;border:0;border-radius:50%;background:#ffffff12;color:#fff;font-size:22px;line-height:1}
@media (min-width:700px){.pwa-install-hint{left:50%;right:auto;width:min(560px,calc(100vw - 40px));transform:translate(-50%,140%)}.pwa-install-hint.show{transform:translate(-50%,0)}}


/* === PWA iPhone/iPad : header conçu autour de la Dynamic Island === */
.island-brand{display:flex;align-items:flex-start;justify-content:center;min-width:0;pointer-events:none}
.dynamic-island-slot{width:142px;height:40px;border-radius:999px;opacity:0;pointer-events:none}
/* Le logo 2028/couronne est volontairement supprimé : sur iPhone installé, la vraie Dynamic Island occupe cette zone. */
.pwa-standalone.ios-device .app{padding-top:0!important}
.pwa-standalone.ios-device .topbar{padding-top:0;margin-top:0}
.pwa-standalone.ios-device .island-brand{height:max(44px,env(safe-area-inset-top));align-items:flex-start}
.pwa-standalone.ios-device .dynamic-island-slot{height:max(36px,calc(env(safe-area-inset-top) - 8px));width:150px}

@media(max-width:940px){
  .topbar{grid-template-columns:1fr 1fr!important}
  .island-brand{grid-column:1/-1;grid-row:1;min-height:40px}
  .topbar>.score-box:first-child{grid-column:1;grid-row:2}
  .topbar>.score-box:nth-of-type(3){grid-column:2;grid-row:2}
  .quick-icons{grid-column:1/-1;grid-row:3}
}
@media(max-width:665px){
  .island-brand{min-height:34px}
  .dynamic-island-slot{width:126px;height:34px}
  .pwa-standalone.ios-device .island-brand{min-height:max(38px,env(safe-area-inset-top));height:max(38px,env(safe-area-inset-top))}
  .pwa-standalone.ios-device .dynamic-island-slot{width:126px;height:max(32px,calc(env(safe-area-inset-top) - 10px))}
  .pwa-standalone.ios-device .score-box{margin-top:0}
}


/* === iOS PWA v4 : aucun faux bandeau en haut === */
.island-brand,.dynamic-island-slot{display:none!important}
html.pwa-standalone.ios-device,html.pwa-standalone.ios-device body{
  margin:0!important;
  padding-top:0!important;
  min-height:100dvh;
  background:#071432;
}
html.pwa-standalone.ios-device body{
  padding-left:env(safe-area-inset-left)!important;
  padding-right:env(safe-area-inset-right)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}
html.pwa-standalone.ios-device .world,
html.pwa-standalone.ios-device .starfield,
html.pwa-standalone.ios-device .aurora{
  inset:0!important;
  top:0!important;
  min-height:100dvh!important;
}
html.pwa-standalone.ios-device .app{
  padding-top:0!important;
  margin-top:0!important;
}
html.pwa-standalone.ios-device .topbar{
  margin-top:0!important;
  padding-top:0!important;
}

/* iPhone installé : scores sur la première vraie ligne, plus aucune ligne fantôme au-dessus. */
@media (max-width:665px){
  html.pwa-standalone.ios-device .app{padding:0 8px max(18px,env(safe-area-inset-bottom))!important}
  html.pwa-standalone.ios-device .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    gap:8px!important;
    align-items:start!important;
  }
  html.pwa-standalone.ios-device .topbar>.score-box:first-child{
    grid-column:1!important;grid-row:1!important;
  }
  html.pwa-standalone.ios-device .topbar>.score-box:nth-of-type(2){
    grid-column:2!important;grid-row:1!important;
  }
  html.pwa-standalone.ios-device .score-box{
    min-height:56px!important;
    height:56px!important;
    margin-top:max(6px,calc(env(safe-area-inset-top) - 44px))!important;
    padding:7px 8px!important;
    border-radius:16px!important;
  }
  html.pwa-standalone.ios-device .score-cup{font-size:21px!important}
  html.pwa-standalone.ios-device .score-meta small{font-size:9px!important}
  html.pwa-standalone.ios-device .score-meta strong{font-size:20px!important}
  html.pwa-standalone.ios-device .quick-icons{display:none!important}
  html.pwa-standalone.ios-device .badge-bar{margin-top:8px!important}
}

/* iPad installé : logo supprimé, pas de bandeau artificiel. */
@media (min-width:666px) and (max-width:1190px){
  html.pwa-standalone.ios-device .topbar{
    grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto!important;
    gap:12px!important;
    padding-top:max(4px,calc(env(safe-area-inset-top) - 18px))!important;
  }
  html.pwa-standalone.ios-device .topbar>.score-box:first-child{grid-column:1!important;grid-row:1!important}
  html.pwa-standalone.ios-device .topbar>.score-box:nth-of-type(2){grid-column:2!important;grid-row:1!important}
  html.pwa-standalone.ios-device .quick-icons{grid-column:3!important;grid-row:1!important}
}


/* V5 — zone vide dédiée à la vraie Dynamic Island en mode PWA installé */
.ios-island-space{display:none}
@media (display-mode: standalone) and (max-width: 600px){
  .ios-island-space{
    display:block;
    height:max(48px, calc(env(safe-area-inset-top, 0px) + 12px));
    width:100%;
    background:transparent;
    pointer-events:none;
  }
  .app{padding-top:8px}
}
@supports (-webkit-touch-callout:none){
  @media (display-mode: standalone) and (max-width: 600px){
    .ios-island-space{height:max(50px, calc(env(safe-area-inset-top, 0px) + 10px))}
  }
}

/* PWA boot: no smooth restoration when iOS reopens the app. */
html.pwa-standalone,html.pwa-standalone body{scroll-behavior:auto!important}

/* UX V8 — Niveau sous les scores, badges sous le jeu */
.level-bar{
  width:min(950px,100%);
  margin:18px auto 19px;
  padding:15px 18px 17px;
  position:relative;
  animation:arrive .65s .12s both;
}
.level-bar::before{
  content:"";
  position:absolute;
  height:1px;
  left:15px;
  right:15px;
  top:0;
  background:linear-gradient(90deg,transparent,#a9caffdc,transparent);
}
.level-bar .progress-line{align-items:center}
.level-bar .level-icon{width:48px;height:48px;font-size:25px}
.level-bar .level-caption strong{font-size:17px}
.level-bar .level-next{max-width:none;font-size:12px}
.level-bar .progress-rail{height:12px;margin-top:13px}
.level-bar .hint-msg{padding-top:9px;min-height:20px}

/* La barre de badges vit désormais dans la colonne du jeu */
.game-center>.badge-bar{
  width:min(100%,610px);
  margin:16px auto 4px;
  padding:10px 12px 11px;
}
.game-center>.badge-bar .badge-icon-wrap{width:clamp(42px,4.5vw,62px);height:clamp(42px,4.5vw,62px)}
.game-center>.badge-bar .badge-item strong{font-size:clamp(9px,.9vw,13px)}

/* Plus de bloc progression dans les commandes */
.commands .command-side{display:none!important}

@media(max-width:940px){
  .level-bar{margin:12px auto 14px;padding:12px 14px 14px}
  .level-bar .level-icon{width:44px;height:44px}
  .game-center>.badge-bar{margin:14px auto 0}
}

@media(max-width:665px){
  .level-bar{margin:10px auto 13px;padding:11px 12px 12px;border-radius:18px}
  .level-bar .progress-line{gap:10px}
  .level-bar .level-icon{width:42px;height:42px;border-radius:13px}
  .level-bar .level-caption span{font-size:10px}
  .level-bar .level-caption strong{font-size:15px}
  .level-bar .level-next{font-size:10px;max-width:100px}
  .level-bar .progress-rail{height:10px;margin-top:10px}
  .level-bar .hint-msg{font-size:11px;padding-top:7px}
  .game-center>.badge-bar{margin:13px auto 0;padding:8px 6px 9px;border-radius:18px}
  .game-center>.badge-bar .badge-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
  .game-center>.badge-bar .badge-icon-wrap{width:39px;height:39px}
  .game-center>.badge-bar .badge-item{padding:3px 1px}
  .game-center>.badge-bar .badge-item strong{font-size:8px}
  .game-center>.badge-bar .badge-expand{font-size:11px;margin-top:5px}
}


/* === V9 iPhone/iPad : scroll naturel hors plateau === */
html,body{
  touch-action:pan-y;
  overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch;
}
.app,.topbar,.level-topbar,.game-layout,.game-center,.board-frame,.game-label,.commands,.badge-bar,.leader-panel,.footer{
  touch-action:pan-y;
}
/* Seule la grille de jeu intercepte les swipes directionnels. */
#touch-area,.board-wrap{
  touch-action:none!important;
  overscroll-behavior:contain;
}
/* La zone des fleches ne doit plus bloquer un glissement vertical de page. */
.gamepad{
  touch-action:pan-y!important;
}
.gamepad button,.commands button,.badge-bar button,.leader-panel button{
  touch-action:manipulation!important;
}


/* V10 — mobile/tablette : jeu uniquement au doigt, badges remontés */
@media (max-width: 940px){
  .game-center>.badge-bar{margin-top:8px!important;}
}
@media (max-width: 665px){
  .game-center>.game-label{margin-top:14px!important;margin-bottom:0!important;}
  .game-center>.badge-bar{margin-top:7px!important;}
}


/* V11 — fond vidéo animé en boucle */
.world{overflow:hidden;background:linear-gradient(180deg,#08225731 0%,#061b4336 45%,#050d28b3 100%),url('assets/royaume-2028-v12.webp') center 48%/cover no-repeat}
.world-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(1.12) brightness(.92);opacity:.92;pointer-events:none;transform:scale(1.04)}
.world::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#102a62aa 0%,#0a1a4a55 38%,#070d24cc 100%);mix-blend-mode:screen;opacity:.36;pointer-events:none}
.world::after{z-index:1}
.world-video,.world::before{z-index:0}
@media (max-width:665px){
  .world-video{transform:scale(1.07);object-position:center 50%}
}
@media (prefers-reduced-motion:reduce){
  .world-video{display:none}
}


/* V12 — Royaume magique enrichi */
.world::after{background:radial-gradient(ellipse at 50% 38%,#7db4ff18,transparent 48%),linear-gradient(180deg,#07183b2f 0%,transparent 38%,#050b23a8 100%),linear-gradient(90deg,#07163f66,transparent 22%,transparent 78%,#07163f66)}
.starfield::before,.starfield::after{opacity:.42}
.float-crystal{opacity:.70}
.aurora{opacity:.78}
@media (max-width:665px){
  .world-video{opacity:.88;filter:saturate(1.08) brightness(.90)}
  .starfield::before,.starfield::after{opacity:.32}
  .float-crystal{opacity:.62}
}


/* V15 — progression plus compacte, sans phrase d'aide permanente */
.level-bar{padding:10px 16px 11px!important;margin:10px auto 12px!important}
.level-bar .level-icon{width:40px!important;height:40px!important;font-size:21px!important;border-radius:13px!important}
.level-bar .level-caption{gap:8px!important}
.level-bar .level-caption span{font-size:10px!important}
.level-bar .level-caption strong{font-size:15px!important;line-height:1.05!important}
.level-bar .level-next{font-size:10px!important;line-height:1.15!important}
.level-bar .progress-rail{height:9px!important;margin-top:8px!important}
.level-bar .hint-msg:empty{display:none!important}
.level-bar .hint-msg:not(:empty){min-height:0!important;padding-top:6px!important;font-size:11px!important}
@media(max-width:665px){
  .level-bar{padding:8px 10px 9px!important;margin:7px auto 9px!important;border-radius:16px!important}
  .level-bar .level-icon{width:36px!important;height:36px!important;font-size:19px!important}
  .level-bar .progress-line{gap:7px!important}
  .level-bar .level-caption span{font-size:9px!important}
  .level-bar .level-caption strong{font-size:14px!important}
  .level-bar .level-next{font-size:9px!important;max-width:90px!important}
  .level-bar .progress-rail{height:8px!important;margin-top:7px!important}
}


/* V16 — layout légèrement remonté pour mieux voir les badges */
@media (min-width:1100px){
  .app{padding-top:6px!important;gap:8px!important}
  .topbar{min-height:68px!important;gap:10px!important}
  .score-box{height:66px!important;min-height:66px!important;padding:7px 12px!important}
  .level-bar{margin:8px auto 10px!important;padding:10px 14px 12px!important}
  .game-layout{gap:12px!important}
  .board-frame{width:min(100%, calc(100vh - 210px), 530px)!important;max-width:530px!important}
  .game-center>.badge-bar{margin:8px auto 0!important}
}
@media (min-width:1100px) and (max-height:800px){
  .app{padding-top:4px!important;gap:6px!important}
  .topbar{min-height:60px!important}
  .score-box{height:58px!important;min-height:58px!important}
  .level-bar{margin:6px auto 8px!important;padding:8px 12px 10px!important}
  .board-frame{width:min(100%, calc(100vh - 195px), 485px)!important;max-width:485px!important}
  .game-center>.badge-bar{margin-top:6px!important}
}


/* V17 — suppression du texte sous la barre de badges */
.badge-expand{display:none!important}


/* V20 — mode Indice supprime */
#hint,.hint-msg{display:none!important}
.commands{grid-auto-flow:row}


/* V21 — Score / Meilleur score uniformisés */
@media (min-width:941px){
  .topbar{
    display:grid!important;
    grid-template-columns:300px 300px minmax(0,1fr) auto!important;
    gap:16px!important;
    align-items:center!important;
  }
  .topbar>.score-box:first-child{
    grid-column:1!important;
    grid-row:1!important;
  }
  .topbar>.score-box:nth-of-type(2){
    grid-column:2!important;
    grid-row:1!important;
  }
  .topbar>.quick-icons{
    grid-column:4!important;
    grid-row:1!important;
    justify-self:end!important;
  }
  .topbar>.score-box{
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    height:66px!important;
    min-height:66px!important;
    padding:7px 12px!important;
  }
}

@media (max-width:940px){
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    gap:8px!important;
  }
  .topbar>.score-box:first-child{
    grid-column:1!important;
    grid-row:1!important;
  }
  .topbar>.score-box:nth-of-type(2){
    grid-column:2!important;
    grid-row:1!important;
  }
  .topbar>.score-box{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:65px!important;
    min-height:65px!important;
    margin-top:0!important;
    padding:8px 10px!important;
  }
  .topbar>.quick-icons{
    grid-column:1/-1!important;
    grid-row:2!important;
  }
}

@media (max-width:665px){
  .topbar>.score-box{
    height:58px!important;
    min-height:58px!important;
    border-radius:16px!important;
    gap:7px!important;
  }
  .score-cup{font-size:22px!important}
  .score-meta small{font-size:9px!important;white-space:nowrap}
  .score-meta strong{font-size:20px!important}
  html.pwa-standalone.ios-device .topbar>.score-box{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    margin-top:max(6px,calc(env(safe-area-inset-top) - 44px))!important;
  }
}


/* V23 — performance mobile/tablette : image fixe, UI allégée */
@media (max-width:940px){
  /* La vidéo est aussi neutralisée côté CSS par sécurité. */
  .world-video{display:none!important}
  .world{transform:none!important;filter:saturate(1.14)!important;background-position:center 48%!important}

  /* Évite les gros filtres GPU permanents sur WebKit mobile. */
  .glass{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(165deg,#162e66f2 0%,#111f4df2 65%,#0a193ff5 100%)!important}
  .overlay,.celebration,.modal,.player-setup,.pwa-install-hint{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  /* Une seule couche d'étoiles, sans recalcul continu de la seconde couche. */
  .starfield::after{display:none!important}
  .starfield::before{opacity:.28!important;animation-duration:12s!important}

  /* Deux cristaux seulement et mouvement plus lent. */
  .crystal-c{display:none!important}
  .float-crystal{opacity:.58!important;filter:drop-shadow(0 0 10px #9ab6ff)!important;animation-duration:16s!important}

  /* Aurora statique : même ambiance sans gros blur animé. */
  .aurora{animation:none!important;filter:blur(20px)!important;opacity:.48!important;transform:none!important}

  /* Ombres simplifiées autour du plateau. */
  .board-frame{box-shadow:inset 0 2px 3px #ffffff45,inset 0 -4px 6px #030e2c80,0 9px 0 #0b163d,0 16px 24px #0007,0 0 22px #5873ec30!important}
  .cell{box-shadow:inset 0 2px 2px #ffffff24,inset 0 -3px 5px #0005,0 4px 7px #0005!important}
  .badge-icon-wrap{filter:drop-shadow(0 3px 4px #0006)!important}
  .score-cup{filter:drop-shadow(0 2px 4px #fba04288)!important}

  /* Le moteur de composition se concentre sur les pièces en mouvement. */
  .board,.board-wrap,.cell,.tile-fly{transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .tile-fly{will-change:transform}
}

@media (max-width:665px){
  /* Encore un cran plus léger sur téléphone. */
  .float-crystal{display:none!important}
  .starfield::before{opacity:.22!important;animation-duration:15s!important}
  .aurora{opacity:.34!important;filter:blur(14px)!important}
  .board-frame{box-shadow:inset 0 2px 3px #ffffff3d,0 8px 0 #0b163d,0 14px 20px #0006!important}
  .celebration-card,.modal-card,.player-setup-card{box-shadow:0 16px 42px #000a!important}
  .celebration-card::before,.player-setup-card::before{animation-duration:24s!important}
  .fusion-spark{box-shadow:0 0 7px #ffeaa1!important}
}