:root{--magic-ink:#123f38;--magic-sea:#65cdb5;--magic-sea-dark:#188b78;--magic-coral:#dc5b3f;--magic-cream:#fffaf0;--magic-taupe:#9b724e}
.magic-game{width:min(1540px,calc(100% - 32px));margin:24px auto 70px;color:var(--magic-ink)}
.magic-intro,.magic-rules,.magic-setup,.magic-play{border:1px solid #bfe3da;border-radius:36px;background:#fff;box-shadow:0 24px 70px rgba(18,63,56,.08)}
.magic-intro{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;overflow:hidden;background:linear-gradient(135deg,#effbf8,#fff9eb)}
.magic-intro>div{padding:clamp(34px,5vw,76px)}.magic-intro h1{font-family:Georgia,serif;font-size:clamp(2.8rem,5vw,5.8rem);line-height:.94;margin:.18em 0}.magic-intro p:not(.eyebrow){font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.55;color:#55736d}
.magic-intro>img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center}
.magic-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.magic-badges span{padding:10px 16px;border-radius:999px;background:#dff7f0;font-weight:800}
.magic-rules{margin-top:26px;padding:30px 38px;display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}.magic-rules h2{font:700 clamp(1.8rem,3vw,3rem)/1.05 Georgia,serif;margin:4px 0}.magic-rules ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;counter-reset:magic}.magic-rules li{list-style:none;padding:18px;border-radius:20px;background:#eef9f6;line-height:1.45;font-weight:700}.magic-rules li::before{counter-increment:magic;content:counter(magic);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-bottom:10px;background:var(--magic-sea);color:#fff}
.magic-setup{margin-top:26px;padding:clamp(30px,4vw,60px);display:grid;grid-template-columns:1fr minmax(260px,390px);grid-template-areas:"copy picker" "field picker" "sound picker" "button picker";gap:20px 50px;align-items:center}.magic-setup>div:first-child{grid-area:copy}.magic-setup h2{font:700 clamp(2.1rem,4vw,4rem)/1 Georgia,serif;margin:8px 0}.magic-setup #magicCharacterCarousel{grid-area:picker}.magic-setup label{grid-area:field;display:grid;gap:8px;font-weight:800}.magic-setup input{border:2px solid #b7ddd4;border-radius:18px;padding:16px 18px;font:inherit;font-size:1.15rem}.magic-setup .magic-sound-choice{grid-area:sound;justify-self:start;border:1px solid #9ed3c7;border-radius:999px;background:#effbf8;padding:12px 18px;color:var(--magic-ink);font-weight:800;cursor:pointer}.magic-setup .magic-sound-choice[aria-pressed="false"]{background:#fff4ee;border-color:#e9baa9}.magic-setup .magic-primary{grid-area:button;justify-self:start}
.magic-primary{border:0;border-radius:999px;background:linear-gradient(135deg,#1b907d,#57ceb3);color:#fff;padding:16px 27px;font:800 1rem inherit;box-shadow:0 12px 28px rgba(27,144,125,.22);cursor:pointer}.magic-primary:hover{transform:translateY(-2px)}
.magic-play{margin-top:26px;overflow:hidden;background:#eaf7f3}.magic-toolbar{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:26px;padding:20px 28px;background:#fff}.magic-player{display:flex;align-items:center;gap:14px}.magic-player>span,.magic-end-avatar{display:block;width:68px;height:78px;border-radius:17px;overflow:hidden;background:#e4f7f1}.magic-player img,.magic-end-avatar img{width:100%;height:100%;object-fit:contain}.magic-player p{display:grid;margin:0}.magic-toolbar small,.magic-prompt-card small{font-weight:900;letter-spacing:.16em;color:#5a7771}.magic-toolbar strong{font-size:1.35rem}.magic-progress,.magic-timer{text-align:center;display:grid}.magic-progress strong{font:700 2.2rem Georgia,serif;color:var(--magic-coral)}.magic-actions{display:flex;gap:9px}.magic-actions button,.magic-prompt-card button{border:1px solid #a9d5ca;border-radius:999px;background:#fff;padding:11px 15px;color:var(--magic-ink);font-weight:800;cursor:pointer}
.magic-stage-shell{padding:22px}.magic-prompt-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;max-width:1050px;margin:0 auto 10px;padding:16px 22px;border-radius:24px;background:#fff;box-shadow:0 13px 35px rgba(18,63,56,.12)}.magic-wand{font-size:2.7rem;animation:wand 1.8s ease-in-out infinite}.magic-prompt-card p{font:800 clamp(1.15rem,2vw,1.7rem)/1.3 inherit;margin:5px 0 0}.magic-prompt-card mark{padding:2px 7px;border-radius:8px;background:#fff0af;color:#8a4b21}.magic-status{text-align:center;font-weight:800;min-height:26px;margin:10px;color:#466963}
.magic-scene{position:relative;min-height:650px;border:10px solid #b57c47;border-radius:34px;overflow:hidden;background:#dff5ee center/cover no-repeat;box-shadow:inset 0 0 0 4px rgba(255,255,255,.65),0 20px 45px rgba(79,47,24,.2);isolation:isolate}.magic-scene::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.03),rgba(13,67,56,.18));z-index:-1}.magic-scene.scene-home{background-image:url('assets/maison-magique-sons-hero-v1.png')}.magic-scene.scene-market{background-image:url('assets/marchande-marche.jpg')}.magic-scene.scene-park{background-image:url('assets/jeu-loi-univers.png')}
.magic-objects{position:absolute;inset:0}.magic-object{position:absolute;width:130px;min-height:120px;border:3px solid rgba(255,255,255,.95);border-radius:26px;background:rgba(255,255,255,.91);box-shadow:0 13px 25px rgba(20,48,39,.25);display:grid;place-items:center;padding:8px;cursor:pointer;transition:.22s ease;color:var(--magic-ink);backdrop-filter:blur(5px)}.magic-object:hover,.magic-object:focus-visible{transform:translateY(-7px) scale(1.04);outline:5px solid rgba(101,205,181,.65)}.magic-object .icon{font-size:3.4rem;line-height:1}.magic-object strong{font-size:1rem}.magic-object:nth-child(1){left:4%;top:18%}.magic-object:nth-child(2){left:25%;top:52%}.magic-object:nth-child(3){left:45%;top:17%}.magic-object:nth-child(4){left:71%;top:43%}.magic-object:nth-child(5){left:8%;top:68%}.magic-object:nth-child(6){left:34%;top:72%}.magic-object:nth-child(7){left:58%;top:67%}.magic-object:nth-child(8){left:82%;top:18%}.magic-object.wrong{animation:wrong .42s ease}.magic-object.correct{animation:magicPop .85s ease;background:#c5f5e8;border-color:#fff79f;box-shadow:0 0 0 9px rgba(255,245,139,.45),0 18px 38px rgba(17,103,84,.35)}
.magic-sparkles{position:absolute;inset:0;pointer-events:none}.magic-sparkles i{position:absolute;width:13px;height:13px;background:#fff281;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%);animation:spark 1s ease-out forwards}
.magic-end{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(9,44,38,.72);backdrop-filter:blur(10px)}.magic-end[hidden]{display:none}.magic-end-card{position:relative;z-index:2;width:min(560px,100%);padding:40px;text-align:center;border-radius:34px;background:#fffaf1;box-shadow:0 30px 100px rgba(0,0,0,.3)}.magic-end-avatar{width:145px;height:185px;margin:0 auto 12px}.magic-end h2{font:700 clamp(2.3rem,6vw,4.5rem)/1 Georgia,serif;margin:8px}.magic-end p:not(.eyebrow){font-size:1.2rem;line-height:1.5}.magic-confetti{position:absolute;inset:0;overflow:hidden}.magic-confetti i{position:absolute;top:-30px;width:12px;height:22px;animation:confetti 3s linear infinite}
@keyframes wand{50%{transform:rotate(-15deg) scale(1.12)}}@keyframes wrong{25%,75%{transform:translateX(-9px)}50%{transform:translateX(9px)}}@keyframes magicPop{0%{transform:scale(1) rotate(0)}45%{transform:scale(.45) rotate(14deg)}70%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1)}}@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(240deg) scale(0);opacity:0}}@keyframes confetti{to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:950px){.magic-intro{grid-template-columns:1fr}.magic-intro>img{min-height:340px}.magic-rules{grid-template-columns:1fr}.magic-rules ol{grid-template-columns:1fr}.magic-setup{grid-template-columns:1fr;grid-template-areas:"copy" "picker" "field" "sound" "button"}.magic-toolbar{grid-template-columns:1fr 1fr}.magic-actions{justify-content:flex-end}.magic-scene{min-height:600px}.magic-object{width:104px;min-height:100px}.magic-object .icon{font-size:2.7rem}}
@media(max-width:620px){.magic-game{width:min(100% - 16px,1540px)}.magic-intro,.magic-rules,.magic-setup,.magic-play{border-radius:25px}.magic-intro>div{padding:28px 22px}.magic-intro>img{min-height:240px}.magic-rules,.magic-setup{padding:25px 20px}.magic-toolbar{grid-template-columns:1fr 1fr;padding:14px;gap:12px}.magic-player>span{width:52px;height:62px}.magic-actions{grid-column:1/-1}.magic-actions button{flex:1}.magic-stage-shell{padding:10px}.magic-prompt-card{grid-template-columns:auto 1fr;padding:13px}.magic-prompt-card button{grid-column:1/-1}.magic-scene{min-height:610px;border-width:6px}.magic-object{width:84px;min-height:90px;border-radius:18px}.magic-object .icon{font-size:2.25rem}.magic-object strong{font-size:.78rem}.magic-object:nth-child(1){left:2%;top:12%}.magic-object:nth-child(2){left:28%;top:33%}.magic-object:nth-child(3){left:52%;top:12%}.magic-object:nth-child(4){left:73%;top:38%}.magic-object:nth-child(5){left:4%;top:64%}.magic-object:nth-child(6){left:30%;top:76%}.magic-object:nth-child(7){left:55%;top:62%}.magic-object:nth-child(8){left:74%;top:76%}}
@media(prefers-reduced-motion:reduce){.magic-wand,.magic-confetti i{animation:none}.magic-object{transition:none}}