/* Mannala Pils QR menu: « Pour combien tu ? » and « Chaud ou froid » (party.js).
   Big type and big buttons: a phone passed around a loud market cabin. */
.p-game .kick{align-self:flex-start;margin-bottom:0}
.p-dare{background:var(--cream);border:3px solid #111;border-radius:18px;box-shadow:5px 5px 0 #111;padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.p-lead{font:400 1.15rem/1 Bangers,cursive;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.p-card{margin:0;font-weight:800;font-size:clamp(1.45rem,6.4vw,1.9rem);line-height:1.18;color:#111}
.p-box{background:#fff;border:3px solid #111;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;text-align:center}
.p-box b{font:400 clamp(1.6rem,7.5vw,2.2rem)/1.05 Bangers,cursive;letter-spacing:.05em;text-transform:uppercase}
.p-box p{margin:0;font-size:1.02rem;line-height:1.4;color:var(--mut)}
.p-box > .bdb{margin-top:6px}
.p-res.done,.p-res.won{background:var(--yel)}
.p-res.missed,.p-res.lost{background:var(--cream)}
.p-step{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0}
.p-step .bdb{width:64px;height:64px;padding:0;font:900 2.4rem/1 system-ui,sans-serif}
.p-max{min-width:2.2ch;font:400 4.2rem/1 Bangers,cursive;color:var(--red);-webkit-text-stroke:.03em #111}
.p-big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0}
.p-big small{font:400 1.2rem/1 Bangers,cursive;letter-spacing:.08em;color:var(--mut)}
.p-count{display:block;font:400 clamp(7rem,42vw,11rem)/1 Bangers,cursive;color:var(--red);-webkit-text-stroke:.03em #111;text-shadow:.05em .05em 0 #111;animation:p-pop .9s ease-out}
.p-say{font:400 clamp(2.4rem,11vw,3.4rem)/1 Bangers,cursive;letter-spacing:.04em;text-align:center;text-transform:uppercase;color:var(--red);-webkit-text-stroke:.03em #111;text-shadow:.06em .06em 0 #111}
.p-clock{font:400 clamp(5.4rem,30vw,8.5rem)/1 Bangers,cursive;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#111;text-shadow:.05em .05em 0 var(--yel)}
.p-clock.is-low{color:var(--red);text-shadow:.05em .05em 0 #111}
.p-hint{margin:0;text-align:center;font-size:1rem;line-height:1.4;font-weight:600}
.p-dur{display:flex;gap:10px;justify-content:center}
.p-dur .bdb{flex:1;max-width:110px}
.p-game > .bdb{width:100%}
@keyframes p-pop{0%{transform:scale(1.5);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(.92)}}
@media (prefers-reduced-motion: reduce){.p-count{animation:none}}
/* « Qui paie la tournée ? » floating on the carte just above the bottom bar. Same positioning as .bar
   (styles.css): inside the phone frame on a large screen, fixed to the screen on a phone. */
.p-fab{position:absolute;z-index:29;right:14px;bottom:calc(var(--p-bar,78px) + 12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:0;padding:0;border:0;background:none;cursor:pointer;animation:p-hop 3.2s ease-in-out infinite}
@media (max-width:899px){.p-fab{position:fixed;right:max(14px,calc(50% - 215px + 14px))}}
.p-fab-wheel{order:2;width:58px;height:58px;border-radius:50%;background:#c8141f;border:3px solid #111;box-shadow:3px 3px 0 #111;display:grid;place-items:center;animation:p-glow 1.6s ease-in-out infinite}
.p-fab-wheel svg{width:46px;height:46px;overflow:visible}
.p-fab-spin{transform-origin:24px 24px;animation:p-turn 9s linear infinite}
.p-fab-bulb{animation:p-blink 1s steps(1,end) infinite}
.p-fab-tag{order:1;margin-right:-10px;padding:8px 16px 6px 12px;background:#f5d000;color:#111;font:400 1.2rem/1 Bangers,cursive;letter-spacing:.05em;border:3px solid #111;border-right:0;border-radius:999px 0 0 999px;box-shadow:3px 3px 0 #111;white-space:nowrap;overflow:hidden;max-width:160px;transition:max-width .25s ease,padding .25s ease,opacity .2s ease}
.p-fab.is-folded .p-fab-tag{max-width:0;padding-left:0;padding-right:0;opacity:0;border-width:0}
.p-fab:focus-visible .p-fab-wheel{outline:3px solid #f5d000;outline-offset:3px}
.p-fab:active .p-fab-wheel{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}
@keyframes p-hop{0%,70%,100%{transform:translateY(0)}76%{transform:translateY(-12px)}82%{transform:translateY(0)}87%{transform:translateY(-5px)}92%{transform:translateY(0)}}
@keyframes p-glow{0%,100%{box-shadow:3px 3px 0 #111,0 0 0 0 #ff2a3600}50%{box-shadow:3px 3px 0 #111,0 0 16px 5px #ff2a36aa}}
@keyframes p-turn{to{transform:rotate(360deg)}}
@keyframes p-blink{50%{fill:#c8141f}}
@media (prefers-reduced-motion: reduce){.p-fab,.p-fab-wheel,.p-fab-spin,.p-fab-bulb{animation:none}}