/* === Polices personnalisées === */
@font-face {
  font-family: 'Isonorm3098';
  src: url('Fonts/Isonorm3098-Monospaced.otf') format('opentype');
  font-display: swap;
}
/* 
@font-face {
  font-family: 'Ubik';
  src: url('Fonts/ubik-Regular.otf') format('opentype');
  font-display: swap;
} */

/* === Styles généraux === */
body {
  margin: 0;
  font-family: 'Isonorm3098', monospace;
  text-transform: uppercase;
  background-color: #f5f5f4;
  overflow: hidden;
  color: black;
}

/* ==== Message de tourner le téléphone ========== */
.phoneMessageContainer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: none;
  background-color: #171717;
}

.phone {
  height: 50px;
  width: 100px;
  border: 3px solid white;
  border-color: #00e3ff;
  border-radius: 10px;
  animation: rotate 1.5s ease-in-out infinite alternate;
}

.message {
  color: #00e3ff;
  font-size: 1em;
  margin-top: 40px;
  font-family: 'Isonorm3098', monospace;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(-90deg)
  }

  100% {
    transform: rotate(-90deg)
  }
}

@media only screen and (max-device-width: 812px) and (orientation: portrait) {
  .phoneMessageContainer {
    display: flex;
  }
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  /* Ajouté */
  z-index: 1;
  /* S'assure qu'il est devant */
}

/* Pour masquer la scène Three.js (canvas) */
.hide-threejs canvas {
  display: none !important;
}

/* === Conteneur UI (crédits, tickets) à droite === */
#ui-container {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 480px) {
  #ui-container {
    flex-direction: column;
    top: 80px;
    right: 50%;
    transform: translateX(50%);
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  }
}

#credit-container,
/* Style normal */
#replay-container {
  justify-self: end;
  background: #fff;
  padding: 0px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  font-family: 'Isonorm3098', monospace;
  white-space: nowrap;
  height: 54px;
  display: flex;
  align-items: center;
}

#replay-container {
  justify-self: start;
  cursor: pointer;
}

#replay-container.zoomed {
  visibility: hidden;
}

/* Style en mode zoomé */
#credit-container.zoomed {
  background: rgb(41, 41, 41);
  color: #00e3ff;
}

/* === Bulles d'interactions === */
#bubble-container {
  position: fixed;
  top: 50%;
  left: 5%;
  transform: translate(0, -50%);
  width: 40vw;
  background-color: rgb(41, 41, 41);
  border-radius: 12px;
  padding: 18px 20px 25px 20px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  display: none;
  flex-direction: column;
  gap: 30px;
  z-index: 2;
  font-family: 'Isonorm3098', monospace;
  text-align: left;
  line-height: 1.4;
  text-transform: uppercase;
}

#bubble-container .title, #bubble-container .bubble-text {
  color: #00e3ff;
  text-align: center;
}

.header-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* === Responsive titre === */
@media (max-width: 768px) {
  #title-banner {
    font-size: 28px;
    padding: 8px 16px;
  }
}

#ubik-background {
  font-family: 'Ubik', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #f5f5f4;

  pointer-events: none;
  user-select: none;

}

#background-image {
  width: 90%;
  height: 95%;
}

/* Loading screen */

#loading-screen-image {
  position: absolute;
  width: 90%;
  height: 95%;
  filter: brightness(0) saturate(100%) invert(2%) sepia(17%) saturate(22%) hue-rotate(314deg) brightness(99%) contrast(84%);
  transition: 1s ease-in;
}

#loading-screen-text {
  font-size: 40px;
  margin: 0 50px 0 50px;
  max-width: 900px;
  color: white;
  text-align: center;
  font-family: 'Isonorm3098', monospace;
  text-transform: uppercase;
  z-index: 1;
}

#start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  color: white;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
  pointer-events: auto;
  gap: 50px;
  overflow: hidden;
}

#start-screen .start-message{
  font-size: 2em;
  animation: blink 1.5s infinite;
  text-align: center;
  cursor: pointer;
}

.replay-btn {
  font-size: 1em;
  animation: blink 1.5s infinite;
  text-align: center;
  cursor: pointer;
}

