*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);background-attachment:fixed;color:var(--text);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button{font:inherit;cursor:pointer}
img{max-width:100%}
#particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.app{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;padding:0 16px env(safe-area-inset-bottom)}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 6px}
.brand-logo{max-height:46px;max-width:60%;object-fit:contain;border-radius:6px;background:#fff;padding:4px 8px}
.brand-name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:var(--head-ls)}
.mute{border:0;background:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text);width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.mute[aria-pressed="true"]{opacity:.45}

.screens{flex:1;position:relative}
.screen{display:none;flex-direction:column;align-items:center;text-align:center;padding:8px 0 24px;animation:screenIn .45s cubic-bezier(.2,.8,.2,1)}
.screen.is-active{display:flex}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.hero-art{width:min(62vw,250px);aspect-ratio:1;object-fit:contain;margin:4px auto -6px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) rotate(-1.5deg)}}
.title{font-family:var(--font-head);font-size:clamp(2rem,8.5vw,3rem);line-height:1.05;margin:.3em 0 .2em;letter-spacing:var(--head-ls);text-wrap:balance}
.theme-bodysphere .title{text-transform:uppercase;font-weight:600;font-size:clamp(1.6rem,7vw,2.3rem)}
.subtitle{margin:0 0 18px;font-size:1.05rem;opacity:.9;max-width:34ch;text-wrap:pretty}

.panel{width:100%;background:var(--card);color:var(--ink);border-radius:22px;padding:20px 18px 22px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.06) inset}
.panel.closed{font-size:1.1rem;font-weight:600}
.panel-title{font-family:var(--font-head);font-size:1.05rem;margin:0 0 10px;letter-spacing:var(--head-ls)}
.prize-strip{list-style:none;margin:0 0 16px;padding:0 0 4px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory}
.prize-strip li{flex:0 0 108px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.82rem;line-height:1.25;font-weight:600}
.prize-strip img{width:64px;height:64px;object-fit:contain}

