@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');

html, body {
  margin: 0;
  height: 100vh;
  font-family: 'Poiret One', sans-serif;
  color: #d7a103;
}

.game-container {
  background: #000 url(./assets/Floor1.jpg) center/cover no-repeat;
  animation: pan 60s infinite alternate linear;
}

@keyframes pan {
  0% { background-position: left; }
  100% { background-position: right; }
}

/* ------------------ Interface ------------------ */
#UI, #transitionScreen {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

#UI { z-index: 100; }

#transitionScreen {
  z-index: -10;
  background: #000;
  opacity: 0;
  transition: opacity 2s ease-out;
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* ------------------ Carte principale ------------------ */
.menu-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 66%;
  display: flex;
  flex-direction: column;
}

.card-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

.menu-card h1{
  position: relative;
  top: 5%;
  z-index : 2;
  text-align: center;
  margin: 0;
  font-weight: bold;
  font-size: 190%;
  font-family: 'Poiret One', sans-serif;
  color: #fff;
}

.menu-card h1::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 270%;
  background: no-repeat center url(./assets/card1.2.svg);
  z-index: -1;
  pointer-events: none;
}

/* ------------------ Boutons ------------------ */
nav {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: no-repeat center url(./assets/card1.1.svg);
  background-size: contain;
}

nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 37%;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  width: 100%;
}

nav ul li button {
  cursor: pointer;
  width: 100%;
  padding: .5rem;
  border: 4px double #d7a103;
  font-size: 150%;
  font-family: 'Poiret One', sans-serif;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(180deg, #a0601d 0%, #7a3f00 100%);
}

nav ul li button:hover {
  background: linear-gradient(180deg, #b8742a 0%, #8e4d00 100%);
}

/* ------------------ crédits ------------------ */

.credits-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            color: white;
            background-color: #000;
        }

        .credits-scroll {
            position: absolute;
            width: 80%;
            max-width: 800px;
            text-align: center;
            animation: scroll-up 60s linear forwards;
            top: 0;
        }

        @keyframes scroll-up {
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(-100%);
            }
        }

        .credits-title {
            font-size: 4em;
            font-weight: normal;
            margin-bottom: 1em;
            margin-top: 1em;
            letter-spacing: 0.2em;
        }

        .section {
            margin: 1.5em 0;
        }

        .section-title {
            font-size: 2em;
            color: #fff;
            margin-bottom: 0.5em;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .section-subtitle {
            font-size: 1.3em;
            color: #fff;
            margin: 1.5em 0 0.5em 0;
        }

        .credit-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin: 1.5em 0;
            gap: 2em;
            line-height: 1.8;
        }

        .credit-label {
            text-align: right;
            flex: 0 0 40%;
            font-size: 1.2em;
            line-height: 1.8;
        }

        .credit-names {
            text-align: left;
            flex: 0 0 55%;
            font-size: 1.2em;
        }

        .credit-names div {
            line-height: 1.8;
            margin: 0;
        }

        .credit-line {
            font-size: 1.2em;
            margin: 0.5em 0;
            line-height: 1.8;
        }

        .names {
            color: #fff;
            font-weight: normal;
        }

        .spacer {
            height: 3em;
        }

        .final-message {
            font-size: 1.5em;
            margin-top: 4em;
            color: #fff;
        }

        /* Bouton de contrôle */
        .controls {
            position: fixed;
            top: 1.5%;
            left: 1.5%;
            z-index: 1000;
        }

        .control-btn {
            background: transparent;
            border: none;
            color: #fff;
            padding: 0;
            cursor: pointer;
            font-size: 1.2em;
            font-family: 'Poiret One', cursive;
            transition: opacity 0.3s;
        }

        .control-btn:hover {
            opacity: 0.7;
        }