/* LES PISCINES ROOMS (niveau 40) : ce que le niveau écrit à l'écran, le moins possible et sans fioritures (le créateur : « une
   mise en scène classe mais sobre, pas trop d'écritures »). Le nom d'un lieu en petit ; la fausse sauvegarde ; le faux plantage
   et le faux écran titre. */
.pis-place {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  font: 600 15px/1 'Barlow Condensed', sans-serif; letter-spacing: .5em; color: rgba(245, 250, 248, .85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35); opacity: 0; transition: opacity 1.4s ease; pointer-events: none; white-space: nowrap;
}
.pis-place.on { opacity: 1; }
/* le plongeoir : « Sauter », seul au milieu, qui respire */
.pis-jump {
  position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%) scale(.9); display: flex; align-items: center; gap: 12px;
  font: 600 22px/1 'Barlow Condensed', sans-serif; letter-spacing: .35em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 12px rgba(80, 0, 60, .55); opacity: 0; transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.pis-jump.on { opacity: 1; transform: translateX(-50%) scale(1); animation: pis-breathe 1.6s ease-in-out infinite; }
/* la vanne des voix : les sous-titres de tout le jeu, partout, puis effacés lettre à lettre */
.pis-subs { position: absolute; inset: 0; pointer-events: none; }
.pis-sub { position: absolute; max-width: 23%; font: 600 18px/1.15 'Barlow Condensed', sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .7), 0 0 2px #000;
  animation: pis-subin .35s ease-out both; transition: opacity .3s; }
.pis-sub b { display: block; font-size: .62em; letter-spacing: .3em; color: #ffd98a; margin-bottom: 2px; }
.pis-sub span::after { content: '▌'; opacity: .7; margin-left: 2px; }
.pis-sub.gone { opacity: 0; }
@keyframes pis-subin { from { opacity: 0; transform: translateY(8px); } }
@keyframes pis-breathe { 50% { transform: translateX(-50%) scale(1.06); } }

.pis-toast {
  position: absolute; right: 3%; bottom: 5%; font: 400 14px/1 'Barlow Condensed', sans-serif; letter-spacing: .2em; color: #f1f5f3;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.pis-toast::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border: 2px solid currentColor; border-radius: 50%; border-top-color: transparent; vertical-align: -1px; animation: pis-spin 1s linear infinite; }
.pis-toast.on { opacity: .9; }
@keyframes pis-spin { to { transform: rotate(360deg); } }

/* la fausse sauvegarde : l'écran des parties, une de trop */
.pis-slots { position: fixed; inset: 0; z-index: 60; background: #0d1214; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
.pis-slots.on { opacity: 1; }
.pis-slots.cut { opacity: 0; transition: none; }
.pis-shelf { display: flex; gap: 3vw; }
.pis-case {
  width: 15vw; aspect-ratio: 1; background: linear-gradient(160deg, #2a3134, #191e20); border: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.2vw; gap: .4vw; color: #cfd6d4; font: 500 1.1vw/1 'Barlow Condensed', sans-serif; letter-spacing: .15em;
}
.pis-case b { font-weight: 700; font-size: 1.4vw; color: #eef3f1; }
.pis-case span { opacity: .6; }
.pis-case.four { position: relative; overflow: hidden; border-color: rgba(190, 236, 240, .5); }
.pis-case.four i { position: absolute; inset: 0; background: url('../assets/story/piscines/plafond.jpg') center/cover; opacity: .55; }
.pis-case.four b, .pis-case.four span, .pis-case.four em { position: relative; }
.pis-case.four em { font-style: normal; font-size: .9vw; opacity: .8; }

/* le faux plantage, puis le faux écran titre */
.pis-crash { position: fixed; inset: 0; z-index: 70; background: transparent; display: flex; align-items: center; justify-content: center; transition: background .1s; }
.pis-crash.on { background: #000; }
.pis-crash .msg { display: none; text-align: center; color: #e8e8e8; font: 600 28px/1.2 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
.pis-crash.on .msg { display: block; }
.pis-crash .msg small { display: block; margin-top: 14px; font-size: 16px; opacity: .6; letter-spacing: .2em; }
.pis-crash.title { background: #0b1d33; }
.pis-crash .logo img { width: 42vw; max-width: 760px; filter: grayscale(.85) brightness(.9); opacity: .9; }
.pis-crash .press { position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%); color: #cfd8dc; display: grid; place-items: center; font: 700 30px 'Barlow Condensed', sans-serif; opacity: .8; }
.pis-crash.out { opacity: 0; transition: opacity .8s ease; }