/* SG RUN 2 · SpiritGamer. Style « autocollant de BD » : contours noirs épais,
   ombres pleines décalées, jaune et orange vifs. Polices hébergées avec le jeu :
   Bangers et Lilita One (SIL Open Font License). */
@font-face{font-family:SGRBangers;src:url('bangers.woff2?v=2.0.0') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SGRLilita;src:url('lilita.woff2?v=2.0.0') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{--encre:#141022;--jaune:#ffd31a;--orange:#ff7a1a;--rose:#ff3d8b;--cyan:#1ec8ff;--vert:#3ddc6a;--papier:#fffdf4}
html,body{margin:0;height:100%;overflow:hidden;background:#141022}
.sgr-body{margin:0;background:#141022}
#sgr-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;background:#141022}
.sgr{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#141022;
  font-family:SGRLilita,'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;color:var(--encre);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
/* téléphone tenu droit : la scène tourne d'un quart de tour, le joueur tourne son téléphone */
.sgr.tourne{transform:rotate(90deg) translateY(-100%);transform-origin:top left}
.sgr *{box-sizing:border-box}
.sgr [hidden]{display:none!important}
.sgr-scene{position:relative;overflow:hidden;touch-action:none;background:#2a2a50}
.sgr-canvas{position:absolute;left:0;top:0;display:block}

/* ---------- Boutons ---------- */
.sgr-btn{position:relative;font:inherit;cursor:pointer;border:calc(var(--u)*.6) solid var(--encre);border-radius:calc(var(--u)*2.2);
  display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);color:var(--encre);
  box-shadow:0 calc(var(--u)*1) 0 var(--encre);transition:transform .07s,box-shadow .07s;touch-action:manipulation}
.sgr-btn:active{transform:translateY(calc(var(--u)*.8));box-shadow:0 calc(var(--u)*.2) 0 var(--encre)}
.sgr-btn:focus-visible{outline:calc(var(--u)*.6) solid var(--cyan);outline-offset:calc(var(--u)*.6)}
.sgr-ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sgr-jouer{font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*9);letter-spacing:.06em;padding:calc(var(--u)*1.4) calc(var(--u)*7) calc(var(--u)*1);
  background:linear-gradient(#ffe45c,var(--jaune) 45%,var(--orange));transform:rotate(-2deg);box-shadow:0 calc(var(--u)*1.2) 0 var(--encre),calc(var(--u)*1.2) calc(var(--u)*1.8) 0 rgba(20,16,34,.35)}
.sgr-jouer:active{transform:rotate(-2deg) translateY(calc(var(--u)*.9))}
.sgr-jouer .sgr-ico{stroke:var(--encre)}
.sgr-secondaire{font-size:calc(var(--u)*3.6);padding:calc(var(--u)*1.2) calc(var(--u)*2.6);background:var(--papier)}
.sgr-rond{width:calc(var(--u)*9.5);height:calc(var(--u)*9.5);padding:0;border-radius:50%;background:var(--cyan);color:var(--encre);font-size:calc(var(--u)*4.4)}
.sgr-rond.off{background:#b9b6c8}
.sgr-rond.off::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:calc(var(--u)*.7);background:var(--rose);transform:rotate(-45deg);border-radius:4px}

/* ---------- Accueil ---------- */
.sgr-accueil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*5);padding:calc(var(--u)*4) calc(var(--u)*6) calc(var(--u)*7);
  background:radial-gradient(circle,rgba(20,16,34,.22) 1.5px,transparent 1.8px) 0 0/calc(var(--u)*2.2) calc(var(--u)*2.2),linear-gradient(90deg,rgba(20,16,34,.55),rgba(20,16,34,.15) 60%,rgba(20,16,34,.45))}
.sgr-acc-g{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1)}
.sgr-logo{height:calc(var(--u)*62);width:auto;filter:drop-shadow(calc(var(--u)*1) calc(var(--u)*1.4) 0 rgba(20,16,34,.6));animation:sgr-flotte 3.2s ease-in-out infinite}
.sgr-accroche{margin:0;font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*4.6);letter-spacing:.06em;color:#fff;background:var(--rose);border:calc(var(--u)*.5) solid var(--encre);padding:calc(var(--u)*.4) calc(var(--u)*2.4);transform:rotate(-3deg);box-shadow:calc(var(--u)*.8) calc(var(--u)*.8) 0 var(--encre)}
.sgr-acc-d{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2.6)}
.sgr-record{display:flex;flex-direction:column;align-items:center;min-width:calc(var(--u)*46);padding:calc(var(--u)*1.2) calc(var(--u)*3);background:var(--papier);border:calc(var(--u)*.6) solid var(--encre);border-radius:calc(var(--u)*2);box-shadow:calc(var(--u)*1) calc(var(--u)*1) 0 var(--encre);transform:rotate(1.5deg)}
.sgr-record small{font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*3.2);letter-spacing:.12em;color:var(--orange)}
.sgr-record b{font-family:SGRBangers,Impact,sans-serif;font-weight:400;font-size:calc(var(--u)*7);line-height:1;letter-spacing:.04em}
.sgr-record span{font-size:calc(var(--u)*3);color:#5a5470}
.sgr-rangee{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1.8);flex-wrap:wrap}
.sgr-aide{margin:0;max-width:calc(var(--u)*62);text-align:center;font-size:calc(var(--u)*3);color:#fff;text-shadow:0 2px 0 var(--encre),0 0 6px var(--encre)}
.sgr-lien{font-size:calc(var(--u)*3.2);color:#fff;text-decoration:none;text-shadow:0 2px 0 var(--encre);padding:calc(var(--u)*.8) calc(var(--u)*1.6)}
.sgr-lien:focus-visible{outline:2px solid var(--jaune)}
.sgr-credits{position:absolute;left:0;right:0;bottom:calc(var(--u)*1.2);margin:0;text-align:center;font-size:calc(var(--u)*2.4);color:rgba(255,255,255,.75);text-shadow:0 1px 0 var(--encre)}

/* ---------- HUD ---------- */
.sgr-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--u)*2);
  padding:calc(var(--u)*2) max(calc(var(--u)*2.4),env(safe-area-inset-right)) 0 max(calc(var(--u)*2.4),env(safe-area-inset-left));pointer-events:none}
