/* ========================= */
/* 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 */
  /* ========================= */

  --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 */
  /* ========================= */

  --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 */
  /* ========================= */

  --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 */
  /* ========================= */

  --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);
}

/* ========================= */
/* 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 {
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 22%;

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

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

/* ========================= */
/* HOVER UI DESKTOP */
/* ========================= */

@media (hover: hover) and (pointer: fine) {
  .content-nav-btn:hover {
    background: rgba(15, 45, 70, 1);
  }

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

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

/* ========================= */
/* ACTIVE UI */
/* ========================= */

.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 {
  position: relative;

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

  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;

  text-align: center;

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

  color: #2b1a0f;

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

  line-height: 1.4;

  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);
}

/* ========================= */
/* PNJ TACTILE PLEIN ÉCRAN */
/* ========================= */

/*
 * Comportement intrinsèque du composant PNJ.
 *
 * La détection repose uniquement sur pointer: coarse
 * afin de rester cohérente avec responsive.css V6.
 */

@media (pointer: coarse) {
  .pnj-box.pnj-mobile-fullscreen {
    position: absolute !important;
    inset: 0 !important;

    z-index: calc(var(--z-ui) + 20);

    display: grid !important;

    grid-template-columns:
      minmax(140px, 34%)
      minmax(0, 1fr);

    align-items: center;
    justify-items: center;

    gap: clamp(16px, 4vw, 54px) !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    padding:
      clamp(
        16px,
        3vw,
        36px
      ) !important;

    box-sizing: border-box;

    transform: none !important;

    background: rgba(2, 8, 23, 0.74);

    backdrop-filter: blur(2px);

    pointer-events: none;

    animation:
      pnj-mobile-overlay-in
      180ms
      ease-out
      both;
  }

  .pnj-box.pnj-mobile-fullscreen .pnj-image {
    display: block;

    width: min(30vw, 250px) !important;
    max-width: 100%;

    height: auto !important;
    max-height: 74%;

    object-fit: contain;

    animation:
      pnj-mobile-image-in
      240ms
      ease-out
      both;
  }

  .pnj-box.pnj-mobile-fullscreen .pnj-bubble {
    width: min(54vw, 660px) !important;
    max-width: 100% !important;

    min-height: 0 !important;
    max-height: 72% !important;

    padding:
      clamp(14px, 2.2vw, 28px)
      clamp(18px, 3vw, 38px) !important;

    box-sizing: border-box;

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

    border-width:
      clamp(
        2px,
        0.45vw,
        5px
      );

    border-radius:
      clamp(
        18px,
        3vw,
        34px
      );

    font-size:
      clamp(
        15px,
        2.2vw,
        24px
      ) !important;

    line-height: 1.45;

    animation:
      pnj-mobile-bubble-in
      260ms
      40ms
      ease-out
      both;
  }

  .pnj-box.pnj-mobile-fullscreen .dialogue-text {
    width: 100%;

    font-size: inherit;
    line-height: inherit;

    text-align: center;
  }
}

/* ========================= */
/* PNJ TACTILE PORTRAIT */
/* ========================= */

@media
  (pointer: coarse)
  and (orientation: portrait) {

  .pnj-box.pnj-mobile-fullscreen {
    grid-template-columns: 1fr;

    grid-template-rows:
      minmax(0, 42%)
      minmax(0, 1fr);

    align-content: center;

    gap: 12px !important;
  }

  .pnj-box.pnj-mobile-fullscreen .pnj-image {
    width: min(42vw, 220px) !important;

    max-height: 100%;
  }

  .pnj-box.pnj-mobile-fullscreen .pnj-bubble {
    width: min(86vw, 560px) !important;

    max-height: 100% !important;

    font-size:
      clamp(
        14px,
        4vw,
        20px
      ) !important;
  }
}

/* ========================= */
/* ANIMATIONS PNJ MOBILE */
/* ========================= */

@keyframes pnj-mobile-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pnj-mobile-image-in {
  from {
    opacity: 0;

    transform:
      translateY(10px)
      scale(0.96);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes pnj-mobile-bubble-in {
  from {
    opacity: 0;

    transform:
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

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

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

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

.ui-tooltip {
  position: fixed;

  z-index: calc(var(--z-ui) + 5);

  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;
}