:root{
  /* Burbank Big Condensed Black si installée, sinon Anton / Teko */
  --fn:'Burbank Big Condensed Black','Burbank Big Condensed',Anton,Teko,'Bebas Neue',Impact,sans-serif;
  --fn-ui:'Burbank Big Condensed Black','Burbank Big Condensed',Teko,Anton,Impact,sans-serif;
  --body:'Rajdhani',system-ui,sans-serif;

  --yellow:#ffe32e;
  --yellow-deep:#f2b705;
  --cyan:#42e8ff;
  --cyan-soft:#9df4ff;
  --ink:#ffffff;
  --ink-dim:#b6c6d6;
  --panel:rgba(10,16,30,.72);
  --panel-line:rgba(255,255,255,.14);
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#05070f;
  color:var(--ink);
  font-family:var(--body);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* toute l'interface en majuscules, crénage serré */
.brand,.nav-tab,.vbucks,.avatar,.mode-title,.mode-select,.play-label,
.nametag,.outfit-meta,.outfit-card strong,.hint,.pad-plus,.chip,
.event-text strong,.event-text span,.vic-sub,.btn-rejouer,.btn-skip,
.drop-phase h2,.match-count,#rotate-gate h2{
  font-family:var(--fn-ui);
  text-transform:uppercase;
  letter-spacing:-0.5px;
}
.brand,.mode-title,.play-label,.vic-sub,.drop-phase h2,#rotate-gate h2{
  font-family:var(--fn);
}

/* ======================= FOND ======================= */
#app-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background-image:url('assets/lobby-bg.jpg');
  background-size:cover;
  background-position:center;
  filter:blur(8px) saturate(1.06);
  transform:scale(1.07);
}
#app-vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 62% at 50% 46%, rgba(0,0,0,0) 0%, rgba(2,5,14,.4) 62%, rgba(2,5,14,.88) 100%),
    linear-gradient(180deg, rgba(3,6,16,.6) 0%, rgba(3,6,16,0) 18%),
    linear-gradient(0deg, rgba(3,6,16,.72) 0%, rgba(3,6,16,0) 26%);
}

/* ======================= SALON ======================= */
#lobby-ui{
  position:fixed;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  transition:opacity 1s ease;
}
#lobby-ui.hidden{opacity:0;pointer-events:none;}