.sgr-hud .sgr-btn{pointer-events:auto}
.sgr-hud-g{display:flex;align-items:center;gap:calc(var(--u)*1.8)}
.sgr-hud .sgr-rond{width:calc(var(--u)*9);height:calc(var(--u)*9);background:var(--papier)}
.sgr-vies{display:flex;gap:calc(var(--u)*.6)}
.sgr-coeur{height:calc(var(--u)*7.5);width:auto;filter:drop-shadow(0 2px 0 var(--encre))}
.sgr-coeur.vide{filter:grayscale(1) brightness(.5);opacity:.6}
.sgr-hud-c{flex:1;max-width:calc(var(--u)*80);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1)}
.sgr-hud-monde{font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*4);letter-spacing:.08em;color:#fff;text-shadow:0 calc(var(--u)*.4) 0 var(--encre),0 0 calc(var(--u)*1) var(--encre)}
.sgr-barre{position:relative;width:100%;height:calc(var(--u)*3);background:rgba(20,16,34,.6);border:calc(var(--u)*.5) solid var(--encre);border-radius:999px}
.sgr-barre-remp{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(var(--jaune),var(--orange))}
.sgr-barre-cran{position:absolute;top:15%;bottom:15%;width:2px;background:rgba(255,255,255,.55)}
.sgr-barre-curseur{position:absolute;top:50%;width:calc(var(--u)*4.4);height:calc(var(--u)*4.4);margin:calc(var(--u)*-2.2) 0 0 calc(var(--u)*-2.2);border-radius:50%;background:var(--cyan);border:calc(var(--u)*.5) solid var(--encre)}
.sgr-hud-d{display:flex;flex-direction:column;align-items:flex-end;gap:calc(var(--u)*.6)}
.sgr-hud-score{font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*7.5);line-height:1;letter-spacing:.04em;color:var(--jaune);-webkit-text-stroke:calc(var(--u)*.35) var(--encre);text-shadow:0 calc(var(--u)*.6) 0 var(--encre)}
.sgr-hud-jaq{display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.3) calc(var(--u)*1.6) calc(var(--u)*.3) calc(var(--u)*.6);background:var(--papier);border:calc(var(--u)*.45) solid var(--encre);border-radius:999px;font-size:calc(var(--u)*4)}
.sgr-hud-jaq img{height:calc(var(--u)*5.2);width:auto}
.sgr-astuce{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--u)*24);display:flex;flex-direction:column;align-items:center;padding:calc(var(--u)*1.4) calc(var(--u)*4);
  background:var(--papier);border:calc(var(--u)*.6) solid var(--encre);border-radius:calc(var(--u)*2);box-shadow:calc(var(--u)*1) calc(var(--u)*1) 0 var(--encre);pointer-events:none;animation:sgr-pop .25s ease-out}
