/*
 * LES QUÊTES DE GROMELIN — l'icône (le baluchon de MiniPixiz) et la fenêtre.
 *
 * La fenêtre ne dessine rien qui ne soit déjà au parc. En haut, la forêt de
 * Gromelin : le paysage de l'écran-titre de MiniPixiz (quetes-foret.js), le
 * Gromelin de l'écran de mission de Pixiz, et sa parole sur une feuille du
 * courrier de Pixiz reliée à lui par des bulles de fée. Puis la ligne de la
 * semaine (bonus, compteur de la boutique), le parchemin de missions avec ses
 * cases, les voyants des jeux, la frutibarre de Frutisnake, les pastilles de
 * kikooz de la boutique, le bouton orange de Swapou ; enfin les mises à prix,
 * sous la planche aux lianes de Pixiz, en affiches.
 */

/* ── L'icône ────────────────────────────────────────────────────────────── */
.home-tile[data-go="quetes"] .ico { position: relative; overflow: visible; }
.ico-baluchon { position: relative; display: block; width: 40px; height: 35px; }
.ico-baluchon img.sac {
  width: 40px !important; height: 35px !important; max-width: none !important; max-height: none !important;
  display: block; transform-origin: 50% 95%;
}
/* Mobile : la case de la grille est plus grande, le baluchon aussi. */
body:not(.bureau-frutiz) .home-tile[data-go="quetes"] .ico-baluchon { transform: scale(1.3); }
.ico-baluchon .eclat {
  position: absolute; width: 12px; height: 12px; display: none; pointer-events: none;
  background: url('/minipixiz/sprites/shape177.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 2px #FFF6A0) brightness(1.15);
  animation: qt-eclat 1.6s ease-in-out infinite;
}
.ico-baluchon .eclat.e1 { left: -5px; top: 2px; }
.ico-baluchon .eclat.e2 { left: 31px; top: -6px; width: 15px; height: 15px; animation-delay: .55s; }
.ico-baluchon .eclat.e3 { left: 34px; top: 20px; width: 9px; height: 9px; animation-delay: 1.1s; }
@keyframes qt-eclat { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes qt-gigote { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 84% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
.home-tile.nouvelles .ico-baluchon .eclat { display: block; }
.home-tile.nouvelles .ico-baluchon img.sac { animation: qt-gigote 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .home-tile.nouvelles .ico-baluchon img.sac { animation: none; }
  .ico-baluchon .eclat { animation: none; opacity: 1; }
}

/* ── La feuille (mobile) et la fenêtre (bureau) ─────────────────────────── */
.sheet.sheet-quetes { height: 90vh; max-height: 90vh; height: calc(var(--app-h, 100dvh) * .9); max-height: calc(var(--app-h, 100dvh) * .9); }
.sheet.sheet-quetes .sheet-head .sheet-ico { width: 20px; height: 17px; }
#quetes-corps { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #FFFFFF;
  display: flex; flex-direction: column; }
/* Sur le bureau, la fenêtre adopte la feuille (comme les Prunostics). */
body.bureau-frutiz .fen #quetes-sheet {
  position: static; inset: auto; transform: none; transition: none; visibility: visible;
  height: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none;
  background: #FFFFFF; z-index: auto; padding: 0;
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
body.bureau-frutiz .fen #quetes-sheet .sheet-head { display: none; }
body.bureau-frutiz #quetes-sheet-backdrop { display: none !important; }

.qt { font: 11px Verdana, Arial, sans-serif; color: #333333; flex: 1 0 auto; display: flex; flex-direction: column;
  padding: 8px 8px 0; gap: 8px; }
.qt-ferme, .qt-vide { padding: 20px 12px; text-align: center; color: #666666; }

/* ── La forêt de Gromelin ─────────────────────────────────────────────── */
.qt-scene { position: relative; height: 230px; margin: -8px -8px 0; overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(to bottom, #6FA6D8, #BFDDF0 55%, #7FBF4A 56%, #3E8A2A); border-bottom: 1px solid #DDDDDD; }
.qt-ciel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qt-plan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.qt-nuage { position: absolute !important; opacity: .9; animation: qt-derive 90s linear infinite; }
@keyframes qt-derive { to { transform: translateX(80px); } }
/* Gromelin (Pixiz, l'écran de mission) sort des herbes devant sa cabane ; le
   dessin le montre penché vers la droite : on le redresse un peu. Il respire,
   et s'anime quand il parle. */
.qt-gromelin { position: absolute; transform-origin: 50% 100%; animation: qt-souffle 4s ease-in-out infinite; }
.qt-gromelin img { display: block; width: 100%; height: 100%; transform-origin: 45% 100%; transform: rotate(-12deg); }
.qt-gromelin.parle { animation: qt-parle .5s ease-in-out infinite; }
@keyframes qt-souffle { 50% { transform: translateY(1.5px) scaleY(.99); } }
@keyframes qt-parle { 50% { transform: translateY(-1.5px) rotate(-1deg); } }
/* Ce qu'il dit : une feuille du courrier de Pixiz (shape1039, ses plis et ses
   bords déchirés en border-image), et les bulles de fée qui y mènent. */
.qt-dit { position: absolute; z-index: 6; top: 12px; right: 12px; left: 45%; min-height: 56px; max-height: calc(100% - 24px);
  overflow: hidden; box-sizing: border-box; padding: 9px 13px 15px; cursor: pointer;
  border-image: url('/minipixiz/sprites/shape1039.svg') 16 fill / 10px stretch;
  filter: drop-shadow(1px 2px 1px rgba(40,25,5,.35));
  font-size: 11px; line-height: 1.5; color: #4A3418; }
.qt-dit em { font-style: normal; font-weight: bold; color: #6E1A10; }
.qt-curseur { display: inline-block; width: 2px; height: 11px; background: #4A3418; vertical-align: -1px; margin-left: 1px;
  animation: qt-clign .8s steps(1) infinite; }
@keyframes qt-clign { 50% { opacity: 0; } }
.qt-suite { position: absolute; right: 12px; bottom: 4px; font-size: 9px; color: #9A7A48; }
.qt-suite b { color: #6E1A10; }
.qt-bulle-fee { position: absolute; z-index: 5; display: block; animation: qt-monte 2.4s ease-in-out infinite; }
.qt-bulle-fee:nth-of-type(2n) { animation-delay: -.8s; }
@keyframes qt-monte { 50% { transform: translateY(-2px); } }
.qt-scene.etroite { height: 200px; }
.qt-scene.etroite .qt-dit { top: 10px; right: 10px; font-size: 10.5px; line-height: 1.45; padding: 8px 11px 14px; }
/* Sans la forêt (ses sprites ne sont pas arrivés) : la feuille seule, sur un ciel. */
.qt-scene.sans-foret { height: auto; min-height: 90px; padding: 12px; }
.qt-scene.sans-foret .qt-dit { position: relative; inset: auto; }
@media (prefers-reduced-motion: reduce) {
  .qt-nuage, .qt-gromelin, .qt-gromelin.parle, .qt-bulle-fee { animation: none; }
}

/* La semaine : le texte, le bonus, et le compteur de la boutique (`frKikooz`). */
.qt-semaine { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: #666666; font-size: 10px; line-height: 1.4; }
.qt-semaine .qt-compte { white-space: nowrap; }
/* À droite, le bonus et le compteur côte à côte — l'un sur l'autre si c'est étroit. */
.qt-sem-droite { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.qt-semaine b { color: #333333; }
.qt-sem-txt { flex: 1 1 170px; min-width: 0; }
/* La cabane de Gromelin (sa vignette de la carte de MiniPixiz). */
.qt-cabane { width: 30px; height: 21px; flex: 0 0 auto; }
.qt-compteur { display: inline-flex; align-items: center; gap: 3px; box-sizing: border-box; height: 22px; padding: 0 6px 0 3px;
  background: #F8D5BC; border: 2px solid #F3BE8C; border-radius: 5px; box-shadow: 0 0 0 2px #DDDDDD;
  font: 700 12px Verdana, Arial, sans-serif; color: #764A34; white-space: nowrap; }
.qt-compteur b { font: 700 14px Verdana, Arial, sans-serif; color: inherit; }
.qt-compteur { position: relative; }
.qt-max { position: absolute; z-index: 2; right: -12px; top: -11px; width: 36px; height: auto !important; transform: rotate(12deg); }
.qt-compteur img, .qt-kik img { width: 16px; height: 15px; display: block; }
.qt-bonus { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px 0 2px; border-radius: 9px;
  background: #F3F3F3; box-shadow: inset 0 0 0 1px #DDDDDD; color: #666666; white-space: nowrap; }
.qt-bonus img { width: 16px; height: 16px; display: block; }
.qt-bonus.verse { background: #E8F8D3; box-shadow: inset 0 0 0 1px #ADE76B; color: #335511; font-weight: bold; }

/* La liste : le PARCHEMIN de missions de Gromelin (MiniPixiz, shape992 — son
   fond et ses bords ombrés, découpés en border-image pour ne pas s'étirer),
   roulé entre deux baguettes (shape993, ses mêmes teintes, couchées). */
.qt-liste { position: relative; margin: 14px 10px 12px; padding: 4px 2px;
  border: solid transparent; border-width: 0 16px; border-image: url('/minipixiz/sprites/shape992.svg') 0 34 fill / 0 16px stretch; }
.qt-liste::before, .qt-liste::after { content: ""; position: absolute; left: -24px; right: -24px; height: 12px; border-radius: 6px; z-index: 1;
  background:
    radial-gradient(circle at 6px 50%, #725e3d 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 6px) 50%, #725e3d 0 3px, transparent 3.5px),
    linear-gradient(to bottom, #927d4c, #bfa464 35%, #bfa464 65%, #927d4c);
  box-shadow: 0 2px 2px rgba(60,40,10,.3); }
.qt-liste::before { top: -8px; }
.qt-liste::after { bottom: -8px; }
.qt-ligne { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
  padding: 7px 6px 7px 2px; border-top: 1px dashed rgba(90,60,25,.35); }
.qt-ligne:first-child { border-top: 0; }
/* La case de mission, et sa coche (blanche, posée sur la case). */
.qt-case { position: relative; width: 22px; height: 22px; justify-self: center; }
.qt-case img { position: absolute; left: 0; top: 0; width: 22px; height: 22px; }
.qt-case img.coche { left: 3px; top: -5px; width: 20px; height: 25px; filter: drop-shadow(0 1px 0 rgba(60,40,10,.6)); }
.qt-voyant { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
.qt-corps { min-width: 0; }
.qt-titre { font-weight: bold; color: #2E1C06; overflow-wrap: anywhere; }
.qt-detail { margin-top: 1px; font-size: 10px; color: #4A3418; overflow-wrap: anywhere; }
.qt-ligne.faite .qt-titre { color: #2E1C06; text-decoration: line-through; text-decoration-color: rgba(46,28,6,.45); }
/* LA FRUTIBARRE de Frutisnake : son bout rose (fbarrePiece02), son milieu
   (fbarrePiece03) et le bout en miroir — posée dans une gouttière rose pâle.
   Les dessins gardent leurs proportions (un SVG ne s'étire pas en fond) : le
   milieu, une tranche verticale, se RÉPÈTE à la hauteur de la barre. */
.qt-barre { position: relative; height: 10px; margin-top: 4px; border-radius: 5px; overflow: hidden;
  background: #FBE9E6; box-shadow: inset 0 0 0 1px #E8B9B4; }
.qt-barre i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 10px; box-sizing: border-box; padding: 0 4px;
  background: url('/snake3/sprites/fbarrePiece03.svg') 0 0 / auto 100% repeat-x content-box; }
.qt-barre i::before, .qt-barre i::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5.3px;
  background: url('/snake3/sprites/fbarrePiece02.svg') 0 0 / auto 100% no-repeat; }
.qt-barre i::before { left: 0; }
.qt-barre i::after { right: 0; transform: scaleX(-1); }
.qt-gain { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; }
.qt-kik { display: inline-flex; align-items: center; gap: 2px; font: 700 11px Verdana, Arial, sans-serif; color: #5A3420; white-space: nowrap; }
/* Les récompenses du parchemin : la pastille kikooz de la boutique (celle du
   compteur et des affiches), qui se détache du fond ; verte une fois versée. */
.qt-liste .qt-gain .qt-kik { box-sizing: border-box; min-width: 48px; height: 22px; justify-content: center; padding: 0 7px 0 3px;
  border-radius: 5px; font-size: 12px; background: #F8D5BC; border: 2px solid #F3BE8C; color: #764A34;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(60,35,10,.35); }
.qt-liste .qt-ligne.faite .qt-gain .qt-kik { background: #E8F8D3; border-color: #ADE76B; color: #335511; }
/* « Changer » : le bouton orange de Swapou ; armé (« Sûr ? »), son bouton vert. */
.qt-swapou { position: relative; height: 18px; margin-top: 2px; padding: 0 10px; border: 0; cursor: pointer; white-space: nowrap;
  font: 700 10px Verdana, Arial, sans-serif; color: #FFFFFF; text-shadow: 0 1px 0 #8A4A00;
  background: url('/swapou/ui/bouton-orange.svg') center / 100% 100% no-repeat; }
.qt-swapou.arme { background-image: url('/swapou/ui/bouton-vert.svg'); text-shadow: 0 1px 0 #2E5A00; }
.qt-swapou:disabled { opacity: .6; cursor: default; }
/* La gélule rose (`butPushStandard`, #465). */
.qt-gelule { position: relative; height: 16px; padding: 0 9px; border: 0; border-radius: 8px; background: #FFAAAD;
  box-shadow: inset 0 0 0 1.5px #F28687; font: 700 10px Verdana, Arial, sans-serif; color: #660000; cursor: pointer; white-space: nowrap; }
.qt-gelule::after { content: ""; position: absolute; inset: 1.5px; pointer-events: none; border-radius: 6.5px;
  border-top: 1px solid #FFEAEC; border-right: 1px solid #FFEAEC; }
.qt-gelule:active { background: #F49B9E; }
.qt-gelule.arme { background: #FFD27A; box-shadow: inset 0 0 0 1.5px #E2A23A; color: #5A3A00; }
.qt-gelule.arme::after { border-color: #FFF0C8; }
.qt-gelule:disabled { opacity: .6; cursor: default; }
/* « Changer » n'encombre pas la liste : il paraît au survol de la quête
   (toujours là sur un écran tactile, et dès qu'il est armé). */
@media (hover: hover) {
  .qt-changer { visibility: hidden; }
  .qt-ligne:hover .qt-changer, .qt-ligne:focus-within .qt-changer, .qt-changer.arme { visibility: visible; }
}

/* Les rubriques (contrat, mises à prix) : la puce rose des rubriques de la boutique. */
.qt-section { display: flex; align-items: center; gap: 4px; margin-top: 4px; font: 700 13px Verdana, Arial, sans-serif; color: #000000; }
.qt-section img { width: 20px; height: 18px; }
.qt-note { margin: 2px 0 6px; font-size: 10px; color: #666666; line-height: 1.45; }
.qt-note b { color: #333333; }
/* L'enseigne des mises à prix : la planche aux lianes de Pixiz (invMessage). */
.qt-enseigne { position: relative; margin: 10px auto 2px; min-height: 20px; text-align: center; }
.qt-enseigne .qt-mp { position: absolute !important; left: 0; top: 0; }
.qt-enseigne span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 14px Verdana, Arial, sans-serif; color: #3E2608; text-shadow: 0 1px 0 rgba(255,240,200,.6); }
.qt-enseigne:not(:has(.qt-mp)) span { position: static; }
.qt-note-primes { text-align: center; }
/* Le sceau du contrat (s'il est rallumé). */
.qt-sceau { justify-self: center; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  font: bold 13px Georgia, serif; color: #FFE8E8; background: radial-gradient(circle at 38% 34%, #F28687, #C0392B 70%); }
.qt-sceau.vide { background: none; color: #F28687; box-shadow: inset 0 0 0 1.5px #F28687; }

/* Les mises à prix : des affiches, le portrait du jeu au milieu. */
.qt-avis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 2px 6px; }
.qt-affiche { position: relative; padding: 7px 8px 9px; text-align: center; background: linear-gradient(175deg, #F6E7BC, #E8CD8E);
  border: 1px solid #C9A464; border-radius: 3px 5px 4px 2px; box-shadow: 0 2px 4px rgba(0,0,0,.18), inset 0 0 16px rgba(160,110,40,.18); }
.qt-affiche:nth-child(odd) { transform: rotate(-1deg); }
.qt-affiche:nth-child(even) { transform: rotate(.9deg); }
.qt-portrait { width: 64px; height: 64px; margin: 2px auto 4px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px #DDDDDD, 0 0 0 3px #888888; background: #CCF599; }
.qt-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.25); }
.qt-portrait.vide { display: flex; align-items: center; justify-content: center; }
.qt-aff-jeu { display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: bold; color: #333333; }
.qt-aff-jeu .qt-voyant { width: 16px; height: 16px; }
.qt-aff-record { margin-top: 3px; font-size: 13px; font-weight: bold; color: #000000; }
.qt-aff-tenant { font-size: 10px; color: #666666; }
.qt-aff-prime { margin-top: 5px; }
.qt-aff-prime .qt-kik { height: 20px; padding: 0 7px 0 3px; border-radius: 5px; background: #F8D5BC; border: 2px solid #F3BE8C;
  box-shadow: 0 0 0 2px #DDDDDD; font-size: 14px; }
.qt-affiche.prise { filter: grayscale(.7); opacity: .8; }
.qt-aff-prise { position: absolute; left: 6px; right: 6px; top: 44%; transform: rotate(-12deg); font-size: 11px; font-weight: bold;
  color: rgba(192,40,26,.9); border: 2px double rgba(192,40,26,.85); border-radius: 5px; background: rgba(255,245,220,.7); padding: 1px 4px; }

.qt-aff-prise.qt-aff-moi { color: #2C6A0F; border-color: rgba(60,130,20,.85); transform: rotate(-6deg); }

.qt-contrat:empty, .qt-primes:empty { display: none; }
.qt-pied { margin: 0 -8px; padding: 6px 10px 8px; border-top: 1px solid #DDDDDD; font-size: 10px; color: #888888; text-align: center; line-height: 1.5; }
.qt-pied b { color: #555555; }

/* Étroit : les trois affiches restent de front, en plus petit. */
@media (max-width: 460px) {
  .qt-avis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .qt-affiche { padding: 6px 4px 7px; }
  .qt-portrait { width: 54px; height: 54px; }
  .qt-aff-record { font-size: 11px; }
  .qt-aff-tenant { font-size: 9px; }
}

/* Sur le bureau, l'icône se range après les Prunostics, en bout de rangée. */
body.bureau-frutiz #bureau .home-tile[data-go="quetes"] { order: 13; }