#end-message {
  font-size: 40px;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* When start panel is clicked */
.launched {
  transition: 1s ease-in;
  transform: translateX(100vw);
}

/* For the text to go left */
.launched>img {
  transform: translateX(-100vw);
}


/* -- CHOICE BUTTONS ---------------------------------------------------------------------------------- */
.validateButton {
  display: block;
  font-family: 'Isonorm3098', monospace;
  border-radius: 10px;
  text-transform: uppercase;
  font-size: 16px;
  padding: 15px 20px;
  background-color: rgb(41, 41, 41);
  color: #00e3ff;
  width: fit-content;
  border: none;
  cursor: pointer;
  align-self: end;
}

#choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#choice-buttons button {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: #171717;
  --btn-transition: 0.3s;
  --btn-letter-spacing: 0.1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #00e3ff;
  --default-btn-color: #fff;
  --font-size: 16px;
  font-family: 'Isonorm3098', monospace;
  border-radius: 10px;
  text-transform: uppercase;
}

#choice-buttons button {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font-size: var(--font-size);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

#choice-buttons span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

#choice-buttons span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

#choice-buttons button:hover, #choice-buttons button.selected {
  background: var(--btn-hover-bg);
}

#choice-buttons button:hover span, .selected span {
  color: var(--hover-btn-color);
}

#choice-buttons button:hover span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

  5% {
    content: ".";
  }

  10% {
    content: "^{";
  }

  15% {
    content: "-!";
  }

  20% {
    content: "#$_";
  }

  25% {
    content: "№:0";
  }

  30% {
    content: "#{+.";
  }

  35% {
    content: "@}-?";
  }

  40% {
    content: "?{4@%";
  }

  45% {
    content: "=.,^!";
  }

  50% {
    content: "?2@%";
  }

  55% {
    content: "\;1}]";
  }

  60% {
    content: "?{%:%";
    right: 0;
  }

  65% {
    content: "|{f[4";
    right: 0;
  }

  70% {
    content: "{4%0%";
    right: 0;
  }

  75% {
    content: "'1_0<";
    right: 0;
  }

  80% {
    content: "{0%";
    right: 0;
  }

  85% {
    content: "]>'";
    right: 0;
  }

  90% {
    content: "4";
    right: 0;
  }

  95% {
    content: "2";
    right: 0;
  }

  100% {
    content: "";
    right: 0;
  }
}

#left-bubble {
  display: none;
  position: fixed;
  top: 10%;
  left: 20px;
  background: #f5f5f4;
  color: #222222;
  box-shadow: 0 0 12px rgba(158, 158, 158, 0.15);
  padding: 18px 18px;
  border-radius: 18px;
  z-index: 1000;
  max-width: 320px;
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 0.7s;
}

body, #ubik-background {
  transition: background-color 0.7s;
}

#end-screen {
  transition: 1s ease-in;
}

#end-screen.launched {
  transform: translateX(100vw);
}

#zoom-exit {
  display: none;
  cursor: pointer;
  color: #222;
  background: rgba(245, 245, 244, 0.85);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 30px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px #bbb;
  transition: background 0.2s, color 0.2s;
}

#zoom-exit:hover {
  background: #222;
  color: #f5f5f4;
}

@media screen and (max-width: 900px) {
  #start-screen .start-message, .replay-btn {
    font-size: 1em;
  }

  #loading-screen-text {
    font-size: 20px;
  }

  #end-message {
    font-size: 20px;
  }

  #credit-container, #replay-container {
    padding: 0px 15px;
    font-size: 14px;
    height: 30px;
  }

  #left-bubble {
    padding: 18px 18px;
    border-radius: 18px;
    max-width: 320px;
    font-size: 1em;
  }

  #bubble-container {
    padding: 15px;
    font-size: 14px;
    gap: 20px;
  }

  #zoom-exit {
    width: 25px;
    height: 25px;
    font-size: 20px;
  }

  #choice-buttons button {
    padding: 10px 15px;
    font-size: 14px;
  }

  .validateButton {
    padding: 10px 15px;
  }

  .credit-feedback{
    font-size: 40px;
  }
}