/* --- barre du haut --- */
.navbar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  height:clamp(44px,7vh,58px);
  padding:0 16px;
  background:linear-gradient(180deg, rgba(8,12,26,.94), rgba(8,12,26,.7));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  font-size:clamp(1.2rem,2.4vh,1.7rem);
  letter-spacing:0.5px;
  flex:0 0 auto;
}
.nav-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
}
.nav-tab{
  position:relative;
  flex:0 0 auto;
  border:none;
  background:transparent;
  color:#dfe9f4;
  font-size:clamp(.78rem,1.7vh,1.05rem);
  padding:6px 10px;
  border-radius:7px;
  cursor:default;
  white-space:nowrap;
}
.nav-tab.active{
  background:linear-gradient(180deg,#ffe94f,var(--yellow-deep));
  color:#241a00;
  box-shadow:0 2px 10px rgba(255,210,40,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
.badge{
  position:absolute;
  top:1px;right:1px;
  width:11px;height:11px;
  border-radius:3px;
  background:var(--yellow);
  color:#3a2a00;
  font-style:normal;
  font-size:.6rem;
  line-height:11px;
  text-align:center;
}
.nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.vbucks{
  display:flex;align-items:center;gap:5px;
  font-size:clamp(.85rem,1.8vh,1.1rem);
  white-space:nowrap;
}
.vbucks .v{
  display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(160deg,#cdf3ff,#3aa0cf);
  color:#062a3c;font-size:.78rem;
}
.avatar{
  position:relative;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#6fd8c0,#2f7f9e);
  border:2px solid rgba(255,255,255,.75);
  font-size:1rem;
}
.avatar .online{
  position:absolute;right:-1px;bottom:-1px;
  width:9px;height:9px;border-radius:50%;
  background:#43e07a;border:2px solid #0b1224;
}
.burger{
  display:grid;gap:3px;
  background:none;border:none;cursor:default;padding:4px;
}
.burger span{display:block;width:17px;height:2px;background:#e6eef7;border-radius:2px;}

/* --- corps --- */
.lobby-body{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  min-height:0;
  padding:14px 16px 0;
  gap:12px;
}
.col{display:flex;flex-direction:column;min-height:0;}
.col-left{flex:0 0 clamp(200px,23vw,310px);justify-content:space-between;}
.col-center{flex:1 1 auto;position:relative;align-items:center;justify-content:flex-end;}
.col-right{flex:0 0 clamp(180px,21vw,290px);align-items:flex-end;}

/* --- carte événement --- */
.event-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(140deg,#2b1d5e,#101a3f);
  border:1px solid var(--panel-line);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  padding:10px 12px 12px;
  min-height:clamp(78px,16vh,124px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.event-art{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 32%, rgba(255,170,60,.95) 0%, rgba(255,90,30,.5) 16%, transparent 42%),
    radial-gradient(circle at 30% 70%, rgba(120,80,255,.5), transparent 55%),
    linear-gradient(140deg,#3a2270,#0f1738);
}
.event-art::after{
  content:'';
  position:absolute;
  left:52%;top:22%;
  width:46%;height:14px;
  background:linear-gradient(90deg, rgba(255,160,60,.9), transparent);
  filter:blur(5px);
  transform:rotate(18deg);
}
.chip{
  position:absolute;
  top:8px;left:8px;
  z-index:2;
  font-size:.62rem;
  padding:1px 6px;
  border-radius:4px;
  background:rgba(5,9,20,.75);
  border:1px solid rgba(255,255,255,.25);
}
.event-text{position:relative;z-index:2;line-height:1.05;}
.event-text strong{display:block;font-size:clamp(.9rem,2vh,1.25rem);}
.event-text span{display:block;font-size:clamp(.72rem,1.6vh,.98rem);color:#cfe0f0;}
.event-dots{position:relative;z-index:2;display:flex;gap:4px;margin-top:7px;}
.event-dots i{width:11px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);}
.event-dots i.on{background:#fff;width:16px;}

/* --- panneau de jeu --- */
.play-panel{
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:14px;
  padding:clamp(10px,2vh,16px);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  margin-bottom:clamp(8px,2vh,18px);
}
.mode-title{
  margin:0 0 10px;
  font-size:clamp(1.2rem,3.4vh,2.1rem);
  font-style:italic;
  line-height:1;
}
.mode-select{
  display:flex;
  align-items:center;
  gap:9px;
  background:linear-gradient(180deg,#eef3f8,#ccd8e4);
  color:#16203a;
  border-radius:9px;
  padding:7px 12px;
  margin-bottom:9px;
  font-size:clamp(.72rem,1.6vh,.95rem);
  line-height:1.1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.mode-select .pad{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:#16203a;stroke-width:1.7;}
.mode-select .pad circle{fill:#16203a;stroke:none;}

.play-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:clamp(40px,8vh,62px);
  border:none;
  border-radius:10px;
  cursor:pointer;
  background:linear-gradient(180deg,#fff478 0%,var(--yellow) 20%,#ffcf14 64%,var(--yellow-deep) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -3px 0 rgba(150,85,0,.35),
    0 5px 0 #b07d0c,
    0 12px 24px rgba(0,0,0,.5);
  transition:transform .08s ease, box-shadow .08s ease;
}
.play-btn:active{
  transform:translateY(3px);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 2px 0 rgba(255,255,255,.8),
    0 2px 0 #b07d0c,
    0 6px 14px rgba(0,0,0,.5);
}
.play-glyph{
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:#241a00;color:var(--yellow);
  font-size:.7rem;
  flex:0 0 auto;
}
.play-label{font-size:clamp(1.2rem,3.4vh,2rem);color:#241a00;}

/* --- centre : personnage --- */
.nametag{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:8px;
  background:rgba(6,11,24,.5);
  backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.14);
  white-space:nowrap;
}
.nametag-icon{
  width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:6px;
  background:linear-gradient(160deg,#3f7fe0,#23459c);
  font-size:.95rem;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.nametag-text{display:flex;flex-direction:column;line-height:1;}
.nt-name{font-size:clamp(.95rem,2.2vh,1.3rem);}
.nt-ready{font-size:clamp(.68rem,1.5vh,.9rem);color:#5ff08a;}
.nt-level{font-size:clamp(.66rem,1.4vh,.85rem);color:#cfdeed;}

.squad{
  position:relative;
  z-index:3;
  height:clamp(190px,82%,720px);
  display:flex;
  align-items:flex-end;
  margin-bottom:clamp(12px,3.4vh,42px);
  animation:idleBob 4.6s ease-in-out infinite;
}
@keyframes idleBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}
.squad img{
  height:100%;
  width:auto;
  max-width:min(46vw,520px);
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0px 30px 20px rgba(0,0,0,0.7));
}

/* --- socles 3D --- */
.pad-wrap{
  position:absolute;
  width:0;height:0;
  perspective:620px;
  z-index:1;
  pointer-events:none;
}
.pad-disc,.pad-ring{
  position:absolute;
  left:0;top:0;
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(70deg);
}
.pad-main{left:50%;bottom:clamp(16px,4vh,48px);}
.pad-main .pad-disc{
  width:clamp(190px,20vw,330px);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(240,254,255,1) 0%,
    rgba(157,244,255,.92) 22%,
    rgba(66,232,255,.68) 44%,
    rgba(46,190,224,.28) 62%,
    rgba(46,190,224,.05) 75%,
    transparent 83%);
  box-shadow:
    0 0 80px 26px rgba(66,232,255,.7),
    0 0 190px 62px rgba(66,232,255,.38),
    inset 0 0 70px rgba(255,255,255,.6);
  filter:blur(5px);
  animation:padPulse 3.6s ease-in-out infinite;
}
@keyframes padPulse{0%,100%{opacity:.9;} 50%{opacity:1;}}
.pad-main .pad-ring{
  width:clamp(145px,15vw,250px);
  aspect-ratio:1;
  border:2px solid rgba(200,250,255,.65);
  box-shadow:0 0 26px rgba(150,240,255,.75), inset 0 0 30px rgba(170,245,255,.45);
  filter:blur(1.4px);
}
.pad-empty .pad-disc{
  width:clamp(92px,10vw,168px);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(214,234,247,.5), rgba(150,190,215,.16) 58%, transparent 76%);
  box-shadow:0 0 30px 10px rgba(170,205,230,.22);
  filter:blur(3px);
}
.pad-plus{
  position:absolute;
  left:0;top:0;
  transform:translate(-50%,-50%);
  font-size:clamp(1.1rem,2.6vh,1.7rem);
  color:rgba(240,248,253,.85);
  text-shadow:0 2px 9px rgba(0,0,0,.8);
}
.pe1{left:20%;bottom:clamp(40px,9vh,96px);}
.pe2{left:80%;bottom:clamp(40px,9vh,96px);}
.pe3{left:88%;bottom:clamp(16px,3.6vh,40px);}

/* --- carte de tenue --- */
.outfit-card{
  width:100%;
  border-radius:12px;
  background:linear-gradient(160deg,rgba(24,56,130,.92),rgba(12,28,72,.92));
  border:1px solid rgba(120,180,255,.32);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  padding:10px;
  backdrop-filter:blur(8px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:9px;
  align-items:center;
}
.outfit-thumb{
  width:clamp(38px,5vw,56px);
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(160deg,#2e6fd0,#173a86);
  flex:0 0 auto;
}
.outfit-thumb img{
  width:290%;
  height:auto;
  margin-left:-105%;
  margin-top:-12%;
  display:block;
}
.outfit-meta{line-height:1.05;}
.outfit-meta strong{display:block;font-size:clamp(.92rem,2.1vh,1.3rem);}
.outfit-meta span{display:block;font-size:clamp(.68rem,1.5vh,.88rem);color:#a9c8ee;}
.outfit-note{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:clamp(.65rem,1.4vh,.84rem);
  color:#dbe9fb;
  border-top:1px solid rgba(140,190,255,.22);
  padding-top:7px;
}
.outfit-note .flask{font-size:.95rem;}

/* --- barre du bas --- */
.bottombar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 16px calc(env(safe-area-inset-bottom) + 8px);
}
.party-msg{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:clamp(.72rem,1.6vh,.95rem);
  color:#bfe0ff;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.hints{display:flex;gap:6px;}
.hint{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:clamp(.62rem,1.4vh,.82rem);
  padding:5px 10px;
  border-radius:7px;
  background:rgba(10,18,36,.66);
  border:1px solid var(--panel-line);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.hint i{
  font-style:normal;
  display:grid;place-items:center;
  min-width:17px;height:17px;
  padding:0 3px;
  border-radius:4px;
  background:rgba(255,255,255,.16);
  font-size:.62rem;
}

/* ======================= LARGAGE ======================= */
#drop-screen{
  position:fixed;
  inset:0;
  z-index:5;
  display:none;
  background:#05070f;
}
#drop-screen.show{display:block;}
.drop-phase{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.drop-phase.active{display:flex;}
.drop-phase h2{
  position:relative;z-index:5;margin:0;
  font-size:clamp(1.6rem,6vh,3rem);
  text-shadow:0 4px 22px rgba(0,0,0,.8);
}
.match-spinner{
  position:relative;z-index:5;
  width:60px;height:60px;border-radius:50%;
  border:4px solid rgba(66,232,255,.2);
  border-top-color:var(--cyan);
  margin-bottom:20px;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.match-count{position:relative;z-index:5;margin-top:8px;color:var(--ink-dim);font-size:1.05rem;}
.match-count b{color:var(--cyan-soft);font-size:1.25rem;}
.bus-sky,.dive-sky{position:absolute;inset:0;background:linear-gradient(180deg,#1d6fa8 0%,#4aa8d4 42%,#93d3e6 72%,#cfeaf2 100%);}
.cloud{position:absolute;background:rgba(255,255,255,.85);border-radius:100px;filter:blur(1px);}
.cloud::before,.cloud::after{content:'';position:absolute;background:inherit;border-radius:50%;}
.c1{width:150px;height:36px;top:24%;left:-40%;animation:cloudDrift 9s linear infinite;}
.c1::before{width:64px;height:64px;top:-28px;left:26px;}
.c1::after{width:46px;height:46px;top:-17px;left:80px;}
.c2{width:115px;height:28px;top:58%;left:-45%;animation:cloudDrift 11s linear infinite 1.4s;opacity:.75;}
.c2::before{width:50px;height:50px;top:-23px;left:21px;}
.c2::after{width:37px;height:37px;top:-12px;left:60px;}
.c3{width:180px;height:40px;top:76%;left:-55%;animation:cloudDrift 13s linear infinite .6s;opacity:.6;}
.c3::before{width:74px;height:74px;top:-32px;left:32px;}
.c3::after{width:55px;height:55px;top:-19px;left:97px;}
@keyframes cloudDrift{from{transform:translateX(0);} to{transform:translateX(260vw);}}
.bus{
  position:absolute;z-index:4;
  width:min(34vw,300px);top:24%;left:-45%;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.4));
  animation:busFly 6s cubic-bezier(.35,0,.65,1) forwards;
}
@keyframes busFly{0%{left:-45%;} 100%{left:108%;}}
.phase-bus h2{color:#fff;margin-top:26vh;}
.dive-sky{background:linear-gradient(180deg,#0e4f80 0%,#2f8fc4 38%,#7cc6e0 70%,#d6eef5 100%);}
.speed-lines{
  position:absolute;inset:-30%;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.5) 0 3px, transparent 3px 46px);
  opacity:.45;animation:rush .42s linear infinite;
}
@keyframes rush{from{transform:translateY(-46px);} to{transform:translateY(0);}}
.diver{position:relative;z-index:4;animation:diveFall 2.6s ease-in-out infinite;}
.diver img{height:min(46vh,300px);width:auto;filter:drop-shadow(0px 30px 20px rgba(0,0,0,0.7));}
@keyframes diveFall{
  0%,100%{transform:translateY(-8px) rotate(-3deg);}
  50%{transform:translateY(8px) rotate(4deg);}
}
.btn-skip{
  position:absolute;z-index:10;
  right:16px;bottom:calc(env(safe-area-inset-bottom) + 16px);
  padding:9px 16px;border-radius:8px;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(6,10,22,.55);
  color:#eaf4fb;font-size:1rem;cursor:pointer;
  backdrop-filter:blur(6px);
}

/* ======================= VICTOIRE ======================= */
#victory-screen{
  position:fixed;
  inset:0;
  z-index:6;
  display:none;
  opacity:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(4,8,20,.62);
  backdrop-filter:blur(10px);
  transition:opacity 1s ease;
}
#victory-screen.show{display:flex;}
#victory-screen.visible{opacity:1;}

#confetti-canvas{position:absolute;inset:0;z-index:2;pointer-events:none;}

.vic-emojis{position:absolute;inset:0;z-index:1;pointer-events:none;}
.em{
  position:absolute;
  font-size:clamp(30px,5.2vw,62px);
  opacity:.32;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
  animation:emFloat 11s ease-in-out infinite;
}
@keyframes emFloat{
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%{transform:translateY(-24px) rotate(6deg);}
}
.e1{top:7%;left:5%;animation-duration:10s;}
.e2{top:12%;right:7%;animation-duration:12s;animation-delay:.6s;}
.e3{top:60%;left:4%;animation-duration:13s;animation-delay:1.2s;}
.e4{top:30%;left:13%;animation-duration:11s;animation-delay:.3s;}
.e5{bottom:10%;left:22%;animation-duration:12.5s;animation-delay:.9s;}
.e6{bottom:12%;right:20%;animation-duration:10.5s;animation-delay:1.6s;}
.e7{bottom:6%;left:44%;animation-duration:14s;animation-delay:.2s;}
.e8{top:6%;left:38%;animation-duration:12s;animation-delay:1.1s;}
.e9{top:56%;right:5%;animation-duration:13.5s;animation-delay:1.9s;}
.e10{top:34%;right:15%;animation-duration:11.5s;animation-delay:.5s;}

.vic-inner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(8px,1.8vh,18px);
  padding:clamp(12px,3vh,28px) 20px;
  max-width:min(92vw,860px);
  max-height:100vh;
  overflow-y:auto;
}
.vic-banner{
  width:clamp(220px,42vw,520px);
  height:auto;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(90,190,255,.45));
  animation:vicIn .8s cubic-bezier(.2,.9,.3,1.35) both;
}
@keyframes vicIn{
  from{opacity:0;transform:scale(.7);}
  to{opacity:1;transform:scale(1);}
}
.vic-sub{
  margin:0;
  font-size:clamp(1.1rem,4.2vh,2.2rem);
  color:var(--cyan-soft);
  text-shadow:0 2px 16px rgba(0,0,0,.75);
  animation:vicIn .8s cubic-bezier(.2,.9,.3,1.35) .25s both;
}
.vic-message{
  font-family:var(--body);
  font-size:clamp(.92rem,2.3vh,1.2rem);
  line-height:1.6;
  color:#f2f9ff;
  padding:clamp(12px,2.6vh,24px) clamp(16px,3vw,32px);
  border-radius:16px;
  background:rgba(6,12,26,.66);
  border:2px solid rgba(255,255,255,.75);
  box-shadow:
    0 0 26px rgba(255,255,255,.35),
    0 0 60px rgba(120,200,255,.28),
    inset 0 0 30px rgba(255,255,255,.08);
  animation:vicIn .8s cubic-bezier(.2,.9,.3,1.35) .45s both;
}
.vic-message p{margin:0 0 8px;}
.vic-message p:last-child{margin-bottom:0;}

.btn-rejouer{
  padding:10px 32px;
  border-radius:9px;
  border:2px solid var(--cyan-soft);
  background:rgba(10,34,44,.45);
  color:var(--cyan-soft);
  font-size:clamp(1rem,2.6vh,1.4rem);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(0,0,0,.45);
  animation:vicIn .8s cubic-bezier(.2,.9,.3,1.35) .6s both;
}
.btn-rejouer:active{background:var(--cyan-soft);color:#04222b;}

/* ======================= ROTATION ======================= */
#rotate-gate{
  position:fixed;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:28px;
  background:linear-gradient(160deg,#0a1230,#050914);
}
.rotate-inner{max-width:320px;}
.phone-icon{
  font-size:58px;
  animation:tilt 2s ease-in-out infinite;
  display:inline-block;
}
@keyframes tilt{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-90deg);}
}
#rotate-gate h2{
  margin:18px 0 8px;
  font-size:1.9rem;
  color:var(--yellow);
}
#rotate-gate p{margin:0;color:#c6d6e6;font-size:1rem;}

@media (orientation:portrait){
  #rotate-gate{display:flex;}
}