/* Fond d'écran d'histoire */
.story-bg-default {
  background-image: url("./assets/story-bg-default.webp");
}

.story-bg-meet-the-wanderer {
  background-image:
    linear-gradient(to bottom, rgba(12, 5, 0, 0.2), rgba(12, 5, 0, 0.65)),
    url("assets/stories/meet-the-wanderer.webp");
}

.story-bg-meet-the-outlaw {
  background-image: url("assets/stories/meet-the-outlaw.webp");
}

.story-bg-meet-the-geji {
  background-image:
    linear-gradient(to bottom, rgba(12, 5, 0, 0.2), rgba(12, 5, 0, 0.65)),
    url("assets/stories/meet-the-geji.webp");
}

.story-bg-meet-the-courtesan {
  background-image:
    linear-gradient(to bottom, rgba(12, 5, 0, 0.2), rgba(12, 5, 0, 0.65)),
    url("assets/stories/meet-the-courtesan.webp");
}

.story-bg-drink-after-dusk {
  background-image: url("assets/stories/drinksafterdusk_1.webp");
}

.story-bg-salmon {
  background-image: url("assets/stories/and-dont-forget-to-prepare-salmon.webp");
}

.story-bg-teahouse {
  background-image: url("assets/stories/a-day-at-the-teahouse.webp");
}

.story-bg-ye-yu-diary {
  background-image: url("assets/stories/yeyu-diary-bg.webp");
}

.story-bg-shrine-outskirt {
  background-image: url("assets/stories/the-shrine-on-the-outskirts.webp");
}

.story-bg-melon-uncle {
  background-image: url("assets/stories/its-just-a-melon-uncle.webp");
}

.story-bg-melon-lips {
  background-image: url("assets/stories/melon-on-your-lips.webp");
}

.story-bg-one-arm-lost {
  background-image: url("assets/stories/one-arm-lost-ten-loves-found.webp");
}

.story-bg-remaining-time-together {
  background-image: url("assets/stories/for-the-remaining-time-together.webp");
}

.story-bg-a-wise-discussion {
  background-image: url("assets/stories/a-wise-discussion.webp");
}

.story-bg-just-a-nightmare {
  background-image: url("assets/stories/just-a-nightmare.webp");
}

.story-bg-devil-upon-ones-shoulder {
  background-image: url("assets/stories/devil-upon-ones-shoulder.webp");
}

.story-bg-hope-keeps-us-alive {
  background-image: url("assets/stories/hope-keeps-us-alive.webp");
}

.story-bg-all-mushrooms {
  background-image: url("assets/stories/all-mushrooms.webp");
}

.story-bg-because-i-love-jade {
  background-image: url("assets/stories/because-i-love-jade.webp");
}

.story-bg-breakfast-in-bed {
  background-image: url("assets/stories/breakfast-in-bed.webp");
}

.story-bg-make-yourself-like-home {
  background-image:
    linear-gradient(to bottom, rgba(12, 5, 0, 0.2), rgba(12, 5, 0, 0.65)),
    url("assets/stories/make-yourself-like-home.png");
}

/* Tooltip**/
.tooltip {
  position: relative;
  color: #dba85a;
  border-bottom: 1px dotted rgba(219, 168, 90, 0.4);
  cursor: help;
  transition: color 0.2s ease;
  text-indent: initial;
}

.tooltip:hover {
  color: #f6e5b0;
}

.tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12, 8, 10, 0.98);
  color: #f5e7d5;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(219, 168, 90, 0.3);
  font-size: 1.2rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 10;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(219, 168, 90, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  margin-bottom: -6px;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Mobile : clic obligatoire */
@media (hover: none) {
  .tooltip::after {
    display: none;
  }

  .tooltip:active::after,
  .tooltip.tooltip-open::after {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* Bloc lecteur */
audio::-webkit-media-controls-panel {
  background: rgba(192, 167, 130, 0.793);
}

.bgm {
  margin: 3rem 3rem 0;
}

.bgm.center {
  max-width: 76ch;
}

.bgm-inner {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(219, 168, 90, 0.28);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 1.25rem 1.25rem 1rem;
}

/* Entête (texte) */
.bgm-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.9rem;
}

.bgm-label {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 229, 176, 0.85);
}

.bgm-title {
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 231, 213, 0.9);
}

/* Le lecteur natif */
.bgm-audio {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  outline: none;
  display: block;
  /* Certains navigateurs prennent en compte la couleur d'accent */
  accent-color: #dba85a;
}

