/* Entrar / Criar conta / Recuperar — palco imersivo: aurora dourada e rosa, chão de luz, mini arena ao vivo e cartão de vidro. */
@font-face{font-family:'Chakra Petch';src:url('/fonts/ChakraPetch-SemiBold.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/fonts/ChakraPetch-Bold.woff') format('woff');font-weight:700;font-display:swap}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{color-scheme:dark;--stage:#0b0a0f;--surface:#15141b;--line:#ffffff17;--ink:#f3eee4;--muted:#a29eac;--gold:#eed09a;--gold-hot:#ffcf4d;--pink:#f16b9f;--display:'Chakra Petch','Segoe UI',system-ui,sans-serif;--body:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;overflow-x:hidden;background:var(--stage);color:var(--ink);font:16px/1.6 var(--body)}
a{color:inherit}
button,input{font:inherit}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible,input:focus-visible,.demo:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.fx-trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}
.fx-rain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* Fundo: aurora em movimento e chão de luz em perspectiva */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#1d1220,var(--stage) 60%)}
.aurora{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(90px);opacity:.38;mix-blend-mode:screen;animation:drift 22s ease-in-out infinite alternate}
.a1{left:-18vmax;top:-22vmax;background:radial-gradient(circle,#f16b9f,transparent 65%)}
.a2{right:-22vmax;top:-10vmax;background:radial-gradient(circle,#eed09a,transparent 65%);opacity:.24;animation-duration:28s;animation-delay:-8s}
.a3{left:20vw;bottom:-36vmax;background:radial-gradient(circle,#8a3cff,transparent 65%);opacity:.2;animation-duration:32s;animation-delay:-14s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vmax,6vmax) scale(1.15)}100%{transform:translate(-6vmax,10vmax) scale(.95)}}
.floor{position:absolute;left:-50%;right:-50%;bottom:-10%;height:55%;transform:perspective(600px) rotateX(62deg);transform-origin:50% 100%;background-image:linear-gradient(#f16b9f38 1px,transparent 1px),linear-gradient(90deg,#f16b9f38 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:floor 6s linear infinite}
@keyframes floor{to{background-position:0 64px,0 0}}

/* Estrutura */
.auth-shell{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,460px);grid-template-rows:auto 1fr;gap:0 clamp(40px,6vw,110px);min-height:100vh;padding:0 clamp(20px,5vw,80px) 40px}
.auth-shell>*:not(canvas){position:relative;z-index:1}
.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;font-weight:700;text-decoration:none}
.logo-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--pink),#c9457c);color:#1a0610;font-size:15px}
.back{color:#c9c4cf;font-size:14px;text-decoration:none;padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:#ffffff08;backdrop-filter:blur(8px)}
.back:hover{color:var(--ink);border-color:#ffffff33}

/* Lado do palco */
.stage-side{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px);align-self:center}
.stage-side h1{grid-column:2;grid-row:1;max-width:10ch;margin:0;font-family:var(--display);font-size:clamp(42px,4.4vw,76px);font-weight:700;line-height:.92;letter-spacing:-.025em;background:linear-gradient(180deg,#fff7ea 30%,#c9bfb0);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise .9s cubic-bezier(.2,.8,.2,1) both .1s}
.stage-side .demo{grid-column:1;grid-row:1/3;animation:pop 1s cubic-bezier(.2,.8,.2,1) both}
.stage-side .demo-hint{grid-column:2;grid-row:2;align-self:start;animation:rise .9s cubic-bezier(.2,.8,.2,1) both .3s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}
@keyframes pop{from{opacity:0;transform:rotate(-6deg) translateY(40px) scale(.94)}}

/* Lado do formulário: cartão de vidro com borda animada */
.form-side{align-self:center;animation:rise .9s cubic-bezier(.2,.8,.2,1) both .2s}
.card{position:relative;padding:1px;border-radius:26px;background:conic-gradient(from var(--angle),#eed09a,#f16b9f 25%,#ffffff1a 40%,#ffffff1a 60%,#f16b9f 75%,#eed09a);animation:spin 8s linear infinite;box-shadow:0 40px 120px #000b,0 0 80px #f16b9f1f}
@keyframes spin{to{--angle:360deg}}
.card-inner{padding:clamp(26px,3vw,40px);border-radius:25px;background:#131218e6;backdrop-filter:blur(24px)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:30px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#0b0a0f99}
.tabs a{padding:10px;border-radius:9px;color:var(--muted);font-size:15px;text-align:center;text-decoration:none;transition:background .2s,color .2s}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{background:linear-gradient(135deg,#eed09a26,#f16b9f26);color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px #ffffff1f}
.eyebrow{margin:0 0 6px;color:var(--pink);font-size:15px;font-weight:600}
h2{margin:0 0 8px;font-family:var(--display);font-size:clamp(30px,2.6vw,38px);font-weight:700;line-height:1.05}
.hint{margin:0 0 24px;color:var(--muted);font-size:15px}
form{display:grid;gap:16px}
label{display:grid;gap:7px;color:#d5d0da;font-size:14px}
input:not([type=checkbox]){width:100%;padding:14px 15px;border:1px solid #ffffff1f;border-radius:12px;background:#0b0a0fcc;color:var(--ink);transition:border-color .2s,box-shadow .2s,background .2s}
input::placeholder{color:#6f6b79}
input:not([type=checkbox]):focus{border-color:var(--gold);background:#0b0a0f;box-shadow:0 0 0 4px #eed09a24,0 0 30px #eed09a1a;outline:none}
.pass{position:relative;display:block}
.pass input{padding-right:52px}
.reveal-pass{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:40px;height:40px;transform:translateY(-50%);border:0;border-radius:9px;background:transparent;color:var(--muted);cursor:pointer}
.reveal-pass:hover,.reveal-pass[aria-pressed=true]{color:var(--gold)}
.reveal-pass svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.check{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.check input{margin-top:4px;accent-color:var(--gold)}
.check a{color:var(--gold)}
.check small{display:block;margin-top:2px;color:var(--muted);font-size:13px}
.check.first-access{padding:12px;border:1px solid #eed09a55;border-radius:11px;background:#eed09a0d}
.primary,.button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin-top:6px;padding:14px 22px;border:0;border-radius:13px;background:linear-gradient(135deg,#f6dfae,#eed09a 45%,#e7b96c);color:#1d1406;font-family:var(--display);font-size:18px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 14px 36px #eed09a33,inset 0 -3px 0 #c9a45d;transition:transform .15s,box-shadow .2s}
.primary:after,.button:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff8c 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.primary:hover,.button:hover{transform:translateY(-2px);box-shadow:0 20px 44px #eed09a4d,inset 0 -3px 0 #c9a45d}
.primary:hover:after,.button:hover:after{transform:translateX(120%)}
.primary:disabled{opacity:.55;cursor:wait;transform:none}
#status{min-height:22px;margin:14px 0 0;color:var(--gold);font-size:14px}
.recover-link{display:inline-block;color:var(--muted);font-size:14px;text-underline-offset:5px}
.recover-link:hover{color:var(--ink)}
#recoveryResult{display:grid;gap:14px;margin-top:18px;padding:20px;border:1px solid #eed09a40;border-radius:16px;background:#0b0a0f99}
#recoveryResult h3{margin:0;font-family:var(--display);font-size:22px}
#recoveryResult p{margin:0;color:var(--muted);font-size:14px}
#recoveryCode{padding:12px;border-radius:9px;background:#08070b;color:var(--gold);font-size:14px;overflow-wrap:anywhere}
#copyRecovery{min-height:46px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
#copyRecovery:hover{background:#ffffff0d}

/* Mini tela X1 (demonstração) */
.stage-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.demo{--w:clamp(290px,28vw,372px);position:relative;width:var(--w);aspect-ratio:9/16;container-type:inline-size;overflow:hidden;border:1px solid #ffffff24;border-radius:30px;background:#0d0c12;box-shadow:0 0 0 8px #ffffff08,0 50px 120px #000c,0 0 90px #f16b9f1c;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transform:rotate(1.5deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.demo:hover{transform:rotate(0)}
.demo.bump{animation:bump .18s ease-out}
@keyframes bump{50%{transform:rotate(0) scale(.985)}}
.demo-cam{position:absolute;inset:0 0 auto;height:31%;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 60%,#3a2a3c,#1a1820 70%)}
.demo-cam span{color:#ffffff4d;font-size:3.6cqw;letter-spacing:.04em}
.demo-clock{position:absolute;top:23.5%;left:50%;z-index:3;transform:translateX(-50%);padding:1.4cqw 5cqw 1.2cqw;border-radius:2.4cqw;background:#3c3d44e6;text-align:center;line-height:1}
.demo-clock small{display:block;color:#ffffffa6;font-size:1.9cqw;letter-spacing:.18em;text-transform:uppercase}
.demo-clock strong{display:block;margin-top:.6cqw;font-family:var(--display);font-size:9cqw;font-variant-numeric:tabular-nums}
.demo-clock.final strong{color:#ff5b6b}
.demo-arena{position:absolute;inset:31% 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw;padding:3.4cqw 2.6cqw 0;border-top:.5cqw solid;border-image:linear-gradient(90deg,var(--pink),#ffffff20 45%,var(--gold)) 1}
.demo-title{display:flex;align-items:baseline;justify-content:center;gap:1.4cqw;margin:0 0 2.4cqw;font-family:var(--display);font-size:6.6cqw;font-weight:700;line-height:1;text-transform:uppercase}
.demo-title span{color:var(--ink);font-size:3.2cqw}
.coins .demo-title{color:var(--gold)}
.taps .demo-title{color:var(--pink)}
.demo-list{position:relative;margin:0;padding:0;list-style:none}
.demo-row{position:absolute;left:0;right:0;display:flex;align-items:center;gap:1.6cqw;height:6.4cqw;padding:0 1.8cqw;border-radius:1.2cqw;background:#ffffff09;font-size:3cqw;white-space:nowrap;will-change:transform}
.demo-row .pos{width:3.4cqw;color:#ffffff73;font-size:2.4cqw;font-variant-numeric:tabular-nums}
.demo-row .av{display:grid;place-items:center;flex:0 0 4.2cqw;height:4.2cqw;border-radius:50%;background:#2a2a36;font-size:1.8cqw;font-weight:700}
.demo-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.demo-row .sc{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}
.demo-row.you{background:#f16b9f26;box-shadow:inset 0 0 0 1px #f16b9f80}
.demo-row.leader{flex-direction:column;justify-content:center;gap:.6cqw;height:27cqw;padding:2cqw;border:1px solid;border-radius:2cqw;text-align:center}
.coins .demo-row.leader{border-color:#eed09a99;background:linear-gradient(160deg,#3a3121,#18161c 70%)}
.taps .demo-row.leader{border-color:#f16b9f99;background:linear-gradient(160deg,#3a2130,#18161c 70%)}
.demo-row.leader .pos{display:none}
.demo-row.leader .av{flex:0 0 auto;width:10cqw;height:10cqw;margin-top:4cqw;font-size:3.6cqw;box-shadow:0 0 0 .5cqw var(--ring,#eed09a)}
.taps .demo-row.leader .av{--ring:var(--pink)}
.demo-row.leader .nm{flex:0 0 auto;width:100%;font-size:3.4cqw;font-weight:700}
.demo-row.leader .sc{font-size:7.2cqw;line-height:1}
.coins .demo-row.leader .sc{color:var(--gold)}
.taps .demo-row.leader .sc{color:var(--pink)}
.demo-row.flash{animation:rowflash .7s ease-out}
@keyframes rowflash{0%{filter:brightness(2.2)}100%{filter:none}}
.demo-crown{position:absolute;z-index:4;width:9cqw;height:auto;pointer-events:none;filter:drop-shadow(0 .6cqw 1cqw #0009)}
.taps .demo-crown,.demo-crown.pink{filter:hue-rotate(300deg) saturate(1.6) drop-shadow(0 .6cqw 1cqw #0009)}
.demo-tag{position:absolute;z-index:5;top:1.4cqw;right:1.4cqw;padding:.6cqw 1.4cqw;border-radius:1cqw;background:var(--gold);color:#1d1406;font-family:var(--display);font-size:2.2cqw;font-weight:700;animation:tagin .35s cubic-bezier(.2,.9,.3,1.3)}
.taps .demo-tag{background:var(--pink);color:#25060f}
@keyframes tagin{from{transform:scale(.4);opacity:0}}
.demo-float{position:absolute;z-index:6;font-family:var(--display);font-size:4cqw;font-weight:700;pointer-events:none;text-shadow:0 .4cqw 1cqw #000a}
.coins .demo-float{color:var(--gold-hot)}
.taps .demo-float{color:var(--pink)}
.demo-ticker{position:absolute;left:3cqw;right:3cqw;bottom:4cqw;margin:0;overflow:hidden;color:#d8d3de;font-size:2.8cqw;white-space:nowrap;text-overflow:ellipsis}
.demo-ticker:before{content:'↗';margin-right:1.4cqw;color:var(--pink)}
.demo-champions{position:absolute;inset:34% 4cqw auto;z-index:8;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;padding:5cqw 3cqw;border:1px solid #eed09a80;border-radius:3cqw;background:#121117f2;box-shadow:0 0 12cqw #eed09a33;text-align:center;animation:champin .5s cubic-bezier(.2,.9,.3,1.15)}
@keyframes champin{from{transform:scale(.7);opacity:0;filter:blur(6px)}}
.demo-champions h4{grid-column:1/-1;margin:0 0 1cqw;color:var(--gold);font-family:var(--display);font-size:3.4cqw;letter-spacing:.3em;text-transform:uppercase}
.demo-champions div{display:flex;flex-direction:column;align-items:center;gap:1cqw}
.demo-champions img{width:10cqw}
.demo-champions .pink img{filter:hue-rotate(300deg) saturate(1.6)}
.demo-champions small{color:var(--gold);font-size:2cqw;letter-spacing:.12em;text-transform:uppercase}
.demo-champions .pink small{color:var(--pink)}
.demo-champions strong{font-family:var(--display);font-size:4.4cqw;line-height:1.1}
.demo-champions span{padding:.6cqw 2cqw;border-radius:3cqw;background:var(--gold);color:#1d1406;font-size:2.4cqw;font-weight:800}
.demo-champions .pink span{background:var(--pink);color:#25060f}
.demo-hint{display:flex;align-items:center;gap:10px;margin:0;color:#cfcad6;font-size:14px}
.demo-hint.won{color:var(--pink);font-weight:700}
.tap-icon{position:relative;width:18px;height:18px;border:2px solid var(--pink);border-radius:50%}
.tap-icon:after{content:'';position:absolute;inset:-6px;border:2px solid var(--pink);border-radius:50%;opacity:0;animation:ripple 1.6s infinite}
@keyframes ripple{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.3);opacity:0}}


/* Ajustes da mini arena no login */
.stage-side .demo{--w:clamp(250px,22vw,330px);transform:rotate(-3deg)}
.stage-side .demo:hover{transform:rotate(0)}
.demo-hint{color:#d8d3de}

@media(max-width:1100px){
  .auth-shell{grid-template-columns:minmax(0,1fr) minmax(360px,440px)}
  .stage-side{grid-template-columns:1fr}
  .stage-side h1,.stage-side .demo-hint{grid-column:1}
  .stage-side .demo,.stage-side .demo-hint{display:none}
}
@media(max-width:820px){
  .auth-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:0 18px 32px}
  .topbar{padding:18px 0}
  .stage-side{margin:6px 0 22px}
  .stage-side h1{max-width:none;font-size:clamp(36px,10vw,52px)}
  .form-side{align-self:start}
  .floor{height:40%}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.fx-rain,.fx-trail{display:none}}