/* ===================================================================== ui/style.css — Todo o visual do jogo. Tema: fundo escuro + amarelo DBZ (--y) + fonte Chakra Petch (--font). Trocar a cara do jogo = mexer só aqui. ===================================================================== */ /* ---------- base ---------- */ :root{ color-scheme:dark; --y:#FDB71A; --font:"Chakra Petch",system-ui,"Segoe UI",Roboto,sans-serif; } *{ box-sizing:border-box; } html,body{ height:100%; margin:0; overflow:hidden; background:#0b0d12; color:#e7e9ee; font:14px/1.4 var(--font); } button,input,select,textarea{ font-family:var(--font); } #stage{ position:fixed; inset:0; width:100vw; height:100vh; display:block; image-rendering:pixelated; z-index:0; } .hint{ font-size:11px; color:#6b7385; } /* ---------- BARRA DE NAVEGAÇÃO ---------- Três zonas com pesos diferentes: quem você é à esquerda, para onde ir no centro, ferramentas à direita. Antes eram nove botões idênticos, e "Admin" tinha o mesmo tamanho que "Hunts" — a barra não dizia nada sobre o que importa. Os azulejos têm o ícone em cima e o rótulo embaixo. Isso dobra a área clicável sem ocupar mais largura, e deixa a arte dos ícones respirar — que é o ponto de ter arte em vez de emoji. */ #menubar{ position:fixed; top:0; left:0; right:0; z-index:6; display:flex; gap:10px; align-items:stretch; padding:0 12px; min-height:58px; background:linear-gradient(180deg,rgba(14,17,24,.97),rgba(14,17,24,.82)); backdrop-filter:blur(6px); border-bottom:1px solid rgba(253,183,26,.22); box-shadow:0 2px 14px rgba(0,0,0,.5); } .nbZone{ display:flex; align-items:center; gap:7px; min-width:0; } .nbLeft{ flex:0 0 auto; } .nbNav{ flex:1 1 auto; justify-content:center; gap:3px; overflow-x:auto; scrollbar-width:none; } .nbNav::-webkit-scrollbar{ display:none; } .nbRight{ flex:0 0 auto; } /* --- identidade --- */ #menubar .logo{ display:flex; align-items:center; gap:5px; font-weight:800; letter-spacing:.5px; padding-right:4px; } #menubar .logo b{ background:var(--y); color:#15110a; border-radius:7px; padding:3px 7px; font-size:14px; box-shadow:0 0 12px rgba(253,183,26,.45); } #menubar .logo i{ font-style:normal; color:var(--y); font-size:13px; opacity:.9; } .nbWho{ display:flex; flex-direction:column; line-height:1.15; padding-left:6px; border-left:1px solid #242a36; margin-left:4px; } .nbName{ font-size:12.5px; font-weight:700; color:#e7e9ee; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nbLvl{ font-size:10px; color:#8b93a5; letter-spacing:.4px; } .nbGold{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--y); font-variant-numeric:tabular-nums; background:rgba(253,183,26,.07); border:1px solid rgba(253,183,26,.22); border-radius:8px; padding:4px 9px; } .nbGold i{ font-style:normal; opacity:.8; font-size:10px; } /* --- azulejos de navegação --- */ .nbTile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:66px; padding:6px 2px 7px; background:transparent; border:1px solid transparent; border-radius:10px; color:#aab2c0; cursor:pointer; font:inherit; transition:background .12s, color .12s, border-color .12s; } .nbTile .nbIco{ font-size:21px; line-height:1; height:26px; display:flex; align-items:center; } .nbTile .nbLbl{ font-size:9.5px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; } .nbTile:hover{ background:rgba(255,255,255,.05); color:#e7e9ee; border-color:#2a3240; } /* DUAS MARCAS, DUAS FORMAS. `on` (painel aberto) e `aqui` (onde o personagem está) podem valer ao mesmo tempo — você abre o painel de Hunts estando numa hunt. Se as duas usassem o mesmo destaque, ter dois estados não serviria de nada. on → traço amarelo embaixo, do tamanho do rótulo aqui → ponto verde piscando no canto, como um "ao vivo" */ .nbTile::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:2px; background:var(--y); transform:translateX(-50%); transition:width .16s; } .nbTile.on{ color:#fff; background:rgba(253,183,26,.08); border-color:rgba(253,183,26,.35); } .nbTile.on::after{ width:30px; } .nbTile.aqui{ color:#e7e9ee; } .nbTile.aqui::before{ content:""; position:absolute; top:5px; right:9px; width:6px; height:6px; border-radius:50%; background:#5fd08a; box-shadow:0 0 6px #5fd08a; animation:nbPulso 2s ease-in-out infinite; } .nbTile.aqui .nbIco{ filter:drop-shadow(0 0 7px rgba(95,208,138,.5)); } @keyframes nbPulso{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } } /* --- ferramentas (só ícone: são de desenvolvimento, não de jogo) --- */ .nbMini{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:15px; background:#0f1218; border:1px solid #20242f; border-radius:9px; color:#8b93a5; cursor:pointer; } .nbMini:hover{ background:#1b2029; color:#e7e9ee; border-color:#2f4a63; } @media (max-width:900px){ .nbWho, .nbGold{ display:none; } /* a HUD de baixo já mostra os dois */ .nbTile{ width:56px; } } /* ---------- ícones desenhados das telas (assets/huds/) ---------- SEM image-rendering:pixelated, ao contrário de todo o resto do jogo. Estas artes são grandes e suaves, não pixel art — forçar o pixelado nelas criaria serrilha onde deveria haver curva. O pixelado continua valendo para sprites do pack, que é onde ele existe por um motivo. object-fit:contain porque a arte não preenche o quadrado todo; sem ele, uma arte mais alta que larga seria esticada. */ .hudIco{ object-fit:contain; vertical-align:middle; flex:0 0 auto; /* Halo claro ANTES da sombra escura. Sem ele, arte de contorno preto — a cabeça do Goku é o caso — somia no fundo #0f1218 do botão: ficava uma mancha sem forma. O halo é o que devolve a silhueta. */ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); } /* um leve brilho no botão sob o cursor dá o retorno que o emoji dava de graça pelo contraste */ #menubar button:hover .hudIco{ filter:drop-shadow(0 0 6px rgba(253,183,26,.75)); } h2 .hudIco{ margin-right:2px; } /* ---------- HUD inferior (vida / ki / exp) ---------- */ /* A HUD não começa mais na borda esquerda: o chat mora lá embaixo, à esquerda, e os dois se encavalavam. --hudEsq é a largura que o chat reserva (12 de margem + 470 de janela + respiro); mudou o chat, muda este número e a HUD acompanha. Centralizada DENTRO do que sobra, não colada à direita: colada ela bateria nas janelas de equipamento/mochila, que nascem naquele canto. */ #bottomHud{ --hudEsq:496px; position:fixed; left:var(--hudEsq); right:10px; bottom:10px; z-index:5; /* flex-end e não stretch: cada caixa fica na altura do PRÓPRIO conteúdo e todas se alinham por baixo. Antes era stretch, então uma imagem de retrato alta esticava TODAS as caixas até a altura dela, deixando um vão vazio embaixo de cada uma. Agora o retrato pode ser alto e só ele sobe — as outras caixas não mexem. */ display:flex; gap:12px; align-items:flex-end; justify-content:center; } /* tela estreita: não há espaço para reservar nada, e o chat começa minimizado de qualquer jeito */ @media (max-width:1500px){ #bottomHud{ --hudEsq:10px; } } /* HUD 2.0: a arte de perfil JÁ TEM a própria moldura — então aqui não há borda, fundo nem sombra; é só a imagem, inteira (contain, sem cortar), um pouco maior. */ #portrait{ height:124px; width:auto; object-fit:contain; align-self:flex-end; background:none; border:0; box-shadow:none; border-radius:0; } /* HUD 2.0: a caixa de vida/Ki/EXP mais estreita — pedia menos largura */ #playerBox{ flex:0 0 auto; width:min(380px,42vw); min-width:300px; padding:8px 12px; border-radius:12px; background:linear-gradient(180deg,rgba(20,24,32,.92),rgba(11,13,18,.92)); border:1px solid #3a3320; box-shadow:0 0 0 1px rgba(253,183,26,.12), 0 6px 20px rgba(0,0,0,.5); } #playerBox .name{ font-weight:700; font-size:14px; margin-bottom:6px; text-align:center; } #playerBox .name span{ color:var(--y); font-weight:400; font-size:11px; } #playerBox .name #pName{ color:#ffe089; text-shadow:0 0 8px rgba(253,183,26,.4); } .statLine{ display:flex; align-items:center; gap:9px; margin:3px 0; } .statLine .statLbl{ width:34px; flex:0 0 34px; text-align:right; font-weight:700; font-size:10.5px; letter-spacing:.5px; } .statLine .statVal{ min-width:104px; flex:0 0 auto; white-space:nowrap; text-align:right; font-size:11px; font-weight:600; color:#e7e9ee; font-variant-numeric:tabular-nums; } .statLine.hp .statLbl{ color:#5fd08a } .statLine.ki .statLbl{ color:#7fb2ff } .statLine.xp .statLbl{ color:var(--y) } /* barras um pouco mais finas (HUD 2.0): 17 → 12px */ .sbar{ flex:1; height:12px; background:#1a1e27; border:1px solid #3a3f4d; border-radius:6px; overflow:hidden; position:relative; margin:0; box-shadow:inset 0 1px 3px rgba(0,0,0,.6); } .sbar>div{ height:100%; width:0%; box-shadow:0 0 8px rgba(255,255,255,.15) inset; } .sbar .lbl{ position:absolute; inset:0; text-align:center; font-size:9px; line-height:12px; font-weight:700; letter-spacing:.4px; color:#fff; text-shadow:0 1px 1px #000; } #barHp>div{ background:linear-gradient(90deg,#4fd07a,#2f9d55); } #barKi>div{ background:linear-gradient(90deg,#5aa0ff,#2f6bd6); box-shadow:0 0 10px rgba(90,160,255,.6) inset; } #barExp>div{ background:linear-gradient(90deg,var(--y),#e2a400); } /* Caixas rotuladas da HUD de baixo. O rótulo usa a mesma tipografia das linhas HP/KI/EXP para o jogador ler a HUD como um bloco só, e leva o botão de atalho da seção (auto-transformar, editar o Techset). */ .hudBox{ display:flex; flex-direction:column; gap:5px; background:rgba(11,13,18,.85); border:1px solid #2c3242; border-radius:12px; padding:7px 8px 8px; } #skillbar{ border-color:#3a3320; box-shadow:0 0 0 1px rgba(253,183,26,.12); } .hudLbl{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:10px; letter-spacing:.7px; color:#8b93a5; padding:0 2px; } .hudLbl span{ flex:1; } #skillbar .hudLbl span{ color:var(--y); } #spellBox .hudLbl span{ color:#7fb2ff; } .hudBtn{ background:#1a1e28; border:1px solid #333a4d; color:#8b93a5; border-radius:6px; padding:2px 7px; font-size:9.5px; font-weight:700; letter-spacing:.4px; cursor:pointer; font-family:var(--font); } .hudBtn:hover{ border-color:var(--y); color:var(--y); } /* barra de transformações (só sprites) */ #formBar{ display:flex; gap:5px; align-items:flex-end; } .fbBtn{ position:relative; width:48px; height:56px; padding:0; background:radial-gradient(circle at 50% 30%,#1b2230,#0b0d12); border:2px solid #2c3242; border-radius:9px; cursor:pointer; overflow:hidden; display:block; } .fbBtn canvas{ image-rendering:pixelated; display:block; margin:0 auto; } .fbBtn:hover{ border-color:#6b7385; filter:brightness(1.15); } .fbBtn.base{ border-color:#2f5a7a; } .fbBtn.cur{ border-color:var(--y); box-shadow:0 0 14px rgba(253,183,26,.5) inset, 0 0 10px rgba(253,183,26,.35); } .fbBtn.off{ opacity:.38; } /* sem Ki suficiente */ .fbBtn .ki{ position:absolute; left:0; right:0; bottom:0; height:3px; background:#5aa0ff; opacity:.85; } #autoTf.on{ border-color:#2f9d55; background:#14301f; color:#7ef0a8; } /* barra de técnicas (só ícones, com a recarga escurecendo por cima) */ #spellBar{ display:flex; gap:5px; align-items:flex-end; min-height:44px; } #spellBar:empty::after{ content:"no techs set"; font-size:10px; color:#4a5364; align-self:center; padding:0 6px; } .spBtn{ position:relative; width:44px; height:44px; border:2px solid #2c3242; border-radius:9px; cursor:default; background:radial-gradient(circle at 50% 35%,#1b2230,#0b0d12); display:flex; align-items:center; justify-content:center; font-size:19px; overflow:hidden; padding:0; color:#e7e9ee; } .spBtn.atk{ border-color:#3aa0ff } .spBtn.cura{ border-color:#38d66a } .spBtn.buff{ border-color:var(--y) } .spBtn.noki{ opacity:.35 } .spBtn .cdov{ position:absolute; left:0; right:0; bottom:0; background:rgba(4,6,10,.72); pointer-events:none; } .spBtn .lv{ position:absolute; top:1px; right:3px; font-size:9px; color:#6b7385; font-weight:700; } /* ---- segundos que faltam na recarga ---- z-index acima do véu: ele sobe de baixo para cima, e sem isto o número ficaria coberto justo no fim da recarga. O contorno escuro existe porque o número passa por cima de ícones de qualquer cor. */ .spBtn .cdnum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; font:700 15px/1 system-ui; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.3px; text-shadow:0 0 3px #000, 0 1px 2px #000, 0 0 7px rgba(0,0,0,.9); } /* O ícone apaga só um pouco enquanto a técnica não está pronta. Apagar mais deixava o número legível às custas de você não saber QUAL técnica está carregando — e com três ou quatro em recarga ao mesmo tempo, a barra virava uma fila de números sem identidade. */ .spBtn.emcd>:not(.cdnum):not(.cdov){ opacity:.75; } /* ---- HUD 2.0: selo de atalho nas skills + cura separada ---- O número (1,2,3…) marca a técnica no canto; o ♥ marca a cura, que fica do outro lado de um divisor para não se perder entre os ataques. */ .spSelo{ position:absolute; top:-2px; left:-2px; z-index:3; pointer-events:none; min-width:14px; height:14px; line-height:13px; text-align:center; padding:0 2px; font:700 10px/13px system-ui; color:#dfe4ec; background:rgba(8,10,14,.9); border:1px solid #3a3f4d; border-radius:5px; text-shadow:0 1px 1px #000; } .spSelo.heal{ left:auto; right:-2px; color:#5fd08a; border-color:#38d66a; } .spBtn.heal{ box-shadow:0 0 10px rgba(56,214,106,.22) inset; } .spSep{ width:2px; align-self:stretch; margin:2px 4px; border-radius:2px; background:linear-gradient(#2c3242,#1a1e27); flex:0 0 auto; } /* ---- HUD 2.0: bloco CURA (poções) na HUD de baixo ---- */ #curaBox .hudLbl span{ color:#5fd08a; } #curaBar{ display:flex; gap:6px; align-items:flex-end; min-height:44px; } #curaBar:empty::after{ content:"sem poção"; font-size:10px; color:#4a5364; align-self:center; padding:0 6px; } .curaSlot{ position:relative; width:44px; height:44px; border:2px solid #2c3242; border-radius:9px; cursor:pointer; background:radial-gradient(circle at 50% 35%,#1b2230,#0b0d12); display:flex; align-items:center; justify-content:center; overflow:hidden; } .curaSlot.hp{ border-color:#38d66a } .curaSlot.ki{ border-color:#3aa0ff } .curaSlot:hover{ filter:brightness(1.18); } .curaSlot canvas{ image-rendering:pixelated; } .curaSlot .curaVazio{ font-size:22px; font-weight:700; color:#49536a; line-height:1; } /* véu + número de recarga da poção, iguais aos das técnicas (ver .spBtn) */ .curaSlot{ overflow:hidden; } .curaSlot .cdov{ position:absolute; left:0; right:0; bottom:0; background:rgba(4,6,10,.72); pointer-events:none; } .curaSlot .cdnum{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:none; font:700 15px/1 system-ui; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.3px; text-shadow:0 0 3px #000, 0 1px 2px #000, 0 0 7px rgba(0,0,0,.9); } .curaSlot.emcd>:not(.cdnum):not(.cdov){ opacity:.75; } /* painel de configuração das técnicas */ .spRow{ display:flex; align-items:center; gap:10px; background:#0f1218; border:1px solid #20242f; border-radius:9px; padding:9px 11px; margin-bottom:6px; } .spRow.locked{ opacity:.5 } .spRow.off{ border-color:#2c3242; background:#0c0e13 } .spRow .ic{ flex:0 0 34px; height:34px; border-radius:7px; border:2px solid #2c3242; display:flex; align-items:center; justify-content:center; font-size:17px; background:#0b0d12; } .spRow .nm{ flex:1; font-size:13px; font-weight:700; } .spRow .nm small{ display:block; font-weight:400; color:#6b7385; font-size:11px; } .spRow .tg{ flex:0 0 auto; } .sw{ width:46px; height:24px; border-radius:999px; background:#2a2f3d; border:1px solid #3a3f4d; position:relative; cursor:pointer; } .sw::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#6b7385; transition:.15s; } .sw.on{ background:#14301f; border-color:#2f9d55; } .sw.on::after{ left:24px; background:#7ef0a8; } #goldBox{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(11,13,18,.85); border:1px solid #3a3320; border-radius:10px; padding:8px 14px; text-align:center; font-size:12px; color:#a9b0bf; box-shadow:0 0 0 1px rgba(253,183,26,.12); } #goldBox b{ color:var(--y); display:block; font-size:15px; line-height:1; text-shadow:0 0 8px rgba(253,183,26,.4); } #goldBox .hudIco{ display:block; } .mini2{ background:#2f6bd6; border:none; color:#fff; padding:3px 8px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; } .mini2:hover{ filter:brightness(1.1); } /* ---------- janelas (overlay / card) ---------- */ .overlay{ position:fixed; inset:0; background:rgba(8,10,14,.94); display:flex; align-items:center; justify-content:center; z-index:20; } .card{ background:#12151d; border:1px solid #20242f; border-radius:12px; padding:22px; width:400px; } .card.wide{ width:min(820px,95vw); max-height:92vh; overflow:auto; } .card h2{ margin:0 0 8px; font-size:17px; } .card h2 span{ color:var(--y); } .card h3{ color:#a9b0bf; } .card p{ font-size:12px; color:#9aa2b2; } .card input[type=number]{ width:120px; background:#0f1115; border:1px solid #2c3242; color:#e7e9ee; border-radius:6px; padding:6px 8px; } .card button.mini{ background:#232838; border:1px solid #333a4d; color:#e7e9ee; padding:6px 10px; border-radius:7px; cursor:pointer; font-size:12px; } .card button.mini.y{ background:var(--y); color:#20242e; border:none; font-weight:700; } .card button.mini.r{ background:#3a1e1e; border-color:#6b2b2b; color:#ffb4a8; } .row{ display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; } .row label{ width:66px; font-size:12px; color:#a9b0bf; } .row input[type=file]{ font-size:12px; color:#cfd4df; } .go{ width:100%; margin-top:12px; background:var(--y); color:#20242e; border:none; font-weight:700; padding:10px; border-radius:8px; cursor:pointer; } .close{ float:right; background:#232838; border:1px solid #333a4d; color:#e7e9ee; border-radius:7px; padding:5px 10px; cursor:pointer; font-size:12px; } .stat{ display:flex; justify-content:space-between; font-size:13px; color:#a9b0bf; margin:6px 0 2px; } .stat b{ color:#e7e9ee; } .item{ display:flex; justify-content:space-between; gap:10px; background:#0f1218; border:1px solid #20242f; border-radius:9px; padding:10px 12px; margin-top:8px; } .item.cur{ border-color:var(--y); } .item.locked{ opacity:.55; } .item button{ background:var(--y); color:#20242e; border:none; border-radius:7px; padding:7px 12px; font-weight:700; cursor:pointer; font-size:12px; } .item button:disabled{ background:#2a2f3d; color:#6b7385; } /* ---------- MODO CINEMA (tecla H) ---------- Esconde tudo o que é interface para ver o jogo limpo e tirar print. O canvas fica intacto; só o que está por cima dele some. O nível 2 (sem nomes nem barras) é tratado no desenho, em mapgame.js. */ body.cinema1 #menubar, body.cinema1 #bottomHud, body.cinema1 #sidebar, body.cinema1 #huntPanel, body.cinema1 #questTrack, body.cinema1 #chatDock, body.cinema1 #itemTip, body.cinema1 .overlay:not(#loadOverlay){ display:none !important; } body.cinema1 #stage{ cursor:none; } /* lembrete curtinho, some sozinho — não entra em print depois de 3s */ body.cinema1::after{ content:"H para voltar"; position:fixed; right:12px; bottom:10px; z-index:30; font:11px var(--font); color:#6b7385; background:rgba(11,13,18,.7); border:1px solid #20242f; border-radius:7px; padding:4px 9px; animation:someAviso .4s ease 3s forwards; } @keyframes someAviso{ to{ opacity:0; visibility:hidden } } /* ---------- painel de FASES (ui/hunts.js) ---------- Card largo em duas colunas, com os bichos desenhados em cima do nome. A lateral filtra por faixa de nível; a barra de cima, por texto e estado. */ .card.huge{ width:min(1080px,96vw); max-height:94vh; overflow:auto; } .huntTop{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .hBusca{ flex:1; min-width:210px; background:#0f1218; border:1px solid #2c3242; color:#e7e9ee; border-radius:9px; padding:9px 12px; font-size:13px; } .hBusca::placeholder{ color:#5a6274; } .hBusca:focus{ outline:none; border-color:#3f4a63; } .hChip{ background:#1a1e28; border:1px solid #2c3242; color:#9aa2b2; border-radius:20px; padding:6px 13px; font-size:12px; cursor:pointer; white-space:nowrap; } .hChip:hover{ border-color:#3f4a63; color:#cfd4df; } .hChip.on{ background:var(--y); border-color:var(--y); color:#20242e; font-weight:700; } .huntAviso{ background:#2a2412; border:1px solid #5a4a1a; border-radius:9px; padding:9px 11px; font-size:12px; color:#cfd4df; margin-bottom:11px; } /* ---------- poções (🧪) ---------- */ .poGrade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:6px; } .poCard{ display:flex; align-items:center; gap:9px; background:#0f1218; border:1px solid #20242f; border-radius:9px; padding:7px 9px; cursor:pointer; } .poCard:hover{ border-color:#3a445c; } .poCard canvas{ image-rendering:pixelated; flex:0 0 32px; } .poCard.on{ border-color:var(--y); background:#1a1a12; } /* trancada continua visível de propósito: ver a poção que vem depois é o que dá vontade de subir de nível */ .poCard.off{ opacity:.42; cursor:default; } .poTag{ font-size:10px; padding:2px 8px; border-radius:20px; border:1px solid #333a4d; color:#8b93a5; white-space:nowrap; } .poTag.on{ color:var(--y); border-color:#5a4a1a; background:rgba(253,183,26,.1); } .poTag.trava{ color:#ff8b6b; border-color:#6b2b2b; } .huntWrap{ display:flex; gap:12px; align-items:flex-start; } .huntSide{ flex:0 0 152px; display:flex; flex-direction:column; gap:4px; background:#0f1218; border:1px solid #20242f; border-radius:11px; padding:9px; position:sticky; top:0; } .hsTit{ font-size:10px; letter-spacing:.7px; text-transform:uppercase; color:#6b7385; text-align:center; line-height:1.25; padding:3px 0 7px; border-bottom:1px solid #20242f; margin-bottom:4px; } .hsF{ background:transparent; border:1px solid transparent; color:#9aa2b2; border-radius:8px; padding:7px 10px; font-size:12px; text-align:left; cursor:pointer; } .hsF small{ color:#5a6274; } .hsF:hover{ background:#161b25; color:#e7e9ee; } .hsF.on{ background:#1c2331; border-color:#3a445c; color:#fff; font-weight:600; } .huntGrid{ flex:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:11px; } .hCard{ position:relative; background:linear-gradient(180deg,#161b25,#10131a); border:1px solid #242a38; border-radius:12px; padding:12px 12px 10px; display:flex; flex-direction:column; gap:7px; } .hCard:hover{ border-color:#3a445c; } .hCard.cur{ border-color:var(--y); box-shadow:0 0 0 1px rgba(253,183,26,.25); } .hCard.lock{ opacity:.62; } .hcStar{ position:absolute; top:7px; right:8px; background:none; border:none; cursor:pointer; color:#3f4a63; font-size:15px; line-height:1; padding:2px; } .hcStar:hover{ color:#7a869e; } .hcStar.on{ color:var(--y); text-shadow:0 0 7px rgba(253,183,26,.5); } .hcMobs{ display:flex; align-items:flex-end; justify-content:center; gap:2px; min-height:50px; padding:2px 18px 0; } .hcMob{ image-rendering:pixelated; } .hcMob.boss{ filter:drop-shadow(0 0 5px rgba(255,91,91,.55)); } .hcNome{ font-weight:700; font-size:14px; text-align:center; line-height:1.15; } .hcSelos{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:17px; } .hcSelo{ font-size:9.5px; padding:1px 7px; border-radius:20px; border:1px solid; letter-spacing:.2px; } .hcSelo.ok{ color:#5fd08a; border-color:#2f6b45; background:rgba(95,208,138,.07); } .hcSelo.loot{ color:#7fd0ff; border-color:#2b5872; background:rgba(127,208,255,.07); } .hcSelo.aqui{ color:#20242e; border-color:var(--y); background:var(--y); font-weight:700; } .hcSelo.alerta{ color:#ffb454; border-color:#5a4a1a; background:rgba(255,180,84,.07); } .hcSelo.erro{ color:#ff8b6b; border-color:#6b2b2b; background:rgba(255,139,107,.07); } /* ---- o que a hunt rende (vem do game/balance.js) ---- Fica entre os selos e a barra de progresso: é a informação que decide a escolha, então merece a linha do meio do cartão. */ .hcTaxa{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; font-size:10.5px; font-variant-numeric:tabular-nums; padding:3px 0; border-top:1px solid #1b2430; border-bottom:1px solid #1b2430; } .hcTaxa>span{ white-space:nowrap; } .hcXp{ color:#7fd0ff; font-weight:700; } .hcGold{ color:var(--y); font-weight:700; } .hcCiclo{ color:#8b93a5; } .hcRisco{ color:#ff8b6b; font-weight:700; } .hcKi{ color:#c9a0ff; } .hcTaxa.perigo{ border-color:#5a2b2b; background:rgba(255,107,107,.05); } .hcBarra{ height:3px; background:#1b202b; border-radius:3px; overflow:hidden; } .hcBarra>div{ height:100%; background:linear-gradient(90deg,#3aa0ff,#5fd08a); transition:width .3s; } .hcPe{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:1px; } .hcLvl{ font-size:11px; font-weight:700; color:var(--y); } .hcPe .hint{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hcGo{ background:var(--y); color:#20242e; border:none; border-radius:7px; padding:5px 13px; font-weight:700; font-size:12px; cursor:pointer; } .hcGo:hover{ filter:brightness(1.08); } .hcBloq{ font-size:11px; color:#6b7385; } .huntPe{ margin-top:12px; padding-top:9px; border-top:1px solid #20242f; } /* ---------- catálogo de itens (ui/items.js) ---------- */ .itGrade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:7px; max-height:460px; overflow:auto; padding:2px; } .itCard{ display:flex; gap:9px; align-items:center; background:#0f1218; border:1px solid #20242f; border-radius:9px; padding:7px 9px; cursor:pointer; } .itCard:hover{ border-color:#3a445c; } .itCard.cur{ border-color:var(--y); box-shadow:0 0 0 1px rgba(253,183,26,.2); } .itCard.ruim{ border-color:#6b2b2b; background:#150f10; } .itCard canvas{ image-rendering:pixelated; flex:0 0 32px; background:#0a0c11; border-radius:5px; } .itInfo{ flex:1; min-width:0; } .itNome{ font-size:12px; font-weight:600; line-height:1.15; word-break:break-word; } .itSub{ font-size:10px; color:#8b93a5; } .itMarcas{ display:flex; flex-direction:column; gap:2px; align-items:flex-end; } .itFix{ margin-top:12px; background:#0f1218; border:1px solid #2c3242; border-radius:11px; padding:11px; } .itFixCab{ display:flex; gap:10px; align-items:center; } .itFixCab canvas{ image-rendering:pixelated; background:#0a0c11; border-radius:6px; } .itStrip{ display:flex; flex-wrap:wrap; gap:3px; max-height:210px; overflow:auto; border:1px solid #20242f; border-radius:8px; padding:6px; background:#0b0e14; } .itSc{ width:42px; text-align:center; background:#0f1218; border:1px solid #20242f; border-radius:6px; padding:2px 1px; cursor:pointer; } .itSc:hover{ border-color:var(--y); } .itSc canvas{ image-rendering:pixelated; display:block; margin:0 auto; } .itSc span{ font-size:8px; color:#6b7385; } /* ---------- técnicas, formato Digimon World (ui/techs.js) ---------- Caixas de borda ciano sobre azul escuro, cabeçalhos amarelos e números alinhados em coluna — a leitura de ficha de RPG de console. */ .tcWrap{ display:grid; grid-template-columns:1fr 250px; gap:11px; align-items:start; } .tcBox, .tcData{ background:linear-gradient(180deg,#141d2e,#0d1320); border:1px solid #2f5f7a; border-radius:9px; padding:9px 11px; margin-bottom:11px; } .tcData{ margin-bottom:0; position:sticky; top:0; } .tcTit{ display:flex; align-items:center; gap:8px; color:var(--y); font-size:12px; font-weight:700; letter-spacing:.6px; border-bottom:1px solid #22415a; padding-bottom:5px; margin-bottom:7px; } .tcTit small{ color:#6b7385; font-weight:400; } .tcCab{ margin-left:auto; display:flex; gap:8px; } .tcCab i{ font-style:normal; font-size:9px; color:#6b7385; letter-spacing:.5px; width:44px; text-align:center; } .tcDica{ font-size:10px; color:#5a6274; margin-top:6px; } /* --- techset --- */ .tsRow{ display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:7px; border:1px solid transparent; cursor:pointer; position:relative; } .tsRow:hover{ background:#16203200; border-color:#2f5f7a; } .tsRow.sel{ background:#16243a; border-color:var(--y); } .tsRow.vazio{ color:#4a5364; font-style:italic; } .tsN{ width:15px; color:#6b7385; font-size:11px; font-weight:700; text-align:center; } .tsIc, .tsCol.sp{ display:inline-flex; align-items:center; justify-content:center; width:24px; } .tsIc canvas, .tsCol.sp canvas, .tgCel canvas{ image-rendering:pixelated; } .tsNome{ flex:1; font-size:13px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tsCol{ width:44px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; } .tsCol.pw{ color:#ff9b6b; font-weight:700; } .tsCol.ki{ color:#7fd0ff; } .tsCol.rg{ color:#9aa2b2; } .tsX{ background:none; border:none; color:#4a5364; cursor:pointer; font-size:11px; padding:2px 4px; } .tsX:hover{ color:#ff8b6b; } /* --- grade --- */ .tgLinha{ display:flex; align-items:center; gap:9px; margin:3px 0; } .tgNome{ width:58px; font-size:10px; letter-spacing:.6px; color:#8b93a5; text-align:right; } .tgCels{ display:flex; gap:4px; flex-wrap:wrap; } .tgCel{ position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#0f1826; border:1px solid #22415a; border-radius:6px; cursor:pointer; } .tgCel:hover{ border-color:#5fd0ff; } .tgCel.olhando{ border-color:#5fd0ff; box-shadow:0 0 0 1px rgba(95,208,255,.35); } .tgCel.dentro{ border-color:var(--y); background:#241f10; } .tgCel.lock{ opacity:.35; } .tgCel .tgN{ position:absolute; bottom:-1px; right:2px; font-size:8px; color:#5a6274; } .tgCel .tgLock{ position:absolute; top:-3px; right:-3px; font-size:9px; } .tgCel .tgOk{ position:absolute; top:-4px; left:-3px; font-size:10px; color:var(--y); } .tcEmoji{ font-size:17px; line-height:1; } /* imagem própria da técnica (assets/tech/…) — pixelada como o resto do jogo */ .tcImg{ image-rendering:pixelated; display:block; object-fit:contain; } /* ícone animado de 2 quadros: os dois carregam uma vez e a animação só troca a classe .f1 — nada de reatribuir src (era o que re-baixava). */ .tcAnim{ position:relative; display:inline-block; line-height:0; } .tcAnim img{ image-rendering:pixelated; object-fit:contain; display:block; } .tcAnim img:nth-child(2){ position:absolute; left:0; top:0; opacity:0; } .tcAnim.f1 img:nth-child(1){ opacity:0; } .tcAnim.f1 img:nth-child(2){ opacity:1; } /* --- ficha --- */ .tdNome{ font-size:15px; font-weight:700; color:#fff; background:#1b3654; border:1px solid #2f5f7a; border-radius:6px; padding:6px 9px; margin-bottom:8px; } .tdLinha{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#8b93a5; padding:3px 2px; border-bottom:1px solid #1a2636; } .tdLinha b{ color:#e7e9ee; font-size:13px; font-variant-numeric:tabular-nums; } .tdLinha b small{ color:#6b7385; font-size:10px; font-weight:400; } .tdLinha b.ok{ color:#5fd08a; } .tdLinha b.no{ color:#ff8b6b; } .tdDesc{ font-size:11px; color:#cfd4df; margin:8px 0 0; } .tdQuando{ font-size:10px; color:#6b7385; margin-top:8px; line-height:1.35; } .tdVazio{ font-size:11px; color:#5a6274; padding:18px 4px; text-align:center; } .tdBtn{ width:100%; margin-top:9px; background:var(--y); color:#20242e; border:none; border-radius:7px; padding:7px; font-weight:700; font-size:12px; cursor:pointer; font-family:var(--font); } .tdBtn.fora{ background:#3a1e1e; color:#ffb4a8; } .tdBloq{ margin-top:9px; text-align:center; font-size:11px; color:#ff8b6b; } @media (max-width:820px){ .tcWrap{ grid-template-columns:1fr; } .tcData{ position:static; } } /* ---------- mostruário (ui/showcase.js) ---------- */ .shGrupo{ margin-bottom:11px; } .shTit{ font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--y); margin-bottom:5px; } .shLista{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px; } .shItem{ display:flex; align-items:center; gap:7px; background:#0f1218; border:1px solid #20242f; border-radius:8px; padding:6px 9px; font-size:12px; cursor:pointer; color:#6b7385; } .shItem.on{ border-color:#2f6b45; background:#0d1512; color:#e7e9ee; } .shItem input{ accent-color:#5fd08a; } .shItem span{ flex:1; } .shItem code{ font-family:ui-monospace,Consolas,monospace; font-size:9px; } /* escopo (qual universo) ≠ filtro (qual problema) — cores diferentes */ .hChip.esc{ border-color:#3a445c; color:#cfd4df; } .hChip.esc.on{ background:#2f6bd6; border-color:#2f6bd6; color:#fff; } .itCard{ position:relative; } .itCard.nojogo{ border-color:#2f6b45; background:#0d1512; } .itUsa{ position:absolute; top:4px; right:5px; width:19px; height:19px; padding:0; line-height:1; border-radius:50%; border:1px solid #333a4d; background:#161b25; color:#6b7385; font-size:11px; font-weight:700; cursor:pointer; } .itUsa:hover{ border-color:#5fd08a; color:#5fd08a; } .itUsa.on{ background:#2f6b45; border-color:#2f6b45; color:#fff; } .itLote{ margin-top:10px; background:#12161f; border:1px solid #2c3242; border-radius:10px; padding:10px 12px; } .itLote .hint{ display:block; margin-top:3px; } /* ---------- inventário / mochila ---------- */ .grid{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; } .slot2{ position:relative; width:40px; height:40px; background:#0b0d12; border:1px solid #2c3242; border-radius:6px; display:flex; align-items:center; justify-content:center; } .slot2 canvas{ image-rendering:pixelated; } .slot2 .cnt{ position:absolute; bottom:0; right:2px; font-size:10px; color:#fff; text-shadow:0 1px 1px #000; } /* O #sidebar virou INTERRUPTOR, não layout: as três janelas são fixas e se posicionam sozinhas (ui/hudwin.js). Ele continua existindo para o boot e o Mostruário acenderem/apagarem as três de uma vez — por isso não some. Sem tamanho, para não cobrir o mapa e comer cliques. */ #sidebar{ position:fixed; left:0; top:0; width:0; height:0; z-index:5; } .sidePanel{ position:fixed; width:264px; background:linear-gradient(180deg,rgba(20,24,32,.9),rgba(11,13,18,.9)); border:1px solid #3a3320; border-radius:10px; padding:10px; box-shadow:0 0 0 1px rgba(253,183,26,.1), 0 6px 20px rgba(0,0,0,.4); } .sideHead{ font-size:12px; font-weight:800; color:var(--y); letter-spacing:.5px; margin-bottom:7px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(253,183,26,.18); padding-bottom:5px; text-shadow:0 0 6px rgba(253,183,26,.3); } /* mochila e loot pouch: altura limitada + rolagem, para a janela não crescer sem fim quando enche. Para ver MAIS linhas de uma vez, é só subir o max-height (cada linha tem ~42px). */ /* 3 linhas fixas + rolagem (cada linha ~40px). Para mostrar mais linhas, suba o max-height. */ /* altura REDIMENSIONÁVEL: o jogador arrasta a borda de baixo da grade para ver mais ou menos linhas (ui/hud.js guarda a altura escolhida). `height` (não `max-height`) para o resize nativo funcionar; min/max limitam o exagero. align-content:start é o que mantém o ESTILO TIBIA: os slots têm SEMPRE o mesmo tamanho, e arrastar a borda só revela mais linhas (e scroll) — sem o grid esticar as células para preencher a altura sobrando (o bug: por padrão o grid estica as linhas, então puxar mais alto que o conteúdo deformava os quadrados). */ .grid2{ display:grid; grid-template-columns:repeat(6,1fr); align-content:start; gap:4px; height:124px; min-height:56px; max-height:70vh; resize:vertical; overflow-y:auto; overflow-x:hidden; padding-right:3px; } .grid2::-webkit-scrollbar{ width:8px; } .grid2::-webkit-scrollbar-thumb{ background:#ffffff26; border-radius:4px; } .grid2::-webkit-scrollbar-track{ background:transparent; } .autoSellBar{ display:flex; align-items:center; gap:6px; margin-top:7px; font-size:11px; color:var(--mut,#9aa3b2); } .autoSellBar .asToggle{ display:flex; align-items:center; gap:4px; cursor:pointer; user-select:none; font-weight:700; } .autoSellBar .asToggle input{ accent-color:#2f6bd6; cursor:pointer; } .autoSellBar select{ background:#0b0d12; color:#fff; border:1px solid #262b38; border-radius:5px; padding:2px 5px; font-size:11px; cursor:pointer; } .autoSellBar .hint{ margin-left:auto; color:#6fe08a; font-weight:700; } /* filtro de raridade do auto-vender: checkboxes coloridos, quebram linha */ .sellProt{ flex-wrap:wrap; gap:4px 8px; } .rarChk{ display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:var(--rc,#9aa3b2); cursor:pointer; user-select:none; } .rarChk input{ accent-color:var(--rc,#2f6bd6); cursor:pointer; margin:0; width:12px; height:12px; } .slotm{ position:relative; aspect-ratio:1; background:#0b0d12; border:1px solid #262b38; border-radius:5px; display:flex; align-items:center; justify-content:center; } .slotm canvas{ image-rendering:pixelated; } .slotm .cntm{ position:absolute; bottom:0; right:2px; font-size:9px; color:#fff; text-shadow:0 1px 1px #000; } /* ---------- EQUIPAMENTO: o boneco ---------- Era uma fileira de seis quadrados iguais. Seis quadrados iguais não dizem qual é o elmo — você descobria arrastando e vendo recusar. Aqui a POSIÇÃO é a informação: elmo em cima, armadura no peito, colar e arma dos lados, pernas e botas descendo. É o desenho de um corpo, e é o mesmo de qualquer MMO — ninguém precisa aprender. As células vazias da grade ("." nas áreas) são de propósito: são os ombros e os lados do corpo. Preencher daria seis quadrados iguais de novo, só que em duas linhas. */ /* HUD 2.0: o PERSONAGEM no centro, os slots em volta (estilo Tibia): elmo em cima; à ESQUERDA arma, anel e colar; à DIREITA armadura, pernas e botas. Todas as células do MESMO tamanho (48px) — só a coluna do boneco é mais larga. */ .eqDoll{ display:grid; justify-content:center; gap:6px; grid-template-columns:48px 88px 48px; grid-template-rows:repeat(4, 48px); grid-template-areas: ". elmo ." "arma player armadura" "anel player pernas" "colar . botas"; } .eqSlot[data-slot="pernas"]{ grid-area:pernas; } /* o boneco ocupa a coluna do meio (duas linhas), entre os slots */ .eqPlayer{ grid-area:player; display:flex; align-items:flex-end; justify-content:center; border-radius:10px; background:radial-gradient(circle at 50% 38%, rgba(70,92,124,.28), rgba(11,13,18,0) 72%); } .eqPlayerCv{ image-rendering:pixelated; display:block; } /* subtítulo da Mochila dentro do painel de Personagem */ .eqSub{ font-size:10px; font-weight:800; color:#8b93a5; letter-spacing:.5px; text-transform:uppercase; margin:9px 0 6px; padding-top:7px; border-top:1px solid #222a37; display:flex; align-items:center; gap:6px; } .eqSub .hint{ font-weight:400; } .eqSlot[data-slot="elmo"]{ grid-area:elmo; } .eqSlot[data-slot="colar"]{ grid-area:colar; } .eqSlot[data-slot="anel"]{ grid-area:anel; } .eqSlot[data-slot="armadura"]{ grid-area:armadura; } .eqSlot[data-slot="arma"]{ grid-area:arma; } .eqSlot[data-slot="pernas"]{ grid-area:pernas; } .eqSlot[data-slot="botas"]{ grid-area:botas; } .eqSlot{ position:relative; background:#0b0d12; border:2px solid #3a3f4d; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:inset 0 2px 6px rgba(0,0,0,.5); } .eqSlot canvas{ image-rendering:pixelated; } /* a armadura é o centro do corpo: um anel de luz a marca como âncora da leitura, para o olho achar o peito antes de ler os outros */ .eqSlot[data-slot="armadura"]{ box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(253,183,26,.18); } /* vazio: o pictograma apagado + o nome do slot. O nome existe porque "pernas" e "botas" são dois quadrados na mesma coluna — a posição sozinha não separa os dois para quem está vendo pela primeira vez. */ .eqSlot .eqLbl{ font-size:19px; line-height:1; opacity:.32; } .eqSlot .eqNome{ font-size:8px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#5b6274; } /* alvo de arrastar: o slot certo se acende quando o item pode cair nele */ .eqSlot.alvo{ border-color:var(--y); background:#16160d; } /* ---------- tooltip de item ---------- */ #itemTip{ display:none; position:fixed; z-index:40; width:230px; pointer-events:none; background:linear-gradient(180deg,#161a24,#0d1017); border:1px solid #3a3f4d; border-radius:12px; padding:12px; box-shadow:0 12px 40px rgba(0,0,0,.7); font-size:12px; } #itemTip .tipRar{ font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; } #itemTip .tipName{ font-size:15px; font-weight:700; margin:2px 0 8px; color:#fff; } #itemTip .tipIcon{ float:right; width:44px; height:44px; background:#0b0d12; border:1px solid #2c3242; border-radius:8px; display:flex; align-items:center; justify-content:center; } #itemTip .tipRow{ display:flex; justify-content:space-between; color:#9aa2b2; margin:3px 0; } #itemTip .tipRow b{ color:#e7e9ee; } #itemTip .tipAttr{ margin-top:8px; border-top:1px solid #262b38; padding-top:7px; } #itemTip .tipAttr .t{ color:#8a92a3; font-size:11px; margin-bottom:3px; } #itemTip .tipStat{ font-weight:600; } #itemTip .tipHint{ margin-top:8px; color:#6b7385; font-size:10px; border-top:1px solid #262b38; padding-top:6px; } /* ---------- perfil ---------- */ #profileOverlay .pcard{ width:min(780px,95vw); max-height:92vh; overflow:auto; } #profileBody h2{ margin:0 0 12px; font-size:18px; } #profileBody h2 span{ color:var(--y); } .profTop{ display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; } .profHero{ flex:0 0 200px; background:radial-gradient(circle at 50% 28%,#26303f,#0b0d12); border:2px solid var(--y); border-radius:14px; padding:16px 14px; text-align:center; box-shadow:0 0 20px rgba(253,183,26,.22), inset 0 0 14px rgba(0,0,0,.5); } .profHero canvas{ image-rendering:pixelated; display:block; margin:0 auto 10px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)); } .profHero .pn{ font-weight:700; font-size:17px; color:#ffe089; text-shadow:0 0 8px rgba(253,183,26,.4); } .profHero .pf{ font-size:12px; color:#9fb4ff; margin-top:2px; } .profStats{ flex:1; min-width:290px; display:flex; flex-direction:column; gap:14px; align-content:start; } /* status agrupados (Ataque / Defesa / Recursos) no perfil */ .statGroup{ } .statGroupTit{ font-size:11px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase; color:var(--y); margin:0 0 3px; opacity:.9; } .statGrid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; } .pStat{ display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #20242f; padding:7px 2px; font-size:13px; color:#9aa2b2; } .pStat b{ color:#e7e9ee; font-weight:700; font-variant-numeric:tabular-nums; } /* formas do personagem (evoluções e transformações) */ .formsRow{ display:flex; gap:10px; flex-wrap:wrap; } .formCard{ width:116px; background:linear-gradient(180deg,#141821,#0d1017); border:1px solid #20242f; border-radius:11px; padding:11px 8px; text-align:center; position:relative; } .formCard canvas{ image-rendering:pixelated; display:block; margin:0 auto 6px; } .formCard .fn{ font-size:12px; font-weight:700; color:#e7e9ee; } .formCard .fm{ font-size:11px; color:var(--y); font-weight:700; margin-top:1px; } .formCard .lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(6,8,13,.62); border-radius:11px; font-size:11px; font-weight:700; color:#cfd4df; } .formCard .lock .big{ font-size:24px; line-height:1; filter:drop-shadow(0 0 6px rgba(0,0,0,.8)); } .formCard.base{ border-color:#2f5a7a; } .formCard.base .fm{ color:#7fd0ff; } .formCard.cur{ border-color:var(--y); box-shadow:0 0 14px rgba(253,183,26,.3); } .formCard.cur .fm{ color:var(--y); } .formCard.past{ opacity:.45; } .formCard .fm.past{ color:#6b7385; } /* seleção de personagem (admin) */ .charRow{ display:flex; gap:8px; flex-wrap:wrap; } .charChip{ background:#0f1218; border:1px solid #2c3242; color:#dfe3ea; border-radius:9px; padding:8px 10px; cursor:pointer; font-size:12px; font-weight:700; font-family:var(--font); text-align:center; } .charChip canvas{ image-rendering:pixelated; display:block; margin:0 auto 4px; } .charChip small{ display:block; font-weight:400; color:#6b7385; font-size:10px; } .charChip:hover{ background:#1b2029; } .charChip.cur{ border-color:var(--y); color:var(--y); box-shadow:0 0 10px rgba(253,183,26,.25); } /* ===================================================================== TELAS DE ENTRADA — login e carregamento. Ocupam a tela inteira e vêm ANTES do jogo. A ordem é login → carga → jogo, e cada uma some quando a seguinte assume. Tudo é feito em CSS, sem imagem: a aura, o pulso, as partículas. Assim elas aparecem instantaneamente, antes de qualquer download — que é o ponto de uma tela de carregamento. Quando você tiver a arte de fundo, é só apontar em .telaFundo. ===================================================================== */ .tela{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:#05070b; overflow:hidden; } .tela.sai{ opacity:0; pointer-events:none; transition:opacity .45s ease; } /* fundo: duas auras lentas em cores opostas, para o preto não ficar morto */ .telaFundo{ position:absolute; inset:0; background: radial-gradient(60vw 60vw at 22% 28%, rgba(253,183,26,.13), transparent 62%), radial-gradient(55vw 55vw at 80% 76%, rgba(58,160,255,.11), transparent 62%), #05070b; background-size:cover; } .telaFundo::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(1.5px 1.5px at 18% 32%, rgba(255,255,255,.55), transparent), radial-gradient(1.5px 1.5px at 72% 18%, rgba(255,255,255,.40), transparent), radial-gradient(2px 2px at 45% 72%, rgba(253,183,26,.45), transparent), radial-gradient(1.5px 1.5px at 88% 58%, rgba(255,255,255,.35), transparent), radial-gradient(1.5px 1.5px at 32% 86%, rgba(95,208,255,.40), transparent); animation:telaFlutua 14s ease-in-out infinite alternate; } @keyframes telaFlutua{ from{ transform:translateY(0) } to{ transform:translateY(-22px) } } /* a marca, compartilhada pelas duas telas */ .telaMarca{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:5px; } .telaMarca b{ background:var(--y); color:#15110a; border-radius:11px; padding:6px 13px; font:800 25px/1 var(--font); box-shadow:0 0 28px rgba(253,183,26,.5); } .telaMarca i{ font:800 25px/1 var(--font); font-style:normal; color:var(--y); letter-spacing:1.5px; } /* BETA badge on the logo (login, loading, character modal and in-game nav) — a small red pill so players know this is a beta build. */ .betaTag{ display:inline-block; background:#e0453a; color:#fff; font:800 10px/1 var(--font); letter-spacing:1px; padding:3px 6px; border-radius:6px; vertical-align:super; margin-left:3px; box-shadow:0 1px 5px rgba(224,69,58,.5); } #menubar .logo .betaTag{ font-size:8px; padding:2px 4px; vertical-align:top; margin-left:4px; } .telaSub{ text-align:center; color:#7d8697; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; margin:0 0 26px; } .telaCx{ position:relative; z-index:1; width:min(400px, 92vw); padding:34px 30px 28px; background:linear-gradient(180deg, rgba(19,24,34,.96), rgba(11,14,20,.97)); border:1px solid #2a3champ; border-radius:18px; box-shadow:0 26px 70px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05); } .telaCx{ border-color:#2a3242; } /* ===================== JANELAS MÓVEIS (ui/hudwin.js) ===================== Equipamento, mochila, loot pouch e chat. Todas se arrastam pelo cabeçalho e minimizam; o JS escreve left/top inline, então aqui não existe posição — só a aparência de "isto se pega". */ .hudWin{ position:fixed; z-index:5; } /* o cursor é o aviso: a mão aberta diz "dá para pegar" antes do clique */ .hwPuxador{ cursor:grab; user-select:none; } .hwArrastando{ cursor:grabbing; box-shadow:0 22px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(253,183,26,.35) !important; } .hwArrastando .hwPuxador{ cursor:grabbing; } .hwMin{ flex:0 0 auto; width:22px; height:22px; margin-left:6px; line-height:1; background:transparent; border:none; color:#6c7488; font-size:14px; cursor:pointer; border-radius:6px; font-family:var(--font); } .hwMin:hover{ color:#e7e9ee; background:rgba(255,255,255,.07); } /* minimizada, uma janela da lateral é só o seu cabeçalho */ .sidePanel.min{ width:auto; padding:7px 10px; } .sidePanel.min > :not(.sideHead){ display:none; } .sidePanel.min .sideHead{ margin-bottom:0; } /* dentro do cabeçalho minimizado, contadores e botões saem: sobra o nome (quem minimizou não quer a caixa, quer saber onde ela está) */ .sidePanel.min .sideHead .hint, .sidePanel.min .sideHead button:not(.hwMin){ display:none; } /* ===================== CHAT ANCORADO (#chatDock) ===================== O chat era um painel de overlay, aberto pelo botão 💬 da barra. Ler o que alguém disse custava tapar o jogo. Agora ele é mobília: mora no canto inferior esquerdo e fica lá. ONDE ELE PARA, E POR QUÊ A HUD de baixo (retrato + HP/KI/EXP) ocupa a base da tela e é o que o jogador olha o tempo todo. O dock ancora ACIMA dela — --hudH é a altura reservada pra HUD, não um chute: 64px de retrato + ~3 linhas de barra + respiro. Mudou a HUD, muda esse número e o dock acompanha. MINIMIZADO É O PADRÃO (.min) Quem não liga pro chat vê só o cabeçalho. Por isso o cabeçalho INTEIRO abre e fecha: no estado minimizado ele é a única coisa clicável, e exigir mira num "—" de 20px seria hostil. */ #chatDock{ --hudH:132px; position:fixed; left:12px; bottom:calc(var(--hudH) + 12px); z-index:5; display:flex; align-items:stretch; width:min(470px, 46vw); background:linear-gradient(180deg,rgba(19,23,32,.96),rgba(11,14,20,.97)); border:1px solid #2a3242; border-radius:14px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); font-size:13px; } /* --- coluna de canais --- */ .cdCanais{ flex:0 0 132px; display:flex; flex-direction:column; gap:2px; padding:10px 8px; background:rgba(8,10,15,.55); border-right:1px solid #222a37; } .cdCanaisTit{ font-size:9.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:#6c7488; padding:2px 6px 7px; } .cdCanal{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; background:transparent; border:1px solid transparent; border-radius:9px; color:#8b93a5; font:inherit; font-size:12.5px; cursor:pointer; text-align:left; transition:background .12s, color .12s, border-color .12s; } .cdCanal i{ font-style:normal; width:13px; text-align:center; opacity:.8; } .cdCanal:hover:not(:disabled){ background:rgba(255,255,255,.05); color:#e7e9ee; } .cdCanal.on{ color:var(--y); background:rgba(253,183,26,.09); border-color:rgba(253,183,26,.35); font-weight:600; } /* os canais que ainda não existem no servidor: visíveis, apagados, mudos */ .cdCanal:disabled{ opacity:.38; cursor:not-allowed; } /* private DM channels in the chat sidebar (ui/chat.js) — one tab per person. The label flexes so the unread badge and the close × sit at the right. */ .cdCanal > span:not(.cdTabBadge):not(.cdFechar){ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cdPrivTit{ margin-top:9px; } .cdCanal .cdTabBadge{ flex:0 0 auto; background:#ff5b5b; color:#fff; font-size:9px; font-weight:700; line-height:15px; min-width:15px; height:15px; border-radius:8px; text-align:center; padding:0 3px; } .cdCanal .cdFechar{ flex:0 0 auto; opacity:.4; font-size:14px; line-height:1; padding:0 3px; border-radius:4px; } .cdCanal .cdFechar:hover{ opacity:1; background:rgba(255,91,91,.22); color:#ff8f8f; } /* my own lines inside a private channel */ .cdLinha.meu .cdNome{ color:#7fd0ff; } /* --- corpo --- */ .cdCorpo{ flex:1 1 auto; display:flex; flex-direction:column; min-width:0; } .cdTopo{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px 9px; cursor:pointer; border-bottom:1px solid #202735; } .cdTopo:hover{ background:rgba(255,255,255,.03); } .cdTitBox{ flex:1; min-width:0; } .cdTit{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color:#e7e9ee; } /* o ícone do chat vive no título — que é a única coisa que sobra quando a janela está minimizada, e é exatamente aí que ele mais serve: a barrinha fechada passa a se identificar por desenho, não só pela palavra "Geral" */ .cdIco{ display:flex; align-items:center; flex:0 0 auto; } .cdIco .hudIco{ display:block; } .cdSub{ font-size:11px; color:#6c7488; margin-top:1px; } /* ALTURA FIXA, e é de propósito. Antes era `max-height` com `flex:0 1 auto`: a lista crescia junto com a conversa até o teto. Funciona, mas o chat mudava de tamanho a cada mensagem — e como o dock ancora pela BASE, ele crescia para cima, empurrando o próprio cabeçalho. O jogador via a janela pulsando e o botão de minimizar mudando de lugar enquanto lia. Agora a altura é a mesma sempre, com ou sem mensagem: `flex:0 0 auto` mais `height`. A conversa rola dentro dela. O `min(…)` não é teto de crescimento, é respeito a telas baixas — num monitor normal vale o valor em px. `flex:0 0 auto` e não só `height`: dentro de um flex-column o `flex-shrink` padrão (1) deixaria a lista encolher abaixo do `height` quando o conteúdo do dock apertasse, e a altura "fixa" voltaria a variar — que é justamente o que viemos consertar. */ .cdLista{ flex:0 0 auto; height:min(32vh,230px); overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:7px; } .cdLista::-webkit-scrollbar{ width:7px; } .cdLista::-webkit-scrollbar-thumb{ background:#2a3242; border-radius:4px; } .cdLinha{ line-height:1.42; color:#cfd4df; word-break:break-word; } .cdNome{ color:var(--y); font-weight:700; margin-right:5px; } .cdHora{ color:#5b6274; font-size:10.5px; margin-left:5px; font-variant-numeric:tabular-nums; } .cdVazio{ color:#6c7488; font-size:12px; padding:6px 0; } /* aba Mortes (death log) */ .cdLinha.cdMorte{ color:#d7a2a2; } .cdLinha.cdMorte .cdNome{ color:#ff6b6b; } .cdLinha.cdMorte b{ color:#ffb0a0; } /* aba Avisos (mural do admin) */ .cdLinha.cdAviso{ color:#ffe3a6; background:rgba(253,183,26,.07); border-left:2px solid var(--y); padding:3px 8px; border-radius:4px; margin:2px 0; } .cdLinha.cdAviso .cdNome{ color:var(--y); } /* o aviso de conexão: some sozinho quando está tudo bem */ .cdEstado{ padding:5px 12px 0; font-size:11px; color:#ffb454; } .cdEstado .pisca{ animation:cdPisca 1.1s ease-in-out infinite; } @keyframes cdPisca{ 0%,100%{opacity:.25} 50%{opacity:1} } .cdBarra{ display:flex; gap:8px; padding:9px 12px 11px; border-top:1px solid #202735; } .cdBarra input{ flex:1; min-width:0; background:#0a0f17; border:1px solid #28303f; border-radius:9px; color:#e7e9ee; padding:8px 11px; font:inherit; font-size:13px; } .cdBarra input:focus{ outline:none; border-color:var(--y); box-shadow:0 0 0 3px rgba(253,183,26,.12); } .cdBarra input:disabled{ opacity:.5; cursor:not-allowed; } .cdEnviar{ flex:0 0 auto; background:rgba(253,183,26,.12); border:1px solid rgba(253,183,26,.45); color:var(--y); border-radius:9px; padding:8px 16px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .cdEnviar:hover{ background:rgba(253,183,26,.22); } /* --- contador de não lidas (vive no título; é o que sobra minimizado) --- */ .cdBadge{ background:#ff5b5b; color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px; line-height:17px; border-radius:9px; padding:0 5px; text-align:center; } /* --- minimizado: sobra o cabeçalho --- */ #chatDock.min{ width:auto; } #chatDock.min .cdCanais, #chatDock.min .cdLista, #chatDock.min .cdBarra, #chatDock.min .cdSub{ display:none; } #chatDock.min .cdTopo{ border-bottom:none; padding:9px 12px; align-items:center; } #chatDock.min .cdTit{ font-size:13.5px; } @media (max-width:900px){ /* na largura de celular a coluna de canais come a conversa, e ela é decoração enquanto só "Geral" funciona — some com ela */ #chatDock{ width:calc(100vw - 24px); } #chatDock .cdCanais{ display:none; } .cdLista{ height:min(26vh,170px); } } /* ===================== MERCADO (ui/market.js) ===================== A lista é o coração desta tela, e ela tem UM trabalho: deixar comparar preços. Por isso o preço fica numa coluna de largura fixa, alinhado à direita e com fonte tabular — assim as casas decimais de linhas diferentes caem umas sobre as outras e o olho compara sem ler. A porcentagem embaixo do preço é o que torna a comparação possível para quem não decorou o valor de cada item: verde abaixo de 90% do valor de NPC, vermelho acima de 180%. */ .mkAbas{ display:flex; gap:6px; margin-bottom:12px; } .mkAba{ background:#0f1218; border:1px solid #28303f; border-radius:9px; color:#8b93a5; font:inherit; font-size:12.5px; padding:7px 15px; cursor:pointer; } .mkAba:hover{ border-color:#3f4a5e; color:#e7e9ee; } .mkAba.on{ background:rgba(253,183,26,.1); border-color:var(--y); color:var(--y); font-weight:700; } .mkFiltros{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; } .mkFiltros input, .mkFiltros select{ background:#0a0f17; border:1px solid #28303f; border-radius:9px; color:#e7e9ee; padding:8px 11px; font:inherit; font-size:12.5px; } .mkFiltros input{ flex:1; min-width:150px; } .mkFiltros input:focus, .mkFiltros select:focus{ outline:none; border-color:var(--y); } .mkConta{ margin-bottom:6px; font-size:11.5px; } .mkLista{ display:flex; flex-direction:column; gap:5px; max-height:52vh; overflow-y:auto; overflow-x:hidden; padding-right:3px; } .mkLinha{ display:flex; align-items:center; gap:11px; background:#0c1016; border:1px solid #1e2430; border-radius:10px; padding:7px 11px; } .mkLinha:hover{ border-color:#2f3a52; } .mkIco{ flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; image-rendering:pixelated; } .mkInfo{ flex:1; min-width:0; } .mkNome{ font:700 13.5px/1.25 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mkSub{ font-size:11px; color:#6c7488; margin-top:1px; } .mkPreco{ flex:0 0 118px; text-align:right; display:flex; flex-direction:column; } .mkPreco b{ color:var(--y); font:700 14px/1.1 var(--font); font-variant-numeric:tabular-nums; } .mkPreco small{ font-size:10.5px; color:#6c7488; margin-top:1px; } .mkBt{ flex:0 0 auto; background:rgba(253,183,26,.12); border:1px solid rgba(253,183,26,.45); color:var(--y); border-radius:9px; padding:7px 15px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .mkBt:hover{ background:rgba(253,183,26,.22); } /* sem ouro: continua clicável de propósito — o servidor responde quanto falta, e um botão morto não explica nada */ .mkBt.off{ opacity:.45; } .mkBt.cancel{ background:rgba(255,107,107,.1); border-color:rgba(255,107,107,.4); color:#ff8b6b; } .mkBt:disabled{ opacity:.5; cursor:default; } .mkSeu{ flex:0 0 auto; font-size:11.5px; color:#6c7488; padding:7px 10px; } /* reserva do ícone: a inicial na cor da raridade. Um quadrado vazio na lista parece defeito; uma letra parece intenção. */ .mkLetra{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid; border-radius:8px; font:700 14px/1 var(--font); background:#0a0f17; } .mkForm{ display:flex; flex-direction:column; gap:10px; } .mkForm label{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:#8b93a5; } .mkForm input, .mkForm select{ background:#0a0f17; border:1px solid #28303f; border-radius:9px; color:#e7e9ee; padding:9px 11px; font:inherit; font-size:13px; } .mkForm input:focus, .mkForm select:focus{ outline:none; border-color:var(--y); } .mkResumo{ margin-top:12px; background:#0c1016; border:1px solid #1e2430; border-radius:10px; padding:11px 13px; display:flex; flex-direction:column; gap:5px; } .mkResumo div{ display:flex; justify-content:space-between; font-size:12.5px; color:#8b93a5; } .mkResumo b{ color:#e7e9ee; font-variant-numeric:tabular-nums; } .mkNota{ display:block !important; font-size:11.5px; color:#6c7488; line-height:1.45; border-top:1px solid #1e2430; padding-top:8px; margin-top:3px; } /* ===================== DIÁLOGO (ui/dialog.js) ===================== Substitui o confirm() do navegador. Além de feio, aquele TRAVA a aba inteira enquanto está aberto — o jogo para de rodar atrás dele. z-index 200: acima de tudo, inclusive da tela de personagem (60) e dos overlays de painel. Um diálogo que aparece atrás de alguma coisa é pior que nenhum, porque o jogador clica no que está na frente sem ver que havia uma pergunta. */ .dlgFundo{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(4,6,10,.72); backdrop-filter:blur(3px); opacity:0; transition:opacity .16s ease; } .dlgFundo.entra{ opacity:1; } .dlgFundo.sai{ opacity:0; } .dlgCx{ width:min(400px, 90vw); padding:26px 26px 20px; text-align:center; background:linear-gradient(180deg, rgba(21,26,36,.98), rgba(12,15,22,.99)); border:1px solid #2f3a52; border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05); transform:translateY(8px) scale(.98); transition:transform .16s ease; } .dlgFundo.entra .dlgCx{ transform:none; } .dlgIco{ margin-bottom:10px; } .dlgIco .hudIco{ width:46px; height:46px; object-fit:contain; } .dlgEmoji{ font-size:38px; line-height:1; margin-bottom:8px; } .dlgTit{ font:700 18px/1.3 var(--font); color:#e7e9ee; } .dlgTxt{ margin-top:8px; font-size:13px; line-height:1.55; color:#8b93a5; } .dlgBts{ display:flex; gap:9px; margin-top:20px; } .dlgBt{ flex:1; border-radius:10px; padding:11px 14px; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border:1px solid; transition:background .13s; } .dlgBt.cancel{ background:#141923; border-color:#2f3a52; color:#aeb6c6; } .dlgBt.cancel:hover{ background:#1b2230; color:#e7e9ee; } .dlgBt.ok{ background:rgba(253,183,26,.14); border-color:rgba(253,183,26,.5); color:var(--y); } .dlgBt.ok:hover{ background:rgba(253,183,26,.24); } .dlgBt.perigo{ background:rgba(255,91,91,.14); border-color:rgba(255,91,91,.5); color:#ff8b8b; } .dlgBt.perigo:hover{ background:rgba(255,91,91,.24); } /* o foco tem de SER VISÍVEL: é ele que diz qual botão o Enter aperta */ .dlgBt:focus-visible{ outline:2px solid var(--y); outline-offset:2px; } /* ---------- papo de missão (ui/quest.js) ---------- */ .questCx{ width:min(540px, 94vw); padding:0; text-align:left; overflow:hidden; } .questHead{ display:flex; gap:14px; align-items:center; padding:18px 20px 16px; background:linear-gradient(180deg, rgba(253,183,26,.12), rgba(253,183,26,0)); border-bottom:1px solid #2f3a52; } .questGiverCv{ width:56px; height:64px; flex:none; image-rendering:pixelated; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); } .questHeadTxt{ min-width:0; } .questTit{ font:800 17px/1.2 var(--font); color:var(--y); } .questIntro{ margin-top:6px; font-size:12.5px; line-height:1.5; color:#9aa2b4; } .questCorpo{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; max-height:min(56vh, 420px); overflow-y:auto; } .questVazio{ padding:28px 10px; text-align:center; font-size:13px; color:#8b93a5; } .questCard{ display:flex; align-items:center; gap:13px; padding:11px 13px; background:rgba(255,255,255,.03); border:1px solid #2a3344; border-radius:12px; transition:border-color .13s, background .13s; } .questCard:hover{ border-color:#3a475f; background:rgba(255,255,255,.05); } .questCard.feita{ border-color:rgba(90,208,138,.5); background:rgba(90,208,138,.06); } .questCard.ativa{ border-color:rgba(253,183,26,.45); } .questMobCv{ width:52px; height:52px; flex:none; image-rendering:pixelated; background:radial-gradient(circle at 50% 60%, rgba(0,0,0,.35), transparent 70%); } .questCardInfo{ flex:1; min-width:0; } .questCardTit{ font:700 14px/1.25 var(--font); color:#e7e9ee; } .questCardTit b{ color:var(--y); } .questDif{ display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:1px 7px; border-radius:999px; border:1px solid; vertical-align:middle; } .questDif.df-facil{ color:#5fd08a; border-color:rgba(95,208,138,.5); background:rgba(95,208,138,.12); } .questDif.df-media{ color:#ffd24a; border-color:rgba(253,183,26,.5); background:rgba(253,183,26,.12); } .questDif.df-dificil{ color:#ff8b6b; border-color:rgba(255,91,91,.5); background:rgba(255,91,91,.12); } .questCardSub{ margin-top:3px; font-size:12px; color:#9aa2b4; } .questCardSub b{ color:#c6cedd; font-weight:700; } .questRew{ margin-top:5px; font-size:11.5px; color:#8b93a5; } .questBar{ margin-top:7px; height:7px; border-radius:6px; background:#141923; overflow:hidden; border:1px solid #2a3344; } .questBar span{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #fdb71a, #ffd24a); transition:width .2s ease; } .questProg{ margin-top:4px; font-size:11.5px; color:#c6cedd; font-weight:700; } .questCardBts{ flex:none; } .questBt{ border-radius:9px; padding:9px 14px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid; white-space:nowrap; transition:background .13s; } .questBt.ok{ background:rgba(253,183,26,.16); border-color:rgba(253,183,26,.55); color:var(--y); } .questBt.ok:hover{ background:rgba(253,183,26,.28); } .questBt.cancel{ background:#141923; border-color:#2f3a52; color:#aeb6c6; } .questBt.cancel:hover{ background:#1b2230; color:#e7e9ee; } .questBt.feito{ background:rgba(90,208,138,.12); border-color:rgba(90,208,138,.4); color:#5fd08a; cursor:default; } .questBt:focus-visible{ outline:2px solid var(--y); outline-offset:2px; } .questFoot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-top:1px solid #2f3a52; background:rgba(0,0,0,.18); } .questDica{ font-size:11px; color:#7b8395; } /* ---------- ranking (🏆) ---------- */ .rkGrade{ display:flex; flex-direction:column; gap:4px; margin-top:10px; } .rkLinha{ display:flex; align-items:center; gap:10px; background:#0f1218; border:1px solid #20242f; border-radius:9px; padding:6px 12px; } .rkLinha.top{ border-color:#5a4a1a; background:#17140c; } .rkPos{ width:28px; text-align:center; font-weight:700; color:#8b93a5; font-size:14px; } .rkLinha.top .rkPos{ font-size:17px; } .rkSprite{ width:28px; height:34px; object-fit:contain; image-rendering:pixelated; flex:0 0 28px; } .rkNome{ flex:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rkValor{ color:var(--y); font-weight:700; font-variant-numeric:tabular-nums; } /* "quem está online" (ui/online.js) — público, com filtros e clique p/ interagir. Reaproveita o layout de linha do ranking (.rkGrade/.rkLinha). */ .onDot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#5fd08a; box-shadow:0 0 6px #5fd08a; } .onOnde{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#9fb0c8; font-size:12px; } .onTempo{ flex:0 0 auto; color:#6f7a90; font-size:11px; font-variant-numeric:tabular-nums; min-width:32px; text-align:right; } /* barra de filtros do painel Online */ .onFiltros{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; } .onF{ background:#0f1115; border:1px solid #2c3242; color:#e7e9ee; border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; } .onF:focus{ outline:none; border-color:rgba(253,183,26,.55); } .onBuscaNome{ flex:1; min-width:140px; } #onBuscaNome{ flex:1; min-width:140px; } .onFnum{ width:110px; } .onFiltros select.onF{ cursor:pointer; } /* linha de jogador: clicável (abre o menu de amigo/mensagem) */ .onLinha[data-nome]{ cursor:pointer; } .onLinha[data-nome]:hover{ background:rgba(253,183,26,.08); border-color:rgba(253,183,26,.28); } .onLinha.onEu{ opacity:.72; } /* seu próprio nome: sem menu */ .onLinha.onEu .onDot{ background:#9fb0c8; box-shadow:0 0 6px #9fb0c8; } /* ===================== MOBILE / TOUCH (ui/touch.js) ===================== Only meaningful on touch devices. `touch-action:manipulation` kills the ~300ms tap delay and double-tap zoom on controls; the canvas gets touch-action:none so dragging/long-pressing it doesn't scroll or pop the native callout. The D-pad is the only on-screen addition (walk in the city); it is shown by ui/touch.js only while the game HUD is up. */ #menubar button, .nbTile, .nbMini, .dpBtn, .spBtn, .cdEnviar, .lgBt, .mini2, .hChip, .mkAba, .pjCard, .pcItem{ touch-action:manipulation; } html.touch #stage{ touch-action:none; -webkit-touch-callout:none; } #dpad{ position:fixed; right:14px; bottom:88px; z-index:7; width:144px; height:144px; display:none; opacity:.72; } .dpBtn{ position:absolute; width:48px; height:48px; border-radius:12px; background:rgba(18,21,29,.92); border:1px solid #2a3344; color:#cdd3df; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; touch-action:none; } .dpBtn.on{ background:rgba(253,183,26,.25); border-color:var(--y); color:var(--y); } .dpUp{ left:48px; top:0; } .dpDown{ left:48px; bottom:0; } .dpLeft{ left:0; top:48px; } .dpRight{ right:0; top:48px; } /* ---------- escolher personagem ---------- */ /* character picker: a MODAL over the login screen, not its own opaque page. The translucent, blurred scrim lets the login screen show through behind it, so login + character select read as one screen (see ui/chars.js). */ #telaPJ{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(6,8,12,.74); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } #telaPJ .telaCx{ box-shadow:0 24px 70px rgba(0,0,0,.6); } #telaPJ.sai{ opacity:0; transition:opacity .4s ease; pointer-events:none; } /* `overflow:auto` valia para os DOIS eixos, e o .pjCard abaixo anda 2px para a direita no hover (transform:translateX). Dois pixels bastam: o navegador conclui que o conteúdo não cabe na horizontal e acende uma barra de rolagem lateral embaixo da lista — numa coluna de cartões que nunca teve o que rolar para o lado. A rolagem vertical é real e fica. A horizontal some, e o respiro de 3px à direita dá ao hover o espaço que ele pede, para o deslize não ser cortado pela borda. */ .pjGrade{ display:flex; flex-direction:column; gap:7px; margin-bottom:4px; max-height:40vh; overflow-y:auto; overflow-x:hidden; padding-right:3px; } .pjCard{ position:relative; display:flex; align-items:center; gap:11px; background:#0a0f17; border:1px solid #28303f; border-radius:10px; padding:8px 38px 8px 10px; cursor:pointer; transition:border-color .15s, transform .1s; } .pjCard:hover{ border-color:var(--y); transform:translateX(2px); } .pjSprite{ image-rendering:pixelated; flex:0 0 48px; width:48px; height:56px; object-fit:contain; } .pjInfo{ display:flex; flex-direction:column; gap:2px; min-width:0; } .pjNome{ font:700 15px/1.2 var(--font); color:#e7e9ee; } .pjSub{ font-size:11.5px; color:#7d8697; } /* escolher o corpo na criação: bonecos, não uma lista de nomes */ .pjBases{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; } .pjBase{ background:#0a0f17; border:1px solid #28303f; border-radius:10px; padding:6px 2px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; transition:border-color .15s, background .15s; } .pjBase img{ image-rendering:pixelated; width:44px; height:52px; object-fit:contain; } .pjBase span{ font-size:10px; color:#7d8697; letter-spacing:.3px; } .pjBase:hover{ border-color:#3f4a5e; } .pjBase.on{ border-color:var(--y); background:rgba(253,183,26,.07); } .pjBase.on span{ color:var(--y); } /* o ✕ só aparece no hover do cartão: apagar personagem não é uma ação que deva estar sempre à mão, mas esconder num menu seria pior */ .pjApagar{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#4d5668; font-size:15px; cursor:pointer; padding:4px 7px; border-radius:7px; opacity:0; transition:opacity .15s, color .15s; } .pjCard:hover .pjApagar{ opacity:1; } .pjApagar:hover{ color:#ff6b6b; background:rgba(255,107,107,.1); } #pjBase{ width:100%; background:#0a0f17; border:1px solid #28303f; border-radius:10px; color:#e7e9ee; padding:11px 13px; font:inherit; font-size:14px; } #pjBase:focus{ outline:none; border-color:var(--y); box-shadow:0 0 0 3px rgba(253,183,26,.12); } /* ---------- login ---------- */ .lgCampo{ margin-bottom:13px; } .lgCampo label{ display:block; font-size:10.5px; letter-spacing:.9px; text-transform:uppercase; color:#8b93a5; margin-bottom:5px; font-weight:700; } .lgCampo input{ width:100%; background:#0a0f17; border:1px solid #28303f; border-radius:10px; padding:11px 13px; color:var(--tx); font:inherit; font-size:14px; transition:border-color .15s; } .lgCampo input:focus{ outline:none; border-color:var(--y); box-shadow:0 0 0 3px rgba(253,183,26,.12); } .lgCampo input::placeholder{ color:#4d5668; } .lgBt{ width:100%; margin-top:6px; background:var(--y); color:#1a1405; border:none; border-radius:10px; padding:13px; font:700 14.5px/1 var(--font); letter-spacing:.6px; cursor:pointer; box-shadow:0 6px 20px rgba(253,183,26,.25); transition:transform .1s, box-shadow .15s; } .lgBt:hover{ box-shadow:0 8px 26px rgba(253,183,26,.38); } .lgBt:active{ transform:translateY(1px); } .lgBt:disabled{ opacity:.55; cursor:default; box-shadow:none; } .lgErro{ min-height:18px; margin-top:9px; font-size:12.5px; color:#ff8484; text-align:center; } .lgNota{ margin-top:18px; padding-top:15px; border-top:1px solid #1e2531; font-size:11.5px; line-height:1.5; color:#6b7385; text-align:center; } .lgNota b{ color:#8b93a5; } .lgTrocar{ background:none; border:none; color:#7fd0ff; font:inherit; font-size:12px; cursor:pointer; padding:0; text-decoration:underline; } /* ---------- carregamento ---------- */ .cgOrbe{ width:92px; height:92px; margin:0 auto 24px; position:relative; } .cgOrbe::before, .cgOrbe::after{ content:""; position:absolute; border-radius:50%; } /* o núcleo: pulsa no ritmo de uma respiração, não de um alarme */ .cgOrbe::before{ inset:19px; background:radial-gradient(circle at 38% 32%, #fff, var(--y) 42%, #d88f00 72%); box-shadow:0 0 34px rgba(253,183,26,.75), 0 0 68px rgba(253,183,26,.35); animation:cgPulso 1.7s ease-in-out infinite; } /* o anel: gira sozinho e dá a sensação de progresso mesmo parado */ .cgOrbe::after{ inset:0; border:2px solid transparent; border-top-color:var(--y); border-right-color:rgba(253,183,26,.28); animation:cgGira 1.15s linear infinite; } @keyframes cgPulso{ 0%,100%{ transform:scale(1); opacity:.92 } 50%{ transform:scale(1.14); opacity:1 } } @keyframes cgGira{ to{ transform:rotate(360deg) } } /* ---------- A BARRA DE PROGRESSO ---------- Ela anima por `transform: scaleX`, não por `width`, e isso é o detalhe que faz a diferença: largura é recalculada pela thread principal, e a thread principal fica TRAVADA durante a leitura do mapa (29 MB de .otbm decodificados de uma vez). Resultado antigo: a barra parava no meio e parecia que o jogo tinha morrido. `transform` é animado pelo compositor, fora da thread principal. A barra continua deslizando durante o congelamento — que é exatamente quando o jogador mais precisa ver que algo está acontecendo. */ .cgBarra{ height:5px; background:#141a24; border-radius:4px; overflow:hidden; margin:20px 0 11px; position:relative; } .cgBarra>div{ position:absolute; inset:0; border-radius:4px; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg, #d88f00, var(--y), #ffe79a); box-shadow:0 0 12px rgba(253,183,26,.55); transition:transform .5s linear; will-change:transform; } /* brilho correndo por cima: prova de vida que também roda no compositor */ .cgBarra::after{ content:""; position:absolute; inset:0; border-radius:4px; pointer-events:none; background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); width:38%; transform:translateX(-120%); animation:cgBrilho 1.25s ease-in-out infinite; } @keyframes cgBrilho{ to{ transform:translateX(380%) } } .cgMsg{ text-align:center; font-size:12.5px; color:#8b93a5; min-height:19px; } /* `transition` na opacidade: o boot.js apaga a frase, troca o texto e a acende de novo. Sem a transição a troca seria um salto — e um salto de texto numa tela de espera lê como falha, não como vida. */ .cgDica{ transition:opacity .26s ease; margin-top:20px; padding-top:15px; border-top:1px solid #1e2531; font-size:11.5px; line-height:1.55; color:#5f6878; text-align:center; } .cgDica b{ color:#8b93a5; } /* os seletores de arquivo só aparecem na primeira vez; não são o normal */ #loadInputs{ margin-top:22px; padding-top:18px; border-top:1px solid #1e2531; text-align:left; } #loadInputs .row label{ width:76px; font-size:11.5px; color:#8b93a5; } /* ---------- a faixa do carregamento ---------- O GIF é 1600×560 (quase 3:1), então ele cabe como FAIXA, não como fundo. `cover` com a posição um pouco abaixo do centro mostra o Goku e corta o topo, onde está a assinatura do autor. As duas máscaras existem porque a arte é rosa-clara e o cartão é escuro: sem elas ela aparece como um retângulo colado. A de baixo dissolve a borda inferior no cartão; a lateral apaga as pontas. */ .cgArte{ position:relative; height:128px; margin:-10px -30px 4px; overflow:hidden; background:url("../../assets/huds/loading.gif") 50% 58%/cover no-repeat; image-rendering:pixelated; } .cgArte::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,16,22,.55) 0%, transparent 28%, transparent 58%, rgba(13,16,22,.98) 100%), linear-gradient(90deg, rgba(13,16,22,.9) 0%, transparent 16%, transparent 84%, rgba(13,16,22,.9) 100%); } /* o jogo roda em pixel art; a faixa combina mais com borda dura que com sombra suave */ .cgArte::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:1; background:linear-gradient(90deg, transparent, rgba(253,183,26,.55), transparent); } /* ---------- entrar com outro serviço ---------- */ .lgOu{ display:flex; align-items:center; gap:11px; margin:19px 0 15px; color:#5f6878; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; } .lgOu::before, .lgOu::after{ content:""; flex:1; height:1px; background:#1e2531; } .lgSocial{ display:flex; flex-direction:column; gap:9px; } .lgSoc{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px; border-radius:10px; border:1px solid #2a3242; background:#121823; color:var(--tx); font:600 13.5px/1 var(--font); cursor:pointer; transition:border-color .14s, background .14s; } .lgSoc:hover:not(:disabled){ background:#18202d; border-color:#3a4557; } .lgSoc:disabled{ opacity:.45; cursor:not-allowed; } .lgSoc .mk{ width:19px; height:19px; border-radius:5px; display:flex; align-items:center; justify-content:center; font:800 11px/1 var(--font); flex:0 0 auto; } .lgSoc.google .mk{ background:#fff; color:#4285f4; } .lgSoc.discord .mk{ background:#fff; color:#5865f2; font-size:10px; } .lgPorque{ margin-top:9px; font-size:11px; line-height:1.5; color:#6b7385; text-align:center; } /* ===================================================================== O FUNDO DAS TELAS DE ENTRADA — assets/huds/background.png Três decisões, e cada uma resolve um problema que a arte crua teria: 1. O CARTÃO VAI PARA A DIREITA em tela larga. A Kame House fica à esquerda do quadro; cartão centralizado cobriria justamente o assunto da imagem. Em tela estreita ele volta ao centro, porque aí não há espaço para os dois. 2. UM VÉU ESCURO À DIREITA, não na imagem toda. Escurecer tudo apagaria a arte; escurecer só onde o cartão fica dá contraste para o texto e deixa a ilha intacta. 3. AS PARTÍCULAS SOMEM. Elas existiam para o fundo preto não ficar morto. Com arte de verdade, viram sujeira. ===================================================================== */ #telaLogin .telaFundo, #loadOverlay .telaFundo{ background:url("../../assets/huds/background.png") 50% 42%/cover no-repeat #05070b; /* A ampliação empurra o canto inferior-direito para fora do quadro — é onde a arte traz a assinatura do autor, e ela brigava com o cartão. O deslocamento para cima e para a esquerda garante que esse canto saia inteiro, em vez de ficar meio cortado. O crédito não se perde: ele está em .telaCredito, no canto livre, e fica mais legível ali do que estava na própria imagem. */ transform:scale(1.22) translate(-2.2%, -2.8%); transform-origin:center; } #telaLogin .telaFundo::after, #loadOverlay .telaFundo::after{ /* véu: forte onde o cartão fica, quase nulo sobre a ilha. O de baixo é leve e serve só para a assinatura do artista não brigar com a borda da tela. */ background-image: linear-gradient(90deg, rgba(5,7,11,.30) 0%, rgba(5,7,11,.10) 34%, rgba(5,7,11,.72) 76%, rgba(5,7,11,.90) 100%), linear-gradient(180deg, rgba(5,7,11,.45) 0%, transparent 26%, transparent 74%, rgba(5,7,11,.55) 100%); animation:none; /* sem flutuação: a arte é parada */ } /* o cartão encosta à direita quando há largura para isso */ @media (min-width:980px){ #telaLogin, #loadOverlay{ justify-content:flex-end; padding-right:7vw; } } /* com fundo ilustrado o cartão precisa de mais peso para não boiar */ #telaLogin .telaCx, #loadOverlay .telaCx{ background:linear-gradient(180deg, rgba(14,18,26,.93), rgba(8,11,16,.96)); backdrop-filter:blur(9px); border-color:#333d4f; box-shadow:0 30px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07); } /* crédito do artista, discreto e sempre visível */ .telaCredito{ position:absolute; left:16px; bottom:12px; z-index:2; font-size:10px; letter-spacing:.5px; color:rgba(255,255,255,.34); } .telaCredito a{ color:inherit; text-decoration:none; } .telaCredito a:hover{ color:rgba(255,255,255,.6); } /* O quadradinho da marca aceita as duas formas: a letra de reserva ou o SVG oficial. Quando o arquivo existe, o fundo colorido some — a marca do Google tem fundo branco por norma, e a do Discord é o roxo dela. */ .lgSoc .mk img{ width:100%; height:100%; object-fit:contain; display:block; } .lgSoc .mk:has(img){ background:transparent; } /* ===================================================================== A TELA DA ÁRVORE DE TALENTOS Ela cresceu para 350 nós e 2.600 pontos — num cartão de 720px era preciso ficar dando zoom para enxergar qualquer coisa. Agora ocupa a janela: cabeçalho fino, dica fina, e todo o resto é mapa. O canvas não tem tamanho no HTML de propósito. Tamanho fixo com `max-width:100%` estica a imagem por CSS e borra tudo; aqui o buffer de desenho é ajustado em JavaScript ao tamanho real do elemento, já multiplicado pela densidade da tela. ===================================================================== */ .card.telaCheia{ width:min(1600px, 97vw); height:94vh; padding:0; display:flex; flex-direction:column; overflow:hidden; } .tvTopo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid #20242f; background:#0f1218; flex:0 0 auto; } .tvTopo h2::after{ content:none; } .tvLeg{ display:flex; align-items:center; gap:6px; font-size:11px; color:#6b7385; } .tvLeg i{ width:13px; height:13px; border:2px solid; display:inline-block; } /* o mapa toma toda a altura que sobrar */ .tvMapa{ flex:1 1 auto; min-height:0; position:relative; background:radial-gradient(circle at 50% 45%, #141b28, #080a0f 72%); } .tvMapa canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; } .tvMapa canvas:active{ cursor:grabbing; } /* ---------- a tabela de talentos no Perfil ---------- Três colunas numa grade, e não um flex por linha, porque a leitura que importa é VERTICAL: os bônus alinhados um sob o outro deixam comparar onde o investimento foi parar. Em linhas independentes cada valor começaria numa coluna diferente e a comparação se perderia. */ .profTal{ display:grid; grid-template-columns:auto auto 1fr; gap:3px 12px; align-items:baseline; background:#0c1016; border:1px solid #1e2430; border-radius:10px; padding:11px 13px; } .profTal .pTal{ display:contents; } .profTal .k{ color:#8b93a5; font-size:12.5px; } .profTal b{ font-variant-numeric:tabular-nums; font-size:13px; text-align:right; } .profTal b.on{ color:#5fd08a; } .profTal b.off{ color:#4a5468; } .profTal small{ color:#6c7488; font-size:11.5px; } /* ===================== PONTOS DE TALENTO ===================== O número que o jogador precisa ver o tempo todo nesta tela é "quantos eu tenho para gastar". Ele vivia no cabeçalho, dentro de uma frase corrida, em 11px cinza, ao lado de "arraste para mover" — do mesmo tamanho e da mesma cor de uma dica de navegação. Aqui ele é um painel ancorado sobre o mapa: fica no lugar enquanto a árvore é arrastada e ampliada, e o DISPONÍVEIS tem corpo de número, não de legenda. Gastos e ganhos ficam abaixo, menores — são contexto, não decisão. */ .tvPontos{ position:absolute; left:14px; top:14px; z-index:3; pointer-events:none; background:linear-gradient(180deg,rgba(19,23,32,.96),rgba(11,14,20,.97)); border:1px solid #2f3a52; border-radius:12px; padding:10px 14px 11px; box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); } .tvPontos .tvpLbl{ font-size:9.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:#6c7488; } .tvPontos .tvpNum{ font:700 30px/1 var(--font); color:var(--y); text-shadow:0 0 18px rgba(253,183,26,.35); margin:2px 0 7px; } .tvPontos .tvpNum.zero{ color:#5b6274; text-shadow:none; } .tvPontos .tvpSub{ display:flex; gap:12px; font-size:11px; color:#8b93a5; border-top:1px solid #222a37; padding-top:7px; } .tvPontos .tvpSub b{ color:#cfd6e4; font-weight:600; } /* ===================== FICHA DO TALENTO (segue o mouse) ===================== O formato é o do Digimon World: barra de título com o nome, e abaixo uma linha por grandeza, rótulo à esquerda e valor à direita. A vantagem sobre a frase corrida de antes não é estética — é que uma TABELA se compara. Passando de um nó para outro, os números trocam no mesmo lugar da tela, e dá para ver qual rende mais sem reler nada. Os números saem do `eff` do nó, não do texto do `desc`. O código antigo calculava o valor atual com uma expressão regular por cima da frase ("+0.281% de dano por rank"), multiplicando cada número que encontrasse pelo rank — o que também multiplicava qualquer número que aparecesse na frase por outro motivo. */ .tvCard{ position:absolute; z-index:6; width:252px; pointer-events:none; background:linear-gradient(180deg,rgba(17,21,30,.98),rgba(10,13,19,.98)); border:1px solid #39425a; border-radius:11px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.65); font-size:12px; } .tvcTopo{ display:flex; align-items:center; gap:7px; padding:8px 11px; font-weight:700; font-size:13.5px; color:#0d1016; text-shadow:0 1px 0 rgba(255,255,255,.25); } .tvcTopo .tvcIco{ font-size:15px; } /* a arte vem em 420px e é desenhada a 22 — `pixelated` seria o certo para pixel art em escala INTEIRA, mas aqui a redução é de 19×, e nessa proporção ela vira ruído. A suavização é o que mantém a silhueta. */ .tvcTopo .tvcArte{ width:22px; height:22px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); } .tvcTipo{ padding:5px 11px; font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#7b8499; background:rgba(255,255,255,.03); border-bottom:1px solid #222a37; } .tvcLinhas{ padding:7px 11px 8px; display:flex; flex-direction:column; gap:4px; } .tvcL{ display:flex; align-items:baseline; gap:8px; } .tvcL .k{ flex:1; min-width:0; color:#8b93a5; } /* o valor em fonte tabular: trocando de nó, as casas não dançam */ .tvcL .v{ color:#e7e9ee; font-weight:700; font-variant-numeric:tabular-nums; } .tvcL .v.mais{ color:#5fd08a; } .tvcSeta{ color:#4a5468; } .tvcRodape{ padding:7px 11px 9px; border-top:1px solid #222a37; font-size:11.5px; } .tvcBarra{ height:4px; border-radius:3px; background:#1b2130; margin:7px 0 0; overflow:hidden; } .tvcBarra i{ display:block; height:100%; background:linear-gradient(90deg,#FDB71A,#ffd76f); } .tvDica{ flex:0 0 auto; padding:9px 14px; border-top:1px solid #20242f; background:#0f1218; min-height:34px; display:flex; align-items:center; } /* o .close global usa float:right, que não faz sentido dentro de um flex */ .tvTopo .close{ float:none; } /* ===================================================================== O MENU DA TELA DE LOGIN (ui/login.js) Fica na borda ESQUERDA, fora da caixa de login, por uma razão de atenção: a caixa é para quem já decidiu entrar, e tudo que compete com ela ali dentro atrasa a única coisa que a pessoa veio fazer. Na lateral, o guia fica à vista de quem ainda está decidindo — que é o público dele — sem empurrar o formulário para baixo da dobra. Some abaixo de 980px: em tela estreita ele cobriria a caixa de login. Lá o guia continua acessível pelos botões abaixo do formulário. ===================================================================== */ #lgMenu{ position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:7; width:214px; display:flex; flex-direction:column; gap:4px; padding:12px 10px 11px; background:linear-gradient(180deg,rgba(20,24,32,.93),rgba(11,13,18,.93)); border:1px solid #3a3320; border-radius:14px; box-shadow:0 0 0 1px rgba(253,183,26,.08), 0 10px 32px rgba(0,0,0,.55); } #lgMenu .lgMenuTit{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#6b7385; padding:2px 8px 8px; border-bottom:1px solid rgba(253,183,26,.14); margin-bottom:6px; } .lgMenuBt{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:9px; padding:9px 10px; color:#aab2c0; font:600 13px/1.1 var(--font); cursor:pointer; transition:background .12s, color .12s, border-color .12s; } .lgMenuBt:hover{ background:rgba(253,183,26,.07); border-color:rgba(253,183,26,.3); color:#e7e9ee; } .lgMenuBt .ico{ width:20px; text-align:center; font-size:15px; flex:0 0 auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); } .lgMenuBt .n{ margin-left:auto; font-size:10.5px; color:#5c6578; background:#12151d; border-radius:20px; padding:2px 7px; font-variant-numeric:tabular-nums; } .lgMenuSep{ height:1px; background:rgba(253,183,26,.14); margin:6px 4px; } /* a bolinha de "tem nota nova" — o único enfeite que pisca, e só quando há mesmo o que ler */ .lgMenuBt .novo{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--y); box-shadow:0 0 7px var(--y); animation:lgPisca 1.9s infinite; } @keyframes lgPisca{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } } @media (max-width:980px){ #lgMenu{ display:none; } } /* ===================================================================== A WIKI (ui/wiki.js) Três zonas: capa com busca em cima, categorias à esquerda, conteúdo no meio. É a forma de qualquer site de documentação, e é assim de propósito — o jogador já sabe usar essa forma sem aprender nada. ===================================================================== */ .wkFundo{ position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; padding:26px; background:rgba(4,6,10,.82); backdrop-filter:blur(3px); } .wkCx{ width:min(1180px,100%); height:min(860px,100%); display:flex; flex-direction:column; background:#0d1016; border:1px solid #2a2f3d; border-radius:16px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6); } /* ---- capa ---- */ .wkCapa{ position:relative; display:flex; gap:26px; align-items:flex-start; justify-content:space-between; flex:0 0 auto; padding:22px 26px 20px; background: radial-gradient(1200px 180px at 15% 0%, rgba(253,183,26,.10), transparent 70%), linear-gradient(180deg,#141822,#0f131b); border-bottom:1px solid #222a37; } .wkOlho{ font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--y); } .wkTitulo{ margin:5px 0 0; font:800 30px/1 var(--font); letter-spacing:3px; color:#e7e9ee; } .wkTitulo span{ color:var(--y); } .wkLead{ margin:9px 0 0; max-width:48ch; color:#8b93a5; font-size:13px; } .wkStats{ display:flex; gap:26px; margin:16px 0 0; } .wkStats div{ display:flex; flex-direction:column; gap:2px; } .wkStats b{ font:800 19px/1 var(--font); color:#e7e9ee; font-variant-numeric:tabular-nums; } .wkStats i{ font-style:normal; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6b7385; } .wkBusca{ flex:0 0 330px; max-width:330px; padding-right:40px; } .wkBusca label{ display:block; font-size:11px; color:#8b93a5; margin:0 0 6px; } .wkBusca input{ width:100%; background:#0a0d13; border:1px solid #2a3140; border-radius:10px; padding:11px 12px; color:#e7e9ee; font-size:13px; outline:none; } .wkBusca input:focus{ border-color:rgba(253,183,26,.55); box-shadow:0 0 0 3px rgba(253,183,26,.09); } .wkFechar{ position:absolute; right:18px; top:18px; width:32px; height:32px; background:#141822; border:1px solid #2d3443; border-radius:9px; color:#8b93a5; cursor:pointer; font-size:14px; line-height:1; } .wkFechar:hover{ color:#e7e9ee; border-color:#4a5468; } /* ---- miolo ---- */ .wkMiolo{ flex:1; min-height:0; display:flex; } .wkLado{ flex:0 0 226px; border-right:1px solid #1d2430; padding:16px 12px; overflow:auto; background:#0b0e14; } .wkLadoTit{ font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; color:#5c6578; padding:0 8px 10px; } .wkCat{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; border:1px solid transparent; border-radius:9px; padding:9px 10px; color:#8b93a5; font:600 13px/1.1 var(--font); cursor:pointer; } .wkCat:hover{ background:#111620; color:#e7e9ee; } .wkCat.on{ background:linear-gradient(90deg,rgba(253,183,26,.13),rgba(253,183,26,.03)); border-color:rgba(253,183,26,.35); color:#fff; } .wkCatIco{ width:18px; text-align:center; } .wkCatNm{ flex:1; min-width:0; } .wkCatN{ font-size:10.5px; color:#5c6578; background:#12151d; border-radius:20px; padding:2px 7px; font-variant-numeric:tabular-nums; } .wkCat.on .wkCatN{ color:var(--y); background:rgba(253,183,26,.12); } .wkConteudo{ flex:1; min-width:0; overflow:auto; padding:22px 26px 34px; } .wkCabeca{ margin:0 0 18px; } .wkCabeca h2{ margin:4px 0 0; font:800 23px/1.15 var(--font); color:#e7e9ee; } .wkMigalha{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:#5c6578; } .wkConta{ font:600 11.5px/1 var(--font); color:#6b7385; margin-left:8px; } /* ---- cartões de artigo ---- */ .wkCards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(282px,1fr)); gap:13px; } .wkArt{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; text-align:left; background:#11151e; border:1px solid #232b39; border-radius:12px; padding:16px 16px 14px; color:#e7e9ee; cursor:pointer; transition:border-color .12s, transform .08s, background .12s; } .wkArt:hover{ border-color:rgba(253,183,26,.42); background:#141926; transform:translateY(-1px); } .wkArt h3{ margin:0; font:700 15px/1.25 var(--font); } .wkArt p{ margin:0; font-size:12.5px; line-height:1.5; color:#8b93a5; } .wkLer{ margin-top:4px; font:600 11.5px/1 var(--font); color:var(--y); } .wkVazio{ color:#8b93a5; font-size:13px; } /* ---- o artigo aberto ---- */ .wkVoltar{ background:#141822; border:1px solid #2d3443; border-radius:9px; padding:7px 12px; color:#8b93a5; font:600 12px/1 var(--font); cursor:pointer; margin:0 0 16px; } .wkVoltar:hover{ color:#e7e9ee; border-color:#4a5468; } .wkArtigo{ max-width:78ch; } .wkArtigo h2{ margin:5px 0 0; font:800 26px/1.2 var(--font); color:#e7e9ee; } .wkResumo{ margin:9px 0 20px; color:#8b93a5; font-size:13.5px; line-height:1.55; padding-bottom:16px; border-bottom:1px solid #1d2430; } /* ---- o texto dos artigos ---- */ .wkTexto{ font-size:13.5px; line-height:1.68; color:#c3c9d6; } .wkIntro{ margin:0 0 16px; font-size:14.5px; line-height:1.65; color:#dfe3ea; } .wkP{ margin:0 0 14px; } .wkH{ margin:24px 0 10px; font:700 15px/1.2 var(--font); color:var(--y); letter-spacing:.4px; } .wkTexto b{ color:#e7e9ee; } .wkNota{ margin:18px 0 0; padding:11px 13px; border-left:3px solid rgba(253,183,26,.5); background:rgba(253,183,26,.05); border-radius:0 8px 8px 0; font-size:12.5px; color:#9aa2b2; } .wkPassos{ margin:0 0 16px; padding-left:20px; } .wkPassos li{ margin:0 0 9px; } .wkGrade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:11px; margin:0 0 16px; } .wkCard{ background:#11151e; border:1px solid #232b39; border-radius:11px; padding:13px 14px; } .wkCard h4{ margin:0 0 6px; font:700 13px/1.2 var(--font); color:var(--y); } .wkCard p{ margin:0; font-size:12.5px; line-height:1.55; color:#8b93a5; } .wkChips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; } .wkChip{ background:#141922; border:1px solid #2a3140; border-radius:20px; padding:4px 11px; font-size:11.5px; color:#9aa2b2; text-transform:capitalize; } .wkSelos{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 16px; } .wkSelo{ display:flex; flex-direction:column; gap:1px; background:#11151e; border:1px solid #232b39; border-radius:10px; padding:8px 14px; } .wkSelo i{ font-style:normal; font-size:9.5px; letter-spacing:1.1px; text-transform:uppercase; color:#5c6578; } .wkSelo b{ font:700 15px/1.1 var(--font); color:#e7e9ee; } .wkTab{ width:100%; border-collapse:collapse; margin:0 0 16px; font-size:12.5px; } .wkTab th{ text-align:left; padding:8px 10px; font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; color:#6b7385; border-bottom:1px solid #222a37; font-weight:600; } .wkTab td{ padding:8px 10px; border-bottom:1px solid #161c26; color:#c3c9d6; } .wkTab tr:last-child td{ border-bottom:none; } .wkTab tbody tr:hover td{ background:#101520; } .wkTab .wkEvo td{ background:rgba(253,183,26,.035); } .wkFicha{ display:flex; align-items:center; gap:16px; margin:0 0 18px; } .wkFicha img{ width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.6)); } @media (max-width:860px){ .wkFundo{ padding:0; } .wkCx{ height:100%; border-radius:0; } .wkCapa{ flex-direction:column; gap:14px; padding:18px 18px 16px; } .wkBusca{ flex:1 1 auto; max-width:none; padding-right:0; width:100%; } .wkMiolo{ flex-direction:column; } .wkLado{ flex:0 0 auto; border-right:none; border-bottom:1px solid #1d2430; display:flex; gap:6px; overflow-x:auto; padding:10px; } .wkLadoTit{ display:none; } .wkCat{ width:auto; white-space:nowrap; } .wkConteudo{ padding:16px 16px 26px; } } /* ===================================================================== AS NOVIDADES (ui/changelog.js) Um pergaminho, não um painel: esta é a única tela do jogo que o jogador lê de cabo a rabo, e a leitura agradece fundo claro e linha curta. O resto do jogo é escuro; aqui a troca é de propósito. ===================================================================== */ .clFundo{ position:fixed; inset:0; z-index:45; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(4,6,10,.84); backdrop-filter:blur(3px); } .clCx{ width:min(680px,100%); max-height:min(760px,100%); display:flex; flex-direction:column; background:#f4e4c1; color:#3a2a16; border:2px solid #8a6a32; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.3); } .clTopo{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:linear-gradient(180deg,#e9d4a6,#e0c892); border-bottom:2px solid #8a6a32; } .clTopoTit{ font:800 12px/1 var(--font); letter-spacing:2px; text-transform:uppercase; color:#6b4f22; } .clX{ width:30px; height:30px; background:#d9c08a; border:2px solid #8a6a32; border-radius:8px; color:#6b4f22; font-size:14px; line-height:1; cursor:pointer; } .clX:hover{ background:#c9ab6d; } .clCorpo{ flex:1; min-height:0; overflow:auto; padding:18px 22px 22px; } .clVersao + .clVersao{ margin-top:26px; padding-top:22px; border-top:2px dashed #c9ab6d; } .clOlho{ font:700 9.5px/1 var(--font); letter-spacing:1.6px; text-transform:uppercase; color:#9a7a3c; } /* alinhado pelo TOPO: o título de uma nota boa tem duas linhas, e com `center` o selo da versão flutuava no meio delas */ .clCab{ display:flex; align-items:flex-start; gap:10px; margin:8px 0 2px; } .clCab .clV{ margin-top:4px; } .clNome{ margin:0; font:800 21px/1.2 var(--font); color:#2f2210; letter-spacing:.5px; } .clV{ font:700 11px/1 var(--font); color:#6b4f22; background:#e3cb9a; border:1px solid #b9924f; border-radius:20px; padding:4px 9px; white-space:nowrap; } .clData{ font-size:12px; color:#8a6a32; margin:0 0 14px; } .clHa{ background:#d6b878; border:1px solid #b9924f; border-radius:5px; padding:1px 7px; font-weight:700; color:#4a3617; margin-left:4px; } .clSec{ margin:0 0 14px; } .clSecTit{ display:flex; align-items:center; gap:8px; margin:0 0 7px; font:800 11.5px/1 var(--font); letter-spacing:1.4px; text-transform:uppercase; color:#6b4f22; padding-bottom:6px; border-bottom:1px solid #d6bd8a; } .clSecTit span{ font-size:14px; } .clSecTit.novo{ color:#1f6b3a; border-color:#a9c9b0; } .clSecTit.ajuste{ color:#8a5a12; border-color:#d6bd8a; } .clSecTit.correcao{ color:#1d5a7a; border-color:#a7c4d4; } .clSecTit.aviso{ color:#8a2a1a; border-color:#d9aba1; } .clItens{ margin:0; padding-left:20px; } .clItens li{ margin:0 0 7px; font-size:13.5px; line-height:1.6; color:#4a3617; } .clItens li b{ color:#2f2210; } .clNada{ color:#8a6a32; font-size:13px; } .clRodape{ flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; background:linear-gradient(180deg,#e9d4a6,#e0c892); border-top:2px solid #8a6a32; } .clMudo{ display:flex; align-items:center; gap:7px; font-size:12px; color:#6b4f22; cursor:pointer; user-select:none; } .clMudo input{ width:15px; height:15px; accent-color:#8a6a32; cursor:pointer; } .clBotoes{ margin-left:auto; display:flex; gap:8px; } .clBt{ background:#e3cb9a; border:2px solid #8a6a32; border-radius:8px; padding:8px 14px; color:#4a3617; font:700 11.5px/1 var(--font); letter-spacing:1px; text-transform:uppercase; cursor:pointer; } .clBt:hover{ background:#d6b878; } .clBt.forte{ background:#b4342a; border-color:#7a2019; color:#f7e6c8; } .clBt.forte:hover{ background:#c94236; } /* --------------------------------------------------------------------- A ESCOLHA DE PERSONAGEM (categoria "Personagens" da wiki) Não é uma lista de artigos: é um seletor. Quem abre isto está decidindo em quem investir cem horas, e a única pergunta que importa é "no que ele se transforma, e quando?". Por isso o cartão é o retrato mais a LINHA DE FORMAS, e o número embaixo de cada peça é o nível em que ela abre — o que diz quanto tempo falta para a forma que a pessoa quer. A cor avança ao longo da linha (cinza → amarelo → vermelho → violeta). Não é enfeite: é o que faz a progressão ser lida de relance, sem contar peças nem ler número nenhum. --------------------------------------------------------------------- */ .wkPjs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(392px,1fr)); gap:13px; } .wkPjCard{ display:block; width:100%; text-align:left; background:#11151e; border:1px solid #232b39; border-radius:12px; padding:14px 14px 12px; color:#e7e9ee; cursor:pointer; transition:border-color .12s, background .12s, transform .08s; } .wkPjCard:hover{ border-color:rgba(253,183,26,.42); background:#141926; transform:translateY(-1px); } .wkPjTopo{ display:flex; align-items:center; gap:12px; margin:0 0 11px; } .wkPjTopo img{ width:46px; height:46px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.6)); } .wkPjTopo h3{ margin:0; font:700 16px/1.2 var(--font); } .wkPjTopo span{ font-size:11.5px; color:#6b7385; } /* a fileira QUEBRA em vez de rolar. Rolar de lado escondia metade das formas de Goku atrás de um arrasto que ninguém adivinha que existe — e ver a linha inteira de uma vez é a razão de esta tela existir. */ .wkFormas{ display:flex; flex-wrap:wrap; gap:5px; padding:1px 1px 2px; } .wkForma{ position:relative; flex:0 0 auto; width:62px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px 5px; background:#0b0e14; border:1px solid #232b39; border-radius:9px; overflow:hidden; } /* a tarja de cor em cima da peça: o degradê da linha inteira */ .wkFmTopo{ position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); } .wkFmNm{ font:700 9.5px/1.25 var(--font); color:#dfe3ea; text-align:center; min-height:24px; display:flex; align-items:center; } .wkFmLv{ font:700 11px/1 var(--font); color:var(--c); font-variant-numeric:tabular-nums; } .wkFmTipo{ font-size:9px; color:#6b7385; min-height:11px; } /* COM ARTE: a peça fica do tamanho do retrato (64px) e o nome encolhe — quando há o boneco, é ele que identifica a forma, e o nome vira legenda. Sem arte, o nome É a identificação e precisa do espaço. */ .wkForma.temArte{ width:72px; padding-top:9px; } .wkFmArte{ display:block; image-rendering:pixelated; background-repeat:no-repeat; margin:0 0 1px; } .wkForma.temArte .wkFmNm{ font-size:8.5px; min-height:20px; line-height:1.15; } /* na página do personagem as peças são maiores e cabem mais nomes */ .wkFormas.g{ gap:7px; padding-bottom:4px; } .wkFormas.g .wkForma{ width:96px; padding:10px 6px 7px; } .wkFormas.g .wkForma.temArte{ width:96px; } .wkFormas.g .wkForma.temArte .wkFmNm{ font-size:10px; min-height:26px; } .wkFormas.g .wkFmNm{ font-size:11px; min-height:30px; } .wkFormas.g .wkFmLv{ font-size:13px; } @media (max-width:860px){ .wkPjs{ grid-template-columns:1fr; } } /* ===================== social / amigos ===================== */ #mSocial{ position:relative; } #mSocial.temNovidade::after{ content:""; position:absolute; top:5px; right:7px; width:9px; height:9px; border-radius:50%; background:#ff5b5b; box-shadow:0 0 0 2px #0b0d12; } #scCorpo{ display:flex; flex-direction:column; gap:10px; } .scBloco{ background:#0e121b; border:1px solid #232b39; border-radius:10px; padding:8px 10px; } .scTit{ font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--y); margin:0 0 6px; } .scRow{ display:flex; align-items:center; gap:8px; padding:6px 2px; border-top:1px solid #1b2230; } .scRow:first-child{ border-top:0; } .scNome{ font-weight:700; color:#e7e9ee; } .scTag{ font-size:11px; color:#8b93a5; } .scAcoes{ margin-left:auto; display:flex; gap:6px; } .scDot{ width:9px; height:9px; border-radius:50%; background:#49556e; flex:0 0 auto; } .scDot.on{ background:#5fd08a; box-shadow:0 0 6px rgba(95,208,138,.53); } .scBadge{ background:#ff5b5b; color:#fff; font-size:10px; font-weight:700; border-radius:9px; padding:1px 6px; } .scAdd{ display:flex; gap:6px; } .scAdd input, .scEnviar input{ flex:1; background:#0e121b; border:1px solid #2a3344; color:#e7e9ee; border-radius:8px; padding:9px 10px; font-size:13px; } .scErro{ font-size:12px; color:#ffb454; } .scErro:empty{ display:none; } .scConvTopo{ display:flex; align-items:center; gap:10px; margin-bottom:6px; } .scMsgs{ height:300px; max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:5px; background:#0b0d12; border:1px solid #232b39; border-radius:10px; padding:10px; } .scMsg{ max-width:78%; align-self:flex-start; background:#1a2030; border:1px solid #2a3344; border-radius:10px; padding:6px 9px; font-size:13px; line-height:1.35; } .scMsg.meu{ align-self:flex-end; background:#243018; border-color:#3a4a20; } .scTxt{ color:#e7e9ee; word-break:break-word; } .scHora{ display:block; font-size:9px; color:#6f7a90; text-align:right; margin-top:2px; } .scEnviar{ display:flex; gap:6px; margin-top:8px; } /* ---------- menu do botão direito num jogador (ui/social.js) ---------- Flutua sobre tudo, no cursor. Combina com a paleta dos painéis. */ .pcMenu{ position:fixed; z-index:9999; min-width:168px; background:#12151d; border:1px solid #2a3344; border-radius:10px; padding:5px; box-shadow:0 10px 30px rgba(0,0,0,.55); font-family:var(--font); } .pcMenu .pcNome{ font-size:11px; font-weight:700; color:var(--y); padding:5px 8px 6px; border-bottom:1px solid #232b39; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; } .pcMenu .pcItem{ display:block; width:100%; text-align:left; background:transparent; border:0; color:#e7e9ee; font-size:13px; font-weight:600; padding:8px 9px; border-radius:7px; cursor:pointer; } .pcMenu .pcItem:hover{ background:#1f2838; } /* ===================== TUTORIAL (ui/tutorial.js) ===================== Coach marks do primeiro login. Fica acima do jogo (z 150) e abaixo dos diálogos (z 200). O "buraco" é um retângulo com uma sombra gigante: ela escurece a tela TODA menos o próprio retângulo, acendendo o alvo. */ #tutWrap{ position:fixed; inset:0; z-index:150; } /* pega os cliques para o jogo não ser clicável atrás do tutorial */ #tutCatch{ position:absolute; inset:0; pointer-events:auto; } /* o recorte: a sombra enorme é o escurecimento de tudo em volta */ #tutHole{ position:absolute; border-radius:12px; pointer-events:none; box-shadow:0 0 0 9999px rgba(6,8,12,.72), 0 0 0 2px var(--y) inset; outline:2px solid var(--y); outline-offset:0; transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease; } /* passo central: não há alvo — escurece o próprio catcher e some o buraco */ #tutWrap.semAlvo #tutCatch{ background:rgba(6,8,12,.74); } #tutWrap.semAlvo #tutHole{ display:none; } #tutBalloon{ position:absolute; width:min(340px, 86vw); pointer-events:auto; background:linear-gradient(180deg,#141a24,#0d1118); border:1px solid #2f3a4d; border-radius:14px; padding:16px 16px 14px; color:#dfe4ec; box-shadow:0 20px 52px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05); transition:left .2s ease, top .2s ease; } #tutBalloon h4{ margin:0 0 7px; color:var(--y); font-size:16px; } #tutBalloon p{ margin:0 0 13px; font-size:13.5px; line-height:1.5; color:#c6cdd9; } .tutBtns{ display:flex; align-items:center; gap:10px; } .tutPasso{ font-size:11px; color:#6c7488; margin-right:auto; font-variant-numeric:tabular-nums; } .tutPular{ background:none; border:0; color:#8b93a5; cursor:pointer; font:inherit; font-size:12.5px; } .tutPular:hover{ color:#e7e9ee; } .tutProx{ background:var(--y); color:#15110a; border:0; border-radius:9px; padding:8px 17px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; } .tutProx:hover{ filter:brightness(1.07); } /* botão "Rever tutorial" no Perfil */ .tutRever{ background:rgba(253,183,26,.12); border:1px solid rgba(253,183,26,.4); color:var(--y); border-radius:9px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .tutRever:hover{ background:rgba(253,183,26,.2); } /* ===================== ANÚNCIO DO ADMIN (#anuncioBanner) ===================== Aviso do servidor na tela de TODOS (reinício, evento). Desce do topo, fica acima de tudo (inclusive diálogos) e some sozinho. */ #anuncioBanner{ position:fixed; top:-90px; left:50%; transform:translateX(-50%); z-index:210; max-width:min(680px, 92vw); display:flex; align-items:center; gap:10px; background:linear-gradient(180deg,#2a2410,#1b1608); border:1px solid var(--y); border-radius:12px; padding:11px 15px; color:#ffe9b0; box-shadow:0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); font:600 14px/1.45 var(--font); opacity:0; pointer-events:none; transition:top .35s ease, opacity .35s ease; } #anuncioBanner.on{ top:14px; opacity:1; pointer-events:auto; } #anuncioBanner .anIco{ font-size:18px; flex:0 0 auto; } #anuncioBanner .anTxt{ flex:1; } #anuncioBanner .anX{ background:none; border:0; color:#caa94e; font-size:19px; line-height:1; cursor:pointer; padding:0 2px; flex:0 0 auto; } #anuncioBanner .anX:hover{ color:#fff; } /* ===================== HUD SCALING (ui/uiscale.js) ===================== On a notebook or small monitor the HUD, sized for big screens, ate too much of the view. ui/uiscale.js sets a single `--ui` scale from the viewport; here we apply it to each HUD layer with transform:scale, so the whole interface shrinks to fit while the stays full resolution. Touch devices stay at 1 (they have their own mobile pass). transform-origin is chosen per layer so nothing drifts off-screen: · #menubar — top-left, and width is pre-divided by the scale so the bar still spans the full window after shrinking. · #bottomHud — bottom-center, so it stays pinned to the bottom edge. · #huntPanel / .hudWin — top-left; the draggable windows write left/top inline, and a top-left origin keeps the drag math 1:1. · .overlay .card — centered, since the modal is centered in its overlay. Default is 1, so with the script absent nothing changes. */ :root{ --ui:1; } #menubar{ transform-origin:0 0; transform:scale(var(--ui)); width:calc(100% / var(--ui)); } #bottomHud{ transform-origin:bottom center; transform:scale(var(--ui)); } #huntPanel{ transform-origin:top left; transform:scale(var(--ui)); } .hudWin{ transform-origin:top left; transform:scale(var(--ui)); } .overlay .card{ transform:scale(var(--ui)); } /* ===================== FECHAR FIXO NOS PAINÉIS ===================== Antes o .card inteiro rolava (ou, no tamanho padrão, transbordava a tela) e levava o botão "Fechar ✕" junto: num painel longo (Hunts, Mercado, Inventário, Perfil…) era preciso rolar tudo de volta ao topo só para fechar — e no tamanho padrão o botão sumia acima da tela, sem alcance. Agora o card NÃO rola: quem rola é só o corpo (#panelBody / #profileBody), e o Fechar fica parado no topo. Pega TODOS os painéis, de QUALQUER tamanho: · #panel — todos os de openPanel (Hunts, Mercado, Inventário, Treino, Admin, Itens, Poções, Ranking, Amigos, Online, Técnicas, VIP…), seja padrão, wide ou huge; · #profileOverlay — o Perfil, que é um modal próprio (#profileBody). A tela cheia dos Talentos (.telaCheia, #treeOverlay) fica de fora: ela já tem o fechar próprio numa barra fixa (.tvTopo .close). `max-height` também no tamanho padrão (que não tinha): sem ele, um painel alto crescia além da tela e o Fechar ficava fora de alcance. */ #panel > .card:not(.telaCheia), #profileOverlay > .card:not(.telaCheia){ display:flex; flex-direction:column; max-height:92vh; overflow:hidden; } #panel > .card:not(.telaCheia) > .close, #profileOverlay > .card:not(.telaCheia) > .close{ float:none; align-self:flex-end; flex:0 0 auto; margin-bottom:8px; } #panel > .card:not(.telaCheia) > #panelBody, #profileOverlay > .card:not(.telaCheia) > #profileBody{ flex:1 1 auto; min-height:0; overflow:auto; } /* ---- mercado: seletor de item COM IMAGEM (aba Anunciar) ---- Substitui o antigo