/* Bonus : sur Chromium/WebKit, on peut "arrondir" l'enclosure */
.bgm-audio::-webkit-media-controls-enclosure {
  border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
  .bgm {
    padding: 0 1rem;
  }
  .bgm-inner {
    padding: 1rem;
  }
}

.tenor-gif-embed {
  margin-top: 1em;
}

/************************************/
/* Styles pour les bulles dialogues */
.dialogue-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dialogue-container > .bgm:first-child {
  margin-top: 0;
}

.dialogue-container .story-link {
  margin: unset;
}

.dialogue-bubble::before {
  content: "";
  position: absolute;
  top: -1.6rem;
  left: -2rem;
  width: 4rem;
  height: 5rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(239, 233, 45, 0.3);
}

.dialogue-bubble {
  padding: 1rem 2.5rem;
  margin: 3rem 3rem 0;
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease;
  border: 2px solid rgba(219, 168, 90, 0.3);
  text-align: justify; /* Justification du texte */
  backdrop-filter: blur(12px);
}

.dialogue-bubble p:first-of-type {
  margin-top: 0;
  text-indent: 1.5rem;
}

.dialogue-bubble p:last-of-type {
  margin-bottom: 0;
}

.dialogue-bubble::first-letter {
  font-size: 4rem;
  text-transform: uppercase;
}

.dialogue-bubble::first-letter {
  font-size: 4rem;
  text-transform: uppercase;
}

.dialogue-bubble img {
  margin: 1em 0;
}

.dialogue-bubble::after {
  color: #f8e9c2;
  position: absolute;
  top: -2rem;
  left: 2.6rem;
  font-size: 1.5rem;
}

.dialogue-bubble img {
  display: block;
  margin-left: auto;
  margin-right: auto; /* Centrage de l'image */
}

.dialogue-bubble:not([data-character])::before {
  border: unset;
}

.dialogue-bubble:not([data-character]) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(219, 168, 90, 0.28);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

blockquote.dialogue-bubble {
  border-left: 6px solid rgb(213 183 107 / 56%) !important;
}

blockquote.dialogue-bubble p {
    font-size: 1.4rem;
    color: #e7dab9;
}

.dialogue-mumbling {
  font-size: 1.2rem;
  font-style: italic;
}

/************************************************/
/* Bulles de personnages

/* Dialogue de Ye Yu */
.dialogue-bubble[data-character="Ye Yu"]::before {
  background-image: url("assets/avatars/yeyu.webp");
}
.dialogue-bubble[data-character="Ye Yu"] {
  background-color: rgba(245, 175, 54, 0.207);
}
.dialogue-bubble[data-character="Ye Yu"]::after {
  content: "Yè Yǔ";
}

/* Dialogue de Sun Li */
.dialogue-bubble[data-character="Sun Li"]::before {
  background-image: url("assets/avatars/SunLi.webp");
}
.dialogue-bubble[data-character="Sun Li"] {
  background-color: rgba(58, 44, 12, 0.382);
}
.dialogue-bubble[data-character="Sun Li"]::after {
  content: "Sun Li";
}

/* Dialogue de Nuwu Lianhua */
.dialogue-bubble[data-character="Nuwu Lianhua"]::before {
  background-image: url("assets/avatars/NuwuLianhua.webp");
}
.dialogue-bubble[data-character="Nuwu Lianhua"] {
  background-color: rgba(20, 137, 177, 0.164);
}
.dialogue-bubble[data-character="Nuwu Lianhua"]::after {
  content: "Nuwu Lianhua";
}

/* Dialogue de Kaena */
.dialogue-bubble[data-character="Kaena"]::before {
  background-image: url("assets/avatars/Kaena.webp");
}
.dialogue-bubble[data-character="Kaena"] {
  background-color: rgba(101, 65, 65, 0.319);
}
.dialogue-bubble[data-character="Kaena"]::after {
  content: "Kaena";
}

/* Dialogue de Fang */
.dialogue-bubble[data-character="Fang"]::before {
  background-image: url("assets/avatars/Fang.webp");
}
.dialogue-bubble[data-character="Fang"] {
  background-color: rgba(79, 97, 103, 0.111);
}
.dialogue-bubble[data-character="Fang"]::after {
  content: "Fang";
}

/* Dialogue de Haoran */
.dialogue-bubble[data-character="Haoran"]::before {
  background-image: url("assets/avatars/Haoran.webp");
}
.dialogue-bubble[data-character="Haoran"] {
  background-color: rgba(21, 37, 213, 0.111);
}
.dialogue-bubble[data-character="Haoran"]::after {
  content: "Haoran";
}

