.lobby-portal-link{position:absolute;left:20px;bottom:16px;z-index:10;font:13px Txt,Arial,sans-serif;color:#f7d77a;background:#100b18d9;padding:7px 12px;border:1px solid #6b4b2d}
/* Vexoria — tela de entrada como cena de jogo (Claude, 19/10).
   A cena (assets/ui/login/cena.png) é pixel art 480x270; --u = 1 pixel da cena na tela (definido no main.js),
   então tudo é posicionado em "pixels da cena" e escala junto, sem borrar. */
#login{position:fixed;inset:0;display:block;padding:0;margin:0;overflow:hidden;z-index:50;
  background:#0b0712 url(/client/assets/ui/login/cena.png) center/cover no-repeat;image-rendering:pixelated}
#login::before{content:"";position:absolute;inset:0;background:#0b0712a6;backdrop-filter:blur(3px);z-index:0;opacity:1;animation:none}
#login::after{display:none!important}
#login.hidden{display:none}
#login .lobby-scene{--u:3px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1440px;height:810px;z-index:1;
  background:url(/client/assets/ui/login/cena.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;font-family:Pix,monospace;color:#efe6d6;
  box-shadow:0 0 0 2px #0b0712,0 0 80px #000}
#login .lobby-scene *{box-sizing:border-box}
#login .lobby-scene .embers{position:absolute;inset:0;pointer-events:none;z-index:2}
#login .lobby-fog{position:absolute;left:0;right:0;top:calc(var(--u)*170);height:calc(var(--u)*60);pointer-events:none;z-index:1;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--u)*30),#7c62a322 calc(var(--u)*30) calc(var(--u)*90),transparent calc(var(--u)*90) calc(var(--u)*140));animation:lobbyFog 40s linear infinite}
@keyframes lobbyFog{to{background-position:calc(var(--u)*280) 0}}

/* ---------- títulos ---------- */
#login .lobby-logo{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*8);z-index:5;pointer-events:none}
#login .lobby-logo b{display:block;font:calc(var(--u)*18)/1 Pix,monospace;letter-spacing:calc(var(--u)*1.5);color:#e0283f;
  text-shadow:var(--u) var(--u) 0 #6e0f22,calc(var(--u)*2) calc(var(--u)*2) 0 #0b0712,0 0 calc(var(--u)*10) #a8162f88}
#login .lobby-logo small{display:block;margin-top:calc(var(--u)*2);font:calc(var(--u)*4.5)/1 Pix,monospace;color:#c4bccf;text-shadow:var(--u) var(--u) 0 #0b0712}
#login .lobby-title{position:absolute;left:50%;top:calc(var(--u)*10);transform:translateX(-50%);text-align:center;z-index:5;pointer-events:none;white-space:nowrap}
#login .lobby-title small{display:block;font:calc(var(--u)*4.5)/1 Pix,monospace;letter-spacing:calc(var(--u)*0.8);color:#d69a34}
#login .lobby-title b{display:block;margin-top:calc(var(--u)*2);font:calc(var(--u)*10)/1 Pix,monospace;color:#f7d77a;text-shadow:var(--u) var(--u) 0 #7a4a12,calc(var(--u)*2) calc(var(--u)*2) 0 #0b0712}
#login .lobby-sound{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*10);z-index:6;height:calc(var(--u)*12);padding:0 calc(var(--u)*4)!important;
  font:calc(var(--u)*4.5) Pix,monospace!important;color:#c4bccf!important;background:#1a1226cc!important;border:calc(var(--u)*0.6) solid #3d2c56!important;border-radius:0!important;box-shadow:none!important;cursor:pointer}
#login .lobby-sound:hover{color:#f7d77a!important;border-color:#d69a34!important}
#login .lobby-err{position:absolute;left:50%;bottom:calc(var(--u)*2);transform:translateX(-50%);z-index:8;font:calc(var(--u)*5) Pix,monospace;color:#ff6b6b;text-shadow:var(--u) var(--u) 0 #0b0712;white-space:nowrap}

/* ---------- molduras pixel (9-slice) ---------- */
#login .lobby-tablet,#login .lobby-forge,#login .sel-bar .sel-enter,#login .lobby-confirm input{image-rendering:pixelated}
#login .lobby-tablet{border:calc(var(--u)*5) solid transparent;border-image:url(/client/assets/ui/login/moldura2.png) 16 / calc(var(--u)*5) stretch;background:#1a1226ee padding-box}
#login .lobby-forge{border:calc(var(--u)*5) solid transparent;border-image:url(/client/assets/ui/login/moldura.png) 16 / calc(var(--u)*5) stretch;background:#1a1226e6 padding-box}

/* ---------- modos ---------- */
#login.mode-select .lobby-create,#login.mode-create .lobby-select{display:none}
#login .lobby-select,#login .lobby-create{position:absolute;inset:0;z-index:3}

/* ================= CRIAÇÃO ================= */
#login .lobby-create .lobby-title{top:calc(var(--u)*10)}
#login.mode-create .lobby-logo b{font-size:calc(var(--u)*12)}
/* Development classes remain available to preview; only creation is locked. */
#login .medal .class-lock{position:absolute;right:4px;top:2px;font:14px/1 sans-serif;pointer-events:none}
#login .medal .class-lock[hidden]{display:none}
#login .medal.class-locked .medal-ring img{filter:grayscale(.85);opacity:.55}
#login .class-development{color:#e3ca84}
#login .sel-enter:disabled{opacity:.65;cursor:not-allowed}
/* medalhões das classes (esquerda) */
#login .lobby-classes{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*46);width:calc(var(--u)*96)}
#login #classes{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
#login .lobby-classes{max-height:calc(var(--u)*154);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
#login .lobby-classes .medal{flex-shrink:0}
#login .lobby-classes{max-height:calc(var(--u)*154);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding:2px}
#login .lobby-classes .medal{flex-shrink:0}
#login .medal{all:unset;position:relative;display:flex;align-items:center;gap:calc(var(--u)*4);height:calc(var(--u)*28);padding-right:calc(var(--u)*4);cursor:pointer;
  background:none}
#login .medal:hover .medal-ring{filter:brightness(1.25) drop-shadow(0 0 calc(var(--u)*3) #f7d77a66)}
#login .medal-name{flex:1;padding:calc(var(--u)*2.5) calc(var(--u)*4);background:#1a1226e0;box-shadow:inset 0 0 0 calc(var(--u)*0.6) #3d2c56,0 0 0 calc(var(--u)*0.6) #0b0712}
#login .medal.sel .medal-name{background:#2e1f12f0;box-shadow:inset 0 0 0 calc(var(--u)*0.6) #d69a34,0 0 0 calc(var(--u)*0.6) #0b0712}
#login .medal-ring{flex:none;display:grid;place-items:center;width:calc(var(--u)*28);height:calc(var(--u)*28);
  background:url(/client/assets/ui/login/medalhao.png) 0 0/calc(var(--u)*56) calc(var(--u)*28) no-repeat;image-rendering:pixelated}
