/* Écrans du jeu (démo et aperçu) : partagé par la landing et l'application. */
:root{--jeu:"Fredoka",ui-rounded,system-ui,sans-serif}
.phone{position:relative;width:min(340px,86vw,calc((100svh - 190px) * 9 / 18.5));min-width:260px;aspect-ratio:9/18.5;border-radius:44px;background:#15130F;padding:11px;box-shadow:0 40px 80px -30px #5a2a0a70,inset 0 0 0 2px #3a3530}
.phone-notch{position:absolute;z-index:3;top:20px;left:50%;translate:-50% 0;width:84px;height:22px;border-radius:12px;background:#15130F}
.demo{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--dm-fond,#fff);user-select:none;-webkit-user-select:none}
.demo canvas{position:absolute;inset:0;width:100%;height:100%}
/* enveloppe du jeu (écrans par-dessus le canvas) */
.dm-ui{position:absolute;inset:0;pointer-events:none;font-family:var(--text);color:var(--dm-encre)}
.dm-scr{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 22px}
.dm-titre{background:linear-gradient(transparent 0%,color-mix(in srgb,var(--dm-fond) 88%,transparent) 30%,var(--dm-fond) 60%);justify-content:flex-end;padding-bottom:42px;gap:10px;animation:dmIn .4s ease both}
@keyframes dmIn{from{opacity:0;transform:translateY(12px)}}
.dm-logo{font:600 22px var(--jeu);background:var(--dm-encre);color:var(--dm-fond);border-radius:10px;padding:5px 12px}
[data-decor="salle"] .dm-logo{background:var(--dm-accent);color:#111;letter-spacing:.06em;text-transform:uppercase}
.dm-logo.sm{font-size:14px;padding:4px 9px}
.dm-metier{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.14em;opacity:.65}
.dm-titre h3{font:600 30px/1.02 var(--jeu);margin-top:6px}
.dm-titre p{font-size:14.5px;line-height:1.4;opacity:.8;max-width:26ch}
.dm-btn{appearance:none;border:0;cursor:pointer;margin-top:10px;min-height:54px;padding:0 44px;border-radius:999px;background:var(--dm-accent);color:var(--dm-sur);font:700 20px var(--jeu);
  box-shadow:0 5px 0 color-mix(in srgb,var(--dm-accent) 60%,#000);animation:breathe 1.6s ease-in-out infinite}
.dm-btn:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--dm-accent) 60%,#000)}
.dm-btn.sm{min-height:46px;padding:0 26px;font-size:17px;animation:none}
@keyframes breathe{50%{transform:scale(1.04)}}
.dm-geste{font-size:12.5px;opacity:.6}
.dm-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;padding:40px 12px 10px;pointer-events:none}
.dm-sp{flex:1}
.dm-pill{background:#fff;color:#111;border-radius:999px;padding:5px 11px;font:600 14px var(--text);font-variant-numeric:tabular-nums;box-shadow:0 3px 10px #0002}
.dm-pill b{font-weight:700}
.dm-pill.hop{animation:hop .25s}
@keyframes hop{50%{transform:scale(1.15)}}
.dm-tps.bas{background:#E0242E;color:#fff;animation:hop .5s infinite}
.dm-count{background:#0005;pointer-events:none}
.dm-count span{font:700 140px var(--jeu);color:#fff;animation:pop .6s cubic-bezier(.2,1.4,.3,1) both;text-shadow:0 6px 0 #0003}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.dm-fin{background:color-mix(in srgb,var(--dm-fond) 55%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px}
.dm-carte{width:100%;background:#fff;color:#15130F;border-radius:24px;padding:20px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 24px 50px #0005;animation:cardIn .55s cubic-bezier(.2,1.3,.3,1) both}
@keyframes cardIn{from{transform:translateY(40px) scale(.9);opacity:0}}
.dm-bravo{font:600 22px var(--jeu)}
.dm-coupon{width:100%;border-radius:16px;background:var(--dm-accent);color:var(--dm-sur);padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;
  -webkit-mask:radial-gradient(10px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(10px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(10px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(10px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  animation:reveal .7s .25s cubic-bezier(.2,1.2,.3,1) both}
@keyframes reveal{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
.dm-coupon .lbl{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.dm-coupon .big{font:700 40px/1.05 var(--jeu);margin-top:4px}
.dm-coupon .pr{font-size:13px;opacity:.85}
.dm-code{appearance:none;border:0;cursor:pointer;margin-top:10px;width:100%;background:#fff;color:#111;border-radius:10px;padding:9px;font:600 17px var(--mono);letter-spacing:.1em;display:flex;align-items:center;justify-content:center;gap:10px}
.dm-code small{font:600 11px var(--text);letter-spacing:0;background:#111;color:#fff;border-radius:6px;padding:3px 7px}
.dm-pal{font-size:13px;color:#5b554c}
.dm-actions{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.dm-lien{appearance:none;border:0;background:none;cursor:pointer;font:600 14px var(--text);color:#15130F;text-decoration:underline;text-underline-offset:3px;padding:6px}
.dm-demo{font-size:10.5px;color:#8b857b}
.dm-saison{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#fff;background:linear-gradient(90deg,var(--s1),color-mix(in srgb,var(--s1) 70%,var(--s2)));border-radius:999px;padding:5px 12px;box-shadow:0 3px 0 #0002}