/* Dialogue de Yuelan */
.dialogue-bubble[data-character="Yuelan"]::before {
  background-image: url("assets/avatars/Yuelan.webp");
}
.dialogue-bubble[data-character="Yuelan"] {
  background-color: rgba(138, 138, 142, 0.189);
}
.dialogue-bubble[data-character="Yuelan"]::after {
  content: "Yuelan";
}

/* Dialogue de Yu She */
.dialogue-bubble[data-character="Yu She"]::before {
  background-image: url("assets/avatars/YuShe.webp");
}
.dialogue-bubble[data-character="Yu She"] {
  background-color: rgba(196, 98, 6, 0.223);
}
.dialogue-bubble[data-character="Yu She"]::after {
  content: "Yu She";
}

/* Dialogue de Ze Xiao */
.dialogue-bubble[data-character="Ze Xiao"]::before {
  background-image: url("assets/avatars/ZeXiao.webp");
}
.dialogue-bubble[data-character="Ze Xiao"] {
  background-color: rgba(12, 106, 35, 0.111);
}
.dialogue-bubble[data-character="Ze Xiao"]::after {
  content: "Ze Xiao";
}

/* Dialogue de Liyan Hue */
.dialogue-bubble[data-character="Liyan Hue"]::before {
  background-image: url("assets/avatars/LiyanHue.webp");
}
.dialogue-bubble[data-character="Liyan Hue"] {
  background-color: rgba(187, 21, 213, 0.111);
}
.dialogue-bubble[data-character="Liyan Hue"]::after {
  content: "Liyan Hue";
}

/* Dialogue de Yi Xi */
.dialogue-bubble[data-character="Yi Xi"]::before {
  background-image: url("assets/avatars/YiXi.webp");
}
.dialogue-bubble[data-character="Yi Xi"] {
  background-color: rgba(18, 114, 26, 0.111);
}
.dialogue-bubble[data-character="Yi Xi"]::after {
  content: "Yi Xi";
}

/* Dialogue de Bao Yat-sau */
.dialogue-bubble[data-character="Bao Yat-sau"]::before {
  background-image: url("assets/avatars/BaoYatSau.webp");
}
.dialogue-bubble[data-character="Bao Yat-sau"] {
  background-color: rgba(21, 37, 213, 0.111);
}
.dialogue-bubble[data-character="Bao Yat-sau"]::after {
  content: "Bao Yat-sau";
}

/* Dialogue de Zhuge Liuyun */
.dialogue-bubble[data-character="Zhuge Liuyun"]::before {
  background-image: url("assets/avatars/ZhugeLiuyun.webp");
}
.dialogue-bubble[data-character="Zhuge Liuyun"] {
  background-color: rgba(21, 37, 213, 0.111);
}
.dialogue-bubble[data-character="Zhuge Liuyun"]::after {
  content: "Zhuge Liuyun";
}

/* Dialogue de Gu Xianglian */
.dialogue-bubble[data-character="Gu Xianglian"]::before {
  background-image: url("assets/avatars/GuXianglian.webp");
}
.dialogue-bubble[data-character="Gu Xianglian"] {
  background-color: rgba(21, 37, 213, 0.111);
}
.dialogue-bubble[data-character="Gu Xianglian"]::after {
  content: "Gu Xianglian";
}

/* Dialogue de Zhuge Yulian */
.dialogue-bubble[data-character="Zhuge Yulian"]::before {
  background-image: url("assets/avatars/ZhugeYulian.webp");
}
.dialogue-bubble[data-character="Zhuge Yulian"] {
  background-color: rgba(106, 12, 12, 0.111);
}
.dialogue-bubble[data-character="Zhuge Yulian"]::after {
  content: "Zhuge Yulian";
}

/* Dialogue de Yingzimo */
.dialogue-bubble[data-character="Yingzimò"]::before {
  background-image: url("assets/avatars/Yingzimo.webp");
}
.dialogue-bubble[data-character="Yingzimò"] {
  background-color: rgba(195, 101, 50, 0.134);
}
.dialogue-bubble[data-character="Yingzimò"]::after {
  content: "Yingzimò";
}

/* Dialogue de Yingzimo */
.dialogue-bubble[data-character="Ruyi"]::before {
  background-image: url("assets/avatars/Default.webp");
}
.dialogue-bubble[data-character="Ruyi"] {
  background-color: rgba(140, 119, 108, 0.134);
}
.dialogue-bubble[data-character="Ruyi"]::after {
  content: "Ruyi";
}

/* Citations */
.group-description blockquote {
  font-size: 1.6em;
  margin: 0;
  font-style: italic;
}

.citation-author {
  text-align: right;
  font-weight: bold;
}