html, body { margin: 0; height: 100%; background: midnightblue; overflow: hidden; }
#jeu { display: block; width: 100vw; height: 100vh; object-fit: contain; image-rendering: pixelated; }
#hud { position: fixed; top: 12px; left: 16px; display: flex; gap: 20px; color: white; font: 700 20px system-ui, sans-serif; text-shadow: 0 2px 3px black; pointer-events: none; }
#message { position: fixed; inset: 0; display: grid; place-items: center; color: white; font: 800 44px system-ui, sans-serif; text-shadow: 0 3px 8px black; pointer-events: none; text-align: center; }
#bouton-boutique { position: fixed; top: 10px; right: 16px; font: 700 18px system-ui, sans-serif; padding: 8px 14px; border: 0; border-radius: 10px; background: gold; cursor: pointer; }
#boutique { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(10, 10, 60, 0.92); color: white; font-family: system-ui, sans-serif; }
#boutique[hidden] { display: none; }
#boutique h2 { margin: 0; font-size: 36px; }
#boutique-liste { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.carte { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 130px; padding: 10px; border-radius: 14px; background: royalblue; }
.carte.choisi { outline: 4px solid gold; }
.carte img { width: 100px; height: 100px; object-fit: contain; }
.carte button, #boutique-fermer { font: 700 16px system-ui, sans-serif; padding: 8px 12px; border: 0; border-radius: 8px; background: gold; cursor: pointer; }
.carte button:disabled { background: gray; cursor: default; }
#boutique-liste { max-width: 760px; max-height: 62vh; overflow-y: auto; padding: 4px; }
.carte button { white-space: nowrap; font-size: 14px; }
#boutique-liste { max-width: 900px; max-height: 70vh; gap: 10px; }
.carte { width: 120px; padding: 8px; gap: 6px; }
.carte img { width: 80px; height: 80px; min-height: 80px; }
#bouton-mondes { position: fixed; top: 10px; right: 170px; font: 700 18px system-ui, sans-serif; padding: 8px 14px; border: 0; border-radius: 10px; background: lightskyblue; cursor: pointer; }
#mondes { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(10, 10, 60, 0.92); color: white; font-family: system-ui, sans-serif; }
#mondes[hidden] { display: none; }
#mondes h2 { margin: 0; font-size: 36px; }
#mondes-liste { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 800px; }
.monde { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 140px; padding: 24px 8px; border: 0; border-radius: 14px; color: white; text-shadow: 0 2px 4px black; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.monde strong { font-size: 22px; }
.monde.choisi { outline: 4px solid gold; }
#mondes-fermer { font: 700 16px system-ui, sans-serif; padding: 8px 12px; border: 0; border-radius: 8px; background: gold; cursor: pointer; }
#bouton-pause { position: fixed; top: 10px; right: 320px; font: 700 18px system-ui, sans-serif; padding: 8px 14px; border: 0; border-radius: 10px; background: lightgreen; cursor: pointer; }
#pause { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(10, 10, 60, 0.7); color: white; font-family: system-ui, sans-serif; }
#pause[hidden] { display: none; }
#pause h2 { margin: 0; font-size: 48px; }
#pause-reprendre { font: 700 20px system-ui, sans-serif; padding: 10px 18px; border: 0; border-radius: 10px; background: gold; cursor: pointer; }
.monde.bloque { filter: grayscale(1) brightness(0.5); cursor: not-allowed; }
#jeu3d { display: block; width: 100vw; height: 100vh; object-fit: contain; }
#bouton-vue { position: fixed; top: 10px; right: 450px; font: 700 18px system-ui, sans-serif; padding: 8px 14px; border: 0; border-radius: 10px; background: plum; cursor: pointer; }