/* ========================= */
/* VARIABLES UI */
/* ========================= */

:root {
  /* ========================= */
  /* ESPACEMENTS SCÈNE */
  /* ========================= */

  --ui-safe-x: 2%;
  --ui-safe-y: 2%;

  --ui-gap-small: 1%;
  --ui-gap-medium: 2%;
  --ui-gap-large: 4%;

  /* ========================= */
  /* BOUTONS - TAILLES */
  /* ========================= */

  --btn-retour-size: clamp(80px, 8vw, 140px);
  --btn-menu-size: clamp(120px, 14vw, 230px);
  --btn-continuer-size: clamp(90px, 8vw, 160px);
  --btn-boutique-size: clamp(120px, 13.5vw, 220px);
  --btn-aide-size: var(--btn-boutique-size);
  --btn-fullscreen-size: clamp(48px, 5vw, 72px);

  --btn-suivant-width: clamp(92px, 7vw, 130px);
  --btn-suivant-height: clamp(38px, 3vw, 52px);

  /* ========================= */
  /* BOUTONS - POSITIONS */
  /* ========================= */

  --btn-retour-top: auto;
  --btn-retour-right: auto;
  --btn-retour-bottom: var(--ui-safe-y);
  --btn-retour-left: var(--ui-safe-x);

  --btn-menu-top: auto;
  --btn-menu-right: auto;
  --btn-menu-bottom: var(--ui-safe-y);
  --btn-menu-left: calc(
    var(--btn-retour-left) + var(--btn-retour-size) + var(--ui-gap-medium)
  );

  --btn-continuer-top: auto;
  --btn-continuer-right: var(--ui-safe-x);
  --btn-continuer-bottom: var(--ui-safe-y);
  --btn-continuer-left: auto;

  --btn-suivant-top: auto;
  --btn-suivant-right: var(--ui-safe-x);
  --btn-suivant-bottom: var(--ui-safe-y);
  --btn-suivant-left: auto;

  /* ========================= */
  /* SAFE GROUP CONTENT ACTIONS */
  /* Aide / Boutique / Suivant */
  /* ========================= */

  --btn-boutique-top: auto;
  --btn-boutique-right: calc(
    var(--btn-suivant-right) + var(--btn-suivant-width) + var(--ui-gap-medium)
  );
  --btn-boutique-bottom: var(--ui-safe-y);
  --btn-boutique-left: auto;

  --btn-aide-top: auto;
  --btn-aide-right: calc(
    var(--btn-boutique-right) + var(--btn-boutique-size) + var(--ui-gap-medium)
  );
  --btn-aide-bottom: var(--ui-safe-y);
  --btn-aide-left: auto;

  --btn-fullscreen-top: var(--ui-safe-y);
  --btn-fullscreen-right: var(--ui-safe-x);
  --btn-fullscreen-bottom: auto;
  --btn-fullscreen-left: auto;

  /* ========================= */
  /* PNJ - POSITIONS PAR MAP */
  /* SYSTÈME UNIFIÉ BOTTOM/LEFT */
  /* ========================= */

  --pnj-globe-bottom: 20%;
  --pnj-globe-left: 2%;

  --pnj-continents-bottom: 20%;
  --pnj-continents-left: 40%;

  --pnj-pays-bottom: 60%;
  --pnj-pays-left: 2%;

  --pnj-ville-bottom: 10%;
  --pnj-ville-left: 2%;

  --pnj-quartier-bottom: 45%;
  --pnj-quartier-left: 2%;

  --pnj-pieces-bottom: 10%;
  --pnj-pieces-left: 2%;

  --pnj-content-bottom: 8%;
  --pnj-content-left: 2%;

  --pnj-default-bottom: 4%;
  --pnj-default-left: 2%;

  /* ========================= */
  /* PNJ - TAILLES STABLES */
  /* ========================= */

  --pnj-small-size: clamp(55px, 3vw, 80px);
  --pnj-normal-size: clamp(75px, 4vw, 110px);
  --pnj-large-size: clamp(120px, 12vw, 225px);
  --pnj-xl-size: clamp(150px, 14vw, 270px);
  --pnj-xxl-size: clamp(240px, 18vw, 460px);

  /* ========================= */
  /* BULLES - LARGEURS STABLES */
  /* ========================= */

  --bubble-small-width: clamp(160px, 11vw, 220px);
  --bubble-normal-width: clamp(210px, 14vw, 300px);
  --bubble-large-width: clamp(260px, 17vw, 380px);
  --bubble-xl-width: clamp(310px, 20vw, 460px);
  --bubble-xxl-width: clamp(360px, 22vw, 760px);

  /* ========================= */
  /* Z-INDEX OFFICIELS */
  /* ========================= */

  --z-map-image: 10;
  --z-map-svg: 20;

  --z-content: 40;

  --z-pnj: 60;
  --z-bubble: 65;

  --z-ui: 70;

  --z-boutique: 90;
  --z-boutique-ui: 95;

  --z-menu: 100;

  --z-transition: 200;
}

