/* Les pictos des boutons (src/ui/glyphs.js) : à la hauteur du texte autour, posés sur sa ligne. */
.pg { display: inline-block; vertical-align: -0.34em; margin: 0 0.08em; overflow: visible; flex: none; }
.pg text { font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: 0 !important; }
.pg-pair { display: inline-flex; gap: 0.06em; vertical-align: -0.34em; }
.pg-pair .pg { vertical-align: 0; margin: 0; }
/* une touche du clavier */
.pg-key { display: inline-block; min-width: 1.72em; height: 1.72em; padding: 0 0.4em; box-sizing: border-box; margin: 0 0.1em;
  font: 900 0.78em/1.32em 'Arial Black', Arial, sans-serif !important; font-style: normal !important; letter-spacing: 0; text-align: center; text-transform: none; text-shadow: none;
  color: #1a1420; background: linear-gradient(#fbf6ec, #ddd4c4); border: 0.14em solid #0b0610; border-bottom-width: 0.32em; border-radius: 0.34em;
  vertical-align: 0.06em; white-space: nowrap; font-style: normal; }
.pg-key.wide { padding: 0 0.5em; }

/* « TU JOUES AVEC QUOI ? » (src/ui/padAsk.js), le premier lancement : quatre cartes de BD sur les rayons bleu marine */
.pa-bg { display: none; }
.px.pa::before { content: ''; position: absolute; left: -1500px; right: -1500px; top: -1500px; bottom: -1500px; z-index: -1; background: radial-gradient(circle at 50% 46%, rgba(40, 52, 110, .55), rgba(6, 6, 18, .9) 60%), repeating-conic-gradient(from 0deg at 50% 46%, rgba(20, 35, 74, .85) 0 6deg, rgba(12, 20, 46, .85) 6deg 12deg); }
.px.pa { font-family: 'Barlow Condensed', sans-serif; color: #f8f3ea; text-align: center; }
.pa-t { position: absolute; left: 0; right: 0; top: 34px; font: 34px Bangers, sans-serif; letter-spacing: 1.5px; color: #ffd23b;
  text-shadow: 2px 2px 0 #0b0610, -1px -1px 0 #0b0610, 1px -1px 0 #0b0610, -1px 1px 0 #0b0610, 3px 4px 0 #d8392f; animation: pa-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.pa-s { position: absolute; left: 0; right: 0; top: 82px; font-size: 10.5px; font-weight: 600; color: #d6cfe2; letter-spacing: .3px; }
.pa-cards { position: absolute; left: 28px; right: 28px; top: 106px; display: flex; gap: 12px; }
.pa-c { position: relative; flex: 1; height: 196px; box-sizing: border-box; padding: 10px 6px 0; background: #1d1a2c; border: 2.5px solid #0b0610; border-radius: 7px;
  box-shadow: 3px 3px 0 #0b0610; transform: rotate(var(--r, 0deg)); transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), background .18s; cursor: pointer;
  animation: pa-card .45s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--d) * 70ms + 120ms); }
.pa-c:nth-child(1) { --r: -1.5deg; --d: 0; } .pa-c:nth-child(2) { --r: 1deg; --d: 1; } .pa-c:nth-child(3) { --r: -1deg; --d: 2; } .pa-c:nth-child(4) { --r: 1.5deg; --d: 3; }
.pa-c b { display: block; font: 19px Bangers, sans-serif; letter-spacing: 1px; color: #f8f3ea; }
.pa-c small { display: block; font-size: 8.5px; color: #a89fb8; margin-top: 1px; }
.pa-c.on { background: #ffd23b; transform: rotate(0deg) translateY(-6px) scale(1.06); box-shadow: 4px 5px 0 #0b0610, 0 0 0 3px #fff6d0; z-index: 2; }
.pa-c.on b { color: #140a26; } .pa-c.on small { color: #4a3a2a; }
.pa-c.on .pa-use span { color: #140a26; }
.pa-c.go { animation: pa-go .38s ease-in forwards; }
.pa-art { font-size: 15px; margin-top: 10px; }
.pa-dia { position: relative; width: 66px; height: 66px; margin: 0 auto; }
.pa-dia i { position: absolute; width: 22px; height: 22px; display: grid; place-items: center; }
.pa-dia .pg { margin: 0; vertical-align: 0; font-size: 15.5px; }
.pa-dia .t { left: 22px; top: 0; } .pa-dia .l { left: 0; top: 22px; } .pa-dia .r { left: 44px; top: 22px; } .pa-dia .b { left: 22px; top: 44px; }
.pa-sh { margin-top: 6px; font-size: 12px; display: flex; justify-content: center; gap: 22px; }
.pa-use { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 10px; font-weight: 700; color: #e9e2f4; }
.pa-kb { font-size: 15px; line-height: 1.6; margin-top: 4px; }
.pa-ms { font-size: 17px; margin-top: 6px; }
.pa-here { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); display: none; padding: 1px 6px; font: 9px Bangers, sans-serif; letter-spacing: .8px; font-style: normal;
  color: #fff; background: #2fae4a; border: 1.5px solid #0b0610; border-radius: 3px; white-space: nowrap; }
.pa-c.here .pa-here { display: block; }
@keyframes pa-in { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
@keyframes pa-card { from { transform: translateY(40px) rotate(var(--r, 0deg)); opacity: 0; } }
@keyframes pa-go { 40% { transform: scale(1.14); } to { transform: scale(1.3); opacity: 0; } }
.pa-n { position: absolute; left: 0; right: 0; top: 322px; font-size: 12px; color: #f8f3ea; letter-spacing: .4px; }
.pa-n b { color: #ffd23b; font-weight: 400; }