#login .medal-ring img{width:calc(var(--u)*16);height:calc(var(--u)*16);image-rendering:pixelated;filter:drop-shadow(var(--u) var(--u) 0 #0b0712);opacity:.75}
#login .medal-name b{display:block;font:calc(var(--u)*7)/1 Pix,monospace;color:#c4bccf;text-shadow:var(--u) var(--u) 0 #0b0712}
#login .medal-name small{display:block;margin-top:calc(var(--u)*1.2);font:calc(var(--u)*4.2)/1 Pix,monospace;color:#7c62a3;letter-spacing:calc(var(--u)*0.3)}
#login .medal kbd{position:absolute;left:calc(var(--u)*-1);bottom:calc(var(--u)*-1);font:calc(var(--u)*4)/1 Pix,monospace;color:#7c62a3;border:calc(var(--u)*0.6) solid #3d2c56;padding:calc(var(--u)*0.8) calc(var(--u)*1.4);background:#0b0712}
#login .medal.sel .medal-ring{background-position:calc(var(--u)*-28) 0;filter:drop-shadow(0 0 calc(var(--u)*4) #f7d77a99)}
#login .medal.sel .medal-ring img{opacity:1;animation:medalBob 1.2s ease-in-out infinite}
#login .medal.sel .medal-name b{color:#f7d77a}
#login .medal.sel .medal-name small{color:#d69a34}
#login .medal.sel::before{content:"";position:absolute;left:calc(var(--u)*-7);top:50%;transform:translateY(-50%);border:calc(var(--u)*3) solid transparent;border-left-color:#f7d77a}
@keyframes medalBob{50%{transform:translateY(calc(var(--u)*-1))}}
/* 6 classes (Claude, 21/10 — pistoleiro): medalhões um pouco menores para caber a coluna inteira acima do painel de pele/cabelo */
#login #classes:has(.medal:nth-child(6)){gap:calc(var(--u)*2.2)}
#login #classes:has(.medal:nth-child(6)) .medal{height:calc(var(--u)*24)}
#login #classes:has(.medal:nth-child(6)) .medal-ring{width:calc(var(--u)*24);height:calc(var(--u)*24);background-size:calc(var(--u)*48) calc(var(--u)*24)}
#login #classes:has(.medal:nth-child(6)) .medal.sel .medal-ring{background-position:calc(var(--u)*-24) 0}
#login #classes:has(.medal:nth-child(6)) .medal-ring img{width:calc(var(--u)*14);height:calc(var(--u)*14)}
#login #classes:has(.medal:nth-child(6)) .medal-name{padding:calc(var(--u)*2) calc(var(--u)*4)}
/* 7 classes (Claude, 22/10 — sniper): mais um aperto */
#login #classes:has(.medal:nth-child(7)){gap:calc(var(--u)*1.4)}
#login #classes:has(.medal:nth-child(7)) .medal{height:calc(var(--u)*21)}
#login #classes:has(.medal:nth-child(7)) .medal-ring{width:calc(var(--u)*21);height:calc(var(--u)*21);background-size:calc(var(--u)*42) calc(var(--u)*21)}
#login #classes:has(.medal:nth-child(7)) .medal.sel .medal-ring{background-position:calc(var(--u)*-21) 0}
#login #classes:has(.medal:nth-child(7)) .medal-ring img{width:calc(var(--u)*13);height:calc(var(--u)*13)}
/* 8 classes (Claude, 23/10 — mecanauta): mais um aperto */
#login #classes:has(.medal:nth-child(8)){gap:calc(var(--u)*0.8)}
#login #classes:has(.medal:nth-child(8)) .medal{height:calc(var(--u)*19)}
#login #classes:has(.medal:nth-child(8)) .medal-ring{width:calc(var(--u)*19);height:calc(var(--u)*19);background-size:calc(var(--u)*38) calc(var(--u)*19)}
#login #classes:has(.medal:nth-child(8)) .medal.sel .medal-ring{background-position:calc(var(--u)*-19) 0}
#login #classes:has(.medal:nth-child(8)) .medal-ring img{width:calc(var(--u)*12);height:calc(var(--u)*12)}
#login #classes:has(.medal:nth-child(8)) .medal-name{padding:calc(var(--u)*1.5) calc(var(--u)*4)}