/* ========================= */
/* CALQUE BOUTONS APPLICATION */
/* ========================= */

.app-buttons {
  position: absolute;
  inset: 0;
  z-index: var(--z-ui);

  width: 100%;
  height: 100%;

  pointer-events: none;
}

/* ========================= */
/* BOUTONS APPLICATION */
/* ========================= */

.app-btn,
.btn-fullscreen,
.content-nav-btn {
  position: absolute;

  padding: 0;
  border: none;

  cursor: pointer;
  pointer-events: auto;
}

.app-btn,
.btn-fullscreen {
  background: transparent;
}

.app-btn img {
  display: block;

  width: 100%;
  height: auto;
}

/* ========================= */
/* BOUTON RETOUR */
/* ========================= */

#btnRetour {
  width: var(--btn-retour-size);

  top: var(--btn-retour-top);
  right: var(--btn-retour-right);
  bottom: var(--btn-retour-bottom);
  left: var(--btn-retour-left);
}

/* ========================= */
/* BOUTON MENU */
/* ========================= */

#btnMenu {
  width: var(--btn-menu-size);

  top: var(--btn-menu-top);
  right: var(--btn-menu-right);
  bottom: var(--btn-menu-bottom);
  left: var(--btn-menu-left);
}

/* ========================= */
/* BOUTON CONTINUER */
/* ========================= */

#btnContinuer {
  width: var(--btn-continuer-size);

  top: var(--btn-continuer-top);
  right: var(--btn-continuer-right);
  bottom: var(--btn-continuer-bottom);
  left: var(--btn-continuer-left);
}

/* ========================= */
/* BOUTON AIDE */
/* ========================= */

#btnAide {
  width: var(--btn-aide-size);

  top: var(--btn-aide-top);
  right: var(--btn-aide-right);
  bottom: var(--btn-aide-bottom);
  left: var(--btn-aide-left);
}

/* ========================= */
/* BOUTON BOUTIQUE */
/* ========================= */

#btnBoutique {
  width: var(--btn-boutique-size);

  top: var(--btn-boutique-top);
  right: var(--btn-boutique-right);
  bottom: var(--btn-boutique-bottom);
  left: var(--btn-boutique-left);
}

/* ========================= */
/* BOUTON SUIVANT */
/* ========================= */

#btnSuivant {
  width: var(--btn-suivant-width);
  height: var(--btn-suivant-height);

  top: var(--btn-suivant-top);
  right: var(--btn-suivant-right);
  bottom: var(--btn-suivant-bottom);
  left: var(--btn-suivant-left);
}

.content-nav-btn {
  border-radius: 14px;

  background: rgba(15, 45, 70, 0.9);
  color: white;

  font-size: clamp(13px, 0.95vw, 17px);
  font-weight: 700;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.content-nav-btn:hover {
  background: rgba(15, 45, 70, 1);
}

/* ========================= */
/* BOUTON FULLSCREEN */
/* ========================= */

#btnFullscreen {
  width: var(--btn-fullscreen-size);
  aspect-ratio: 1 / 1;

  top: var(--btn-fullscreen-top);
  right: var(--btn-fullscreen-right);
  bottom: var(--btn-fullscreen-bottom);
  left: var(--btn-fullscreen-left);
}

