/* L'ouverture d'un colis : à chaque livre, tout l'écran dit ce qu'on vient de
   gagner. La couverture de face, la rareté tamponnée en grand, le titre en grand,
   et le fond qui prend la couleur de la rareté. */
.salle { --c: #1C2266; --bh: min(29dvh, 66vw); position: fixed; inset: 0; z-index: 62; overflow: hidden; background: var(--nuit); touch-action: none; user-select: none; -webkit-user-select: none; }
.salle::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 110% 70% at 50% 112%, #8E1231, #4A1148 34%, #161C5C 64%, var(--nuit)); }
.salle::after { content: ''; position: absolute; inset: 0; opacity: .4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M24 12c1 6 2.500 8 9 9-6.500 1-8 3-9 9-1-6-2.500-8-9-9 6.500-1 8-3 9-9z' fill='%233651BE' fill-opacity='.55'/%3E%3Ccircle cx='72' cy='68' r='2.400' fill='%233651BE' fill-opacity='.6'/%3E%3C/svg%3E"); }
.salle .magie { z-index: 12; }
/* Le fond prend la couleur de la rareté : on sait ce qu'on a avant de lire. */
.fond-rarete { position: absolute; z-index: 1; inset: 0; opacity: 0; transition: opacity .16s ease; background: radial-gradient(ellipse 96% 62% at 50% 34%, color-mix(in srgb, var(--c) 92%, white) 0, color-mix(in srgb, var(--c) 72%, transparent) 40%, color-mix(in srgb, var(--c) 22%, transparent) 72%, transparent 100%); pointer-events: none; }
.voile { position: absolute; inset: 0; z-index: 3; background: #04061C; opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.voile.vu { opacity: .84; }
.onde { position: absolute; z-index: 9; left: 50%; top: 32%; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin; border-radius: 50%; border: 4px solid var(--co, #FFD9E2); opacity: 0; pointer-events: none; will-change: transform, opacity; }

.quitter { position: absolute; z-index: 20; left: 10px; top: calc(var(--haut) + 10px); width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 18, 54, .6); color: var(--mousse); font-size: 26px; line-height: 1; }

/* Où l'on en est : cinq pastilles qui prennent la couleur de chaque livre. */
.avancee { position: absolute; z-index: 20; left: 0; right: 0; top: calc(var(--haut) + 24px); display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.avancee i { width: 15px; height: 15px; border-radius: 50%; background: rgba(211, 218, 251, .2); box-shadow: inset 0 0 0 1.500px rgba(255, 255, 255, .3); }
.avancee i.vu { background: var(--tranche); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }

/* Le colis, seul, au milieu de l'écran. */
.tenu-zone { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; --pack-h: min(40dvh, 74vw, 400px); --pack-l: calc(var(--pack-h) * .92); }
.tenu { position: relative; width: var(--pack-l); height: var(--pack-h); touch-action: none; cursor: grab; transition: transform .26s cubic-bezier(.3, .9, .3, 1); }
/* Ouvert, il descend un peu pour laisser sortir les livres, toujours dans l'axe. */
.tenu-zone.ouvert .tenu { transform: translateY(28.300dvh) scale(.6); }
@media (max-height: 700px) { .tenu-zone.ouvert .tenu { transform: translateY(27.500dvh) scale(.44); } }
.tenu .caisse { transition: transform .12s ease-out; }
.tenu .pack.ouvert .caisse { transform: rotateX(-17deg) rotateY(-9deg); transition: transform .3s cubic-bezier(.3, .8, .3, 1); }
.tenu .pack-reflet { background-position: var(--reflet, 120%) 0; }
.coupure { position: absolute; z-index: 4; left: 0; top: 69.700%; width: 100%; height: 5px; margin-top: -2px; background: linear-gradient(90deg, #fff, #FFE9A8); box-shadow: 0 0 14px 5px #FFD98A; transform: scaleX(var(--coupe, 0)); transform-origin: 0 50%; border-radius: 3px; pointer-events: none; }
.guide-geste { position: absolute; z-index: 4; left: 0; top: 69.700%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, rgba(255, 226, 154, .85) 26%, transparent 68%); animation: guide 1.350s cubic-bezier(.5, 0, .3, 1) infinite; pointer-events: none; }
@keyframes guide { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(var(--pack-l)); opacity: 0; } }
.pack.coupe .guide-geste, .pack.coupe .coupure { display: none; }
.annonce { position: absolute; z-index: 7; left: 50%; top: calc(var(--haut) + 9dvh); transform: translateX(-50%) rotate(-1.500deg); padding: 8px 22px 10px; background: var(--mousse); color: var(--lie); font-family: var(--titre); font-weight: 750; font-size: clamp(24px, 6.600vw, 34px); line-height: 1.1; white-space: nowrap; border-radius: 4px; box-shadow: 0 0 0 2px var(--rouge), var(--ombre-papier); font-variation-settings: 'SOFT' 100; pointer-events: none; }
.a-ouvrir { position: absolute; z-index: 20; right: 10px; top: calc(var(--haut) + 14px); padding: 6px 12px 7px; border-radius: 999px; background: rgba(12, 18, 54, .7); color: var(--mousse); font-size: 15px; font-weight: 600; line-height: 1; }
.a-ouvrir:empty { display: none; }

/* Les livres debout dans la boîte, comme des disques dans un bac : le prochain
   devant, de face, les suivants derrière lui, le meilleur tout au fond. Le haut
   de chacun porte la couleur de sa rareté. */
.livre-boite { --y: 0px; position: absolute; left: 13%; right: 13%; top: calc(var(--H) * -.42); aspect-ratio: 2 / 3; display: block; overflow: hidden; border-radius: 2px 4px 0 0; background: var(--crepuscule); transform: translateZ(calc(var(--P) * (.3 - var(--i) * .15))) translateY(calc(var(--H) * var(--i) * -.035 + var(--y))) rotateX(3deg); transition: transform .24s cubic-bezier(.25, .9, .3, 1) calc(var(--i) * 20ms); }
.livre-boite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.livre-boite::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 8, 30, 0) 24%, rgba(10, 8, 30, .6) 54%); box-shadow: inset 0 calc(var(--H) * .016) 0 var(--tranche), inset 0 0 0 1px rgba(255, 255, 255, .3); }
.livre-boite.brille { box-shadow: 0 0 calc(var(--H) * .07) calc(var(--H) * .016) var(--tranche); }
.livre-boite.bas { --y: calc(var(--H) * (.42 + var(--i) * .035)); visibility: hidden; }
.livre-boite.sort { --y: calc(var(--H) * -.62); transition: transform .13s ease-out; }

/* Le livre gagné : de face, en grand, cerné de sa couleur. */
.carte-zone { --bl: calc(var(--bh) / 1.5); position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--haut) + 54px); height: var(--bh); display: grid; place-items: center; pointer-events: none; }
.carte { position: relative; width: var(--bl); height: var(--bh); will-change: transform; rotate: -1deg; }
.couv-grande { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 4px 8px 8px 4px; background: var(--crepuscule); box-shadow: 0 0 0 4px var(--tranche), 0 0 0 6px rgba(255, 255, 255, .65), 0 14px 26px rgba(4, 6, 28, .55), 0 0 44px 8px color-mix(in srgb, var(--tranche) 62%, transparent); }
.couv-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.couv-grande::after { content: ''; position: absolute; inset: 0; box-shadow: inset 7px 0 8px -5px rgba(0, 0, 0, .45); }
.carte.r4 .couv-grande::before, .carte.r5 .couv-grande::before { content: ''; position: absolute; z-index: 2; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 46%, rgba(255, 220, 190, .34) 52%, transparent 66%); background-size: 260% 100%; animation: reflet-couv 2.800s ease-in-out infinite; }
@keyframes reflet-couv { 0% { background-position: 130% 0; } 60%, 100% { background-position: -80% 0; } }
.pastille-livre { position: absolute; z-index: 8; right: -12px; top: -10px; rotate: 6deg; padding: 5px 12px 6px; border-radius: 999px; font-family: var(--titre); font-weight: 700; font-size: 15.500px; line-height: 1.1; white-space: nowrap; background: var(--mousse); color: var(--lie); box-shadow: 0 5px 12px rgba(4, 6, 28, .5); }
.pastille-livre.neuf { background: var(--rouge); color: var(--mousse); }
.pastille-livre.envie { background: var(--orchidee); color: var(--lie); }
.pastille-livre.mieux { background: var(--or); color: var(--lie); }