/* herói no altar (centro) */
#login .lobby-hero{position:absolute;left:calc(var(--u)*240);top:calc(var(--u)*216);width:0;height:0}
#login .lobby-hero #creation-preview{position:absolute;left:calc(var(--u)*-42);top:calc(var(--u)*-95);width:calc(var(--u)*84);height:calc(var(--u)*98);max-width:none;image-rendering:pixelated;z-index:3;
  filter:drop-shadow(0 calc(var(--u)*2) 0 #0b0712aa)}
#login .hero-beam{position:absolute;left:calc(var(--u)*-34);top:calc(var(--u)*-190);width:calc(var(--u)*68);height:calc(var(--u)*192);z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cls-glow,#f7d77a) 30%,#fff3c0 50%,var(--cls-glow,#f7d77a) 70%,transparent);opacity:.13;
  -webkit-mask:linear-gradient(transparent,#000 40%,#000);mask:linear-gradient(transparent,#000 40%,#000);animation:beamPulse 2.6s ease-in-out infinite}
#login .hero-runes{position:absolute;left:calc(var(--u)*-46);top:calc(var(--u)*-9);width:calc(var(--u)*92);height:calc(var(--u)*18);z-index:2;border-radius:50%;pointer-events:none;
  border:calc(var(--u)*1) dashed var(--cls-glow,#f7d77a);box-shadow:0 0 calc(var(--u)*6) var(--cls-glow,#f7d77a),inset 0 0 calc(var(--u)*8) var(--cls-glow,#f7d77a);opacity:.55;animation:runeSpin 9s linear infinite}
#login .hero-runes::after{content:"";position:absolute;inset:calc(var(--u)*3) calc(var(--u)*12);border-radius:50%;border:calc(var(--u)*0.6) solid var(--cls-glow,#f7d77a);opacity:.7}
@keyframes beamPulse{50%{opacity:.22}}
@keyframes runeSpin{to{border-color:var(--cls-glow,#f7d77a) transparent;filter:hue-rotate(20deg)}}
#login .hero-plate{display:none;position:absolute;left:0;top:calc(var(--u)*6);transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:4}
#login .hero-plate b{display:block;font:calc(var(--u)*9)/1 Pix,monospace;color:#f7d77a;text-shadow:var(--u) var(--u) 0 #7a4a12,calc(var(--u)*1.6) calc(var(--u)*1.6) 0 #0b0712}
#login .hero-plate small{display:block;margin-top:calc(var(--u)*1.5);font:calc(var(--u)*4.6)/1 Pix,monospace;color:#c4bccf;text-shadow:var(--u) var(--u) 0 #0b0712}
#login[data-cls=guerreiro]{--cls-glow:#ff9a5a}#login[data-cls=mago]{--cls-glow:#b98cff}#login[data-cls=arqueira]{--cls-glow:#9be37a}
#login[data-cls=sacerdote]{--cls-glow:#f7d77a}#login[data-cls=assassino]{--cls-glow:#ff5d6e}#login[data-cls=pistoleiro]{--cls-glow:#ffb04a}#login[data-cls=sniper]{--cls-glow:#c4dc6a}#login[data-cls=mecanauta]{--cls-glow:#7cf6ff}

/* tábua da classe (direita) */
#login .lobby-tablet{position:absolute;left:calc(var(--u)*322);top:calc(var(--u)*88);width:calc(var(--u)*146);max-height:calc(var(--u)*172);overflow:visible;padding:calc(var(--u)*3) calc(var(--u)*4);scrollbar-width:none}
#login .lobby-tablet::-webkit-scrollbar{display:none}
#login .tab-head small{display:block;font:calc(var(--u)*4.2)/1 Pix,monospace;color:var(--cls-glow,#d69a34);letter-spacing:calc(var(--u)*0.6)}
#login .tab-head h2{margin:calc(var(--u)*1.5) 0 calc(var(--u)*1);font:calc(var(--u)*12)/1 Pix,monospace;color:#f7d77a;text-shadow:var(--u) var(--u) 0 #7a4a12,calc(var(--u)*1.6) calc(var(--u)*1.6) 0 #0b0712}
#login .tab-head span{display:block;font:calc(var(--u)*4.4)/1.2 Pix,monospace;color:#a99bb6}
#login .tab-desc{margin:calc(var(--u)*3) 0;font:calc(var(--u)*4.8)/1.35 Pix,monospace;color:#e3dcef}
#login .tab-stats{display:flex;flex-direction:column;gap:calc(var(--u)*1.6);padding:calc(var(--u)*2.5) 0;border-top:calc(var(--u)*0.6) solid #3d2c56;border-bottom:calc(var(--u)*0.6) solid #3d2c56}
#login .tab-bar,#login .tab-pips{display:grid;grid-template-columns:calc(var(--u)*30) 1fr calc(var(--u)*12);align-items:center;gap:calc(var(--u)*2);font:calc(var(--u)*4)/1 Pix,monospace;color:#c4bccf}
#login .tab-pips{grid-template-columns:calc(var(--u)*30) 1fr}
#login .tab-bar i{display:block;height:calc(var(--u)*4);background:#0b0712;border:calc(var(--u)*0.6) solid #0b0712;box-shadow:0 0 0 calc(var(--u)*0.6) #3d2c56}
#login .tab-bar em{display:block;height:100%;transition:width .35s}
#login .tab-bar.hp em{background:linear-gradient(#ff6b6b,#a8162f)}#login .tab-bar.mp em{background:linear-gradient(#8cecff,#2f6fb5)}
#login .tab-bar b{font-weight:normal;color:#efe6d6;text-align:right}
#login .tab-pips i{display:flex;gap:calc(var(--u)*1.2)}
#login .tab-pips em{width:calc(var(--u)*5);height:calc(var(--u)*4);background:#0b0712;box-shadow:0 0 0 calc(var(--u)*0.6) #3d2c56}
#login .tab-pips em.on{background:var(--cls-glow,#f7d77a);box-shadow:0 0 0 calc(var(--u)*0.6) #0b0712}
#login .tab-skills-title{margin:calc(var(--u)*3) 0 calc(var(--u)*2);font:calc(var(--u)*4.2)/1 Pix,monospace;color:#d69a34;letter-spacing:calc(var(--u)*0.6)}
#login .tab-skills{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2)}
#login .tab-skill{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.5);text-align:center;cursor:help}
#login .tab-skill:hover .tab-slot{box-shadow:inset 0 0 0 calc(var(--u)*0.6) #f7d77a,0 0 calc(var(--u)*4) #f7d77a88}
#login .tab-slot{position:relative;display:grid;place-items:center;width:calc(var(--u)*16);height:calc(var(--u)*16);background:#0b0712;box-shadow:inset 0 0 0 calc(var(--u)*0.6) #3d2c56,0 0 0 calc(var(--u)*0.6) #d69a3466}
#login .tab-slot img{width:calc(var(--u)*12);height:calc(var(--u)*12);image-rendering:pixelated}
#login .tab-slot kbd{position:absolute;right:calc(var(--u)*-1);bottom:calc(var(--u)*-1);font:calc(var(--u)*3.4)/1 Pix,monospace;color:#f7d77a;background:#0b0712;padding:0 calc(var(--u)*0.6)}
#login .tab-skill b{display:block;font:calc(var(--u)*3.8)/1.15 Pix,monospace;color:#efe6d6}
#login .tab-skill small{display:none;position:absolute;left:50%;top:calc(100% + var(--u)*2);transform:translateX(-50%);width:calc(var(--u)*70);z-index:9;padding:calc(var(--u)*2.5) calc(var(--u)*3);
  font:calc(var(--u)*4.2)/1.3 Pix,monospace;color:#efe6d6;background:#0b0712f2;box-shadow:inset 0 0 0 calc(var(--u)*0.6) #d69a34;pointer-events:none}
#login .tab-skill:hover small{display:block}

/* aparência (embaixo à esquerda) */
#login .lobby-forge{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*204);width:calc(var(--u)*112);padding:calc(var(--u)*1) calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*2)}
#login .forge-row{display:flex;align-items:center;gap:calc(var(--u)*3)}
#login .forge-row>span{width:calc(var(--u)*20);font:calc(var(--u)*4)/1 Pix,monospace;color:#d69a34}
#login .forge-row>div{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2)}
#login .lobby-forge .skin-swatch,#login .lobby-forge .hair{all:unset;width:calc(var(--u)*9);height:calc(var(--u)*9);cursor:pointer;image-rendering:pixelated;
  box-shadow:inset 0 0 0 calc(var(--u)*0.8) #0b0712,inset calc(var(--u)*1.6) calc(var(--u)*1.6) 0 #ffffff33,0 0 0 calc(var(--u)*0.6) #3d2c56}
#login .lobby-forge .skin-swatch{background:linear-gradient(135deg,var(--skin-light) 55%,var(--skin-shadow) 55%)}
#login .lobby-forge .hair{background:var(--hair)}
#login .lobby-forge .skin-swatch:hover,#login .lobby-forge .hair:hover{transform:translateY(calc(var(--u)*-1))}
#login .lobby-forge .sel{box-shadow:inset 0 0 0 calc(var(--u)*0.8) #0b0712,0 0 0 calc(var(--u)*1) #f7d77a,0 0 calc(var(--u)*4) #f7d77a!important}

/* nome + botão (embaixo à direita) */
#login .lobby-confirm{position:absolute;left:calc(var(--u)*180);top:calc(var(--u)*224);width:calc(var(--u)*120);display:flex;flex-direction:column;gap:calc(var(--u)*3);z-index:6}
#login .lobby-confirm label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#login .lobby-confirm input{all:unset;box-sizing:border-box;height:calc(var(--u)*14);padding:0 calc(var(--u)*4);font:calc(var(--u)*7)/1 Pix,monospace;color:#f7d77a;text-align:center;
  border:calc(var(--u)*3) solid transparent;border-image:url(/client/assets/ui/login/placa.png) 8 fill / calc(var(--u)*3) stretch}
#login .lobby-confirm input::placeholder{color:#7c62a3}
#login .lobby-confirm input:focus{filter:drop-shadow(0 0 calc(var(--u)*3) #f7d77a88)}
#login #btnplay,#login .sel-enter{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(var(--u)*17);cursor:pointer;text-align:center;
  font:calc(var(--u)*7)/1 Pix,monospace;color:#fff3e6;text-shadow:var(--u) var(--u) 0 #4a0a16;background:linear-gradient(#ff6b6b 0 18%,#e0283f 18% 62%,#a8162f 62%);
  box-shadow:0 0 0 calc(var(--u)*0.8) #0b0712,0 0 0 calc(var(--u)*1.6) #d69a34,0 0 0 calc(var(--u)*2.4) #0b0712,0 calc(var(--u)*3) 0 calc(var(--u)*2.4) #0b0712aa;transition:filter .1s,transform .1s}
#login #btnplay:hover,#login .sel-enter:hover{filter:brightness(1.15);box-shadow:0 0 0 calc(var(--u)*0.8) #0b0712,0 0 0 calc(var(--u)*1.6) #f7d77a,0 0 0 calc(var(--u)*2.4) #0b0712,0 0 calc(var(--u)*10) #e0283f88}
#login #btnplay:active,#login .sel-enter:active{transform:translateY(calc(var(--u)*1))}
#login #btnplay:disabled{filter:grayscale(.8) brightness(.6);cursor:not-allowed}
#login .sel-enter small{display:block;margin-top:calc(var(--u)*1.2);font:calc(var(--u)*4.2)/1 Pix,monospace;color:#ffd7d7}
#login .lobby-link{all:unset;cursor:pointer;font:calc(var(--u)*4.2)/1 Pix,monospace;color:#a99bb6;text-shadow:var(--u) var(--u) 0 #0b0712;text-align:center;padding:calc(var(--u)*1.5)}
#login .lobby-link:hover{color:#f7d77a}#login .lobby-link.danger:hover{color:#ff6b6b}
#login .lobby-link.hidden{display:none}
#login #lobby-back{position:absolute;left:calc(var(--u)*-160);top:calc(var(--u)*-212)}   /* fica no topo, embaixo do logo */

/* ================= SELEÇÃO ================= */
#login #character-slots{position:absolute;inset:0}
#login .sel-fire{position:absolute;left:calc(var(--u)*240);top:calc(var(--u)*238);width:0;height:0;z-index:4;pointer-events:none}
#login .sel-fire .fire{position:absolute;left:calc(var(--u)*-24);top:calc(var(--u)*-60);width:calc(var(--u)*48);height:calc(var(--u)*60);
  background:url(/client/assets/ui/login/fogueira.png) 0 0/calc(var(--u)*288) calc(var(--u)*60) no-repeat;image-rendering:pixelated;animation:fireAnim .6s steps(6) infinite}
@keyframes fireAnim{to{background-position:calc(var(--u)*-288) 0}}
#login .sel-fire .fire-glow{position:absolute;left:calc(var(--u)*-110);top:calc(var(--u)*-90);width:calc(var(--u)*220);height:calc(var(--u)*120);border-radius:50%;
  background:radial-gradient(ellipse at 50% 70%,#ffb34766,#e0283f22 45%,transparent 70%);mix-blend-mode:screen;animation:fireGlow 1.4s ease-in-out infinite}
@keyframes fireGlow{50%{opacity:.75;transform:scale(1.04)}}
#login .sel-heroes{position:absolute;inset:0}
#login .sel-hero{all:unset;position:absolute;width:calc(var(--u)*56);height:calc(var(--u)*80);cursor:pointer;transform:translate(-50%,-100%);transition:filter .2s}
#login .sel-hero.pos-0{left:calc(var(--u)*172);top:calc(var(--u)*232)}
#login .sel-hero.pos-1{left:calc(var(--u)*240);top:calc(var(--u)*200)}
#login .sel-hero.pos-2{left:calc(var(--u)*308);top:calc(var(--u)*232)}
#login .sel-hero canvas{position:absolute;left:calc(var(--u)*4);bottom:0;width:calc(var(--u)*48);height:calc(var(--u)*56);image-rendering:pixelated;z-index:2;filter:brightness(.55) saturate(.7);transition:filter .2s,transform .2s}
#login .sel-hero:hover canvas{filter:brightness(.85)}
#login .sel-hero.on canvas{filter:brightness(1.05) drop-shadow(0 0 calc(var(--u)*3) var(--cls-glow,#f7d77a));transform:scale(1.12);transform-origin:50% 100%}
#login .sel-spot{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*-4);width:calc(var(--u)*52);height:calc(var(--u)*10);border-radius:50%;background:radial-gradient(#0b0712aa,transparent 70%);z-index:1}
#login .sel-hero.on .sel-spot{background:radial-gradient(#f7d77a88,#f7d77a22 50%,transparent 70%);box-shadow:0 0 calc(var(--u)*8) #f7d77a55}
#login .sel-hero.on::before{content:"";position:absolute;left:calc(var(--u)*6);bottom:0;width:calc(var(--u)*44);height:calc(var(--u)*90);z-index:0;pointer-events:none;
  background:linear-gradient(transparent,#fff3c033);-webkit-mask:linear-gradient(transparent,#000 50%);mask:linear-gradient(transparent,#000 50%)}
#login .sel-plate{position:absolute;left:50%;bottom:calc(var(--u)*62);transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:3;pointer-events:none}
#login .sel-plate b{display:block;font:calc(var(--u)*6)/1 Pix,monospace;color:#c4bccf;text-shadow:var(--u) var(--u) 0 #0b0712}
#login .sel-plate small{display:block;margin-top:calc(var(--u)*1.2);font:calc(var(--u)*3.8)/1 Pix,monospace;color:#7c62a3;text-shadow:var(--u) var(--u) 0 #0b0712}
#login .sel-hero.on .sel-plate b{color:#f7d77a;font-size:calc(var(--u)*7)}
#login .sel-hero.on .sel-plate small{color:#efe6d6}
#login .sel-hero kbd{display:none;position:absolute;left:calc(var(--u)*-2);bottom:calc(var(--u)*2);font:calc(var(--u)*3.6)/1 Pix,monospace;color:#7c62a3;z-index:3}
#login .sel-hero.empty .sel-ghost{position:absolute;left:calc(var(--u)*8);bottom:calc(var(--u)*-3);width:calc(var(--u)*40);height:calc(var(--u)*10);z-index:1;border-radius:50%;
  border:calc(var(--u)*1) dashed #b98cff;background:radial-gradient(#b98cff33,transparent 70%);box-shadow:0 0 calc(var(--u)*5) #b98cff66,inset 0 0 calc(var(--u)*5) #b98cff55;opacity:.85;animation:ghost 2.4s ease-in-out infinite}
#login .sel-hero.empty .sel-ghost::after{content:"+";position:absolute;left:50%;bottom:calc(var(--u)*5);transform:translateX(-50%);font:calc(var(--u)*14)/1 Pix,monospace;color:#b98cff;text-shadow:var(--u) var(--u) 0 #0b0712;opacity:.9}
#login .sel-hero.empty:hover .sel-ghost{opacity:1;border-color:#f7d77a}#login .sel-hero.empty:hover .sel-ghost::after{color:#f7d77a}
#login .sel-hero.empty .sel-plate{bottom:calc(var(--u)*28)}
#login .sel-hero.empty .sel-plate b{color:#a99bb6;font-size:calc(var(--u)*4.6)}
#login .sel-hero.empty .sel-plate small{display:none}
@keyframes ghost{50%{opacity:.5}}
#login .sel-bar{position:absolute;left:50%;top:calc(var(--u)*247);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*5);z-index:5;white-space:nowrap;padding:calc(var(--u)*1) calc(var(--u)*4);border:calc(var(--u)*4) solid transparent;border-image:url(/client/assets/ui/login/moldura.png) 16 / calc(var(--u)*4) stretch;background:#1a1226e6 padding-box}
#login .sel-enter{width:calc(var(--u)*100);height:calc(var(--u)*15)!important}
#login .lobby-select .lobby-title{top:calc(var(--u)*10)}

/* celular em pé: pede para virar (a cena é deitada) */
@media (orientation:portrait) and (max-width:820px){
  #login::after{display:grid!important;content:"↻  Vire o celular para criar seu herói";place-items:center;position:absolute;inset:auto 0 12px;z-index:9;font:14px Pix,monospace;color:#f7d77a;text-shadow:2px 2px 0 #0b0712;animation:none;opacity:1;background:none;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){#login .lobby-fog,#login .hero-beam,#login .hero-runes,#login .sel-fire .fire-glow,#login .sel-hero.empty .sel-ghost,#login .medal.sel .medal-ring img{animation:none}}

#login .lobby-forge .sel::after,#login .lobby-forge .sel::before{display:none!important}

/* telas pequenas (u < 2,2px): menos texto, nada ilegível */
#login[data-tiny="1"] .tab-desc,#login[data-tiny="1"] .tab-head span,#login[data-tiny="1"] .lobby-logo small,#login[data-tiny="1"] .tab-skill b{display:none}
#login[data-tiny="1"] .tab-skills-title{margin-top:calc(var(--u)*4)}

/* Acesso à conta: mesma cena, tipografia e moldura da criação de heróis. */
#login:not(.mode-auth) .lobby-auth,#login.mode-auth :is(.lobby-create,.lobby-select,#account-logout){display:none}
#login .lobby-auth{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:#0b071238}
#login .account-tablet{width:calc(var(--u)*158);max-height:calc(var(--u)*240);overflow-y:auto;padding:calc(var(--u)*6) calc(var(--u)*9);display:flex;flex-direction:column;gap:calc(var(--u)*2.5);border:calc(var(--u)*5) solid transparent;border-image:url(/client/assets/ui/login/moldura2.png) 16 / calc(var(--u)*5) stretch;background:#1a1226f5 padding-box;box-shadow:0 calc(var(--u)*4) calc(var(--u)*16) #0009}
#login .account-kicker{color:#d69a34;text-align:center;font:calc(var(--u)*4)/1.2 Pix,monospace;letter-spacing:calc(var(--u)*.5)}
#login .account-tablet h1{margin:0;text-align:center;font:calc(var(--u)*10)/1.1 Pix,monospace;color:#f7d77a;text-shadow:var(--u) var(--u) #523316}
#login .account-tablet p{margin:0;color:#c4bccf;font:calc(var(--u)*4.5)/1.3 Txt,sans-serif;text-align:center}
#login .account-tabs{display:flex;gap:calc(var(--u)*3);margin:calc(var(--u)*3) 0}
#login .account-tabs button{flex:1;padding:calc(var(--u)*3) calc(var(--u)*2);border:var(--u) solid #594268;background:#100b18;color:#c4bccf;font:calc(var(--u)*5) Pix,monospace;cursor:pointer}
#login .account-tabs button[aria-pressed="true"]{color:#f7d77a;border-color:#d69a34;background:#3d291e;box-shadow:inset 0 0 0 var(--u) #160f16}
#login .account-tablet label{display:block;color:#d9bf92;font:calc(var(--u)*4.5)/1.2 Pix,monospace}
#login .account-tablet input{display:block;width:100%;height:calc(var(--u)*15);margin:calc(var(--u)*1) 0;padding:calc(var(--u)*3);border:calc(var(--u)*.7) solid #795b80;background:#0b0712;color:#f2e7dc;font:calc(var(--u)*5) Txt,sans-serif;outline:none;box-shadow:inset 0 var(--u) #0008}
#login .account-tablet input:focus{border-color:#f7d77a;box-shadow:0 0 0 calc(var(--u)*.5) #d69a3488}
#login #account-submit{min-height:calc(var(--u)*17);margin-top:calc(var(--u)*2);border:var(--u) solid #e6b96a;background:linear-gradient(#694624,#372219);box-shadow:inset 0 0 0 var(--u) #1a1020,0 var(--u) #08050d;color:#ffe9aa;font:calc(var(--u)*6) Pix,monospace;cursor:pointer}
#login #account-submit:hover:not(:disabled){filter:brightness(1.2)}
#login #account-submit:disabled{opacity:.55;cursor:wait}
#login #account-hint{color:#a99ab7;text-align:center;font:calc(var(--u)*4)/1.3 Txt,sans-serif}
#login #account-error{color:#ff9b9b;min-height:calc(var(--u)*5);font:calc(var(--u)*4.5)/1.2 Txt,sans-serif}
#login #account-logout{position:absolute;right:calc(var(--u)*12);bottom:calc(var(--u)*10);z-index:7}
#login .account-tablet [hidden]{display:none}

/* ---------- céu vivo (client/src/lobby-sky.js) e evoluções da classe na criação (Claude, 21/10) ---------- */
#login .lobby-sky{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;image-rendering:pixelated}
#login .tab-evos{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:calc(var(--u)*1.5)}
#login .tab-or{align-self:center;font:calc(var(--u)*3.8)/1 Pix,monospace;color:#8e7fa6}
#login .tab-evo{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*1);padding:calc(var(--u)*2) calc(var(--u)*2.5);cursor:help;outline:none;
  background:linear-gradient(color-mix(in srgb,var(--evo) 16%,#0b0712),#0b0712);box-shadow:inset 0 0 0 calc(var(--u)*0.6) color-mix(in srgb,var(--evo) 55%,#3d2c56)}
#login .tab-evo:hover,#login .tab-evo:focus-visible{box-shadow:inset 0 0 0 calc(var(--u)*0.6) var(--evo),0 0 calc(var(--u)*5) color-mix(in srgb,var(--evo) 55%,transparent)}
#login .tab-evo>b{font:calc(var(--u)*5)/1 Pix,monospace;color:var(--evo);text-shadow:calc(var(--u)*0.6) calc(var(--u)*0.6) 0 #0b0712}
#login .tab-evo>span{font:calc(var(--u)*3.6)/1.1 Pix,monospace;color:#a99bb6}
#login .tab-evo>i{display:flex;gap:calc(var(--u)*1.5);margin-top:calc(var(--u)*0.5)}
#login .tab-evo>i img{width:calc(var(--u)*10);height:calc(var(--u)*10);image-rendering:pixelated;background:#0b0712;box-shadow:inset 0 0 0 calc(var(--u)*0.5) color-mix(in srgb,var(--evo) 45%,#3d2c56)}
/* detalhe ao passar o mouse: abre para cima (o painel fica perto do chão) */
#login .tab-evo small{display:none;position:absolute;right:0;bottom:calc(100% + var(--u)*2);width:calc(var(--u)*120);z-index:9;padding:calc(var(--u)*3);
  font:calc(var(--u)*4)/1.3 Pix,monospace;color:#efe6d6;background:#0b0712f4;box-shadow:inset 0 0 0 calc(var(--u)*0.6) var(--evo);pointer-events:none}
#login .tab-evo:first-child small{left:0;right:auto}
#login .tab-evo small strong{display:block;margin-bottom:calc(var(--u)*1.5);font:calc(var(--u)*5)/1 Pix,monospace;color:var(--evo)}
#login .tab-evo small em{display:block;margin-top:calc(var(--u)*2);font-style:normal;color:#c4bccf}
#login .tab-evo small kbd{font:inherit;color:var(--evo);margin-right:calc(var(--u)*1)}
#login .tab-evo:hover small,#login .tab-evo:focus-visible small{display:block}
#login[data-tiny="1"] .tab-evo>span{display:none}