.btn-fullscreen {
  border-radius: 22%;

  background: rgba(15, 45, 70, 0.85);
  color: white;

  font-size: 0.9rem;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-fullscreen:hover {
  background: rgba(15, 45, 70, 1);
}

/* ========================= */
/* EFFETS BOUTONS */
/* ========================= */

.app-btn:hover,
.btn-fullscreen:hover,
.content-nav-btn:hover {
  scale: 1.04;
}

.app-btn:active,
.btn-fullscreen:active,
.content-nav-btn:active {
  scale: 0.96;
}

/* ========================= */
/* PNJ BASE */
/* ========================= */

.pnj-box {
  position: absolute;
  z-index: var(--z-pnj);

  display: flex;
  gap: clamp(6px, 0.6vw, 14px);

  bottom: var(--pnj-bottom);
  left: var(--pnj-left);

  transform: translate(var(--pnj-offset-x, 0), var(--pnj-offset-y, 0));

  pointer-events: none;
}

.pnj-box[hidden] {
  display: none !important;
}

/* ========================= */
/* PNJ IMAGE */
/* ========================= */

.pnj-image {
  display: block;

  height: auto;

  flex-shrink: 0;
}

/* ========================= */
/* BULLE PNJ */
/* ========================= */

.pnj-bubble {
  width: fit-content;
  max-width: min(42vw, 760px);
  max-height: min(42vh, 360px);

  overflow-y: auto;
  overflow-x: hidden;

  overflow-wrap: break-word;
  word-break: normal;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: linear-gradient(145deg, #ffffff, #f8f1e4);
  color: #2b1a0f;

  border: 0.28em solid #d4af37;
  border-radius: 1.6em;

  line-height: 1.4;

  position: relative;

  box-shadow:
    0 0.25em 0.7em rgba(0, 0, 0, 0.25),
    inset 0 0.08em 0.15em rgba(255, 255, 255, 0.6);
}

.dialogue-text {
  width: 100%;
  margin: 0;

  white-space: pre-line;
}

/* ========================= */
/* LAYOUT PNJ */
/* ========================= */

.pnj-layout-top {
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0.5%;
}

.pnj-layout-side {
  flex-direction: row;
  align-items: flex-end;
}

/* ========================= */
/* TAILLES PNJ */
/* ========================= */

.pnj-size-small .pnj-image {
  width: var(--pnj-small-size);
}

.pnj-size-normal .pnj-image {
  width: var(--pnj-normal-size);
}

.pnj-size-large .pnj-image {
  width: var(--pnj-large-size);
}

.pnj-size-xl .pnj-image {
  width: var(--pnj-xl-size);
}

.pnj-size-xxl .pnj-image {
  width: var(--pnj-xxl-size);
}

/* ========================= */
/* TAILLES BULLES */
/* ========================= */

.bubble-size-small .pnj-bubble {
  width: var(--bubble-small-width);

  min-height: 54px;

  padding: clamp(6px, 0.5vw, 10px) clamp(10px, 0.8vw, 14px);

  font-size: clamp(11px, 0.7vw, 13px);
}

.bubble-size-normal .pnj-bubble {
  width: var(--bubble-normal-width);

  min-height: 72px;

  padding: clamp(8px, 0.7vw, 14px) clamp(12px, 1vw, 18px);

  font-size: clamp(13px, 0.85vw, 15px);
}

.bubble-size-large .pnj-bubble {
  width: var(--bubble-large-width);

  min-height: 88px;

  padding: clamp(10px, 0.8vw, 16px) clamp(14px, 1.2vw, 22px);

  font-size: clamp(14px, 1vw, 17px);
}

.bubble-size-xl .pnj-bubble {
  width: var(--bubble-xl-width);

  min-height: 102px;

  padding: clamp(12px, 1vw, 18px) clamp(16px, 1.4vw, 24px);

  font-size: clamp(15px, 1.1vw, 18px);
}

.bubble-size-xxl .pnj-bubble {
  width: var(--bubble-xxl-width);

  min-height: 160px;

  padding: clamp(14px, 1.2vw, 22px) clamp(18px, 1.6vw, 28px);

  font-size: clamp(16px, 1.2vw, 20px);
}

/* ========================= */
/* HIDDEN */
/* ========================= */

.app-btn[hidden],
.btn-fullscreen[hidden],
.content-nav-btn[hidden] {
  display: none !important;
}

/* ========================= */
/* MOBILE TEMPORAIRE */
/* ========================= */

@media (max-width: 768px) {
  :root {
    --ui-safe-x: 12px;
    --ui-safe-y: 12px;

    --btn-retour-size: 76px;
    --btn-menu-size: 90px;
    --btn-continuer-size: 92px;
    --btn-boutique-size: 92px;
    --btn-fullscreen-size: 52px;

    --btn-suivant-width: 86px;
    --btn-suivant-height: 42px;

    --btn-menu-left: 90px;

    --pnj-large-size: 140px;
    --pnj-xl-size: 140px;
  }

  .bubble-size-large .pnj-bubble,
  .bubble-size-xl .pnj-bubble {
    max-width: min(78vw, 320px);

    padding: 12px 16px;

    font-size: clamp(12px, 3.5vw, 15px);
  }
}

/* ========================= */
/* TOOLTIP UI */
/* ========================= */

.ui-tooltip {
  position: fixed;
  z-index: 75;

  max-width: 260px;

  padding: 8px 10px;

  border-radius: 10px;

  background: rgba(15, 23, 42, 0.72);
  color: white;

  font-size: 13px;
  line-height: 1.35;

  white-space: pre-line;

  pointer-events: none;

  transform: translateZ(0);
}

.ui-tooltip[hidden] {
  display: none !important;
}
/* ========================= */
/* ARABE */
/* ========================= */

html[lang="ar"] .dialogue-text {
  font-size: 1.35em;
  line-height: 1.9;
}