/* BASE -------------------------------------------------------- */
body, html {
  margin: 0;
  padding: 0;
  background-color: #001f59;
  font-family: 'Colonna MT', serif;
  color: gold;
  text-align: center;
  height: 100%;
}

/* Splash & main-app plein écran */
#splash-screen,
#main-app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG */
.splash-svg,
.main-svg {
  width: 95vmin;
  height: 95vmin;
  display: block;
  margin: auto;
}

/* Container principal */
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Contenu dans le losange */
.content-inside-frame {
  position: absolute;
  top: 29%;                      /* DESCEND LE CONTENU GLOBAL */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Réduction inputs section Envoyer */
.tip-inputs input {
  width: 43%;
  max-width: 280px;
}

/* TITRES ------------------------------------------------------ */
.title {
  font-size: 2.2rem;
  margin: 10px 0 16px 0;
  color: gold;
  text-align: center;
  letter-spacing: 0.22em;
}

/* INPUTS ------------------------------------------------------ */
input {
  width: 100%;
  padding: 10px;
  margin: 6px 0;
  background: transparent;
  border: 2px solid gold;
  color: gold;
  font-size: 0.95rem;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
}

/* BOUTONS ------------------------------------------------------ */
.btn {
  background-color: gold;
  color: #001f59;
  border: none;
  padding: 12px 18px;
  font-size: 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  width: 48%;                     /* BOUTONS G/D DESKTOP */
}

/* Boutons alignés gauche/droite */
.button-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 380px;
  margin-top: 12px;
}

/* QR CODE ----------------------------------------------------- */
#qr-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* JSON OUTPUT */
.json-output {
  background: rgba(255, 215, 0, 0.08);
  color: gold;
  padding: 10px;
  border: 1px solid gold;
  border-radius: 8px;
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 90%;
  overflow-x: auto;
  font-size: 0.8rem;
}
.subtext,
.footer {
  transform: translateY(-44px);
}


/* ================ VERSION MOBILE OPTIMISÉE ================ */
@media (max-width: 768px) {

  body, html {
    height: auto;
    overflow-y: auto;
  }

  /* SVG plus petit pour respirer */
  .main-svg {
    width: 90vmin;
    height: 90vmin;
  }

  /* Contenu dans le losange (haut) */
  .content-inside-frame {
    top: 48%;            /* remonte le bloc */
    width: 88%;
    max-width: 390px;
  }

  /* Champ adresse VeWorld */
  #veworld-address {
    max-width: 300px;
    font-size: 4vw;
    padding: 8px;
  }

  .tips-button-secondary {
    font-size: 4vw;
    padding: 10px;
    max-width: 260px;
  }

  /* ✨ “Merci” juste sous TIPS DAPP */
  .subtext {
    font-size: 4vw;
    margin-top: 8px;
    transform: translateY(-10px);
  }

  .footer {
    font-size: 3.5vw;
    margin-top: 4px;
    transform: translateY(-10px);
  }

  /* ★ TIPS DAPP centré + espace ajusté */
  .title {
    font-size: 9vw;
    margin-top: 14px;
    margin-bottom: 6px;
  }

  /* Section “Envoyer un TIPS” */
  .tips-title {
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 5vw;
  }

  /* Boîtes adresse et montant — rapprochées */
  .tip-inputs input {
    max-width: 280px;
    padding: 8px;
    font-size: 4vw;
    margin-top: 4px;
  }

  /* Bouton envoyer — plus petit et collé au bloc */
  .btn {
    width: 70%;
    max-width: 260px;
    font-size: 4.2vw;
    padding: 10px;
    margin-top: 10px;
  }

  /* QR code centré sans pousser le reste */
  #qr-container {
    margin-top: 4px;
  }

  /* Bloc JSON caché sauf debug */
  .json-output {
    font-size: 3vw;
    margin-top: 10px;
    max-width: 90%;
  }
/* MOBILE – stabilisation layout */
@media (max-width: 768px) {

  .content-inside-frame {
    position: static;
    transform: none;
    width: 90%;
    margin: 0 auto;
  }

  .tips-title,
  .title {
    margin-top: 20px;
    margin-bottom: 12px;
  }

  .tips-input {
    max-width: 280px;
  }

  .btn {
    max-width: 280px;
    margin-top: 14px;
  }

  .subtext,
  .footer {
    margin-top: 40px;
    transform: none; /* IMPORTANT */
  }
}
}