@font-face{font-family:SGPFredoka;src:url('fredoka-700.woff2?v=2.0.0') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{--sgp-encre:#0a1220;--sgp-nuit:#0b1640;--sgp-bleu:#2f8bff;--sgp-cyan:#35e0ff;--sgp-or:#ffd23f;--sgp-vert:#39d46a;--sgp-rose:#ff4fd8;--sgp-papier:#f4f8ff;--sgp-texte:#10204a}
html,body{margin:0;height:100%;overflow:hidden;background:#0b1640}
.sgm-body{overscroll-behavior:none}
#sgm-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99990}

.sgp{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;color:#fff;font-family:SGPFredoka,'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;font-weight:700;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#0b1640}
.sgp *{box-sizing:border-box}
.sgp-ecran{position:absolute;top:0;right:0;bottom:0;left:0;display:none}
.sgp-ecran.actif{display:flex}


.sgp-btn{font:inherit;border:0;cursor:pointer;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-shadow:0 2px 0 rgba(10,18,32,.45);transition:transform .08s,box-shadow .08s,filter .15s}
.sgp-btn:focus-visible{outline:4px solid var(--sgp-or);outline-offset:3px}
.sgp-btn .sgp-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 0 rgba(10,18,32,.4))}
.sgp-jouer{background:linear-gradient(#7dffa8,#2fcf62 45%,#169a45);border-radius:999px;box-shadow:inset 0 3px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 3px var(--sgp-encre),0 7px 0 3px var(--sgp-encre),0 14px 22px rgba(0,0,0,.35)}
.sgp-jouer:active{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.65),0 0 0 3px var(--sgp-encre),0 2px 0 3px var(--sgp-encre)}
.sgp-gros{font-size:27px;letter-spacing:.04em;padding:14px 40px;min-width:230px}
.sgp-secondaire{font-size:18px;padding:10px 22px;border-radius:999px;background:linear-gradient(#6fb6ff,#2f8bff 50%,#1b5fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px var(--sgp-encre),0 5px 0 3px var(--sgp-encre)}
.sgp-secondaire:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px var(--sgp-encre),0 1px 0 3px var(--sgp-encre)}
.sgp-partage{background:linear-gradient(#7fa6ff,#3b5bdb 55%,#2a3fa8)}
.sgp-danger{background:linear-gradient(#ff8a9a,#ff4a5a 50%,#c7283a)}
.sgp-rond{width:50px;height:50px;border-radius:50%;padding:0;background:linear-gradient(#6fb6ff,#2f8bff 55%,#1b5fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px var(--sgp-encre),0 4px 0 3px var(--sgp-encre);position:relative}
.sgp-rond:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 3px var(--sgp-encre),0 1px 0 3px var(--sgp-encre)}
.sgp-rond.off{background:linear-gradient(#b7c0d4,#7d879e)}
.sgp-rond.off::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:4px;margin-top:-2px;background:#ff4a5a;border-radius:2px;transform:rotate(-45deg);box-shadow:0 0 0 2px var(--sgp-encre)}


.sgp-accueil{flex-direction:column;align-items:center;justify-content:center}
.sgp-accueil-fond{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 40%,rgba(53,224,255,.25),transparent 60%),linear-gradient(180deg,rgba(11,22,64,.35),rgba(11,22,64,.85)),url('sgm-world.webp?v=2.0.0') center/cover}
.sgp-accueil-centre{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:max(16px,env(safe-area-inset-top)) 16px 30px;width:100%;max-width:520px}
.sgp-logo{width:min(80vw,400px);max-height:46vh;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));animation:sgp-flotte 3.6s ease-in-out infinite}
.sgp-titre-texte{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.9;font-size:clamp(58px,17vw,110px);letter-spacing:.02em;transform:rotate(-4deg);animation:sgp-flotte 3.6s ease-in-out infinite}
.sgp-titre-texte span{display:block;-webkit-text-stroke:6px var(--sgp-encre);paint-order:stroke fill;text-shadow:0 7px 0 var(--sgp-encre),0 14px 26px rgba(0,0,0,.45)}
.sgp-titre-texte .sgp-titre-sg{font-size:.42em;padding:.12em .45em .08em;margin-bottom:.12em;border-radius:.3em;color:#fff;background:linear-gradient(#6fb6ff,#2f8bff 55%,#1b5fd0);-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(10,18,32,.5);box-shadow:0 0 0 5px var(--sgp-encre),0 7px 0 5px var(--sgp-encre)}
.sgp-titre-l1{color:#fff;background:none}
.sgp-titre-l2{color:var(--sgp-or)}
.sgp-accroche{margin:0;padding:8px 18px;border-radius:999px;background:rgba(10,18,32,.55);font-size:15px;letter-spacing:.03em;color:#dff6ff}
.sgp-rangee{display:flex;gap:18px;justify-content:center;margin:6px 0}
.sgp-lien{color:#bfe9ff;font-size:14px;text-decoration:none;padding:8px 12px;border-radius:12px;background:rgba(10,18,32,.35)}
.sgp-lien:focus-visible{outline:3px solid var(--sgp-or)}
.sgp-credits{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;margin:0;font-size:11px;color:rgba(223,246,255,.6);font-family:system-ui,sans-serif;font-weight:600}


.sgp-carte{display:none}
.sgp-carte.actif{display:block}
.sgp-carte-cv{position:absolute;top:0;right:0;bottom:0;left:0;display:block}
.sgp-defil{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-y}
.sgp-defil::-webkit-scrollbar{display:none}
.sgp-espace{width:100%}
.sgp-barre{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;background:linear-gradient(rgba(5,10,30,.75),rgba(5,10,30,0));pointer-events:none}
.sgp-barre>*{pointer-events:auto}
.sgp-titre-monde{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;line-height:1.1;text-shadow:0 2px 0 rgba(10,18,32,.6)}
.sgp-titre-monde small{font-size:11px;letter-spacing:.12em;color:var(--sgp-cyan)}
.sgp-titre-monde b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sgp-total{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:999px;background:rgba(10,18,32,.7);box-shadow:0 0 0 2px rgba(255,255,255,.25);font-size:18px}
.sgp-etoile-ico{width:22px;height:22px;background:var(--sgp-or);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sgp-ici{position:absolute;right:16px;bottom:max(18px,env(safe-area-inset-bottom))}
.sgp-ici .sgp-ico{width:26px;height:26px}


.sgp-jeu{flex-direction:column;align-items:center;background:linear-gradient(180deg,rgba(11,22,64,.55),rgba(11,22,64,.9)),url('sgm-world.webp?v=2.0.0') center/cover}
.sgp-jeu-fond{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;background:url('sgm-world.webp?v=2.0.0') center/cover;filter:blur(5px) brightness(.5) saturate(1.1)}
.sgp-hud,.sgp-zone,.sgp-pied{position:relative}
.sgp-hud-tete{position:relative;width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 0}
.sgp-hud-cale{width:50px;flex:none}
.sgp-pause{width:50px;height:50px;flex:none}
.sgp-hud{position:relative;width:100%;max-width:600px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px 8px}
.sgp-coups{width:86px;height:86px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:linear-gradient(#ffffff,#cfe2ff);color:var(--sgp-texte);box-shadow:0 0 0 4px var(--sgp-encre),0 5px 0 4px var(--sgp-encre)}
.sgp-coups b{font-size:38px}
.sgp-coups small{font-size:14px;color:#50608a}
.sgp-coups.peu{background:linear-gradient(#ffd0d5,#ff8a9a);animation:sgp-bat .8s ease-in-out infinite}
.sgp-objectifs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0}
.sgp-puce{position:relative;display:flex;align-items:center;gap:5px;padding:5px 12px 5px 6px;border-radius:999px;background:rgba(10,18,32,.72);box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.sgp-puce b{font-size:24px;min-width:20px;text-align:center;white-space:nowrap}
.sgp-niv-palier{font-size:14px;color:#ffd23f;letter-spacing:.06em}
.sgp-puce .sgp-ok{display:none;width:22px;height:22px;fill:none;stroke:#5dff9a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sgp-puce.fait b{display:none}
.sgp-puce.fait .sgp-ok{display:block}
.sgp-puce.fait{box-shadow:0 0 0 2px #5dff9a}
.sgp-score{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:112px}
.sgp-score b{font-size:28px;text-shadow:0 2px 0 rgba(10,18,32,.6)}
.sgp-jauge{position:relative;width:calc(100% - 16px);margin-right:14px;height:16px;border-radius:8px;background:rgba(10,18,32,.8);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.sgp-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(#fff3a0,var(--sgp-or) 50%,#f39c18);transition:width .3s}
.sgp-cran{position:absolute;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;background:#6b7690;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:transform .2s}
.sgp-cran.on{background:var(--sgp-or);transform:scale(1.2)}
.sgp-zone{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:4px 6px}
.sgp-plateau{display:block;border-radius:16px;background:rgba(5,10,30,.4);box-shadow:0 0 0 4px rgba(255,255,255,.14),0 16px 34px rgba(0,0,0,.45);touch-action:none}
.sgp-pied{width:100%;max-width:600px;display:flex;align-items:center;gap:12px;padding:8px 10px max(16px,env(safe-area-inset-bottom))}
.sgp-barre-d{display:flex;align-items:center;gap:8px}
.sgp-solde{display:flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border:0;border-radius:999px;background:rgba(10,18,32,.7);box-shadow:0 0 0 2px rgba(255,210,63,.55);color:#fff;font:700 17px SGPFredoka,Arial,sans-serif;cursor:pointer}
.sgp-solde:focus-visible{outline:3px solid var(--sgp-or)}
.sgp-piece-ico{flex:none}
.sgp-gain{display:flex;align-items:center;gap:8px;margin:0;font-size:22px;color:#b86a00}
.sgp-boutique-solde{display:flex;align-items:center;gap:10px;font-size:22px}
.sgp-boutique-liste{display:flex;flex-direction:column;gap:8px;width:100%}
.sgp-article{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:rgba(47,139,255,.1);text-align:left}
.sgp-article.vise{background:rgba(255,210,63,.3);box-shadow:0 0 0 3px var(--sgp-or)}
.sgp-article canvas{flex:none}
.sgp-article-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.sgp-article-txt b{font-size:17px}
.sgp-article-txt small{font-size:12px;color:#50608a;font-family:system-ui,sans-serif;font-weight:600}
.sgp-article-txt .sgp-article-stock{color:#1b5fd0}
.sgp-acheter{flex:none;gap:5px;padding:8px 12px;border-radius:999px;font-size:16px;background:linear-gradient(#ffe98a,#ffc43a 55%,#f39c18);color:var(--sgp-texte);text-shadow:none;box-shadow:0 0 0 2px var(--sgp-encre),0 3px 0 2px var(--sgp-encre)}
.sgp-acheter:disabled{background:#c9d0dc;color:#6b7690;cursor:default}
.sgp-niv-hud{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:24px;color:#fff;letter-spacing:.02em;text-shadow:0 2px 0 rgba(10,18,32,.7),0 0 14px rgba(53,224,255,.5)}
.sgp-boosters{flex:1;display:flex;justify-content:center;gap:10px;flex-wrap:nowrap;min-width:0}
.sgp-boost{position:relative;flex:none;width:64px;height:64px;border-radius:50%;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#ffffff,#cfe2ff 60%,#8fb6ea);box-shadow:0 0 0 3px var(--sgp-encre),0 4px 0 3px var(--sgp-encre);transition:transform .08s}
.sgp-boost:active{transform:translateY(3px)}
.sgp-boost:focus-visible{outline:4px solid var(--sgp-or);outline-offset:3px}
.sgp-boost canvas{pointer-events:none}
.sgp-boost-n{position:absolute;right:-6px;bottom:-6px;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--sgp-vert);color:#fff;font:700 16px/26px SGPFredoka,Arial,sans-serif;box-shadow:0 0 0 2px var(--sgp-encre)}
.sgp-boost.vide .sgp-boost-n{background:#7d879e}
.sgp-boost.vide canvas{opacity:.5}
.sgp-boost.ferme{background:radial-gradient(circle at 35% 30%,#b7c0d4,#7d879e)}
.sgp-boost.ferme canvas{opacity:.25;filter:grayscale(1)}
.sgp-boost-verrou{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);white-space:nowrap;padding:1px 7px;border-radius:9px;background:var(--sgp-encre);color:#fff;font:700 13px/19px SGPFredoka,Arial,sans-serif}
.sgp-boost.actif{box-shadow:0 0 0 3px var(--sgp-or),0 0 18px 4px rgba(255,210,63,.8)}
.sgp-boost.choisi{box-shadow:0 0 0 4px var(--sgp-vert),0 0 14px 3px rgba(57,212,106,.7)}
.sgp-depart{display:flex;gap:16px;justify-content:center;margin:2px 0 6px}
.sgp-cadeau{margin:0;padding:6px 12px;border-radius:12px;background:rgba(57,212,106,.16);color:#127a3a;font-size:15px}
.sgp-consigne{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 24px);padding:8px 8px 8px 14px;border-radius:16px;background:#fff;color:var(--sgp-texte);font-size:15px;box-shadow:0 0 0 3px var(--sgp-encre),0 5px 0 3px var(--sgp-encre)}
.sgp-consigne[hidden]{display:none}
.sgp-petit{font-size:14px;padding:6px 12px}
.sgp-niv-monde{font-size:13px;color:#bfe9ff;opacity:.85;flex:1;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


.sgp-voile{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;overflow-y:auto;padding:44px 14px 18px;background:rgba(4,10,30,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sgp-voile[hidden]{display:none}
.sgp-pop{position:relative;margin:auto;flex:none;width:min(100%,390px);padding:46px 20px 22px;border-radius:30px;background:linear-gradient(#ffffff,#dbe9ff);color:var(--sgp-texte);text-align:center;box-shadow:0 0 0 4px var(--sgp-encre),0 9px 0 4px var(--sgp-encre),0 24px 50px rgba(0,0,0,.5);animation:sgp-entree .32s cubic-bezier(.2,1.6,.4,1)}
.sgp-ruban{position:absolute;left:50%;top:-4px;transform:translate(-50%,-50%);white-space:nowrap;padding:10px 26px;border-radius:18px;font-size:24px;color:#fff;background:linear-gradient(#6fb6ff,#2f8bff 55%,#1b5fd0);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 4px var(--sgp-encre),0 5px 0 4px var(--sgp-encre);text-shadow:0 2px 0 rgba(10,18,32,.45)}
.sgp-pop-victoire .sgp-ruban{background:linear-gradient(#ffe98a,#ffc43a 55%,#f39c18);color:var(--sgp-texte);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.sgp-pop-defaite .sgp-ruban{background:linear-gradient(#ff9aa6,#ff4a5a 55%,#c7283a)}
.sgp-pop-corps{display:flex;flex-direction:column;align-items:center;gap:10px}
.sgp-pop-actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:18px}
.sgp-fermer{position:absolute;right:10px;top:12px;width:40px;height:40px;background:linear-gradient(#ff9aa6,#ff4a5a 55%,#c7283a)}
.sgp-fermer .sgp-ico{width:20px;height:20px}
.sgp-palier{margin:0;padding:4px 16px;border-radius:999px;color:#fff;font-size:15px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 2px var(--sgp-encre)}
.sgp-sous{margin:0;font-size:15px;color:#50608a}
.sgp-liste-obj{display:flex;flex-direction:column;gap:8px;width:100%}
.sgp-ligne-obj{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;background:rgba(47,139,255,.12);font-size:18px;text-align:left}
.sgp-ligne-obj canvas{flex:none}
.sgp-en-coups{margin:0;font-size:17px;color:#1b5fd0}
.sgp-record{margin:0;font-size:14px;color:#50608a}
.sgp-record.on{color:#e0561a;font-size:18px;animation:sgp-bat .9s ease-in-out infinite}
.sgp-mascotte{width:130px;height:auto;margin-top:-6px;filter:drop-shadow(0 8px 10px rgba(10,18,32,.25))}
.sgp-pop-victoire .sgp-mascotte{animation:sgp-flotte 1.8s ease-in-out infinite}
.sgp-score-final{margin:0;font-size:34px;color:var(--sgp-texte)}
.sgp-astuce-cv{border-radius:18px;background:linear-gradient(#16245a,#0b1640);box-shadow:0 0 0 3px var(--sgp-encre)}
.sgp-astuce-texte{margin:4px 0 0;font-size:18px;line-height:1.35}


.sgp-etoiles{display:flex;align-items:flex-end;justify-content:center;gap:6px;filter:drop-shadow(0 3px 0 var(--sgp-encre))}
.sgp-et{width:34px;height:34px;background:#b9c4da;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.sgp-etoiles.grand .sgp-et{width:58px;height:58px}
.sgp-etoiles.grand .sgp-et:nth-child(2){width:72px;height:72px;margin-bottom:10px}
.sgp-et.on{background:linear-gradient(#fff3a0,var(--sgp-or) 50%,#f39c18)}
.sgp-et.pop{animation:sgp-etoile .45s cubic-bezier(.2,1.8,.4,1)}

.sgp-bulle{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:12;padding:10px 18px;border-radius:16px;background:#fff;color:var(--sgp-texte);font-size:16px;box-shadow:0 0 0 3px var(--sgp-encre),0 5px 0 3px var(--sgp-encre);white-space:nowrap}
.sgp-bulle[hidden]{display:none}

@keyframes sgp-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sgp-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes sgp-entree{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sgp-etoile{0%{transform:scale(2.2) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}


@media (max-height:560px){
  .sgp-hud-tete{padding-top:4px}.sgp-pause{width:40px;height:40px}.sgp-hud-cale{width:40px}.sgp-niv-hud{font-size:18px}.sgp-niv-palier{font-size:12px}
  .sgp-hud{padding-top:2px;padding-bottom:2px}
  .sgp-coups{width:60px;height:60px}.sgp-coups b{font-size:26px}.sgp-coups small{font-size:11px}
  .sgp-score b{font-size:22px}
  .sgp-boost{width:52px;height:52px}
  .sgp-pied{padding-top:2px;padding-bottom:4px}
  .sgp-logo{max-height:38vh}
  .sgp-gros{font-size:22px;padding:10px 30px}
}
@media (max-width:360px){.sgp-boost{width:56px;height:56px}.sgp-boosters{gap:6px}.sgp-coups{width:74px;height:74px}.sgp-coups b{font-size:32px}.sgp-score{min-width:96px}.sgp-score b{font-size:24px}}
@media (prefers-reduced-motion:reduce){.sgp-logo,.sgp-pop-victoire .sgp-mascotte,.sgp-coups.peu,.sgp-record.on{animation:none}}
