@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Scheherazade+New:wght@400;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#050510;font-family:'Amiri',serif;color:#f4e8c1;touch-action:none}

/* PARTICLES */
.particles{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.pt{position:absolute;background:rgba(212,175,55,.5);border-radius:50%;animation:ptFloat 8s ease-in-out infinite}
@keyframes ptFloat{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(-120px);opacity:.6}}

/* SCREENS */
.screen{position:fixed;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;background:#050510}
.screen.on{display:flex;animation:fadeIn .8s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* COMMON */
.main-title,.screen-title{font-family:'Scheherazade New',serif;color:#d4af37;text-shadow:0 0 40px rgba(212,175,55,.4),0 2px 8px rgba(0,0,0,.9);letter-spacing:2px}
.main-title{font-size:clamp(28px,7vw,52px)}
.screen-title{font-size:clamp(22px,5vw,38px)}
.main-sub{font-size:clamp(14px,3vw,18px);color:rgba(244,232,193,.55);margin-top:6px;font-style:italic}
.main-sub2{font-size:clamp(11px,2.2vw,13px);color:rgba(244,232,193,.3);margin-top:3px}
.screen-sub{font-size:clamp(13px,2.5vw,16px);color:rgba(244,232,193,.5);margin-top:4px}
.ornament{color:#d4af37;font-size:20px;opacity:.3;letter-spacing:8px;margin:8px 0}
.btn-gold{padding:14px 30px;background:linear-gradient(135deg,#d4af37,#9a7b1a);color:#1a1030;border:none;font:700 15px 'Amiri',serif;cursor:pointer;border-radius:12px;transition:all .3s;box-shadow:0 4px 20px rgba(212,175,55,.25);position:relative;z-index:20}
.btn-gold:hover,.btn-gold:active{filter:brightness(1.2);transform:scale(1.03)}
.btn-gold:disabled{opacity:.35;pointer-events:none;filter:none;transform:none}
.btn-lg{padding:17px 44px;font-size:18px}
.btn-enter{border-radius:0!important;padding:14px 22px}

/* LOADER */
.loader-spinner{width:50px;height:50px;border:3px solid rgba(212,175,55,.12);border-top-color:#d4af37;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* S1: ACCUEIL */
#S1{background:radial-gradient(ellipse at center bottom,rgba(26,16,48,.4) 0%,#050510 70%);z-index:12}
.s1-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center}
.s1-citadelle{max-width:280px;width:70vw;border-radius:16px;filter:drop-shadow(0 0 50px rgba(212,175,55,.3));animation:citFloat 5s ease-in-out infinite;margin-bottom:8px}
@keyframes citFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.email-gate{margin-top:22px;width:100%;max-width:380px;position:relative;z-index:20}
.email-label{font-size:13px;color:rgba(244,232,193,.35);margin-bottom:8px}
.email-row{display:flex;border-radius:12px;overflow:hidden;border:1px solid rgba(212,175,55,.2);background:rgba(10,10,30,.85);position:relative;z-index:20}
.email-row input{flex:1;padding:13px 14px;border:none;background:transparent;color:#f4e8c1;font:15px 'Amiri',serif;outline:0;position:relative;z-index:20}
.email-row input::placeholder{color:rgba(244,232,193,.2)}
.email-error{font-size:12px;color:#ff6b6b;margin-top:6px;opacity:0;transition:opacity .3s}
.email-error.show{opacity:1}
.skip-link{margin-top:14px;font-size:12px;color:rgba(244,232,193,.25);cursor:pointer;transition:color .3s;position:relative;z-index:20}
.skip-link:hover{color:rgba(244,232,193,.6)}

/* S2: CHOIX */
#S2{background:radial-gradient(ellipse at center,rgba(26,16,48,.3) 0%,#050510 70%)}
.perso-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin:16px 0 20px}
.perso-card{cursor:pointer;transition:.4s;animation:cardUp .7s ease-out both;position:relative;z-index:20}
.perso-card:nth-child(2){animation-delay:.12s}
@keyframes cardUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.perso-card:hover{transform:translateY(-6px) scale(1.03)}
.perso-card.selected{transform:translateY(-6px) scale(1.05)}
.perso-card.selected .perso-frame{border-color:#d4af37;box-shadow:0 0 35px rgba(212,175,55,.45)}
.perso-frame{width:155px;height:245px;border-radius:18px;border:3px solid rgba(212,175,55,.1);overflow:hidden;background:rgba(20,15,40,.4);transition:.4s}
.perso-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.perso-name{margin-top:8px;font-family:'Scheherazade New',serif;font-size:20px;color:#d4af37}

/* S3 LOADING */
#S3load{background:#050510}

/* S3: GAME */
#S3{padding:0;z-index:10;background:#050510}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;inset:0;pointer-events:none;z-index:15}
.hud-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);text-align:center}
.hud-score{font-size:13px;color:rgba(244,232,193,.5);margin-bottom:4px}
.hud-bar{width:240px;height:5px;background:rgba(244,232,193,.08);border-radius:3px}
.hud-fill{height:100%;background:linear-gradient(90deg,#d4af37,#e6c348);border-radius:3px;transition:width .6s;width:0}
.hud-hint{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);font-size:16px;color:#d4af37;text-shadow:0 0 15px rgba(212,175,55,.4);opacity:0;transition:opacity .3s;text-align:center;width:90%}
.hud-hint.show{opacity:1}
.hud-controls{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:10px;color:rgba(244,232,193,.2);text-align:center}

/* Mobile */
.mobile-controls{display:none;position:absolute;inset:0;z-index:16;pointer-events:none}
.joy-area{position:absolute;bottom:20px;left:20px;pointer-events:all}
.joy-base{width:110px;height:110px;border-radius:50%;background:rgba(212,175,55,.06);border:2px solid rgba(212,175,55,.12);position:relative}
.joy-knob{width:40px;height:40px;border-radius:50%;background:rgba(212,175,55,.35);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mobile-action{position:absolute;bottom:30px;right:25px;width:65px;height:65px;border-radius:50%;background:rgba(212,175,55,.15);border:2px solid rgba(212,175,55,.3);color:#d4af37;font:700 12px 'Amiri',serif;pointer-events:all;display:none;align-items:center;justify-content:center;cursor:pointer}
.mobile-action.show{display:flex}
@media(hover:none)and(pointer:coarse){.mobile-controls{display:block}.hud-controls{display:none}}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:60;align-items:center;justify-content:center;padding:20px}
.modal-overlay.on{display:flex}
.modal-card{background:linear-gradient(160deg,#1a1030,#0d0d2b);border:2px solid rgba(212,175,55,.25);border-radius:22px;padding:30px 24px;max-width:460px;width:100%;text-align:center;animation:modalPop .4s ease-out;max-height:85vh;overflow-y:auto;position:relative}
@keyframes modalPop{from{opacity:0;transform:scale(.88) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-glow{position:absolute;inset:0;border-radius:22px;box-shadow:inset 0 0 80px rgba(212,175,55,.05);pointer-events:none}
.modal-num{font-size:12px;color:rgba(244,232,193,.3);margin-bottom:4px}
.modal-title{font-family:'Scheherazade New',serif;font-size:20px;color:#d4af37;margin-bottom:16px}
.modal-arabic{font-family:'Scheherazade New',serif;font-size:clamp(22px,5vw,32px);color:#f4e8c1;direction:rtl;line-height:1.9;margin-bottom:14px;text-shadow:0 0 12px rgba(212,175,55,.12);opacity:0;animation:fadeReveal .8s .4s forwards}
.modal-phonetic{font-style:italic;color:rgba(244,232,193,.45);margin-bottom:10px;font-size:14px;opacity:0;animation:fadeReveal .8s .9s forwards}
.modal-french{color:rgba(244,232,193,.7);margin-bottom:20px;font-size:15px;line-height:1.5;opacity:0;animation:fadeReveal .8s 1.4s forwards}
@keyframes fadeReveal{to{opacity:1}}

/* VICTORY */
.victory-screen{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.92);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.victory-screen.on{display:flex;animation:fadeIn .8s ease-out}
.victory-title{font-family:'Scheherazade New',serif;font-size:clamp(34px,9vw,60px);color:#d4af37;text-shadow:0 0 50px rgba(212,175,55,.5);margin-bottom:14px}
.victory-sub{font-size:clamp(14px,3vw,19px);color:rgba(244,232,193,.7);margin-bottom:28px;max-width:380px;line-height:1.6}