.sgr-astuce b{font-family:SGRBangers,Impact,sans-serif;font-weight:400;font-size:calc(var(--u)*7);letter-spacing:.06em;color:var(--orange);line-height:1}
.sgr-astuce.vol b{color:var(--rose)}
.sgr-astuce span{font-size:calc(var(--u)*3.6)}

/* ---------- Fenêtres ---------- */
.sgr-voile{position:absolute;inset:0;display:flex;overflow:auto;padding:calc(var(--u)*3);background:rgba(20,16,34,.55);touch-action:auto}
.sgr-pop{position:relative;margin:auto;min-width:calc(var(--u)*70);max-width:94%;padding:calc(var(--u)*3) calc(var(--u)*4) calc(var(--u)*3.4);background:var(--papier);
  border:calc(var(--u)*.7) solid var(--encre);border-radius:calc(var(--u)*3);box-shadow:calc(var(--u)*1.4) calc(var(--u)*1.4) 0 var(--encre);text-align:center;animation:sgr-pop .25s ease-out}
.sgr-titre{display:inline-block;margin:calc(var(--u)*-7) 0 calc(var(--u)*1.6);padding:calc(var(--u)*.6) calc(var(--u)*4);font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*7);letter-spacing:.06em;
  background:var(--jaune);border:calc(var(--u)*.6) solid var(--encre);transform:rotate(-2deg);box-shadow:calc(var(--u)*.8) calc(var(--u)*.8) 0 var(--encre)}