.entry{display:grid;gap:10px;text-align:left}
.entry label{display:grid;gap:4px;font-size:.85rem;font-weight:600}
.entry input:not([type=checkbox]){font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);background:color-mix(in srgb,var(--card) 92%,var(--ink));color:var(--ink)}
.entry input:focus-visible{outline:3px solid var(--primary);outline-offset:1px}
.entry .check{display:flex;gap:8px;align-items:flex-start;font-weight:400;font-size:.8rem;opacity:.85}
.form-error{color:#d0213a;font-weight:600;font-size:.9rem;margin:0;min-height:0}
.form-error:empty{display:none}

.btn-play{margin-top:6px;border:0;border-radius:999px;padding:16px 22px;background:var(--primary);color:var(--on-primary);font-family:var(--font-head);font-size:1.3rem;font-weight:700;letter-spacing:var(--head-ls);
  box-shadow:0 6px 0 color-mix(in srgb,var(--primary) 60%,#000),0 14px 30px -10px color-mix(in srgb,var(--primary) 80%,transparent);transition:transform .12s,box-shadow .12s}
.btn-play:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--primary) 60%,#000)}
.btn-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.btn-play[disabled]{opacity:.6;pointer-events:none}
.btn-ghost{border:2px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:10px 18px;font-weight:700}

.rules{margin-top:16px;font-size:.8rem;opacity:.8;max-width:46ch;text-align:left}
.rules summary{cursor:pointer;text-align:center}
.foot{text-align:center;font-size:.75rem;opacity:.65;padding:10px 0 18px;display:grid;gap:2px}
.foot a{color:inherit}
.demo-flag{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:20;background:#111;color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px;opacity:.85}

/* Scène de jeu */
.game-hint{font-family:var(--font-head);font-size:1.25rem;margin:10px 0 14px;min-height:1.6em;letter-spacing:var(--head-ls)}
.stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;user-select:none;-webkit-user-select:none}

/* Résultat */
.result{width:100%;background:var(--card);color:var(--ink);border-radius:26px;padding:26px 20px;box-shadow:0 30px 70px -26px rgba(0,0,0,.5);position:relative;overflow:hidden}
.result .big{font-family:var(--font-head);font-size:clamp(2rem,9vw,2.8rem);margin:0;line-height:1.05;letter-spacing:var(--head-ls)}
.result .prize-img{width:150px;height:150px;object-fit:contain;margin:8px auto 2px;display:block;animation:pop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
.result .prize-name{font-size:1.35rem;font-weight:800;margin:4px 0}
.result .prize-desc{margin:0 0 10px;opacity:.8}
.ticket{margin:16px auto 8px;max-width:320px;border:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);border-radius:14px;padding:12px;position:relative}
.ticket small{display:block;font-size:.75rem;opacity:.75}
.ticket .code{font-family:ui-monospace,Consolas,monospace;font-size:1.9rem;font-weight:800;letter-spacing:.12em;color:var(--primary)}
.result .muted{font-size:.85rem;opacity:.75;margin:6px 0 0}
.result .lose-img{width:120px;opacity:.9;filter:grayscale(.3)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* motifs d'enseigne */
.pattern-tablecloth body,.pattern-tablecloth{background:
  linear-gradient(90deg,rgba(200,35,27,.07) 50%,transparent 0) 0 0/44px 44px,
  linear-gradient(rgba(200,35,27,.07) 50%,transparent 0) 0 0/44px 44px,var(--bg)}
.theme-bodysphere .result .big{font-size:clamp(1.5rem,6.5vw,2rem);text-transform:uppercase;font-weight:600}

/* Victoire : rayons de lumière derrière le lot */
.prize-stage{position:relative;width:200px;height:170px;margin:4px auto 0;display:grid;place-items:center}
.prize-stage .prize-img{position:relative;z-index:1;margin:0;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}
.rays{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:rays 14s linear infinite;opacity:.9}
@keyframes rays{to{transform:rotate(360deg)}}
.result.is-win{overflow:visible;background:radial-gradient(120% 70% at 50% 18%,color-mix(in srgb,var(--accent) 22%,var(--card)) 0%,var(--card) 60%)}
.result.is-win .big{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 70%,#fff),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.ticket{background:repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--ink) 4%,transparent) 10px 20px)}
/* scène de jeu : projecteur doux sous le jeu */
.stage{position:relative}
.stage::before{content:"";position:absolute;left:50%;top:40%;width:120%;height:70%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent);filter:blur(10px);opacity:.7}

/* inscription : étape du code de confirmation */
.step-code{display:grid;gap:10px}
.code-sent{margin:0;font-size:.9rem}
.code-field{font:800 1.8rem/1 ui-monospace,Consolas,monospace!important;letter-spacing:.45em;text-align:center}
.dev-code{margin:0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--accent) 25%,transparent);font-size:.82rem;font-weight:700}
.code-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.link-btn{border:0;background:none;color:inherit;text-decoration:underline;font-size:.82rem;padding:2px;opacity:.8}
.freq-note{margin:0;font-size:.8rem;opacity:.75;text-align:center}
.step-code[hidden],.step-id[hidden]{display:none}
.step-id{display:grid;gap:10px}
.entry label,.entry .step-id,.entry .step-code{min-width:0}
.entry input:not([type=checkbox]){width:100%;min-width:0}

/* options communes des thèmes d'enseigne */
.hero-art.is-logo{width:min(70vw,260px);aspect-ratio:auto;max-height:120px;background:#fff;border-radius:18px;padding:12px 18px;animation:none}
body.pattern-dots{background:radial-gradient(circle,color-mix(in srgb,var(--primary) 16%,transparent) 2px,transparent 2.5px) 0 0/22px 22px,var(--bg)}
body.pattern-stripes{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,transparent) 0 14px,transparent 14px 28px),var(--bg)}
body.pattern-grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),var(--bg)}
body.pattern-tablecloth{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 9%,transparent) 50%,transparent 0) 0 0/44px 44px,linear-gradient(color-mix(in srgb,var(--primary) 9%,transparent) 50%,transparent 0) 0 0/44px 44px,var(--bg)}
body.shape-rounded .btn-play{border-radius:16px}
body.shape-square .btn-play{border-radius:4px}
body.shape-square .panel,body.shape-square .result{border-radius:6px}
body.upper .title,body.upper .result .big{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.6rem,7vw,2.4rem)}

/* défi entre amis */
.share-box{display:grid;gap:6px;margin-top:16px;padding:14px;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.share-box span{font-size:.85rem;opacity:.85}
.share-btn{font-size:1.05rem;padding:12px 18px}