/* Direction : chantier antique de Babylone — briques de grès, émail lapis-lazuli et or (porte d'Ishtar), typo monumentale */
:root{
  --ink:#1a1330;--white:#fff;--soft:rgba(255,255,255,.74);--glass:rgba(255,255,255,.14);--line:rgba(255,236,190,.38);
  --lapis:#1f3f9e;--lapis2:#15235e;--gold:#e9b949;--gold2:#ffe08a;--sand:#e9c48b;--clay:#b8643b;--red:#e2433f;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;--carved:"Cinzel",Georgia,serif;--body:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.45 var(--body);color:var(--white);-webkit-font-smoothing:antialiased;overscroll-behavior:none;background:var(--lapis2);transition:background .6s}
body.bg-home{background:linear-gradient(175deg,#f2a65a 0%,#c8643b 32%,#2a4bb8 72%,#15235e 100%)}
body.bg-lobby{background:radial-gradient(120% 70% at 50% 0%,#2f58d0 0%,#1f3f9e 45%,#15235e 100%)}
body.bg-game{background:#1f3f9e}
body.bg-over{background:linear-gradient(175deg,#7a2e2a 0%,#b8643b 40%,#15235e 100%)}
body.bg-board{background:linear-gradient(175deg,#1f3f9e 0%,#15235e 60%,#0d1640 100%)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:repeating-linear-gradient(0deg,transparent 0 30px,#fff 30px 32px),repeating-linear-gradient(90deg,transparent 0 58px,#fff 58px 60px)}
body.bg-game::before{display:none}
#app{position:relative;height:100%;max-width:520px;margin:0 auto;padding-inline:20px;padding-block:18px;display:flex;flex-direction:column}
h1,h2{margin:0;text-wrap:balance}
p{margin:0}
button,input{font:700 16px var(--body);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer;border:0;color:inherit;transition:transform .1s,background .2s}
button:active{transform:scale(.96)}
button:disabled{opacity:.5}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.screen{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;animation:in .45s cubic-bezier(.2,.9,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(14px)}}
.kicker{font:700 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.fine{font-size:13px;color:var(--soft)}
.link{background:none;padding:8px 0;color:var(--white);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.cta{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink);border-radius:14px;padding:17px 22px;font:700 16px var(--display);box-shadow:0 4px 0 #9c7420,0 18px 36px -14px rgba(0,0,0,.6)}
.cta:active{box-shadow:0 1px 0 #9c7420}
.ghost{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--white)}
.row2{display:flex;gap:8px}.row2>*{flex:1;min-width:0}
.top{display:flex;justify-content:space-between;align-items:center;padding-right:48px}
.links{display:flex;justify-content:center;gap:22px;align-items:center;font-size:14px;color:var(--soft)}
.links b{color:var(--gold2)}

/* accueil */
.home{justify-content:flex-end;position:relative}
.deco{position:absolute;inset:1% 0 auto 0;height:31%;display:flex;flex-direction:column-reverse;align-items:center;pointer-events:none}
.deco i{display:block;height:13%;width:var(--w);margin-left:var(--o);box-shadow:12px -12px 0 #8a5a33;border-radius:2px;background-image:linear-gradient(90deg,rgba(80,45,20,.25) 2px,transparent 2px),linear-gradient(#f0cf95,#c99a5c);background-size:60px 100%,100% 100%;animation:stack .5s var(--d) both cubic-bezier(.3,1.5,.5,1)}
.deco i.glaze{background:linear-gradient(#3a66e0,#17307f);box-shadow:12px -12px 0 #10245e,inset 0 3px 0 var(--gold),inset 0 -3px 0 var(--gold)}
@keyframes stack{from{transform:translateY(-240px);opacity:0}}
.brand{position:relative;line-height:.85;display:flex;flex-direction:column;align-items:flex-start}
.brand h1{font:900 clamp(64px,21vw,104px) var(--carved);letter-spacing:.02em;color:var(--gold2);text-shadow:0 3px 0 #9c7420,0 12px 40px rgba(0,0,0,.45)}
.brand .squad{display:inline-block;margin-top:8px;font:900 clamp(20px,6.5vw,30px) var(--display);letter-spacing:.42em;padding:6px 10px 6px 16px;border-radius:8px;background:var(--lapis);color:var(--white);border:2px solid var(--gold);transform:rotate(-3deg);box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.lead{font-size:16px;max-width:32ch;color:var(--soft)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini{padding:10px 14px;border-radius:14px;background:rgba(21,35,94,.45);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mini span{display:block;font-size:12px;color:var(--soft)}
.mini b{font:700 20px var(--display);font-variant-numeric:tabular-nums;color:var(--gold2)}
.mini.done b{color:#7ee2a8}
.form{display:flex;flex-direction:column;gap:8px}
.form input,.join input{width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(21,35,94,.45);color:var(--white)}
.form input::placeholder,.join input::placeholder{color:var(--soft)}
.privbox{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:rgba(21,35,94,.4);border:1px dashed var(--line)}
.join{display:flex;gap:8px}
.join input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.3em;font-family:var(--display);text-align:center}
.join button{flex:none}

/* salon */
.lobby{align-items:center;text-align:center}
.lobby .top{align-self:stretch}
.live{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.team{font:700 clamp(24px,7vw,32px) var(--carved);line-height:1.1;color:var(--gold2)}
.invite{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;border-radius:16px;background:rgba(0,0,0,.2);border:1px solid var(--line);width:100%}
.invite span{font-size:12px;color:var(--soft)}
.invite b{font:900 34px var(--display);letter-spacing:.3em;color:var(--gold2)}
.ring{position:relative;width:min(48vw,190px);aspect-ratio:1;max-width:100%}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .track{stroke:rgba(255,255,255,.12)}
.ring .fill{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .5s cubic-bezier(.3,1.4,.5,1)}
.ring>div{position:absolute;inset:0;display:grid;place-content:center;font-family:var(--display)}
.ring b{font-size:58px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.ring span{font-size:16px;color:var(--soft)}
.ready .ring .fill{stroke:#7ee2a8}
.ready .ring b{animation:pulse .45s 2}
@keyframes pulse{50%{transform:scale(1.18)}}
.hint{color:var(--soft);font-size:14px}
.crew{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%}
.mate{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mate i{width:100%;max-width:54px;aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);display:grid;place-items:center;font:700 19px var(--display);font-style:normal}
.mate small{font-size:11px;color:var(--soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:1.2em}
.mate.on i{border:2px solid var(--gold);background:linear-gradient(145deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 30) 65% 38%));box-shadow:0 10px 20px -8px rgba(0,0,0,.6);animation:pop .4s cubic-bezier(.3,1.7,.5,1)}
.mate.you i{border-color:var(--white);box-shadow:0 0 0 3px var(--gold2)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.lobby .row2{width:100%}

/* jeu */
body.bg-game #app{max-width:none;padding:0}
.game{position:relative;gap:0;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
.game canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.vignette{position:absolute;inset:0;pointer-events:none;transition:box-shadow .3s}
.hud{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0;pointer-events:none;max-width:520px;margin:0 auto;width:100%}
.hud-top{display:flex;justify-content:space-between;width:100%;font-size:13px;color:var(--soft);gap:10px;padding-right:48px}
.hud-top .tm{font-weight:800;color:var(--gold2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hud-top b{color:var(--white);font-variant-numeric:tabular-nums}
.height{display:flex;flex-direction:column;align-items:center;line-height:.85;text-shadow:0 4px 0 rgba(0,0,0,.2),0 6px 30px rgba(0,0,0,.35)}
.height b{font:900 clamp(64px,21vw,104px) var(--display);font-variant-numeric:tabular-nums}
.height span{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin-top:6px}
.goal{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(70%,260px)}
.goal span{font-size:11px;font-weight:800;color:var(--gold2);letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.goal i{display:block;width:100%;height:5px;border-radius:5px;background:rgba(0,0,0,.25);overflow:hidden}
.goal em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .4s}
.turn{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(21,35,94,.55);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-width:0;max-width:100%}
.turn.swap{animation:swap .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes swap{from{transform:scale(.85);opacity:.3}}
.turn i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 15px var(--display);font-style:normal;border:2px solid var(--gold);background:linear-gradient(145deg,hsl(var(--h,200) 70% 55%),hsl(calc(var(--h,200) + 30) 65% 38%))}
.turn>div{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.turn small{font-size:11px;color:var(--soft)}
.turn b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{margin-left:6px;font:700 16px var(--display);font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.25)}
.game.mine .turn{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--ink);border-color:transparent}
.game.mine .turn small{color:rgba(26,19,48,.65)}
.game.mine .turn i{background:var(--ink);color:var(--gold2);border-color:var(--ink)}
.game.mine .clock{background:rgba(26,19,48,.15)}
.tap{position:absolute;z-index:2;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);transform:translateX(-50%);padding:10px 18px;border-radius:999px;background:rgba(26,19,48,.5);font-weight:800;font-size:14px;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}
.game.mine .tap{opacity:1;animation:bob 1.2s infinite}
@keyframes bob{50%{transform:translate(-50%,-6px)}}
.game.stress .clock{background:var(--red);color:var(--white);font-size:22px;animation:tick 1s infinite}
.game.stress .turn{background:var(--red);color:var(--white)}
.game.stress .turn small{color:rgba(255,255,255,.8)}
.game.stress .vignette{box-shadow:inset 0 0 120px 30px rgba(255,20,60,.55);animation:alarm 1s infinite}
.game.stress .tap{background:var(--red)}
@keyframes tick{0%{transform:scale(1.25)}30%{transform:scale(1)}}
@keyframes alarm{50%{box-shadow:inset 0 0 60px 10px rgba(255,20,60,.25)}}
.emotes{position:absolute;z-index:3;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);display:flex;flex-direction:column;gap:6px}
.emotes button{width:42px;height:42px;border-radius:50%;font-size:20px;background:rgba(21,35,94,.55);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.game.mine .emotes{opacity:.25;pointer-events:none}
.floaters{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.floater{position:absolute;bottom:120px;display:flex;flex-direction:column;align-items:center;animation:rise 2.2s ease-out forwards}
.floater b{font-size:40px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.floater small{font-size:11px;font-weight:800;background:rgba(26,19,48,.55);padding:1px 7px;border-radius:999px}
@keyframes rise{from{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-30px) scale(1.1)}to{transform:translateY(-320px) scale(1);opacity:0}}
.crew-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 14px);pointer-events:none;overflow-x:auto}
.pip{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.pip i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--display);font-style:normal;border:2px solid var(--gold);background:linear-gradient(145deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 30) 65% 38%));box-shadow:0 6px 14px -6px rgba(0,0,0,.6);transition:transform .25s}
.pip b{font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pip.on i{transform:scale(1.25) translateY(-4px);border-color:var(--white);box-shadow:0 0 0 3px var(--gold2)}
.pip.you i{color:var(--gold2);background:var(--ink)}
.pip.off{opacity:.35}

/* fin et classements */
.over .team{font-size:clamp(26px,8vw,36px)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{padding:12px 16px;border-radius:16px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.stats span{font-size:12px;color:var(--soft);display:block}
.stats b{font:700 26px var(--display);font-variant-numeric:tabular-nums;color:var(--gold2)}
.daily{padding:10px 14px;border-radius:12px;font-weight:800;font-size:14px;background:rgba(0,0,0,.2);border:1px dashed var(--line);color:var(--soft)}
.daily.ok{background:rgba(126,226,168,.18);border:1px solid #7ee2a8;color:#b9f5d1}
.rank{list-style:none;margin:0;padding:6px;flex:1;min-height:0;overflow:auto;border-radius:18px;background:rgba(0,0,0,.18);border:1px solid var(--line)}
.rank li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px}
.rank li+li{margin-top:2px}
.rank .rk{width:26px;flex:none;font:700 14px var(--display);color:var(--soft);text-align:center;font-variant-numeric:tabular-nums}
.rank .nm{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.rank small{display:block;font-weight:500;font-size:12px;color:var(--soft)}
.rank b{font:700 17px var(--display);font-variant-numeric:tabular-nums;color:var(--gold2)}
.rank li.you{background:var(--gold2);color:var(--ink)}
.rank li.you small,.rank li.you .rk,.rank li.you b{color:var(--ink)}
.rank li.podium .rk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.rank li.p0 .rk{background:var(--gold2)}.rank li.p1 .rk{background:#e6e9f2}.rank li.p2 .rk{background:#e0a878}
.rank em{font-style:normal;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.2);margin-left:6px;vertical-align:2px}
.rank em.bad{background:var(--red);color:var(--white)}
.title{font:900 36px var(--carved);color:var(--gold2)}
.tabs{display:flex;padding:5px;border-radius:14px;background:rgba(0,0,0,.2);border:1px solid var(--line)}
.tabs button{flex:1;padding:12px;border-radius:10px;background:none;color:var(--white)}
.tabs button.sel{background:var(--gold2);color:var(--ink)}
.modal{position:fixed;inset:0;z-index:20;background:rgba(10,8,25,.75);display:grid;place-items:center;padding:16px;animation:in .25s}
.sheet{width:min(420px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:20px;background:var(--lapis2);border:1px solid var(--line)}
.sheet img{width:100%;border-radius:12px}
#snd{position:fixed;z-index:10;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:40px;height:40px;border-radius:50%;background:rgba(21,35,94,.45);border:1px solid var(--line);font-size:18px;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hud-top,.height span,.goal span{text-shadow:0 1px 2px rgba(26,19,48,.9),0 0 12px rgba(26,19,48,.6)}
.hud-top .tm{color:var(--white)}

/* effets 3D en surimpression */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-100%);font:800 22px var(--display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(0,0,0,.4);animation:popup 1s ease-out forwards;white-space:nowrap}
.pop.good{color:var(--gold2);font-size:26px}
@keyframes popup{from{opacity:0;transform:translate(-50%,-60%) scale(.6)}20%{opacity:1;transform:translate(-50%,-110%) scale(1.15)}to{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.bigmsg{position:absolute;left:0;right:0;top:42%;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 16px;animation:bigin 2.4s ease forwards}
.bigmsg b{font:900 clamp(30px,10vw,54px) var(--carved);color:var(--gold2);letter-spacing:.04em;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 40px rgba(0,0,0,.5)}
.bigmsg span{font-weight:800;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.bigmsg.down{animation-duration:4s}.bigmsg.down b{color:#fff}
@keyframes bigin{0%{opacity:0;transform:scale(1.4)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}

/* Babel Squad — direction pop / arcade tactile */
:root{--ink:#20204a;--white:#fff;--soft:rgba(255,255,255,.84);--glass:rgba(255,255,255,.18);--line:rgba(255,255,255,.38);--lapis:#5851bd;--lapis2:#342f79;--gold:#ffc94b;--gold2:#fff09c;--sand:#ffd78e;--clay:#ff8e74;--red:#ff536c;--carved:"Unbounded",system-ui,sans-serif}
body{background:#5541aa}
body::before{opacity:.18;background-image:radial-gradient(circle,#fff 1.5px,transparent 2px);background-size:38px 38px;mask-image:linear-gradient(#000,transparent 85%)}
body.bg-home{background:radial-gradient(circle at 84% 9%,#fff2a7 0 4%,transparent 4.2%),radial-gradient(circle at 16% 19%,#ffc5c9 0 3%,transparent 3.3%),radial-gradient(110% 60% at 50% 26%,#8c7ff0 0%,#6157cc 58%,#3b347d 100%)}
body.bg-lobby{background:radial-gradient(80% 50% at 50% 12%,#8587ee,#5149b8 72%,#302e75)}
body.bg-board{background:linear-gradient(155deg,#6f7de1,#4d42a7 60%,#2d2b6b)}
body.bg-over{background:linear-gradient(160deg,#ef7694,#9665cf 48%,#38337e)}
#app{max-width:560px;padding-inline:22px}
.screen{gap:14px}
.kicker{display:inline-flex;align-self:flex-start;padding:7px 12px;border-radius:99px;background:#ffdf69;color:#3c2d6d;letter-spacing:.11em;box-shadow:0 4px 0 #eab650}
.cta{background:linear-gradient(180deg,#fff2a0 0%,#ffc54f 72%);color:#342657;border:2px solid #fff7c6;border-radius:20px;padding:16px 20px;box-shadow:0 6px 0 #d78b41,0 15px 30px rgba(35,25,102,.32);font:900 15px var(--display);letter-spacing:-.035em}
.cta:hover{filter:brightness(1.06);transform:translateY(-2px)}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 #d78b41}
.ghost{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);border-radius:18px;box-shadow:inset 0 1px rgba(255,255,255,.25)}
.ghost:hover{background:rgba(255,255,255,.25)}
.home{justify-content:flex-end;padding-bottom:max(3px,env(safe-area-inset-bottom,0px))}
.home::before,.home::after{content:"✦";position:absolute;color:#fff1a3;font-size:28px;left:8%;top:10%;text-shadow:0 5px 10px #4b389c;animation:twinkle 2s infinite alternate;pointer-events:none}
.home::after{content:"✳";left:auto;right:8%;top:27%;color:#a5f4ed;font-size:36px;animation-delay:.7s}
@keyframes twinkle{to{transform:rotate(28deg) scale(1.25);opacity:.65}}
.deco{height:33%;top:1%;filter:drop-shadow(0 22px 12px rgba(30,25,93,.24));transform:perspective(600px) rotateX(7deg)}
.deco::before{content:"• ᴗ •";position:absolute;z-index:2;top:1%;left:50%;transform:translateX(-50%);width:68px;height:62px;display:grid;place-items:center;background:#ffe975;border:4px solid #fff3aa;border-radius:23px 23px 26px 26px;box-shadow:inset 0 -8px rgba(252,159,75,.35),0 8px 0 #d88d65;color:#6e468e;font:900 20px var(--body);white-space:nowrap;animation:mascot 2.7s ease-in-out infinite}
.deco::after{content:"";position:absolute;top:-9%;left:calc(50% - 37px);height:23px;width:74px;background:#ff85a9;border-radius:70% 70% 20% 20%;transform:rotate(-12deg);z-index:3;animation:mascot 2.7s ease-in-out infinite}
@keyframes mascot{50%{translate:0 -7px}}
.deco i{height:14%;border-radius:13px;box-shadow:9px -8px 0 rgba(64,49,125,.55),0 9px 0 rgba(48,37,112,.45),inset 0 4px 0 rgba(255,255,255,.8);background:linear-gradient(160deg,#fff2ae 0%,#ffc85e 40%,#ff9a7c 100%);border:2px solid rgba(255,255,255,.85)}
.deco i:nth-child(2n){background:linear-gradient(160deg,#d5baff,#a293f8 55%,#7776df)}
.deco i:nth-child(3n){background:linear-gradient(160deg,#c1fff5,#7ddce4 50%,#55b3d7)}
.deco i.glaze{background:linear-gradient(160deg,#ffe6ae,#ff82ac 55%,#e56eae);box-shadow:9px -8px 0 #994cac,0 9px 0 #734ca8,inset 0 4px 0 #fff1bf;border-color:#fff}
.brand{filter:drop-shadow(0 9px 0 rgba(49,34,114,.32))}
.brand h1{font:900 clamp(56px,18vw,92px)/.92 var(--display);letter-spacing:-.085em;color:#fff5c6;text-shadow:0 5px 0 #f49a88,0 10px 0 #8b62bd,0 14px 23px rgba(49,31,102,.45)}
.brand .squad{margin-top:8px;font:900 clamp(18px,5.5vw,27px) var(--display);letter-spacing:.27em;padding:9px 15px 9px 19px;border-radius:13px;background:#6ce2d8;color:#2c3277;border:3px solid #fff;box-shadow:0 6px 0 #38a9bb,0 12px 20px rgba(27,24,88,.3);transform:rotate(-4deg)}
.lead{max-width:38ch;font-weight:700;color:#fff;line-height:1.42;text-shadow:0 2px 8px rgba(37,27,88,.4)}
.mini,.stats div{background:rgba(255,255,255,.19);border:1.5px solid rgba(255,255,255,.45);box-shadow:inset 0 2px rgba(255,255,255,.15),0 9px 24px rgba(36,27,100,.12);border-radius:18px}
.mini{padding:12px 14px}.mini b{color:#fff3a8}.mini span{font-weight:800}
.form input,.join input{background:rgba(37,30,112,.35);border:1.5px solid rgba(255,255,255,.5);border-radius:17px}
.privbox,.invite{background:rgba(42,34,117,.36);border:1.5px solid rgba(255,255,255,.4);border-radius:20px}
.team,.title{color:#fff3af;font-family:var(--display);font-weight:900;letter-spacing:-.055em;text-shadow:0 4px 0 #936bb8}
.ring .fill{stroke:#ffdc69;filter:drop-shadow(0 0 7px #ffd86e)}
.mate i,.pip i{border:2px solid rgba(255,255,255,.55)}
.mate.on i,.pip i{border:3px solid #fff;box-shadow:0 5px 0 rgba(52,39,116,.4),0 10px 16px rgba(31,25,80,.2)}
.game .vignette{background:linear-gradient(180deg,rgba(32,26,99,.38),transparent 28%,transparent 72%,rgba(36,28,109,.45))}
.hud{padding-top:calc(env(safe-area-inset-top,0px) + 12px);gap:7px}
.hud-top{background:rgba(44,37,105,.55);border:1px solid rgba(255,255,255,.35);border-radius:100px;padding:8px 50px 8px 15px;backdrop-filter:blur(12px);font-weight:800}
.hud-top .tm{color:#fff1a6}
.height b{color:#fff8d0;text-shadow:0 5px 0 #ec829d,0 9px 0 rgba(68,49,126,.8),0 15px 30px rgba(37,26,97,.45)}
.height span{font-weight:900;color:#fff;letter-spacing:.25em}
.goal span{background:#ffdc71;color:#443170;padding:4px 11px;border-radius:100px;text-shadow:none}
.goal i{height:9px;background:rgba(52,42,117,.6);border:2px solid rgba(255,255,255,.55);border-radius:20px}
.goal em{background:linear-gradient(90deg,#79e8d9,#ffdf6d)}
.turn{background:rgba(45,36,115,.72);border:2px solid rgba(255,255,255,.65);box-shadow:0 6px 0 rgba(36,28,88,.25)}
.game.mine .turn{background:#ffdd6c;border-color:#fff3ae;color:#39285e;box-shadow:0 6px 0 #e49b55}
.tap{background:#fff0a7;color:#342559;box-shadow:0 5px 0 #e89762,0 10px 25px rgba(32,23,88,.3);font:900 13px var(--display)}
.game.stress .tap{background:#ff637e;color:#fff;box-shadow:0 5px 0 #b83e74}
.emotes button{background:rgba(54,42,120,.7);border:2px solid rgba(255,255,255,.7);box-shadow:0 4px 0 rgba(39,30,92,.4)}
.crew-bar{background:linear-gradient(transparent,rgba(42,32,105,.4));gap:5px}
.pip.on i{border-color:#ffed9a;box-shadow:0 0 0 3px #fff,0 0 16px #fff4aa}
.rank,.tabs{background:rgba(38,31,111,.28);border:1.5px solid rgba(255,255,255,.4)}
.rank li{border-radius:15px}.rank li:nth-child(odd){background:rgba(255,255,255,.09)}.rank li.you{background:#ffe287}
.rank b,.stats b{color:#fff1a6}.rank li.you b{color:#342657}
.tabs button.sel{background:#ffdf72;color:#36265c;box-shadow:0 3px 0 #cf8e58}
.sheet{background:#4e439c;border:2px solid #c7b6ff}
.bigmsg b{font-family:var(--display);color:#fff3ad;text-shadow:0 5px 0 #e46f9c,0 11px 20px rgba(34,25,87,.5)}
@media(max-height:710px){.home{gap:8px}.deco{height:27%}.brand h1{font-size:clamp(50px,16vw,75px)}.lead{font-size:14px}.mini{padding:8px 12px}.form{gap:6px}.cta{padding:13px 18px}}
@media(max-height:590px){.deco{height:20%}.home{justify-content:flex-end}.brand h1{font-size:50px}.brand .squad{font-size:17px}.lead{display:none}}

.ring svg{overflow:visible}