.sgr-pop-perdu .sgr-titre{background:var(--rose);color:#fff}
.sgr-pop-gagne .sgr-titre{background:var(--vert)}
.sgr-pop-corps{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.4);margin-bottom:calc(var(--u)*2.4)}
.sgr-pop-actions{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2)}
.sgr-pop-actions .sgr-jouer{font-size:calc(var(--u)*7)}
.sgr-sous{margin:0;font-size:calc(var(--u)*3.6);color:#4a4460}
.sgr-bilan{display:flex;align-items:center;gap:calc(var(--u)*3)}
.sgr-pose{height:calc(var(--u)*34);width:auto;filter:drop-shadow(0 calc(var(--u)*.8) 0 rgba(20,16,34,.35))}
.sgr-chiffres{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*.6);font-size:calc(var(--u)*3.6);color:#4a4460;text-align:left}
.sgr-score-final{font-family:SGRBangers,Impact,sans-serif;font-weight:400;font-size:calc(var(--u)*11);line-height:1;color:var(--encre);letter-spacing:.03em}
.sgr-nouveau{font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*4.6);color:var(--orange);letter-spacing:.08em;animation:sgr-bat .8s ease-in-out infinite}
.sgr-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*1.6)}
.sgr-carte{position:relative;width:calc(var(--u)*24);height:calc(var(--u)*16);border:calc(var(--u)*.55) solid var(--encre);border-radius:calc(var(--u)*1.6);background:#556 center/cover;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:calc(var(--u)*.8);font:inherit;color:#fff;box-shadow:0 calc(var(--u)*.7) 0 var(--encre);overflow:hidden}
.sgr-carte b{position:absolute;top:calc(var(--u)*.6);left:calc(var(--u)*.8);font-family:SGRBangers,Impact,sans-serif;font-weight:400;font-size:calc(var(--u)*5.4);color:var(--jaune);-webkit-text-stroke:calc(var(--u)*.25) var(--encre)}
.sgr-carte span{font-size:calc(var(--u)*2.8);background:rgba(20,16,34,.75);padding:0 calc(var(--u)*.8);border-radius:4px}
.sgr-carte{cursor:default}
.sgr-carte.ferme{background:repeating-linear-gradient(45deg,#3a3550 0 10px,#2e2a42 10px 20px)}
.sgr-carte .sgr-ico{position:absolute;right:calc(var(--u)*1);top:calc(var(--u)*1);width:calc(var(--u)*5);height:calc(var(--u)*5);stroke:#fff}
.sgr-carte:not(.ferme):active{transform:translateY(calc(var(--u)*.6));box-shadow:0 calc(var(--u)*.1) 0 var(--encre)}
.sgr-carte:focus-visible{outline:calc(var(--u)*.6) solid var(--cyan)}

.sgr-tuto{position:absolute;left:0;right:0;top:calc(var(--u)*17);margin:0 auto;width:max-content;max-width:80%;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.4);
  padding:calc(var(--u)*1.6) calc(var(--u)*5);background:var(--papier);border:calc(var(--u)*.7) solid var(--encre);border-radius:calc(var(--u)*2.4);
  box-shadow:calc(var(--u)*1.2) calc(var(--u)*1.2) 0 var(--encre);pointer-events:none;text-align:center;animation:sgr-pop .25s ease-out}
.sgr-tuto b{font-family:SGRBangers,Impact,sans-serif;font-weight:400;font-size:calc(var(--u)*8);line-height:1;letter-spacing:.05em;color:var(--orange)}
.sgr-tuto span{font-size:calc(var(--u)*4.2)}
.sgr-tuto.attente{border-color:var(--encre);background:#fff6c2}
.sgr-tuto.rate b{color:var(--rose)}
.sgr-main{position:absolute;left:62%;top:52%;width:calc(var(--u)*12);height:calc(var(--u)*15);pointer-events:none;filter:drop-shadow(0 calc(var(--u)*.6) 0 rgba(20,16,34,.4))}
.sgr-main svg{position:relative;z-index:1;width:100%;height:100%}
.sgr-main-onde{position:absolute;left:18%;top:-8%;width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;border:calc(var(--u)*.7) solid var(--jaune);opacity:0}
.sgr-main.tap{animation:sgr-tape 1s ease-in-out infinite}
.sgr-main.tap .sgr-main-onde{animation:sgr-onde 1s ease-out infinite}
.sgr-main.glisse{animation:sgr-glisse 1.3s ease-in-out infinite}
.sgr-passer{position:absolute;right:calc(var(--u)*2.4);bottom:calc(var(--u)*3);font-size:calc(var(--u)*3.2);padding:calc(var(--u)*.8) calc(var(--u)*2.4)}
@keyframes sgr-tape{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(calc(var(--u)*2)) scale(.92)}}
@keyframes sgr-onde{0%,35%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes sgr-glisse{0%{transform:translateY(calc(var(--u)*-4));opacity:0}15%{opacity:1}70%{transform:translateY(calc(var(--u)*9));opacity:1}100%{transform:translateY(calc(var(--u)*9));opacity:0}}
@keyframes sgr-flotte{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(calc(var(--u)*-1.6)) rotate(1deg)}}
@keyframes sgr-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes sgr-bat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.sgr-main,.sgr-main-onde,.sgr-logo,.sgr-nouveau,.sgr-pop,.sgr-astuce{animation:none}}
/* code secret */
.sgr-code-ecran{margin:0;font-family:SGRBangers,Impact,sans-serif;font-size:calc(var(--u)*7);letter-spacing:.1em;color:var(--encre)}
.sgr-pave{display:grid;grid-template-columns:repeat(3,calc(var(--u)*11));gap:calc(var(--u)*1.2)}
.sgr-pave-mondes{grid-template-columns:repeat(5,calc(var(--u)*9))}
.sgr-touche{font-size:calc(var(--u)*4.6);padding:calc(var(--u)*.8) 0;background:var(--papier)}
.sgr-pop-code .sgr-pop-corps,.sgr-pop-codes .sgr-pop-corps{margin-bottom:calc(var(--u)*1.4)}