* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font-family: "Trebuchet MS", sans-serif; color: white;
  background: linear-gradient(160deg, #1b0b4d, #6a2bd9 55%, #ff7a2f);
}
.screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 20px;
}
.hidden { display: none; }
h1 {
  font-size: clamp(3rem, 10vw, 6rem); line-height: 1; text-align: center;
  margin: 0 0 20px; font-style: italic; text-shadow: 0 6px 0 #1b0b4d;
}
button {
  width: min(320px, 90vw); padding: 16px; font-size: 1.5rem; font-weight: bold;
  text-transform: uppercase; color: #1b0b4d; background: #ffe53b;
  border: 0; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 0 #b89b00;
  transition: transform 0.1s;
}
button:hover { transform: translateY(-3px) scale(1.04); }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 #b89b00; }
label { display: flex; flex-direction: column; gap: 8px; width: min(320px, 90vw); font-size: 1.2rem; }
.aide { margin: -8px 0 0; font-size: 1.1rem; opacity: 0.9; }

#creatif { position: fixed; inset: 0; background: #000; }
#creatif-canvas, #creatif-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#viseur {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px;
  border: 2px solid white; border-radius: 50%; box-shadow: 0 0 3px black; pointer-events: none;
}
#viseur.touche { border-color: red; background: red; }
#hotbar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.slot {
  min-width: 90px; padding: 8px; text-align: center; font-size: 0.9rem; font-weight: bold;
  background: rgba(0, 0, 0, 0.55); border: 3px solid transparent; border-radius: 8px;
}
.slot.actif { border-color: #ffe53b; background: rgba(106, 43, 217, 0.8); }
#pause {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; background: rgba(27, 11, 77, 0.8); text-align: center; padding: 20px;
}
#pause.hidden { display: none; }

#skins { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 360px; }
button.skin { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 4px solid #333; }
button.skin.choisi { border-color: #fff; box-shadow: 0 0 0 3px #ffd800; }

#modeles { display: flex; gap: 10px; }
button.modele.choisi { outline: 4px solid #fff; }