html, body {
  margin: 0;
  height: 100%;
  background: #07040d;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  /* zones sûres (encoche, barre du bas) quand le jeu tourne en application plein écran */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Nunito, system-ui, sans-serif;
  color: #f3e9ff;
}
#stage { position: relative; overflow: hidden; box-shadow: 0 0 60px #2a0f3a; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.6em;
  box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(28, 10, 46, .86), rgba(5, 2, 10, .95));
}
.hidden { display: none; }

h1, h2 {
  font-family: Creepster, cursive;
  font-weight: 400;
  margin: 0;
  color: #9dff5c;
  text-shadow: 0 0 .3em #3f8f17, .05em .08em 0 #2a0f3a;
  letter-spacing: .04em;
}
h1 { font-size: 4.6em; line-height: .9; }
h2 { font-size: 3.2em; color: #ff7a5a; text-shadow: 0 0 .3em #8a1a0a, .05em .08em 0 #2a0f3a; }
.sub { font-family: Creepster, cursive; font-size: 1.6em; color: #ffb347; margin: .2em 0 .6em; }

.family { display: flex; align-items: flex-end; gap: .6em; margin-bottom: .4em; }
.family img { height: 5.5em; animation: bob 1.8s ease-in-out infinite; }
.family img:last-child { animation-delay: .5s; }
.family .gaston { height: 4.2em; animation-delay: .25s; }
@keyframes bob { 50% { transform: translateY(-.3em); } }

.story { font-size: 1em; line-height: 1.4; color: #d9cbee; margin: .4em 0; max-width: 24em; }
.rules { text-align: left; font-size: .92em; line-height: 1.45; padding-left: 1.2em; margin: .5em 0; color: #cbbbe0; }
.rules b { color: #fff; }
.goo { color: #9dff5c; font-weight: 800; text-shadow: 0 0 .4em #3f8f17; }

button {
  font-family: Creepster, cursive;
  font-size: 2.1em;
  padding: .2em 1.2em;
  margin-top: .5em;
  border: none;
  border-radius: .35em;
  background: #ff7a1a;
  color: #2a0f00;
  box-shadow: 0 .18em 0 #a2430a, 0 0 1em rgba(255, 122, 26, .4);
  cursor: pointer;
  letter-spacing: .05em;
}
button:hover { background: #ff9a3a; }
button:active { transform: translateY(.12em); box-shadow: 0 .06em 0 #a2430a; }
.best { font-size: .85em; color: #a99bc0; margin-top: .8em; }



.row { display: flex; gap: .6em; align-items: center; }
button.ghost { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1em; padding: .7em 1em;
  background: rgba(20, 10, 34, .9); color: #f3e9ff; box-shadow: inset 0 0 0 .12em #6a4a90; }
button.ghost:hover { background: #2a1846; }

/* Boutons d'action (icônes, sans état) : demi-cercles collés aux bords — catapultes à gauche et à droite,
   grue en bas au centre — et rotation juste au-dessus de la grue. */
#controls { position: absolute; inset: 0; pointer-events: none; font-size: 50%; }   /* tout à moitié taille */
#controls button {
  position: absolute;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: rgba(20, 10, 34, .85);
  box-shadow: inset 0 0 0 .12em #6a4a90, 0 .2em .6em rgba(0, 0, 0, .4);
  letter-spacing: 0;
}
#controls button:hover { background: #2a1846; }
/* lanceur actif : simple surbrillance, fond un peu plus clair et liseré lumineux */
#controls button.on { background: rgba(58, 38, 86, .9); box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .5), 0 0 .9em rgba(255, 255, 255, .22); }
#controls button.on img { filter: brightness(1.15); }
#controls [data-mode="catL"], #controls [data-mode="catR"] { bottom: .6em; width: 4em; height: 7.6em; }
#controls [data-mode="catL"] { left: 0; border-radius: 0 3.8em 3.8em 0; padding-right: .5em; }
#controls [data-mode="catR"] { right: 0; border-radius: 3.8em 0 0 3.8em; padding-left: .5em; }
#controls [data-mode="catL"] img, #controls [data-mode="catR"] img { width: 3.1em; height: 3.1em; }
#controls [data-mode="catL"] img { transform: scaleX(-1); }   /* catapulte gauche tournée vers la gauche, la droite vers la droite */
/* grue : demi-cercle collé en bas au centre, comme les catapultes sur les côtés */
#controls [data-mode="crane"] { bottom: 0; left: 50%; transform: translateX(-50%); width: 7.6em; height: 4em; border-radius: 3.8em 3.8em 0 0; padding-top: .5em; }
#controls [data-mode="crane"] img { width: 3.1em; height: 3.1em; }
/* rotation : pas un lanceur → simple symbole blanc translucide, sans fond */
#controls #rotBtn { bottom: 4.6em; left: 50%; transform: translateX(-50%); padding: .2em; border-radius: 50%;
  background: none; box-shadow: none; opacity: .72; transition: opacity .15s;
  filter: drop-shadow(0 .1em .25em rgba(0, 0, 0, .7)); }
#controls #rotBtn:hover { background: none; opacity: 1; }
#controls #rotBtn:active { box-shadow: none; }
#controls #rotBtn img { width: 3em; height: 3em; }
#controls button:active { box-shadow: inset 0 0 0 .12em #6a4a90; }
#controls [data-mode="crane"]:active, #controls #rotBtn:active { transform: translate(-50%, .1em); }


/* Écran titre : la scène de jeu reste visible derrière ; titre en haut, Gaston au premier plan, bouton en bas */
.title-screen { background: none; cursor: pointer; justify-content: flex-start; }
.title-screen h1 { margin-top: .5em; font-size: 4.4em; text-shadow: 0 0 .35em #3f8f17, .05em .08em 0 #2a0f3a, 0 0 1.2em rgba(0, 0, 0, .8);
  transition: opacity .6s, transform .6s; }
.title-screen #startBtn { position: absolute; bottom: 1.6em; left: 50%; transform: translateX(-50%); transition: opacity .4s; }
.title-screen #startBtn:active { transform: translate(-50%, .12em); }

/* grand et décalé vers la droite : on voit surtout Gaston et ses manettes, l'engin sort du cadre */
#builder { position: absolute; left: 80%; bottom: -9.4em; width: 50em; transform: translateX(-50%) scaleX(-1); overflow: visible;
  filter: drop-shadow(0 .4em .5em rgba(0, 0, 0, .55)); }
#builder .rig { animation: idle .22s ease-in-out infinite alternate; transform-origin: 160px 220px; }
@keyframes idle { to { transform: translateY(1.5px); } }
#builder .smoke circle { fill: rgba(190, 180, 210, .55); animation: puff 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
#builder .smoke circle:nth-child(2) { animation-delay: .53s; }
#builder .smoke circle:nth-child(3) { animation-delay: 1.06s; }
@keyframes puff { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-22px, -46px) scale(2.2); opacity: 0; } }
/* attente : Gaston hoche la tête, tripote ses manettes, sautille avec le moteur et ses yeux rougeoient */
#builder .lever.near { transform-origin: 206px 122px; animation: wiggle-lever 1.3s ease-in-out infinite alternate; }
#builder .lever.far { transform-origin: 222px 122px; animation: wiggle-lever 1.1s .4s ease-in-out infinite alternate-reverse; }
#builder .arm.near { transform-origin: 145px 98px; animation: wiggle-arm 1.3s ease-in-out infinite alternate; }
#builder .arm.far { transform-origin: 145px 98px; animation: wiggle-arm 1.1s .4s ease-in-out infinite alternate-reverse; }
#builder .skeleton { animation: bob .45s ease-in-out infinite alternate; }
#builder .head { transform-origin: 141px 88px; animation: nod 2.8s ease-in-out infinite; }
#builder .eye { animation: glow 1.8s ease-in-out infinite; }
@keyframes wiggle-lever { from { transform: rotate(-7deg); } to { transform: rotate(5deg); } }
@keyframes wiggle-arm { from { transform: rotate(2.4deg); } to { transform: rotate(-1.6deg); } }
@keyframes bob { to { transform: translateY(2px); } }
@keyframes nod { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 45% { transform: rotate(2deg); } 70% { transform: rotate(-2deg) translateY(1px); } }
@keyframes glow { 0%, 100% { fill: #ff5a3a; } 50% { fill: #ffd34a; } }
#builder .wheel { transform-box: fill-box; transform-origin: center; }

/* Au clic : Gaston tire les manettes puis l'engin recule vers la droite hors de l'écran (dessin retourné : il regarde à gauche) */
.title-screen.leaving { cursor: default; }
.title-screen.leaving #startBtn { opacity: 0; pointer-events: none; }
.title-screen.leaving #builder .lever { animation: pull-lever .3s ease-in forwards; }
.title-screen.leaving #builder .arm { animation: pull-arm .3s ease-in forwards; }
@keyframes pull-lever { to { transform: rotate(-22deg); } }
@keyframes pull-arm { to { transform: rotate(7deg); } }
.title-screen.leaving #builder { animation: reverse-out 1.2s .35s cubic-bezier(.55, 0, .9, .5) forwards; }
.title-screen.leaving #builder .wheel { animation: spin-back .3s .35s linear infinite; }
.title-screen.leaving #builder .smoke circle { animation-duration: .5s; }
@keyframes reverse-out { from { transform: translateX(-50%) scaleX(-1); } to { transform: translateX(120%) scaleX(-1) rotate(-2deg); } }
@keyframes spin-back { to { transform: rotate(-360deg); } }

/* Rideau de slime : coule du haut vers le bas sans s'arrêter ; il couvre tout l'écran un instant (on lance la partie
   derrière) puis s'écoule par le bas en laissant traîner ses filaments */
#slimeCurtain { position: absolute; left: 0; top: 0; width: 100%; height: 220%; z-index: 50; pointer-events: none;
  transform: translateY(-100%); filter: drop-shadow(0 .5em .6em rgba(0, 0, 0, .5)); }
#slimeCurtain.go { animation: slime-pour 2.6s .25s linear forwards; }
@keyframes slime-pour { from { transform: translateY(-100%); } to { transform: translateY(46%); } }

/* Bouton « Commencer » vert slime, comme le titre */
.title-screen #startBtn { background: none; box-shadow: none; padding: 0; line-height: 0; font-size: 1em; }
.title-screen #startBtn img { width: 15em; height: auto; display: block; transition: transform .15s, filter .15s;
  filter: drop-shadow(0 .25em .4em rgba(0, 0, 0, .6)); }
.title-screen #startBtn:hover { background: none; }
.title-screen #startBtn:hover img { transform: scale(1.05); filter: brightness(1.12) drop-shadow(0 0 .6em rgba(157, 255, 92, .7)) drop-shadow(0 .25em .4em rgba(0, 0, 0, .6)); }
.title-screen #startBtn:active img { transform: scale(.97); }

/* Titre : illustration fournie (slime qui dégouline) */
.title-screen h1.title-img { margin-top: .3em; font-size: 1em; text-shadow: none; line-height: 0; }
.title-img img { width: 28em; max-width: 92vw; height: auto; display: block; animation: radioactive 2.6s ease-in-out infinite; }
/* lueur radioactive : halo vert qui pulse, avec de brefs grésillements */
@keyframes radioactive {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 .25em rgba(157, 255, 92, .55)) drop-shadow(0 0 .9em rgba(120, 255, 60, .35)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
  45% { filter: brightness(1.18) drop-shadow(0 0 .45em rgba(190, 255, 120, .9)) drop-shadow(0 0 1.8em rgba(120, 255, 60, .7)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
  48% { filter: brightness(1.45) drop-shadow(0 0 .6em rgba(220, 255, 160, 1)) drop-shadow(0 0 2.4em rgba(140, 255, 70, .85)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
  51% { filter: brightness(1.05) drop-shadow(0 0 .3em rgba(157, 255, 92, .6)) drop-shadow(0 0 1.1em rgba(120, 255, 60, .45)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
  54% { filter: brightness(1.3) drop-shadow(0 0 .5em rgba(200, 255, 140, .95)) drop-shadow(0 0 2em rgba(130, 255, 60, .75)) drop-shadow(0 .3em .5em rgba(0, 0, 0, .6)); }
}

/* Couche de slime derrière le titre : part du haut de l'écran, dégouline jusque sous le titre */
#titleSlime { position: absolute; left: 0; top: 0; width: 100%; height: 11em; pointer-events: none; transition: opacity .6s; }
#titleSlime svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .45)); }
.title-screen h1.title-img { position: relative; z-index: 1; }
/* gouttes : se forment au bout des coulures, se détachent et tombent jusqu'en bas de l'écran */
#titleSlime i { position: absolute; width: .55em; height: .7em; margin-left: -.275em; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: radial-gradient(circle at 35% 35%, #c8ff9e, #5cc42a 60%, #2f7a10); box-shadow: 0 0 .4em rgba(120, 255, 60, .5);
  transform: scale(0); animation: bg-drop var(--t) var(--d) ease-in-out infinite; }
@keyframes bg-drop {
  0% { transform: translateY(0) scale(0); opacity: 1; }
  35% { transform: translateY(.1em) scale(1); opacity: 1; }
  /* chute libre : départ à vitesse nulle puis position ∝ t² (cette courbe de Bézier donne exactement y = t²) */
  45% { transform: translateY(.4em) scale(1, 1.15); opacity: 1; animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333); }
  100% { transform: translateY(42em) scale(.8, 1.3); opacity: .2; }
}

/* Écran de fin : « Manoir terminé ! » en haut, le score grossit au centre à chaque parfait, « Retour » en bas */
#endScreen { position: absolute; inset: 0; pointer-events: none; text-align: center; }
#endScreen .end-title { position: absolute; top: .4em; left: 0; right: 0; font-size: 2.6em; color: #9dff5c;
  text-shadow: 0 0 .35em #3f8f17, .05em .08em 0 #2a0f3a, 0 0 1em rgba(0, 0, 0, .8); }
#endScreen .end-score { position: absolute; top: 75%; left: 0; right: 0; transform: translateY(-50%);   /* centré dans la moitié basse */
  display: flex; flex-direction: column; align-items: center; }
#endScore { font-family: Creepster, cursive; font-weight: 400; font-size: 5em; line-height: 1; color: #ffb347;
  text-shadow: 0 0 .25em rgba(255, 150, 40, .7), .04em .06em 0 #2a0f3a, 0 0 .8em rgba(0, 0, 0, .9); }
#endMult { font-family: Creepster, cursive; font-size: 2em; color: #ffd34a; min-height: 1.1em;
  text-shadow: 0 0 .3em rgba(255, 211, 74, .7), .05em .08em 0 #2a0f3a; }
.bump { animation: bump .35s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
#backBtn { position: absolute; bottom: 1.6em; left: 50%; transform: translateX(-50%); pointer-events: auto;
  background: none; box-shadow: none; padding: 0; line-height: 0; font-size: 1em;
  opacity: 0; visibility: hidden; transition: opacity .5s; }
#backBtn img { width: 15em; height: auto; display: block; transition: transform .15s, filter .15s;
  filter: drop-shadow(0 .25em .4em rgba(0, 0, 0, .6)); }
#backBtn.show { opacity: 1; visibility: visible; }
#backBtn:hover { background: none; }
#backBtn:hover img { transform: scale(1.05); filter: brightness(1.12) drop-shadow(0 0 .6em rgba(157, 255, 92, .7)) drop-shadow(0 .25em .4em rgba(0, 0, 0, .6)); }
#backBtn:active { transform: translateX(-50%); box-shadow: none; }
#backBtn:active img { transform: scale(.97); }

/* Meilleur score, juste au-dessus du bouton « Commencer » : une couronne puis le score */
.best-score { position: absolute; left: 50%; bottom: 6.9em; transform: translateX(-50%); display: flex; align-items: center; justify-content: center;
  gap: .4em; transition: opacity .4s, transform .15s; cursor: pointer; }
.best-score:hover { transform: translateX(-50%) scale(1.06); }   /* cliquable : ouvre le classement */
.best-score .crown { width: 2.2em; height: auto; filter: drop-shadow(0 0 .35em rgba(255, 211, 74, .6)) drop-shadow(0 .1em .15em #000); }
.best-score b { font-family: Creepster, cursive; font-weight: 400; font-size: 2.4em; letter-spacing: .04em; line-height: 1;
  color: #9dff5c; text-shadow: 0 0 .35em rgba(120, 255, 60, .7), .05em .08em 0 #2a0f3a, 0 0 .6em rgba(0, 0, 0, .9); }
.best-score.hidden { display: none; }
.title-screen.leaving .best-score { opacity: 0; }

/* Classement */
.lb { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 2, 10, .72); }
.lb.hidden { display: none; }
.lb-panel { position: relative; width: 22em; max-width: 88%; max-height: 82%; overflow-y: auto; box-sizing: border-box;
  padding: 1.2em 1.2em 1.4em; border-radius: 1em; background: linear-gradient(#1c0f2c, #0f0818);
  box-shadow: inset 0 0 0 .15em #4fb81f, 0 0 2em rgba(121, 232, 58, .35); text-align: center; }
.lb-panel h2 { font-size: 2.4em; color: #9dff5c; text-shadow: 0 0 .3em #3f8f17, .05em .08em 0 #2a0f3a; margin-bottom: .3em; }
.lb-close { position: absolute; top: .3em; right: .4em; margin: 0; padding: 0 .3em; font: 800 1.6em/1 Nunito, sans-serif;
  background: none; color: #cbbbe0; box-shadow: none; }
.lb-close:hover { background: none; color: #fff; }
.lb-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.lb-list li { display: flex; align-items: baseline; gap: .6em; padding: .35em .6em; border-radius: .5em; font-weight: 800; }
.lb-list li:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.lb-list li.me { background: rgba(121, 232, 58, .18); box-shadow: inset 0 0 0 .1em #4fb81f; }
.lb-list .rank { width: 1.8em; color: #ffd34a; font-family: Creepster, cursive; font-weight: 400; font-size: 1.2em; }
.lb-list .name { flex: 1; color: #f3e9ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list .val { color: #9dff5c; font-family: Creepster, cursive; font-weight: 400; font-size: 1.2em; letter-spacing: .04em; }
.lb-status { color: #a99bc0; font-size: .9em; margin: .6em 0 0; min-height: 1em; }
.lb-me { color: #d6ffb0; font-weight: 800; margin: .5em 0 0; }
.lb-form { display: flex; gap: .4em; margin-top: .8em; }
.lb-form.hidden { display: none; }
.lb-form input { flex: 1; min-width: 0; padding: .55em .7em; border-radius: .5em; border: none; outline: none;
  font: 800 1em Nunito, sans-serif; background: #f3e9ff; color: #1a0f22; box-shadow: inset 0 0 0 .12em #4fb81f; }
.lb-form button, .lb-join { margin: 0; font-family: Nunito, sans-serif; font-weight: 800; font-size: 1em; padding: .55em 1em;
  border-radius: .5em; background: #79e83a; color: #12300a; box-shadow: 0 .15em 0 #2f7a10; letter-spacing: 0; }
.lb-join { margin-top: .9em; }
.lb-form button:hover, .lb-join:hover { background: #9dff5c; }
.lb-join[disabled] { opacity: .5; cursor: default; }
.lb-join.hidden { display: none; }

/* Bouton Partager : rond, vert slime, à droite de « Retour » */
#shareBtn { position: absolute; bottom: 2.6em; left: calc(50% + 8.6em); width: 3.4em; height: 3.4em; margin: 0; padding: 0;
  border-radius: 50%; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #c8ff9e, #79e83a 55%, #3f9a1a); box-shadow: 0 .18em 0 #2f7a10, 0 0 1em rgba(121, 232, 58, .5);
  opacity: 0; visibility: hidden; transition: opacity .5s, transform .15s; }
#shareBtn.show { opacity: 1; visibility: visible; }
#shareBtn:hover { transform: scale(1.08); }
#shareBtn:active { transform: translateY(.1em); box-shadow: 0 .06em 0 #2f7a10; }
#shareBtn svg { width: 1.7em; height: 1.7em; fill: #12300a; stroke: #12300a; stroke-width: 2.2; stroke-linecap: round; }
.share-toast { position: absolute; left: 50%; bottom: 7.4em; transform: translateX(-50%); padding: .5em 1em; border-radius: .6em;
  background: rgba(10, 4, 20, .9); color: #d6ffb0; font-weight: 800; box-shadow: inset 0 0 0 .1em #4fb81f; opacity: 0; pointer-events: none; white-space: nowrap; }
.share-toast.show { animation: toast 2.2s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, .4em); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Plein écran (mobile) : symbole blanc translucide, comme la rotation */
.fs-btn { position: absolute; z-index: 30; width: 2.6em; height: 2.6em; margin: 0; padding: .35em; border-radius: .5em;
  background: none; box-shadow: none; opacity: .75; filter: drop-shadow(0 .1em .25em rgba(0, 0, 0, .7)); }
.fs-btn:hover { background: none; opacity: 1; }
.fs-btn:active { box-shadow: none; }
.fs-btn.hidden { display: none; }
.fs-btn.at-title { right: .8em; bottom: .8em; }
.fs-btn.at-game { top: .55em; left: 50%; transform: translateX(-50%); }
.fs-btn.at-game:active { transform: translate(-50%, .1em); }
.fs-btn svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fs-btn .fs-exit, .fs-btn.on .fs-enter { display: none; }
.fs-btn.on .fs-exit { display: block; }

/* Invitation à installer le jeu, sous le titre de l'écran titre */
.install-hint { position: absolute; left: 50%; top: 10.6em; transform: translateX(-50%); z-index: 2; max-width: 88%;
  display: flex; align-items: center; gap: .5em; padding: .55em .5em .55em .9em; border-radius: .8em; box-sizing: border-box;
  background: rgba(10, 4, 20, .82); box-shadow: inset 0 0 0 .1em #4fb81f, 0 .3em .8em rgba(0, 0, 0, .5);
  color: #e8ffd8; font-weight: 800; font-size: .82em; line-height: 1.35; text-align: left; cursor: default; }
.install-hint.hidden { display: none; }
.install-hint.clickable { cursor: pointer; }
.install-hint svg { width: 1.1em; height: 1.1em; vertical-align: -.2em; fill: none; stroke: #9dff5c; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round; }
.install-close { margin: 0; padding: 0 .25em; font: 800 1.3em/1 Nunito, sans-serif; background: none; color: #a99bc0; box-shadow: none; }
.install-close:hover { background: none; color: #fff; }
.title-screen.leaving .install-hint { display: none; }