/* Sous le livre : la rareté tamponnée, puis le titre, gros et lisibles. */
.legende-livre { position: absolute; z-index: 7; left: 12px; right: 12px; top: calc(var(--haut) + 54px + var(--bh) + 14px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; pointer-events: none; }
.tampon { position: relative; display: inline-flex; align-items: baseline; gap: 9px; padding: 4px 18px 6px; background: var(--tranche); color: #fff; font-family: var(--titre); font-weight: 800; font-size: clamp(25px, 7.400vw, 34px); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; rotate: -2.500deg; border-radius: 5px; box-shadow: inset 0 0 0 2.500px rgba(255, 255, 255, .7), 0 7px 15px rgba(4, 6, 28, .5); text-shadow: 0 2px 2px rgba(0, 0, 0, .28); font-variation-settings: 'SOFT' 0, 'WONK' 0; animation: tampon .2s cubic-bezier(.3, 1.300, .5, 1) both; }
.tampon.r0, .tampon.r4 { color: var(--lie); text-shadow: none; box-shadow: inset 0 0 0 2.500px rgba(58, 34, 24, .4), 0 7px 15px rgba(4, 6, 28, .5); }
.tampon.r5 { background: linear-gradient(100deg, #F01D46, #FF6A8E, #F01D46, #B23BD6, #F01D46); background-size: 300% 100%; animation: tampon .2s cubic-bezier(.3, 1.300, .5, 1) both, irise 2.600s linear infinite; }
@keyframes irise { to { background-position: 300% 0; } }
@keyframes tampon { from { transform: scale(2.300) rotate(-9deg); opacity: 0; } }
.niveau { display: flex; align-items: center; gap: 8px; color: var(--mousse); font-size: 15px; font-style: italic; }
.niveau .flammes svg { width: 15px; height: 20px; fill: rgba(255, 255, 255, .24); }
.niveau .flammes .allumee { fill: var(--tranche); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .6)); }
.etiquette-titre { max-width: 100%; padding: 7px 16px 9px; background: var(--mousse); color: var(--lie); font-size: clamp(21px, 6.200vw, 29px); font-weight: 700; line-height: 1.08; rotate: .7deg; border-radius: 4px; box-shadow: var(--ombre-papier); text-wrap: balance; font-variation-settings: 'SOFT' 100, 'WONK' 0; animation: pose-etiquette .16s .07s ease-out both; }
@keyframes pose-etiquette { from { opacity: 0; transform: translateY(10px); } }
.etiquette-auteur { margin: 0; padding: 2px 12px 3px; border-radius: 3px; background: rgba(12, 18, 54, .74); color: var(--mousse); font-size: 16px; line-height: 1.2; animation: pose-etiquette .16s .12s ease-out both; }
.indice-main { margin: 2px 0 0; font-family: var(--main); font-size: 20px; color: var(--mousse); font-kerning: none; line-height: 1.1; text-shadow: 0 1px 4px rgba(6, 8, 34, .8); }

.barre-colis { position: absolute; z-index: 20; left: 12px; right: 12px; bottom: calc(var(--bas) + 12px); display: flex; gap: 8px; }
.barre-colis .bouton { flex: 1 1 0; min-height: 56px; padding: 8px 12px; font-size: 20px; }
.barre-colis .bouton.discret { flex: 0 0 38%; padding: 8px 6px; background: rgba(253, 244, 231, .94); font-size: 15.500px; white-space: nowrap; }

/* Le bilan : tout ce qu'on a gagné se lit d'un coup d'œil. */
.bilan-colis { position: absolute; z-index: 15; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: calc(var(--haut) + 14px) 12px calc(var(--bas) + 12px); overflow-y: auto; touch-action: pan-y; background: radial-gradient(ellipse 100% 44% at 50% 20%, color-mix(in srgb, var(--c) 58%, transparent), transparent 78%), radial-gradient(ellipse 110% 70% at 50% 112%, #8E1231, #4A1148 34%, #161C5C 64%, var(--nuit)); animation: pose-etiquette .18s ease-out both; }
.bilan-colis h2 { font-size: 24px; font-style: italic; font-weight: 500; text-align: center; }
.vedette { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 440px); text-align: center; }
.vedette .couv { position: relative; display: block; width: min(31vw, 22dvh, 170px); aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px 6px 6px 3px; background: var(--crepuscule); box-shadow: 0 0 0 3px var(--tranche), 0 0 0 4.500px rgba(255, 255, 255, .6), 0 0 34px 8px color-mix(in srgb, var(--tranche) 62%, transparent); }
.vedette .couv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vedette > div { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -14px; position: relative; z-index: 2; }
.vedette .tampon { font-size: clamp(20px, 5.800vw, 27px); padding: 3px 13px 5px; animation: none; }
.vedette .tampon.r5 { animation: irise 2.600s linear infinite; }
.vedette h3 { margin-top: 4px; font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--mousse); text-wrap: balance; }
.vedette p { margin: 0; color: var(--brume); font-size: 15px; }
.vedette .pastille-livre { position: static; rotate: 0deg; display: inline-block; font-size: 13.500px; padding: 3px 10px 4px; }
.gains { list-style: none; width: min(100%, 440px); margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.gains li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 4px 10px 4px 5px; border-radius: 7px; background: color-mix(in srgb, var(--tranche) 26%, rgba(12, 18, 54, .84)); box-shadow: inset 4px 0 0 var(--tranche); }
.gains img { width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px 3px 3px 2px; display: block; background: color-mix(in srgb, var(--tranche) 55%, #131B4C); }
.gains b { display: block; font-family: var(--titre); font-weight: 650; font-size: 16.500px; line-height: 1.1; font-variation-settings: 'SOFT' 100; }
.gains small { display: block; margin-top: 1px; font-size: 13.500px; line-height: 1.15; color: var(--brume); }
.gains em { padding: 3px 8px 4px; border-radius: 4px; background: var(--tranche); color: #fff; font-family: var(--titre); font-style: normal; font-weight: 750; font-size: 13.500px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.gains .r0 em, .gains .r4 em { color: var(--lie); }
.resume { margin: 2px 0 0; text-align: center; font-size: 16.500px; color: var(--lait); }
.resume b { color: var(--flamme); font-weight: 650; }
.bonus { padding: 6px 14px; border-radius: 8px; background: var(--or); color: var(--lie); font-family: var(--titre); font-weight: 650; text-align: center; }
.jauge-bilan { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.jauge-bilan .bougies { display: flex; gap: 4px; }
.jauge-bilan svg { width: 13px; height: 18px; fill: rgba(253, 244, 231, .2); }
.jauge-bilan svg.allumee { fill: var(--flamme); }
.jauge-bilan p { margin: 0; font-size: 14.500px; color: var(--lait); }
.quitte { width: min(100%, 440px); padding: 9px 12px 11px; border-radius: 8px; background: var(--mousse); color: var(--moka); text-align: center; }
.quitte p { margin: 0 0 7px; font-size: 15.500px; line-height: 1.25; }
.quitte .deux { display: flex; gap: 8px; justify-content: center; }
.quitte .bouton { min-height: 44px; padding: 6px 18px; font-size: 16px; }
.quitte .bouton.discret { background: var(--lait); }
.piece { width: 72px; height: 72px; margin: 2px auto 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE9A8, var(--or) 60%, #B47A1E); box-shadow: 0 6px 12px rgba(58, 34, 24, .45); animation: piece .75s cubic-bezier(.3, .2, .3, 1) both; }
@keyframes piece { from { transform: rotateY(0) scale(.6); } to { transform: rotateY(1440deg) scale(1); } }
.suite { margin-top: auto; width: min(100%, 440px); display: flex; flex-direction: column; gap: 6px; align-items: stretch; padding-top: 6px; }
.suite .bouton { width: 100%; }
.suite .bouton.discret { min-height: 46px; font-size: 17px; }
.attente { margin: 0; text-align: center; font-size: 15.500px; color: var(--lait); }

/* L'oiseau de papier, puis le mot. */
.oiseau-papier { position: absolute; z-index: 18; left: 0; top: 0; width: 110px; height: 82px; margin: -41px 0 0 -55px; pointer-events: none; will-change: transform; }
.oiseau-papier svg { width: 100%; height: 100%; overflow: visible; }
.oiseau-papier .aile-h, .oiseau-papier .aile-b { transform-box: fill-box; transform-origin: 50% 100%; animation: bat-h .24s ease-in-out infinite alternate; }
.oiseau-papier .aile-b { animation-delay: .05s; }
@keyframes bat-h { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
.mot { position: absolute; z-index: 19; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(6, 8, 34, .72); perspective: 900px; touch-action: manipulation; }
.papier-mot { width: min(420px, 92vw); padding: 28px 26px 22px; background: repeating-linear-gradient(0deg, transparent 0 37px, rgba(47, 79, 208, .16) 37px 38px), var(--mousse); color: var(--encre); border-radius: 3px; box-shadow: 0 24px 50px rgba(4, 6, 28, .7); animation: deplie .42s cubic-bezier(.2, .8, .3, 1.050) both; rotate: -1.200deg; }
@keyframes deplie { 0% { transform: scale(.2) rotateX(-84deg); opacity: 0; } 30% { opacity: 1; } }
.papier-mot p { margin: 0; font-family: var(--main); font-size: 30px; line-height: 38px; white-space: pre-line; font-kerning: none; }
.papier-mot .signe { margin-top: 12px; text-align: right; color: var(--rouge); }
.papier-mot .bouton { margin-top: 12px; width: 100%; }

@media (max-height: 700px) {
  .salle { --bh: min(27dvh, 70vw); }
  .carte-zone { top: calc(var(--haut) + 46px); }
  .legende-livre { top: calc(var(--haut) + 46px + var(--bh) + 12px); gap: 3px; }
  .niveau { font-size: 14px; }
  .indice-main { display: none; }
  .gains li { min-height: 50px; }
  .gains img { width: 32px; }
}
@media (min-width: 900px) {
  /* Sur grand écran, le livre garde le centre et sa légende se pose à côté de lui. */
  .salle { --bh: min(46dvh, 420px); }
  .carte-zone { top: calc(var(--haut) + 58px); }
  .legende-livre { left: calc(50% + var(--bh) / 3 + 40px); right: 24px; top: calc(var(--haut) + 58px + var(--bh) * .2); max-width: 400px; align-items: flex-start; gap: 8px; text-align: left; }
  .barre-colis { left: 50%; right: auto; width: 460px; margin-left: -230px; }
  /* Sur grand écran, l'étalage se fait en arc autour du meilleur livre. */
  .tenu-zone.ouvert .tenu { transform: translateY(30dvh) scale(.46); }
  .suite, .quitte { width: min(100%, 460px); }
  .gains { width: min(100%, 1060px); display: flex; justify-content: center; align-items: flex-start; gap: 22px; margin-top: -92px; }
  .gains li { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 196px; min-height: 0; padding: 0; text-align: center; background: none; box-shadow: none; }
  .gains li:nth-child(2), .gains li:nth-child(3) { margin-top: 118px; }
  .gains li:nth-child(1) { order: 1; } .gains li:nth-child(2) { order: 2; } .gains li:nth-child(3) { order: 3; } .gains li:nth-child(4) { order: 4; }
  .gains img { width: 118px; border-radius: 3px 6px 6px 3px; box-shadow: 0 0 0 3px var(--tranche), 0 10px 16px rgba(4, 6, 28, .5); }
  .gains b { font-size: 17px; }
  .gains em { font-size: 14.500px; order: -1; padding: 3px 10px 4px; rotate: -2deg; }
}