/* ============================================================ SKY — Isekai Forest Life estilo.css — UI retrô pixel-art, paleta de floresta bioluminescente O tema reage ao KARMA via [data-alinhamento] no : luz -> dourado de vaga-lume neutro -> verde de floresta trevas -> violeta/carmesim de bruxaria ============================================================ */ /* ---------- Paleta base ---------- */ :root{ --preto:#080b08; --noite:#0d140d; --noite2:#131e15; --musgo:#1b2a1f; --musgo2:#24372a; --casca:#3a2a1c; --casca-clara:#5a4530; --pergaminho:#ece0c4; --pergaminho2:#c9b88f; --apagado:#8a9a86; --verde:#74b85a; --verde-claro:#aee06f; --ambar:#f4c95d; --ouro:#ffd86b; --violeta:#a865dd; --carmesim:#e0556a; --azul:#5ec7d8; /* mana */ --sangue:#cf4040; /* vida */ --xp:#e8c24a; --borda-escura:#060a06; --borda-clara:#33503a; /* cor de destaque controlada pelo karma (default neutro) */ --acento:#74b85a; --acento-suave:#aee06f; --brilho:rgba(116,184,90,.55); --fonte-titulo:'Press Start 2P', 'Courier New', monospace; --fonte-corpo:'VT323', 'Courier New', monospace; --escala-px: pixelated; } /* Karma -> Luz */ body[data-alinhamento="luz"]{ --acento:#ffd86b; --acento-suave:#fff0bf; --brilho:rgba(255,216,107,.6); } /* Karma -> Trevas */ body[data-alinhamento="trevas"]{ --acento:#c065dd; --acento-suave:#e08adb; --brilho:rgba(178,80,210,.6); } /* ---------- Reset ---------- */ *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; } img, canvas{ image-rendering: pixelated; image-rendering: crisp-edges; } body{ font-family:var(--fonte-corpo); color:var(--pergaminho); background: radial-gradient(1200px 700px at 50% -10%, #1c3322 0%, rgba(28,51,34,0) 60%), radial-gradient(900px 600px at 80% 110%, #0f2018 0%, rgba(15,32,24,0) 55%), linear-gradient(180deg, #0c130d 0%, #080c08 100%); background-attachment: fixed; overflow:hidden; -webkit-font-smoothing:none; font-smooth:never; user-select:none; cursor: default; } /* ---------- Overlays atmosféricos ---------- */ #vinheta{ position:fixed; inset:0; pointer-events:none; z-index:9000; background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%); mix-blend-mode:multiply; } #scanlines{ position:fixed; inset:0; pointer-events:none; z-index:9001; opacity:.20; background:repeating-linear-gradient(0deg, rgba(0,0,0,.0) 0px, rgba(0,0,0,.0) 2px, rgba(0,0,0,.5) 3px, rgba(0,0,0,.5) 3px); } /* vaga-lumes flutuantes feitos com box-shadow + animação */ #vagalumes{ position:fixed; inset:0; pointer-events:none; z-index:8000; } #vagalumes::before, #vagalumes::after{ content:""; position:absolute; width:3px; height:3px; border-radius:50%; background:var(--acento-suave); box-shadow: 20vw 80vh 0 0 var(--acento), 35vw 30vh 0 0 var(--acento-suave), 55vw 65vh 0 0 var(--acento), 70vw 20vh 0 0 var(--acento-suave), 85vw 75vh 0 0 var(--acento), 10vw 40vh 0 0 var(--acento-suave), 45vw 90vh 0 0 var(--acento), 92vw 45vh 0 0 var(--acento-suave), 62vw 12vh 0 0 var(--acento), 28vw 55vh 0 0 var(--acento-suave); opacity:.0; animation:vaga 9s ease-in-out infinite; filter:drop-shadow(0 0 4px var(--brilho)); } #vagalumes::after{ animation-delay:-4.5s; animation-duration:12s; } @keyframes vaga{ 0%,100%{ opacity:0; transform:translateY(6px); } 25%{ opacity:.9; } 50%{ opacity:.5; transform:translateY(-10px); } 75%{ opacity:.85; } } /* ---------- Telas ---------- */ .tela{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; } .oculto{ display:none !important; } /* ---------- Componentes base ---------- */ .painel{ background:linear-gradient(180deg, var(--noite2), var(--noite)); border:3px solid var(--borda-clara); box-shadow: inset 0 0 0 3px var(--borda-escura), inset 0 2px 0 0 rgba(255,255,255,.05), 0 8px 0 0 rgba(0,0,0,.45), 0 0 24px rgba(0,0,0,.5); padding:16px; } h1,h2,h3,.fonte-titulo{ font-family:var(--fonte-titulo); line-height:1.5; } .btn{ font-family:var(--fonte-titulo); font-size:11px; color:var(--pergaminho); background:linear-gradient(180deg, var(--musgo2), var(--musgo)); border:3px solid var(--borda-escura); box-shadow: inset -2px -2px 0 0 rgba(0,0,0,.5), inset 2px 2px 0 0 rgba(255,255,255,.08), 0 4px 0 0 rgba(0,0,0,.5); padding:12px 14px; cursor:pointer; letter-spacing:.5px; transition:transform .04s, filter .12s, background .12s; text-align:center; } .btn:hover{ filter:brightness(1.18); color:var(--acento-suave); } .btn:active{ transform:translateY(3px); box-shadow: inset -2px -2px 0 0 rgba(0,0,0,.5), inset 2px 2px 0 0 rgba(255,255,255,.08), 0 1px 0 0 rgba(0,0,0,.5); } .btn:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.6); } .btn-grande{ font-size:14px; padding:16px 28px; min-width:280px; } .btn-acento{ border-color:var(--acento); color:var(--acento-suave); box-shadow: inset -2px -2px 0 0 rgba(0,0,0,.5), inset 0 0 12px var(--brilho), 0 4px 0 0 rgba(0,0,0,.5); } .btn-mini{ font-size:9px; padding:8px 10px; min-width:0; } /* ============ TELA DE TÍTULO ============ */ #tela-titulo{ text-align:center; } .titulo-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; animation:surgir .8s ease both; } .logo{ display:flex; flex-direction:column; align-items:center; gap:10px; } .logo-sky{ font-family:var(--fonte-titulo); font-size:84px; color:var(--acento-suave); text-shadow: 0 0 2px var(--acento), 4px 4px 0 var(--borda-escura), 0 0 26px var(--brilho); letter-spacing:6px; animation:pulsoLogo 3.5s ease-in-out infinite; } .logo-sub{ font-family:var(--fonte-titulo); font-size:14px; color:var(--verde-claro); letter-spacing:2px; } .logo-tag{ font-size:24px; color:var(--pergaminho2); margin-top:-2px; } .titulo-menu{ display:flex; flex-direction:column; gap:14px; margin-top:26px; } .titulo-rodape{ font-size:18px; color:var(--apagado); margin-top:22px; } @keyframes pulsoLogo{ 0%,100%{ text-shadow:0 0 2px var(--acento), 4px 4px 0 var(--borda-escura), 0 0 26px var(--brilho);} 50%{ text-shadow:0 0 2px var(--acento), 4px 4px 0 var(--borda-escura), 0 0 46px var(--brilho);} } @keyframes surgir{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} } /* ============ CRIAÇÃO DE PERSONAGEM ============ */ .criacao{ width:min(1100px, 96vw); height:min(94vh, 820px); display:flex; flex-direction:column; gap:12px; } .criacao-cabecalho{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .criacao-cabecalho h2{ font-size:18px; color:var(--acento-suave); text-shadow:2px 2px 0 var(--borda-escura); } .criacao-passos{ display:flex; gap:6px; font-family:var(--fonte-titulo); font-size:9px; } .passo{ padding:6px 8px; border:2px solid var(--borda-escura); background:var(--noite); color:var(--apagado); } .passo.ativo{ color:var(--noite); background:var(--acento); border-color:var(--acento); } .passo.feito{ color:var(--verde-claro); border-color:var(--borda-clara); } .criacao-corpo{ flex:1; overflow:auto; padding-right:6px; } .criacao-rodape{ display:flex; justify-content:space-between; gap:12px; } /* grade de classes */ .grade-classes{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .card-classe{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:14px 10px; cursor:pointer; background:linear-gradient(180deg, var(--noite2), var(--noite)); border:3px solid var(--borda-escura); box-shadow: inset 0 0 0 2px rgba(255,255,255,.03); transition:transform .08s, border-color .12s, box-shadow .12s; } .card-classe:hover{ transform:translateY(-3px); border-color:var(--acento); box-shadow:0 0 16px var(--brilho); } .card-classe.sel{ border-color:var(--acento); box-shadow: inset 0 0 0 2px var(--acento), 0 0 18px var(--brilho); } .card-classe .retrato-mini{ width:64px; height:64px; } .card-classe .nome-classe{ font-family:var(--fonte-titulo); font-size:10px; color:var(--pergaminho); } .card-classe .desc-classe{ font-size:16px; color:var(--pergaminho2); line-height:1.1; } /* retratos ILUSTRADOS (IA) na criação — image-rendering:auto p/ não pixelar a pintura */ .card-classe .retrato-classe-il{ width:100%; height:168px; object-fit:cover; object-position:50% 14%; image-rendering:auto; border:2px solid var(--borda-escura); border-radius:6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.55); } .card-sub .retrato-classe-il{ width:124px; height:176px; flex:none; object-fit:cover; object-position:50% 12%; image-rendering:auto; border:2px solid var(--borda-escura); border-radius:6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.55); } /* subclasses */ .grade-subclasses{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .card-sub{ display:flex; gap:12px; padding:16px; cursor:pointer; text-align:left; background:linear-gradient(180deg, var(--noite2), var(--noite)); border:3px solid var(--borda-escura); transition:transform .08s, border-color .12s, box-shadow .12s; } .card-sub:hover{ transform:translateY(-3px); border-color:var(--acento); box-shadow:0 0 16px var(--brilho); } .card-sub.sel{ border-color:var(--acento); box-shadow: inset 0 0 0 2px var(--acento), 0 0 18px var(--brilho); } .card-sub .retrato-mini{ width:80px; height:80px; flex:none; } .card-sub h3{ font-size:12px; color:var(--acento-suave); margin-bottom:6px; } .card-sub p{ font-size:17px; color:var(--pergaminho2); line-height:1.15; margin-bottom:6px; } .tag-bonus{ display:inline-block; font-size:14px; color:var(--verde-claro); margin-right:8px; } .tag-bonus.neg{ color:var(--carmesim); } .tag-passiva{ font-size:15px; color:var(--ambar); } .tag-reacao{ font-size:15px; color:var(--azul); font-style:italic; } /* distribuição de atributos */ .aloc-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; } .aloc-pontos{ font-family:var(--fonte-titulo); font-size:14px; color:var(--acento-suave); } .aloc-pontos b{ color:var(--ouro); } .campo-nome{ display:flex; align-items:center; gap:8px; } .campo-nome label{ font-family:var(--fonte-titulo); font-size:9px; color:var(--apagado); } .campo-nome input{ font-family:var(--fonte-corpo); font-size:20px; color:var(--pergaminho); background:var(--preto); border:2px solid var(--borda-clara); padding:6px 10px; width:240px; outline:none; } .campo-nome input:focus{ border-color:var(--acento); box-shadow:0 0 10px var(--brilho); } .grade-attrs{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; } .linha-attr{ display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:10px; } .attr-nome{ font-family:var(--fonte-titulo); font-size:10px; } .attr-nome small{ display:block; font-family:var(--fonte-corpo); font-size:14px; color:var(--apagado); } .attr-barra{ height:16px; background:var(--preto); border:2px solid var(--borda-escura); position:relative; overflow:hidden; } .attr-preenche{ height:100%; background:linear-gradient(90deg, var(--acento), var(--acento-suave)); width:0%; transition:width .15s; box-shadow:0 0 8px var(--brilho); } .attr-ctrl{ display:flex; align-items:center; gap:8px; } .attr-val{ font-family:var(--fonte-titulo); font-size:13px; color:var(--ouro); min-width:34px; text-align:center; } .btn-pm{ font-family:var(--fonte-titulo); font-size:12px; width:30px; height:30px; padding:0; } /* ============ NASCIMENTO (flash + revelação) ============ */ #flash-branco{ position:fixed; inset:0; z-index:9500; background:#fff; opacity:0; pointer-events:none; } #flash-branco.flash{ animation:flashLuz 2.6s ease forwards; pointer-events:all; } @keyframes flashLuz{ 0%{ opacity:0; } 8%{ opacity:1; } 16%{ opacity:.85; } 22%{ opacity:1; } 60%{ opacity:1; } 100%{ opacity:0; } } #overlay-nascimento{ position:fixed; inset:0; z-index:9400; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 50% 40%, rgba(20,30,20,.85), rgba(5,8,5,.97)); } .nasc-card{ width:min(760px,96vw); text-align:center; animation:surgir .6s ease both; } .nasc-titulo{ font-family:var(--fonte-titulo); font-size:18px; color:var(--ouro); text-shadow:0 0 18px var(--brilho); margin-bottom:8px; } .nasc-narrador{ font-size:22px; color:var(--acento-suave); line-height:1.25; margin:14px 0 20px; min-height:60px; } .nasc-grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0; } .nasc-attr{ background:var(--noite); border:2px solid var(--borda-clara); padding:10px 6px; opacity:0; transform:scale(.7); } .nasc-attr.rev{ animation:revelaAttr .5s cubic-bezier(.2,1.4,.5,1) forwards; } .nasc-attr .na-nome{ font-family:var(--fonte-titulo); font-size:8px; color:var(--apagado); } .nasc-attr .na-val{ font-family:var(--fonte-titulo); font-size:20px; color:var(--ouro); margin-top:6px; } .nasc-attr .na-bonus{ font-size:15px; color:var(--verde-claro); } .nasc-attr .na-bonus.neg{ color:var(--carmesim); } @keyframes revelaAttr{ 0%{opacity:0; transform:scale(.4) rotate(-8deg);} 70%{opacity:1; transform:scale(1.12);} 100%{opacity:1; transform:scale(1);} } /* ============ TELA DE JOGO ============ */ .jogo-wrap{ width:min(1180px,98vw); height:min(96vh,840px); display:grid; grid-template-rows:auto 1fr auto; gap:10px; } /* HUD superior */ .hud{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; } .hud-bloco{ display:flex; flex-direction:column; gap:4px; } .hud-data{ font-family:var(--fonte-titulo); font-size:11px; color:var(--acento-suave); } .hud-data small{ display:block; font-family:var(--fonte-corpo); font-size:16px; color:var(--pergaminho2); margin-top:3px; } .hud-recursos{ display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; } .recurso{ display:flex; align-items:center; gap:5px; font-size:18px; color:var(--pergaminho); } .recurso .ic{ width:18px; height:18px; display:inline-block; } .recurso b{ color:var(--ouro); } /* barra de karma */ .karma-box{ min-width:240px; } .karma-rotulo{ display:flex; justify-content:space-between; font-family:var(--fonte-titulo); font-size:8px; margin-bottom:5px; } .karma-rotulo .luz{ color:var(--ambar); } .karma-rotulo .trevas{ color:var(--violeta); } .karma-barra{ height:16px; background:linear-gradient(90deg, #6a3aa0 0%, #2a2030 45%, #2a2030 55%, #b8932f 100%); border:2px solid var(--borda-escura); position:relative; } .karma-cursor{ position:absolute; top:-4px; width:6px; height:22px; background:var(--pergaminho); box-shadow:0 0 8px #fff; left:50%; transform:translateX(-50%); transition:left .4s; } .karma-titulo{ text-align:center; font-family:var(--fonte-titulo); font-size:9px; color:var(--acento-suave); margin-top:6px; } /* área central: base na floresta */ .jogo-corpo{ display:grid; grid-template-columns:1fr 320px; gap:10px; min-height:0; } .cena{ position:relative; overflow:hidden; display:flex; flex-direction:column; } #canvas-cena{ width:100%; flex:1; image-rendering:pixelated; background:#0a120c; border:2px solid var(--borda-escura); } .cena-legenda{ position:absolute; top:10px; left:10px; font-family:var(--fonte-titulo); font-size:9px; color:var(--pergaminho); background:rgba(0,0,0,.55); padding:6px 8px; border:2px solid var(--borda-clara); } /* painel lateral: personagem + log */ .lateral{ display:flex; flex-direction:column; gap:10px; min-height:0; } .ficha-mini{ display:flex; gap:10px; align-items:center; } .ficha-mini .retrato-mini{ width:64px; height:64px; flex:none; } .ficha-mini .nome{ font-family:var(--fonte-titulo); font-size:11px; color:var(--acento-suave); } .ficha-mini .classe{ font-size:16px; color:var(--pergaminho2); } .ficha-mini .nivel{ font-size:15px; color:var(--ouro); } .barras-vit{ display:flex; flex-direction:column; gap:6px; margin-top:6px; } .barra-vit{ display:grid; grid-template-columns:30px 1fr 60px; gap:6px; align-items:center; font-size:14px; } .barra-vit .trilho{ height:13px; background:var(--preto); border:2px solid var(--borda-escura); overflow:hidden; } .barra-vit .fill{ height:100%; } .fill-hp{ background:linear-gradient(90deg,#7a1f1f,var(--sangue)); } .fill-mp{ background:linear-gradient(90deg,#1f5a7a,var(--azul)); } .fill-en{ background:linear-gradient(90deg,#3a6b1f,#9ad94a); } .fill-xp{ background:linear-gradient(90deg,#7a5a1f,var(--xp)); } .barra-vit .num{ text-align:right; color:var(--pergaminho2); } .mini-attrs{ display:grid; grid-template-columns:1fr 1fr; gap:3px 12px; margin-top:8px; font-size:15px; } .mini-attrs span b{ color:var(--ouro); } .log{ flex:1; overflow:auto; display:flex; flex-direction:column-reverse; gap:5px; font-size:16px; line-height:1.15; } .log p{ color:var(--pergaminho2); border-left:3px solid var(--borda-clara); padding-left:8px; } .log p.bom{ border-color:var(--verde); color:var(--verde-claro); } .log p.mau{ border-color:var(--carmesim); color:var(--carmesim); } .log p.div{ border-color:var(--ouro); color:var(--ouro); font-style:italic; } /* barra de ações inferior */ .acoes{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .acoes .btn{ flex:1 1 auto; min-width:120px; } /* ============ VISUAL NOVEL ============ */ #overlay-vn{ position:fixed; inset:0; z-index:9300; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg, rgba(5,8,5,.4) 0%, rgba(5,8,5,.78) 70%); } .vn-cena{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; } #canvas-vn-fundo{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.9; } .vn-retrato-grande{ position:relative; z-index:2; width:240px; height:240px; align-self:flex-end; margin-bottom:-6px; filter:drop-shadow(0 0 18px rgba(0,0,0,.6)); animation:surgir .35s ease both; } .vn-caixa{ position:relative; z-index:3; margin:0 auto 26px; width:min(960px,96vw); } .vn-nome{ display:inline-block; font-family:var(--fonte-titulo); font-size:12px; color:var(--acento-suave); background:var(--noite); border:3px solid var(--borda-clara); padding:8px 14px; transform:translateY(3px); box-shadow:0 0 14px var(--brilho); } .vn-nome.divino{ color:var(--ouro); border-color:var(--ouro); text-shadow:0 0 12px var(--ouro); } .vn-texto{ font-size:24px; line-height:1.35; color:var(--pergaminho); min-height:120px; } .vn-texto .cursor-vn{ color:var(--acento); animation:piscar 1s steps(2) infinite; } .vn-continuar{ position:absolute; right:18px; bottom:14px; font-size:16px; color:var(--apagado); animation:piscar 1.2s steps(2) infinite; } .vn-escolhas{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .vn-escolha{ text-align:left; font-family:var(--fonte-corpo); font-size:20px; padding:10px 14px; } .vn-escolha .dica{ display:block; font-size:15px; margin-top:3px; color:var(--apagado); } .vn-escolha.bloq{ opacity:.45; cursor:not-allowed; } #overlay-vn.vn-treme{ animation: vnTremor .55s ease; } @keyframes vnTremor{ 0%,100%{transform:translate(0,0);} 15%{transform:translate(calc(var(--tremor,8px)*-1), var(--tremor,8px));} 30%{transform:translate(var(--tremor,8px), calc(var(--tremor,8px)*-1));} 45%{transform:translate(calc(var(--tremor,8px)*-1), 0);} 60%{transform:translate(var(--tremor,8px), var(--tremor,8px));} 80%{transform:translate(calc(var(--tremor,8px)*-0.5), calc(var(--tremor,8px)*-0.5));} } @keyframes piscar{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} } /* ============ MODAIS / STATUS / CONSTRUÇÃO ============ */ .modal-fundo{ position:fixed; inset:0; z-index:9200; background:rgba(5,8,5,.82); display:flex; align-items:center; justify-content:center; padding:20px; } .modal{ width:min(820px,96vw); max-height:92vh; overflow:auto; } .modal-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .modal-cab h2{ font-size:16px; color:var(--acento-suave); } .grade-build{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .card-build{ display:flex; gap:12px; padding:12px; background:var(--noite); border:2px solid var(--borda-escura); } .card-build .ic-build{ width:64px; height:64px; flex:none; } .card-build h3{ font-size:11px; color:var(--acento-suave); margin-bottom:5px; } .card-build p{ font-size:16px; color:var(--pergaminho2); line-height:1.15; margin-bottom:6px; } .card-build .custo{ font-size:15px; color:var(--ambar); } .card-build .nivel-build{ font-size:14px; color:var(--verde-claro); } .grade-treino{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .card-treino{ padding:12px; background:var(--noite); border:2px solid var(--borda-escura); } .card-treino.bloq{ opacity:.62; } .card-treino h3{ font-family:var(--fonte-titulo); font-size:10px; color:var(--pergaminho); margin-bottom:6px; } .card-treino p{ font-size:15px; color:var(--pergaminho2); margin-bottom:8px; } .treino-resumo{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 12px; } .treino-resumo span{ padding:9px; border:1px solid rgba(255,255,255,.10); border-radius:8px; color:var(--apagado); background:rgba(0,0,0,.24); font-family:var(--fonte-titulo); font-size:8px; text-align:center; } .treino-resumo b{ display:block; margin-top:5px; color:var(--ouro); font-size:14px; } .treino-meta{ margin:8px 0; padding:7px; border:1px solid rgba(255,255,255,.08); border-radius:7px; color:var(--apagado); background:rgba(0,0,0,.20); font-size:14px; } .treino-meta b{ color:var(--ouro); } .treino-bloq-msg{ min-height:34px; margin:6px 0; color:var(--carmesim); font-size:13px; line-height:1.25; } .status-grid{ display:grid; grid-template-columns:160px 1fr; gap:16px; } .status-attrs .linha-attr{ grid-template-columns:160px 1fr 40px; margin-bottom:8px; } /* ============ CONFIG IA ============ */ .config-corpo{ display:flex; flex-direction:column; gap:12px; font-size:18px; color:var(--pergaminho2); line-height:1.3; } .config-corpo input{ font-family:var(--fonte-corpo); font-size:18px; color:var(--pergaminho); background:var(--preto); border:2px solid var(--borda-clara); padding:10px; outline:none; width:100%; } .config-corpo input:focus{ border-color:var(--acento); } .config-aviso{ font-size:16px; color:var(--carmesim); border:2px solid var(--carmesim); padding:10px; background:rgba(207,64,64,.08); line-height:1.3; } .config-ok{ font-size:16px; color:var(--verde-claro); } /* ============ TOAST ============ */ #toast-area{ position:fixed; z-index:9600; top:16px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; } .toast{ font-family:var(--fonte-corpo); font-size:19px; color:var(--pergaminho); background:var(--noite2); border:3px solid var(--acento); padding:10px 18px; box-shadow:0 0 18px var(--brilho), 0 6px 0 rgba(0,0,0,.4); animation:toastIn .25s ease, toastOut .4s ease 2.4s forwards; } .toast.bom{ border-color:var(--verde); color:var(--verde-claro); } .toast.mau{ border-color:var(--carmesim); color:var(--carmesim); } @keyframes toastIn{ from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:none;} } @keyframes toastOut{ to{opacity:0; transform:translateY(-12px);} } /* ---------- Scrollbar pixel ---------- */ ::-webkit-scrollbar{ width:12px; height:12px; } ::-webkit-scrollbar-track{ background:var(--preto); } ::-webkit-scrollbar-thumb{ background:var(--musgo2); border:2px solid var(--borda-escura); } ::-webkit-scrollbar-thumb:hover{ background:var(--acento); } /* ---------- Util ---------- */ .linha-sep{ height:2px; background:var(--borda-clara); margin:10px 0; opacity:.5; } .dim{ color:var(--apagado); } .centro{ text-align:center; } .fade-in{ animation:surgir .4s ease both; } /* ---------- Responsivo simples ---------- */ /* ============ FLASH DE TELA COLORIDO ============ */ #flash-tela{ position:fixed; inset:0; z-index:9550; pointer-events:none; opacity:0; } /* ============ COMBATE ============ */ #overlay-combate{ position:fixed; inset:0; z-index:9300; display:flex; flex-direction:column; background:#05080a; } .combate-arena{ flex:1; position:relative; min-height:0; border-bottom:3px solid var(--borda-clara); } #cv-combate{ width:100%; height:100%; display:block; image-rendering:pixelated; background:#0a120c; } .combate-painel{ height:206px; display:grid; grid-template-columns:300px 1fr; gap:12px; padding:14px; } .combate-log{ overflow:auto; display:flex; flex-direction:column; gap:5px; font-size:17px; color:var(--pergaminho2); padding-right:6px; } .combate-log p{ border-left:3px solid var(--borda-clara); padding-left:8px; line-height:1.15; } .combate-menu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; align-content:start; overflow:auto; } .menu-titulo{ grid-column:1/-1; font-family:var(--fonte-titulo); font-size:10px; color:var(--acento-suave); padding-bottom:2px; } .btn-combate{ font-family:var(--fonte-corpo); font-size:19px; text-align:left; padding:9px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:1px; } .btn-combate .bc-sub{ font-size:13px; color:var(--apagado); line-height:1.05; } /* ============ BAÚ ============ */ #overlay-bau{ position:fixed; inset:0; z-index:9450; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 50% 45%, rgba(20,18,12,.6), rgba(5,5,8,.92)); } .bau-cena{ width:min(520px,94vw); text-align:center; border-color:var(--rcor); box-shadow: inset 0 0 0 3px var(--borda-escura), 0 0 34px var(--rcor); } .bau-titulo{ font-family:var(--fonte-titulo); font-size:14px; text-shadow:0 0 14px var(--rcor); } .bau-sprite{ width:160px; height:160px; image-rendering:pixelated; display:block; margin:10px auto; } .bau-sprite.treme{ animation:bauTreme .1s steps(2) infinite; } .bau-sprite.estoura{ animation:bauEstoura .45s ease; } @keyframes bauTreme{ 0%{transform:translate(-3px,0) rotate(-2deg);} 50%{transform:translate(3px,0) rotate(2deg);} 100%{transform:translate(-3px,0);} } @keyframes bauEstoura{ 0%{transform:scale(.7);} 60%{transform:scale(1.18);} 100%{transform:scale(1);} } .bau-loot{ display:flex; flex-direction:column; gap:7px; margin:12px 0; align-items:center; } .bau-item{ display:flex; align-items:center; gap:10px; font-size:20px; color:var(--pergaminho); animation:surgir .3s ease both; } .bi-ic{ width:34px; height:34px; image-rendering:pixelated; } .bi-glifo{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--ouro); font-family:var(--fonte-titulo); font-size:16px; } /* ============ ÁRVORE DE TALENTOS ============ */ .talento-topo{ font-size:19px; margin-bottom:10px; text-align:center; } .talento-wrap{ overflow:auto; max-height:58vh; padding:12px; background:rgba(0,0,0,.25); border:2px solid var(--borda-escura); } .talento-ramo{ font-family:var(--fonte-titulo); font-size:10px; text-align:center; text-shadow:1px 1px 0 var(--borda-escura); } .talento-no{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:linear-gradient(180deg,var(--noite2),var(--noite)); border:3px solid var(--borda-escura); color:var(--pergaminho2); cursor:pointer; padding:4px; transition:transform .08s, box-shadow .15s; } .talento-no:hover{ transform:scale(1.06); z-index:5; } .talento-no .tn-glifo{ font-size:15px; } .talento-no .tn-nome{ font-size:12px; line-height:1.05; text-align:center; } .talento-no.ativo{ border-color:var(--rcor); color:#fff; box-shadow: inset 0 0 0 2px var(--rcor), 0 0 14px var(--rcor); } .talento-no.disp{ border-color:var(--acento); color:var(--pergaminho); box-shadow:0 0 10px var(--brilho); animation:pulsoNo 1.8s ease-in-out infinite; } .talento-no.bloq{ opacity:.45; cursor:not-allowed; } @keyframes pulsoNo{ 0%,100%{ box-shadow:0 0 8px var(--brilho);} 50%{ box-shadow:0 0 18px var(--brilho);} } .talento-desc{ margin-top:12px; font-size:18px; color:var(--pergaminho2); text-align:center; min-height:26px; } /* ============ INVENTÁRIO ============ */ .inv-secao{ font-family:var(--fonte-titulo); font-size:11px; color:var(--acento-suave); margin:14px 0 8px; } .inv-equip{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .inv-slot{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px; background:var(--noite); border:2px solid var(--borda-escura); } .inv-slot-nome{ font-family:var(--fonte-titulo); font-size:8px; color:var(--apagado); } .inv-ic{ width:48px; height:48px; image-rendering:pixelated; } .inv-item-nome{ font-size:16px; text-align:center; line-height:1.1; } .inv-stats{ font-size:16px; margin:12px 0; padding:10px; background:var(--noite); border:2px solid var(--borda-clara); text-align:center; line-height:1.5; } .inv-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } .inv-card{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px; background:var(--noite); border:2px solid var(--borda-escura); text-align:center; } /* ============ Responsivo ============ */ /* ============ HUD STAMINA ============ */ .hud-stamina{ display:flex; align-items:center; gap:6px; font-size:15px; color:var(--verde-claro); margin-top:5px; } .hud-st-trilho{ display:inline-block; width:84px; height:9px; background:var(--preto); border:2px solid var(--borda-escura); position:relative; } .hud-st-fill{ display:block; height:100%; background:linear-gradient(90deg,#3a6b1f,#9ad94a); } .hud-stamina b{ color:var(--pergaminho2); } .hud-online{ font-size:14px; color:#3ecf8e; margin-top:4px; } /* ============ LOADING — o olho do Deus ============ */ #overlay-loading{ position:fixed; inset:0; z-index:9520; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 42%, rgba(13,19,15,.92), rgba(3,5,4,.98)); backdrop-filter:blur(3px); } .loading-card{ display:flex; flex-direction:column; align-items:center; gap:20px; max-width:min(420px,86vw); text-align:center; } /* O olho divino: anel de runas girando + íris pulsante */ .loading-spinner{ position:relative; width:76px; height:76px; border:2px solid color-mix(in srgb, var(--acento) 32%, transparent); border-radius:50%; box-shadow:0 0 26px var(--brilho), inset 0 0 20px rgba(0,0,0,.65); display:grid; place-items:center; animation:none; } .loading-spinner::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px dashed color-mix(in srgb, var(--acento) 60%, transparent); border-left-color:transparent; border-right-color:transparent; animation:girar 3.4s linear infinite; } .loading-spinner::after{ content:""; width:28px; height:28px; border-radius:50%; background:radial-gradient(circle at 50% 50%, #fff 0 14%, var(--acento) 30%, #0a120c 62%); box-shadow:0 0 18px var(--brilho), 0 0 5px #fff; animation:pulsoOlho 1.7s ease-in-out infinite; } @keyframes girar{ to{ transform:rotate(360deg); } } @keyframes pulsoOlho{ 0%,100%{ transform:scale(.82); } 50%{ transform:scale(1.06); } } .loading-txt{ font-family:var(--fonte-titulo); font-size:12px; line-height:1.5; color:var(--acento-suave); text-shadow:0 0 10px var(--brilho); } .loading-quip{ font-family:var(--fonte-corpo,inherit); font-size:15px; color:rgba(220,228,216,.62); font-style:italic; letter-spacing:.3px; } @media (prefers-reduced-motion:reduce){ .loading-spinner::before{ animation:none; } .loading-spinner::after{ animation:none; } } /* ============ SONECA ============ */ #overlay-soneca{ position:fixed; inset:0; z-index:9420; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, rgba(14,20,44,.94), rgba(4,5,16,.98)); } .soneca-cena{ position:relative; text-align:center; } .soneca-canvas{ width:min(440px,94vw); image-rendering:pixelated; border:2px solid rgba(100,140,200,.25); border-radius:8px; box-shadow:0 0 40px rgba(0,0,0,.7), 0 0 80px rgba(30,60,120,.15); } /* ============ LEVEL UP ============ */ #overlay-levelup{ position:fixed; inset:0; z-index:9550; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 50% 40%, rgba(40,32,12,.7), rgba(4,6,14,.97)); } .levelup-card{ width:min(520px,95vw); text-align:center; border-color:var(--ouro); box-shadow:inset 0 0 0 3px var(--borda-escura), 0 0 48px rgba(255,216,107,.5), 0 0 100px rgba(255,170,40,.2); animation:levelupIn .4s ease-out; } @keyframes levelupIn{ from{opacity:0; transform:scale(.88) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);} } .levelup-header{ font-family:var(--fonte-titulo); font-size:22px; color:var(--ouro); text-shadow:0 0 24px rgba(255,216,107,.7); margin-bottom:2px; } .levelup-level{ font-family:var(--fonte-titulo); font-size:36px; color:#fff4d6; text-shadow:0 0 20px rgba(255,216,107,.5), 3px 3px 0 var(--borda-escura); margin:4px 0; } .levelup-class{ font-size:17px; color:var(--pergaminho2); margin-bottom:10px; } .levelup-canvas{ width:100%; image-rendering:pixelated; border:2px solid rgba(255,216,107,.2); border-radius:6px; } .levelup-talentos{ font-family:var(--fonte-titulo); font-size:13px; color:#aee06f; margin:10px 0 6px; text-shadow:0 0 8px rgba(174,224,111,.3); } .levelup-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:8px 0; } .levelup-stat-row{ background:var(--noite); border:2px solid var(--borda-clara); padding:8px 4px; font-family:var(--fonte-titulo); font-size:9px; color:var(--apagado); opacity:0; transform:translateY(8px); transition:all .3s ease-out; } .levelup-stat-row.show{ opacity:1; transform:translateY(0); } .levelup-btn{ margin-top:14px; font-size:18px; } /* ============ MORTE / CÉUS ============ */ #overlay-morte{ position:fixed; inset:0; z-index:9530; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 50% 35%, rgba(255,250,235,.18), rgba(8,10,16,.96)); } .morte-card{ width:min(560px,95vw); text-align:center; border-color:var(--ouro); box-shadow: inset 0 0 0 3px var(--borda-escura), 0 0 36px rgba(255,216,107,.4); } .morte-titulo{ font-family:var(--fonte-titulo); font-size:18px; color:var(--ouro); text-shadow:0 0 18px rgba(255,216,107,.6); } .morte-retrato{ width:80px; height:80px; image-rendering:pixelated; margin:8px auto; filter:drop-shadow(0 0 12px var(--ouro)); } .morte-fala{ font-size:21px; color:var(--pergaminho); min-height:56px; line-height:1.3; margin:6px 0; } .morte-sub{ font-size:16px; color:var(--carmesim); margin-top:6px; } .morte-perdas{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0; } .morte-perda{ background:var(--noite); border:2px solid var(--carmesim); padding:8px 4px; font-family:var(--fonte-titulo); font-size:9px; color:var(--apagado); } .morte-perda b{ color:var(--carmesim); font-size:13px; display:block; margin-top:4px; } /* ============ MISSÕES ============ */ .quest-lista{ display:flex; flex-direction:column; gap:10px; } .quest-card{ background:var(--noite); border:2px solid var(--borda-clara); border-left:5px solid var(--casca-clara); padding:12px; } .quest-card.pronta{ border-left-color:var(--verde); box-shadow:0 0 12px var(--brilho); } .quest-card.oferta{ border-left-color:var(--ouro); } .quest-titulo{ font-family:var(--fonte-titulo); font-size:12px; color:var(--acento-suave); margin-bottom:4px; } .quest-npc{ font-size:16px; color:var(--ambar); } .quest-dlg{ font-size:17px; color:var(--pergaminho); font-style:italic; margin:4px 0; } .quest-hist{ font-size:16px; color:var(--pergaminho2); line-height:1.25; margin:4px 0; } .quest-obj{ font-size:16px; color:var(--verde-claro); margin-top:4px; } .quest-rec{ font-size:16px; color:var(--ouro); } .quest-prazo{ font-size:15px; color:var(--azul); margin-top:3px; } .quest-prazo.urgente{ color:var(--carmesim); } img.inv-ic, img.bi-ic{ image-rendering:pixelated; object-fit:contain; } /* ============ Responsivo ============ */ @media (max-width:900px){ .grade-classes{ grid-template-columns:repeat(2,1fr); } .grade-subclasses, .grade-build, .grade-attrs, .grade-treino{ grid-template-columns:1fr; } .jogo-corpo{ grid-template-columns:1fr; } .logo-sky{ font-size:54px; } .combate-painel{ grid-template-columns:1fr; height:auto; max-height:46vh; } .morte-perdas{ grid-template-columns:repeat(2,1fr); } } /* ============ CONTA / AUTH ============ */ .auth-card{ width:min(440px,94vw); display:flex; flex-direction:column; gap:14px; animation:surgir .5s ease both; } .auth-logo{ font-family:var(--fonte-titulo); font-size:30px; color:var(--acento-suave); text-align:center; text-shadow:3px 3px 0 var(--borda-escura), 0 0 22px var(--brilho); letter-spacing:3px; } .auth-logo span{ display:block; font-size:11px; color:var(--verde-claro); letter-spacing:1px; margin-top:8px; } .auth-sub{ text-align:center; font-size:20px; color:var(--pergaminho2); } .auth-form{ display:flex; flex-direction:column; gap:12px; } .auth-campo{ display:flex; flex-direction:column; gap:5px; font-size:16px; color:var(--apagado); } .auth-input{ font-family:var(--fonte-corpo); font-size:21px; color:var(--pergaminho); background:var(--preto); border:2px solid var(--borda-clara); padding:10px 12px; outline:none; } .auth-input:focus{ border-color:var(--acento); box-shadow:0 0 10px var(--brilho); } .auth-check{ display:flex; align-items:center; gap:8px; font-size:17px; color:var(--pergaminho2); } .auth-check input{ width:20px; height:20px; accent-color:var(--acento); flex:none; } .auth-msg{ font-size:17px; min-height:4px; } .auth-msg.erro{ color:var(--carmesim); } .auth-msg.ok{ color:var(--verde-claro); } .auth-links{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:2px; } .auth-link{ font-size:17px; color:var(--acento-suave); cursor:pointer; text-decoration:underline; } .auth-link:hover{ color:var(--ouro); } .auth-aviso{ font-size:18px; color:var(--pergaminho2); line-height:1.4; background:rgba(94,199,216,.08); border:2px solid var(--azul); padding:12px; } .auth-form .btn-grande{ min-width:0; width:100%; margin-top:4px; } .conta-info{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:16px; font-size:16px; } .gm-badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border:1px solid rgba(255,216,107,.58); border-radius:7px; font-family:var(--fonte-titulo); font-size:9px; color:#fff1a8; background:linear-gradient(135deg, rgba(255,216,107,.20), rgba(117,214,240,.10)); box-shadow:0 0 16px rgba(255,216,107,.20), inset 0 1px 0 rgba(255,255,255,.08); } /* ============ A PRAÇA (hub compartilhado) ============ */ #overlay-praca{ position:fixed; inset:0; z-index:9350; display:flex; flex-direction:column; background:#05080a; } .praca-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:2px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), #07100c; } .praca-titulo{ font-family:var(--fonte-titulo); font-size:12px; color:#fff4d6; text-shadow:0 0 14px rgba(255,216,107,.28), 2px 2px 0 var(--borda-escura); } .praca-online{ padding:5px 9px; border:1px solid rgba(62,207,142,.28); border-radius:6px; color:#9fffe1; background:rgba(62,207,142,.08); font-size:15px; } .praca-layout{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,340px); gap:10px; padding:10px; } .praca-mapa-shell{ min-height:0; position:relative; overflow:hidden; border:2px solid rgba(255,255,255,.14); border-radius:8px; background:#0a120c; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 16px 30px rgba(0,0,0,.34); } #praca-canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; background:#5faf63; } .praca-hint{ position:absolute; left:12px; bottom:12px; max-width:min(560px,calc(100% - 150px)); padding:7px 10px; border:1px solid rgba(0,0,0,.38); border-radius:6px; color:#fff4d6; background:rgba(5,8,10,.72); font-size:15px; line-height:1.05; pointer-events:none; } .praca-dpad{ position:absolute; right:14px; bottom:14px; width:114px; height:114px; display:grid; grid-template-columns:repeat(3,38px); grid-template-rows:repeat(3,38px); gap:0; } .praca-dpad button{ border:1px solid rgba(255,255,255,.16); color:#fff4d6; background:rgba(5,8,10,.72); font-family:var(--fonte-titulo); font-size:12px; touch-action:none; } .praca-dpad button:active{ background:rgba(255,216,107,.25); } .praca-dpad [data-dp="up"]{ grid-column:2; grid-row:1; } .praca-dpad [data-dp="left"]{ grid-column:1; grid-row:2; } .praca-dpad [data-dp="down"]{ grid-column:2; grid-row:3; } .praca-dpad [data-dp="right"]{ grid-column:3; grid-row:2; } .praca-chat{ min-height:0; display:flex; flex-direction:column; gap:8px; } .praca-chat-head{ font-family:var(--fonte-titulo); font-size:10px; color:var(--acento-suave); } .praca-chat-log{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:3px; font-size:17px; color:var(--pergaminho2); } .praca-chat-log p{ line-height:1.18; } .praca-chat-form{ display:flex; gap:8px; } .praca-input{ flex:1; min-width:0; font-family:var(--fonte-corpo); font-size:19px; color:var(--pergaminho); background:var(--preto); border:2px solid var(--borda-clara); border-radius:6px; padding:8px 12px; outline:none; } .praca-input:focus{ border-color:var(--acento); box-shadow:0 0 10px var(--brilho); } /* ---- Building modals inside the plaza ---- */ .plaza-modal-overlay{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; background:rgba(5,8,10,.94); overflow-y:auto; padding:20px 24px; animation:plazaModalIn .25s ease-out; } @keyframes plazaModalIn{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } } .plaza-modal-header{ display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:2px solid rgba(255,255,255,.10); margin-bottom:16px; } .plaza-modal-header h2{ font-family:var(--fonte-titulo); font-size:14px; color:var(--pergaminho); text-shadow:0 0 12px rgba(255,216,107,.2); margin:0; } .plaza-modal-icon{ font-size:36px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); } .plaza-modal-sub{ font-size:15px; color:var(--pergaminho2); margin:4px 0 0; } .plaza-modal-body{ flex:1; min-height:0; } .plaza-modal-footer{ padding-top:14px; border-top:2px solid rgba(255,255,255,.08); margin-top:16px; display:flex; justify-content:flex-end; gap:10px; } /* ---- Gold display ---- */ .plaza-gold-display{ padding:8px 14px; margin-bottom:14px; border:1px solid rgba(255,216,107,.20); border-radius:8px; background:rgba(255,216,107,.06); color:var(--pergaminho); font-size:16px; } .plaza-gold-display b{ color:#ffd86b; font-family:var(--fonte-titulo); } /* ---- Shop grid ---- */ .plaza-shop-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; } .plaza-shop-card{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:rgba(255,255,255,.03); transition:border-color .15s, background .15s; } .plaza-shop-card:hover{ border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); } .plaza-shop-card.locked{ opacity:.45; pointer-events:none; } .plaza-shop-card.bought{ border-color:rgba(94,199,138,.28); background:rgba(94,199,138,.06); } .plaza-shop-icon{ width:48px; height:48px; image-rendering:pixelated; border-radius:4px; flex-shrink:0; } .plaza-shop-info{ flex:1; min-width:0; } .plaza-shop-name{ font-family:var(--fonte-titulo); font-size:11px; color:var(--pergaminho); } .plaza-shop-rarity{ font-size:11px; text-transform:uppercase; margin:1px 0; } .plaza-shop-rarity.comum{ color:#9aa0ad; } .plaza-shop-rarity.raro{ color:#5ec7d8; } .plaza-shop-rarity.epico{ color:#c98ae8; } .plaza-shop-rarity.lendario{ color:#ffd86b; } .plaza-shop-rarity.mistico{ color:#ff72d9; } .plaza-shop-desc{ font-size:14px; color:var(--pergaminho2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .plaza-shop-price{ font-size:15px; color:#ffd86b; margin-top:2px; } /* ---- Hospital UI ---- */ .plaza-hospital-intro{ color:var(--pergaminho2); font-size:16px; margin-bottom:14px; line-height:1.4; } .plaza-hospital-stats{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .plaza-hospital-stats .stat-row{ font-size:16px; color:var(--pergaminho); padding:8px 12px; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(0,0,0,.2); } .plaza-hospital-btns{ display:flex; flex-wrap:wrap; gap:10px; } .plaza-hospital-btns .btn{ font-size:16px; } /* ---- Guild hall leaderboard ---- */ .plaza-guild-list{ display:flex; flex-direction:column; gap:4px; } .plaza-guild-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid rgba(255,255,255,.06); border-radius:6px; font-size:15px; } .plaza-guild-row .guild-rank{ font-family:var(--fonte-titulo); color:var(--pergaminho2); min-width:28px; } .plaza-guild-row .guild-name{ font-family:var(--fonte-titulo); min-width:120px; } .plaza-guild-row .guild-class{ color:var(--pergaminho2); flex:1; } .plaza-guild-row .guild-title{ color:#ffe38f; font-size:13px; text-align:right; } @media (max-width:900px){ .praca-layout{ grid-template-columns:1fr; grid-template-rows:minmax(360px,1fr) 170px; } .praca-hint{ max-width:calc(100% - 148px); } .plaza-shop-grid{ grid-template-columns:1fr; } } /* ============================================================ SKY 2.0 — visual arcano premium + Forja ============================================================ */ :root{ --preto:#05070a; --noite:#0b1014; --noite2:#111921; --musgo:#172820; --musgo2:#203d35; --pergaminho:#f2ead8; --pergaminho2:#c9d0c4; --apagado:#8fa099; --verde:#6bd49d; --verde-claro:#a4f0bf; --ambar:#f0b85c; --ouro:#ffe08a; --violeta:#b77bf0; --carmesim:#ff5f7a; --azul:#67d8f5; --sangue:#f04f60; --xp:#f1d064; --borda-escura:rgba(0,0,0,.58); --borda-clara:rgba(175,234,214,.28); --ui-bg:rgba(9,15,18,.78); --ui-bg-2:rgba(16,26,30,.82); --ui-line:rgba(188,238,222,.28); --ui-line-strong:rgba(255,224,138,.42); --ui-shadow:0 18px 46px rgba(0,0,0,.44); --ui-inset:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04); --acento:#6bd49d; --acento-suave:#b9ffd0; --brilho:rgba(107,212,157,.42); } body[data-alinhamento="luz"]{ --acento:#ffe08a; --acento-suave:#fff3bf; --brilho:rgba(255,224,138,.45); } body[data-alinhamento="trevas"]{ --acento:#d487ff; --acento-suave:#f0c4ff; --brilho:rgba(212,135,255,.42); } *{ letter-spacing:0 !important; } body{ background: linear-gradient(180deg, rgba(5,7,10,.2), rgba(5,7,10,.82)), radial-gradient(900px 520px at 18% 8%, rgba(48,122,96,.34), transparent 64%), radial-gradient(820px 520px at 86% 18%, rgba(130,92,176,.24), transparent 62%), radial-gradient(920px 620px at 50% 112%, rgba(216,154,73,.16), transparent 60%), #05070a; -webkit-font-smoothing:antialiased; font-smooth:auto; } body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(180deg, rgba(0,0,0,.8), transparent 82%); } #app{ position:static; } .tela{ z-index:2; } #scanlines{ opacity:.055; mix-blend-mode:soft-light; } #vinheta{ opacity:.78; } #vagalumes{ opacity:.78; filter:saturate(1.2); } .painel{ background:linear-gradient(180deg, var(--ui-bg-2), var(--ui-bg)); border:1px solid var(--ui-line); border-radius:8px; box-shadow:var(--ui-inset), var(--ui-shadow); backdrop-filter:blur(14px) saturate(1.12); padding:16px; } .btn{ min-height:42px; border:1px solid rgba(198,244,226,.26); border-radius:6px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)), linear-gradient(135deg, rgba(42,73,66,.96), rgba(18,29,35,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 9px 20px rgba(0,0,0,.28); color:var(--pergaminho); text-shadow:0 1px 0 rgba(0,0,0,.55); transition:transform .12s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease; } .btn:hover{ color:var(--acento-suave); border-color:var(--acento); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,255,255,.04), 0 0 22px var(--brilho), 0 11px 24px rgba(0,0,0,.32); filter:brightness(1.07); } .btn:active{ transform:translateY(2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 5px 12px rgba(0,0,0,.32); } .btn-acento{ color:#07100c; border-color:rgba(255,224,138,.62); background:linear-gradient(180deg, var(--acento-suave), var(--acento)); text-shadow:0 1px 0 rgba(255,255,255,.45); } .btn-acento:hover{ color:#05070a; } .btn-grande{ min-width:280px; min-height:56px; } .btn-mini{ min-height:34px; border-radius:6px; } #tela-auth,#tela-titulo{ overflow:hidden; background:#05070a; } #tela-auth::before,#tela-titulo::before{ content:""; position:absolute; inset:-2%; z-index:-2; background: linear-gradient(180deg, rgba(5,7,10,.22), rgba(5,7,10,.78)), linear-gradient(90deg, rgba(5,7,10,.70), rgba(5,7,10,.10) 46%, rgba(5,7,10,.62)), url("../assets/arte/cenas/titulo-keyart.png") center/cover no-repeat; filter:saturate(1.08) contrast(1.04); transform:scale(1.02); } #tela-auth::after,#tela-titulo::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 72%, rgba(5,7,10,.82)); } .titulo-wrap{ width:min(560px,94vw); padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:linear-gradient(180deg, rgba(6,10,13,.44), rgba(6,10,13,.62)); box-shadow:0 28px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(8px); } .logo-sky{ font-size:78px; color:#f7fff6; text-shadow:0 0 18px rgba(255,224,138,.72), 0 4px 0 rgba(0,0,0,.6), 0 0 52px rgba(103,216,245,.32); } .logo-sub{ color:var(--ouro); font-size:13px; } .logo-tag{ color:#d8e8dd; font-size:23px; } .titulo-menu{ width:100%; gap:12px; } .titulo-menu .btn{ width:100%; } .titulo-rodape{ color:#aeb8b2; } .criacao,.jogo-wrap{ border:1px solid rgba(255,255,255,.06); border-radius:8px; } .criacao-cabecalho h2,.modal-cab h2,.praca-titulo{ color:var(--acento-suave); text-shadow:0 0 18px var(--brilho); } .passo{ border:1px solid var(--ui-line); border-radius:6px; background:rgba(255,255,255,.04); } .passo.ativo{ color:#06100c; background:linear-gradient(180deg, var(--acento-suave), var(--acento)); } .card-classe,.card-sub,.card-build,.card-treino,.quest-card,.talento-no,.inv-slot,.inv-card{ border:1px solid var(--ui-line); border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18); } .card-classe:hover,.card-sub:hover,.inv-card:hover,.talento-no:hover{ border-color:var(--acento); box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 24px var(--brilho), 0 14px 28px rgba(0,0,0,.24); } .jogo-wrap{ width:min(1280px,98vw); height:min(96vh,900px); gap:12px; } .hud{ grid-template-columns:minmax(220px,auto) 1fr minmax(240px,auto); align-items:center; } .hud-data,.hud-recursos,.karma-titulo{ text-shadow:0 0 14px rgba(0,0,0,.7); } .hud-recursos{ padding:8px 12px; border:1px solid rgba(255,255,255,.05); border-radius:8px; background:rgba(0,0,0,.16); } .recurso{ min-width:58px; justify-content:center; padding:4px 6px; border-radius:6px; background:rgba(255,255,255,.04); } .karma-barra,.hud-st-trilho,.barra-vit .trilho,.attr-barra{ border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(0,0,0,.34); overflow:hidden; } .karma-cursor{ border-radius:999px; background:#fff8df; } .jogo-corpo{ grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:12px; } .cena{ padding:12px; } #canvas-cena{ border:1px solid rgba(255,255,255,.08); border-radius:6px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.28); background:#08100e; } .cena-legenda{ top:18px; left:18px; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:rgba(3,8,10,.58); backdrop-filter:blur(8px); } .ficha-mini .retrato-mini,.retrato-mini{ border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); } .ficha-mini > div:last-child{ min-width:0; } .ficha-mini .nome,.ficha-mini .classe,.ficha-mini .nivel{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ficha-mini .nome{ color:#fff7d7; text-shadow:0 0 16px var(--brilho); } .barra-vit{ grid-template-columns:34px 1fr 66px; } .barra-vit .fill{ border-radius:999px; } .mini-attrs span{ padding:4px 6px; border-radius:6px; background:rgba(255,255,255,.04); } .log p{ border-left:2px solid var(--ui-line-strong); padding:7px 8px; border-radius:0 6px 6px 0; background:rgba(255,255,255,.035); } /* wrapper da barra de ações (painel) + cabeçalho com o botão minimizar */ .acoes-wrap{ display:flex; flex-direction:column; gap:10px; } .acoes-head{ display:none; align-items:center; justify-content:space-between; } .acoes-head-tit{ font-family:var(--fonte-titulo); font-size:10px; color:var(--acento-suave); } .acoes-toggle{ font-size:9px; padding:6px 10px; } .acoes{ display:grid; grid-template-columns:repeat(6,minmax(126px,1fr)); gap:10px; align-items:stretch; } .acoes .btn{ min-width:0; min-height:52px; padding:9px 10px; font-size:10px; line-height:1.12; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; } .modal-fundo{ background:rgba(2,5,7,.72); backdrop-filter:blur(12px); } .modal{ width:min(960px,96vw); border-color:rgba(255,255,255,.10); } .modal-cab{ position:sticky; top:0; z-index:2; padding-bottom:10px; background:linear-gradient(180deg, rgba(13,20,24,.96), rgba(13,20,24,.74)); } .linha-sep{ height:1px; background:linear-gradient(90deg, transparent, var(--ui-line-strong), transparent); } .inv-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; } .inv-equip,.inv-grade{ gap:12px; } .inv-slot,.inv-card{ min-height:148px; } .inv-ic,.bi-ic{ border-radius:8px; background:radial-gradient(circle at 50% 35%, rgba(255,255,255,.12), rgba(0,0,0,.10)); } .inv-secao{ color:var(--ouro); text-transform:uppercase; font-size:10px; } .inv-stats{ border:1px solid var(--ui-line); border-radius:8px; background:rgba(0,0,0,.18); } .forja-corpo{ display:flex; flex-direction:column; gap:14px; } .forja-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .forja-materiais{ display:flex; flex-wrap:wrap; gap:8px; } .forja-mat{ min-width:96px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } .forja-mat-nome{ color:var(--apagado); font-family:var(--fonte-titulo); font-size:8px; } .forja-mat b{ color:var(--ouro); font-family:var(--fonte-titulo); font-size:12px; } .forja-oficina{ padding:8px 10px; border:1px solid rgba(255,224,138,.24); border-radius:8px; color:var(--ouro); background:rgba(255,224,138,.08); } .forja-layout{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .forja-col{ min-width:0; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(0,0,0,.15); } .forja-equip-grid,.forja-fundir-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; } .forja-card,.forja-fundir-card{ display:flex; flex-direction:column; align-items:center; gap:7px; min-height:210px; padding:12px; text-align:center; border:1px solid var(--ui-line); border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); } .forja-fundir-card{ min-height:176px; } .forja-nivel,.forja-max{ font-family:var(--fonte-titulo); font-size:8px; color:var(--azul); } .forja-max{ color:var(--ouro); padding:7px 10px; border-radius:6px; border:1px solid rgba(255,224,138,.28); background:rgba(255,224,138,.08); } .forja-custo{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; } .forja-custo span{ padding:4px 6px; border-radius:6px; color:var(--verde-claro); background:rgba(107,212,157,.09); border:1px solid rgba(107,212,157,.18); } .forja-custo span.falta{ color:var(--carmesim); background:rgba(255,95,122,.08); border-color:rgba(255,95,122,.18); } .forja-vazio{ padding:16px; border:1px dashed rgba(255,255,255,.16); border-radius:8px; } /* Botões de ação: tabuinhas gravadas, sóbrias. O acento (tom) só aparece como trilho lateral, anel do ícone e brilho de brasa no hover — o palco animado continua sendo o herói visual da tela. */ .acoes .acao-btn{ --acao-a:#74b85a; position:relative; min-height:56px; padding:8px 12px 8px 14px; display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; align-items:center; justify-content:start; overflow:hidden; white-space:normal; border:1px solid rgba(255,255,255,.07); border-radius:7px; background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 30%), linear-gradient(158deg, color-mix(in srgb, var(--acao-a) 9%, #131e1c) 0%, #0b1311 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.3); transition:transform .12s ease, border-color .15s ease, box-shadow .18s ease; } /* trilho lateral gravado (acento) */ .acoes .acao-btn::before{ content:""; position:absolute; inset:7px auto 7px 0; width:3px; border-radius:0 3px 3px 0; background:color-mix(in srgb, var(--acao-a) 80%, transparent); box-shadow:0 0 8px color-mix(in srgb, var(--acao-a) 45%, transparent); } .acoes .acao-btn:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--acao-a) 55%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px color-mix(in srgb, var(--acao-a) 30%, transparent), 0 12px 22px rgba(0,0,0,.38); } .acoes .acao-btn:hover .ac-ico{ border-color:color-mix(in srgb, var(--acao-a) 70%, transparent); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 14px color-mix(in srgb, var(--acao-a) 40%, transparent); transform:scale(1.06); } .acoes .acao-btn:active{ transform:translateY(0); } .acoes .acao-btn:focus-visible{ outline:none; border-color:color-mix(in srgb, var(--acao-a) 75%, white 8%); box-shadow:0 0 0 2px color-mix(in srgb, var(--acao-a) 60%, transparent); } /* nicho recuado do ícone — emoji colorido legível, sem competir */ .ac-ico{ width:30px; height:30px; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--acao-a) 38%, rgba(255,255,255,.06)); border-radius:7px; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--acao-a) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.5)); font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; font-size:15px; line-height:1; text-shadow:none; transition:transform .12s ease, box-shadow .18s ease, border-color .15s ease; } .ac-label{ min-width:0; position:relative; z-index:1; font-family:var(--fonte-titulo); font-size:10px; line-height:1.25; letter-spacing:.2px; color:#dfe9df; overflow:hidden; text-overflow:ellipsis; } .acoes .acao-btn:hover .ac-label{ color:#fff4d6; } .tom-world{ --acao-a:#65d68f; } .tom-danger{ --acao-a:#e0556a; } .tom-pvp{ --acao-a:#c0444a; } .tom-tower{ --acao-a:#75d6f0; } .tom-growth{ --acao-a:#aee06f; } .tom-calm{ --acao-a:#8da5ff; } .tom-craft{ --acao-a:#d59b58; } .tom-shop{ --acao-a:#e8c267; } .tom-divine{ --acao-a:#ffd86b; } .tom-admin{ --acao-a:#f2d36f; } .tom-meta{ --acao-a:#9eb4ad; } .acoes .acao-deus{ border-color:rgba(255,216,107,.34); background: radial-gradient(120px 70px at 18% 18%, rgba(255,216,107,.22), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.07), transparent 30%), linear-gradient(158deg, rgba(255,216,107,.18) 0%, #11120b 72%); } .acoes .acao-deus .ac-label{ color:#ffe9a6; } .acoes .acao-deus .ac-ico{ color:#130f06; background:linear-gradient(145deg, #fff0ad, #d7a739); border-color:rgba(255,240,173,.75); box-shadow:0 0 16px rgba(255,216,107,.28); } .acoes .acao-gm{ border-color:rgba(242,211,111,.46); background: radial-gradient(110px 72px at 16% 18%, rgba(117,214,240,.22), transparent 72%), radial-gradient(140px 90px at 95% 100%, rgba(255,216,107,.20), transparent 72%), linear-gradient(158deg, rgba(242,211,111,.18), #10150f 74%); } .acoes .acao-gm .ac-label{ color:#fff1a8; } .acoes .acao-gm .ac-ico{ font-family:var(--fonte-titulo); font-size:8px; color:#10130b; background:linear-gradient(145deg, #fff1a8, #75d6f0); border-color:rgba(255,255,255,.55); } .gm-console{ display:flex; flex-direction:column; gap:14px; } .gm-hero{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:14px; border:1px solid rgba(255,216,107,.34); border-radius:8px; background: radial-gradient(260px 120px at 10% 15%, rgba(255,216,107,.18), transparent 72%), linear-gradient(135deg, rgba(117,214,240,.10), rgba(0,0,0,.18)); } .gm-mark{ width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.30); border-radius:8px; font-family:var(--fonte-titulo); font-size:12px; color:#0f130d; background:linear-gradient(145deg, #fff0a8, #75d6f0); box-shadow:0 0 18px rgba(255,216,107,.25); } .gm-title{ font-family:var(--fonte-titulo); font-size:14px; color:#fff1a8; line-height:1.25; } .gm-sub{ margin-top:5px; color:var(--pergaminho2); font-size:16px; line-height:1.35; } .gm-quick{ display:flex; flex-wrap:wrap; gap:8px; } .gm-quick .btn{ flex:1 1 150px; } .gm-section{ margin-top:6px; padding:9px 0 6px; border-bottom:1px solid rgba(255,216,107,.18); font-family:var(--fonte-titulo); font-size:10px; color:#ffe08a; } .gm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; } .gm-grid-attrs{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); } .gm-card{ display:flex; flex-direction:column; gap:9px; min-height:136px; padding:12px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), rgba(8,13,12,.86); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .gm-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .gm-card-top b{ min-width:0; font-family:var(--fonte-titulo); font-size:9px; line-height:1.3; color:#d9f4ff; } .gm-card-top span{ flex:none; color:#ffe08a; font-family:var(--fonte-titulo); font-size:10px; } .gm-card p{ margin:0; min-height:34px; color:var(--apagado); font-size:14px; line-height:1.35; } .gm-steps{ display:flex; flex-wrap:wrap; gap:6px; } .gm-steps .btn{ flex:1 1 auto; min-width:64px; } .gm-set{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; margin-top:auto; } .gm-input{ width:100%; min-width:0; padding:8px 9px; border:1px solid rgba(255,255,255,.16); border-radius:7px; color:var(--pergaminho); background:#070b0a; font-family:var(--fonte-corpo); font-size:18px; outline:none; } .gm-input:focus{ border-color:rgba(255,216,107,.72); box-shadow:0 0 0 2px rgba(255,216,107,.15); } .torre-corpo,.torre-resultado{ display:flex; flex-direction:column; gap:14px; } .torre-hero{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:14px; border:1px solid rgba(117,214,240,.22); border-radius:8px; background: radial-gradient(260px 120px at 12% 15%, rgba(117,214,240,.22), transparent 70%), linear-gradient(135deg, rgba(255,224,138,.08), rgba(0,0,0,.16)); } .torre-selo{ width:58px; height:58px; display:grid; place-items:center; border-radius:8px; border:1px solid rgba(255,224,138,.44); background:linear-gradient(135deg, #75d6f0, #ffe08a); color:#07100c; font-family:var(--fonte-titulo); font-size:22px; box-shadow:0 0 28px rgba(117,214,240,.35); } .torre-selo.grande{ width:78px; height:78px; align-self:center; font-size:28px; } .torre-titulo{ font-family:var(--fonte-titulo); font-size:15px; color:#fff7d7; text-shadow:0 0 18px rgba(255,224,138,.38); } .torre-sub{ color:var(--pergaminho2); font-size:18px; } .torre-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; } .torre-card{ display:flex; flex-direction:column; gap:10px; padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); } .torre-card.principal{ border-color:rgba(117,214,240,.38); box-shadow:0 0 26px rgba(117,214,240,.10); } .torre-card-top{ display:flex; justify-content:space-between; gap:10px; align-items:center; font-family:var(--fonte-titulo); font-size:10px; color:var(--ouro); } .torre-card-top span{ color:var(--azul); } .torre-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } .torre-stats span,.torre-recompensa,.torre-loot{ padding:7px 8px; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(0,0,0,.18); color:var(--pergaminho2); font-size:16px; } .torre-recompensa,.torre-loot{ color:var(--pergaminho); } .torre-marcos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; } .torre-marco{ min-height:86px; display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(0,0,0,.18); } .torre-marco b{ font-family:var(--fonte-titulo); color:var(--azul); font-size:12px; } .torre-marco span{ color:var(--pergaminho); font-family:var(--fonte-titulo); font-size:9px; } .torre-marco small{ color:var(--apagado); font-size:15px; } .torre-marco.ok{ border-color:rgba(255,224,138,.34); background:rgba(255,224,138,.08); } .torre-botoes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .modal{ width:min(1120px,96vw); } .divino-corpo{ display:flex; flex-direction:column; gap:14px; } .divino-topo{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:14px; border:1px solid color-mix(in srgb, var(--divino-cor) 36%, rgba(255,255,255,.08)); border-radius:8px; background: radial-gradient(260px 130px at 12% 0%, color-mix(in srgb, var(--divino-cor) 24%, transparent), transparent 72%), linear-gradient(135deg, rgba(255,255,255,.045), rgba(0,0,0,.18)); } .divino-selo{ width:62px; height:62px; display:grid; place-items:center; border:1px solid color-mix(in srgb, var(--divino-cor) 72%, rgba(255,255,255,.2)); border-radius:8px; background: radial-gradient(circle at 38% 28%, rgba(255,255,255,.5), transparent 24%), linear-gradient(145deg, color-mix(in srgb, var(--divino-cor) 92%, #fff 10%), #23180c); color:#100c04; font-family:var(--fonte-titulo); font-size:22px; box-shadow:0 0 24px color-mix(in srgb, var(--divino-cor) 30%, transparent); } .divino-titulo{ font-family:var(--fonte-titulo); font-size:13px; line-height:1.25; color:var(--divino-cor); text-shadow:0 0 14px color-mix(in srgb, var(--divino-cor) 35%, transparent); } .divino-desc,.divino-meta,.divino-progresso{ font-size:18px; line-height:1.25; color:var(--pergaminho2); } .divino-meta,.divino-progresso{ color:var(--apagado); } .divino-progresso{ padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(0,0,0,.18); } .divino-julgamento{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:12px; border:1px solid color-mix(in srgb, var(--divino-cor) 34%, rgba(255,255,255,.08)); border-radius:8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px), rgba(0,0,0,.24); } .divino-julgamento.oculto{ display:none; } .divino-olho{ width:54px; height:54px; position:relative; border-radius:50%; border:1px solid color-mix(in srgb, var(--divino-cor) 76%, white 10%); background: radial-gradient(circle at 50% 50%, #100c04 0 12%, var(--divino-cor) 13% 22%, transparent 23%), conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--divino-cor) 80%, transparent), transparent 46%, color-mix(in srgb, var(--divino-cor) 55%, transparent), transparent); box-shadow:0 0 22px color-mix(in srgb, var(--divino-cor) 34%, transparent); animation:olhoDivinoGira 1.6s linear infinite; } .divino-olho::after{ content:""; position:absolute; inset:18px 8px; border-radius:50%; border:2px solid #fff0ad; transform:rotate(-12deg); } .divino-julgamento-txt{ font-size:18px; line-height:1.18; color:#fff4d6; } .divino-julgamento-barra{ grid-column:1 / -1; height:9px; overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(0,0,0,.34); } .divino-julgamento-barra span{ display:block; width:42%; height:100%; border-radius:999px; background:linear-gradient(90deg, transparent, var(--divino-cor), #fff0ad); animation:julgamentoDivino 1.15s ease-in-out infinite; } @keyframes olhoDivinoGira{ to{ transform:rotate(360deg); } } @keyframes julgamentoDivino{ 0%{ transform:translateX(-105%); } 100%{ transform:translateX(250%); } } .divino-textarea{ width:100%; min-height:118px; resize:vertical; padding:12px; border:1px solid color-mix(in srgb, var(--divino-cor) 28%, rgba(255,255,255,.10)); border-radius:8px; color:var(--pergaminho); background:rgba(0,0,0,.26); font-family:var(--fonte-corpo); font-size:20px; line-height:1.25; } .divino-textarea:focus{ outline:none; border-color:var(--divino-cor); box-shadow:0 0 0 2px color-mix(in srgb, var(--divino-cor) 24%, transparent); } .divino-textarea:disabled{ opacity:.55; } .divino-resposta{ min-height:78px; padding:12px; border:1px solid color-mix(in srgb, var(--divino-cor) 26%, rgba(255,255,255,.10)); border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), rgba(0,0,0,.22); color:#fff4d6; font-size:20px; line-height:1.25; } .divino-resposta.vazio{ min-height:142px; display:flex; align-items:center; justify-content:center; color:color-mix(in srgb, var(--divino-cor) 36%, rgba(255,255,255,.18)); font-family:var(--fonte-titulo); font-size:52px; line-height:1; text-shadow:0 0 26px color-mix(in srgb, var(--divino-cor) 26%, transparent); } .divino-botoes{ display:flex; justify-content:flex-end; } .divino-falar-btn{ border-color:#ffe08a; color:#130f06; background:linear-gradient(145deg, #fff0ad, #d7a739); } .divino-falar-btn:hover{ color:#050505; } .talento-topo{ padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(0,0,0,.16); } .talento-wrap{ width:100%; max-height:min(64vh,640px); padding:18px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), radial-gradient(circle at 50% 0%, rgba(103,216,245,.10), transparent 48%), rgba(0,0,0,.28); } .talento-area-v2{ min-width:max-content; margin:0 auto; } .talento-ramo-v2{ font-family:var(--fonte-titulo); font-size:12px; letter-spacing:0; text-align:center; text-shadow:0 0 14px currentColor, 0 2px 0 rgba(0,0,0,.75); } .talento-lines{ opacity:.95; } .talento-no-v2{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:8px; color:var(--pergaminho2); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(4,8,10,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.28); cursor:pointer; transition:transform .14s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease; } .talento-no-v2:hover, .talento-no-v2:focus{ transform:translateY(-2px); z-index:5; border-color:var(--rcor); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 22px var(--rcor), 0 16px 28px rgba(0,0,0,.34); outline:none; } .talento-no-v2.ativo{ color:#fff; border-color:var(--rcor); box-shadow:inset 0 0 0 1px var(--rcor), 0 0 22px var(--rcor), 0 12px 26px rgba(0,0,0,.32); } .talento-no-v2.disp{ color:var(--pergaminho); border-color:var(--ouro); animation:pulsoNo 1.8s ease-in-out infinite; } .talento-no-v2.bloq{ opacity:.42; filter:grayscale(.4); } .talento-no-v2 .tn-glifo{ width:24px; height:20px; display:flex; align-items:center; justify-content:center; font-family:var(--fonte-titulo); font-size:11px; color:var(--rcor); text-shadow:0 0 10px var(--rcor); } .talento-no-v2 .tn-nome{ width:100%; min-height:24px; display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; overflow-wrap:anywhere; font-family:var(--fonte-corpo); font-size:17px; line-height:1.05; color:inherit; } .talento-no-v2 .tn-tipo{ padding:3px 6px; border-radius:5px; color:var(--apagado); background:rgba(0,0,0,.28); font-family:var(--fonte-titulo); font-size:7px; text-transform:uppercase; } .talento-desc-v2{ position:sticky; left:0; top:0; z-index:4; margin:0 0 12px; min-height:44px; padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:8px; color:var(--pergaminho); background:linear-gradient(180deg, rgba(13,20,24,.98), rgba(8,13,16,.96)); box-shadow:0 8px 22px rgba(0,0,0,.22); font-size:18px; line-height:1.2; text-align:center; } .talento-wrap{ overflow-y:auto; overflow-x:hidden; max-height:min(72vh,760px); padding:16px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.018) 1px, transparent 1px), rgba(2,6,8,.46); background-size:auto, 38px 38px, 38px 38px, auto; } .talento-classe-hero{ position:relative; display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:start; margin:0 0 12px; padding:14px; border:1px solid color-mix(in srgb, var(--classe-cor) 36%, rgba(255,255,255,.10)); border-radius:8px; background: linear-gradient(135deg, color-mix(in srgb, var(--classe-cor) 14%, transparent), rgba(255,255,255,.025) 42%, rgba(0,0,0,.18)), rgba(6,10,12,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.26); } .talento-kicker{ grid-column:1/-1; font-family:var(--fonte-titulo); font-size:8px; color:color-mix(in srgb, var(--classe-cor) 70%, #fff); text-transform:uppercase; } .talento-classe-titulo{ font-family:var(--fonte-titulo); font-size:16px; line-height:1.15; color:var(--pergaminho); text-shadow:0 0 16px color-mix(in srgb, var(--classe-cor) 34%, transparent); } .talento-classe-hero p{ grid-column:1/2; margin:0; color:var(--pergaminho2); font-size:17px; line-height:1.35; } .talento-trilhas{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .talento-trilhas span{ min-width:0; padding:8px 9px; border:1px solid rgba(255,255,255,.09); border-radius:7px; color:var(--pergaminho2); background:rgba(0,0,0,.22); font-size:15px; line-height:1.18; } .talento-pontos-card{ grid-column:2/3; grid-row:2/4; min-width:116px; padding:10px; border:1px solid color-mix(in srgb, var(--ouro) 40%, transparent); border-radius:8px; text-align:center; background:rgba(0,0,0,.28); } .talento-pontos-card b{ display:block; color:var(--ouro); font-family:var(--fonte-titulo); font-size:18px; } .talento-pontos-card span{ display:block; color:var(--apagado); font-size:13px; line-height:1.1; } .talento-desc-v3{ position:sticky; top:0; z-index:8; margin:0 0 10px; padding:10px 12px; border:1px solid rgba(255,255,255,.10); border-radius:8px; color:var(--pergaminho2); background:linear-gradient(180deg, rgba(9,16,19,.98), rgba(7,12,15,.94)); box-shadow:0 12px 26px rgba(0,0,0,.28); font-size:16px; line-height:1.25; text-align:center; } .talento-area-v3{ --node-w:136px; position:relative; width:100%; max-width:880px; min-width:0; margin:0 auto; } .talento-area-v3::before{ content:""; position:absolute; left:50%; top:58px; bottom:38px; width:1px; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--classe-cor) 42%, rgba(255,255,255,.12)), transparent); opacity:.75; } .talento-lane-label{ position:absolute; top:12px; width:min(180px,29%); transform:translateX(-50%); padding:8px 7px; border:1px solid color-mix(in srgb, var(--classe-cor) 34%, rgba(255,255,255,.10)); border-radius:8px; color:color-mix(in srgb, var(--classe-cor) 72%, #fff); background:rgba(0,0,0,.30); font-family:var(--fonte-titulo); font-size:9px; text-align:center; text-shadow:0 0 12px color-mix(in srgb, var(--classe-cor) 42%, transparent); } .talento-ascensao-band{ position:absolute; left:50%; width:min(760px,94%); transform:translateX(-50%); z-index:1; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:10px 12px; border:1px solid color-mix(in srgb, var(--ouro) 46%, rgba(255,255,255,.12)); border-radius:8px; color:var(--pergaminho); background: linear-gradient(90deg, color-mix(in srgb, var(--classe-cor) 18%, transparent), rgba(255,216,107,.10), color-mix(in srgb, var(--classe-cor) 14%, transparent)), rgba(4,8,10,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px color-mix(in srgb, var(--ouro) 16%, transparent), 0 18px 34px rgba(0,0,0,.24); pointer-events:none; } .talento-ascensao-band span{ font-family:var(--fonte-titulo); font-size:10px; color:var(--ouro); text-shadow:0 0 14px rgba(255,216,107,.44); } .talento-ascensao-band b{ min-width:0; color:var(--pergaminho2); font-weight:400; font-size:15px; line-height:1.2; overflow-wrap:anywhere; } .talento-lines-v3{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } .talento-link{ fill:none; stroke:rgba(190,210,205,.18); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; } .talento-link.pronto{ stroke:color-mix(in srgb, var(--rcor) 46%, rgba(255,255,255,.24)); stroke-dasharray:6 8; } .talento-link.ativo{ stroke:var(--rcor); stroke-width:3; filter:drop-shadow(0 0 7px var(--rcor)); } .talento-no-v3{ position:absolute; width:var(--node-w); min-height:82px; transform:translate(-50%,-50%); display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; gap:4px; padding:8px; border:1px solid rgba(255,255,255,.13); border-radius:8px; color:var(--pergaminho2); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)), rgba(4,8,10,.86); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px rgba(0,0,0,.30); cursor:pointer; transition:transform .14s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, opacity .16s ease; } .talento-no-v3:hover, .talento-no-v3:focus{ transform:translate(-50%,-53%); z-index:7; border-color:var(--rcor); color:#fff; outline:none; box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 0 22px color-mix(in srgb, var(--rcor) 74%, transparent), 0 18px 32px rgba(0,0,0,.36); } .talento-no-v3.ativo{ color:#fff; border-color:var(--rcor); background: linear-gradient(180deg, color-mix(in srgb, var(--rcor) 20%, rgba(255,255,255,.08)), rgba(255,255,255,.025)), rgba(4,8,10,.92); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rcor) 70%, #fff), 0 0 24px color-mix(in srgb, var(--rcor) 52%, transparent), 0 14px 28px rgba(0,0,0,.34); } .talento-no-v3.disp{ border-color:var(--ouro); color:var(--pergaminho); animation:pulsoNo 1.8s ease-in-out infinite; } .talento-no-v3.bloq{ opacity:.48; filter:grayscale(.35); } .talento-no-v3.ascensao{ border-color:color-mix(in srgb, var(--ouro) 30%, rgba(255,255,255,.12)); background: linear-gradient(155deg, color-mix(in srgb, var(--rcor) 18%, transparent), rgba(255,216,107,.055) 44%, rgba(255,255,255,.018)), rgba(4,8,10,.90); } .talento-no-v3.ascensao::before{ content:""; position:absolute; inset:4px; border:1px solid color-mix(in srgb, var(--ouro) 22%, transparent); border-radius:6px; pointer-events:none; } .talento-no-v3.ascensao.ativo{ border-color:var(--ouro); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ouro) 60%, #fff), 0 0 28px color-mix(in srgb, var(--rcor) 50%, transparent), 0 0 16px rgba(255,216,107,.18), 0 16px 30px rgba(0,0,0,.36); } .talento-no-v3.ascensao.disp{ border-color:var(--ouro); box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 0 20px rgba(255,216,107,.24), 0 16px 30px rgba(0,0,0,.32); } .talento-no-v3 .tn-glifo{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--rcor) 55%, rgba(255,255,255,.18)); border-radius:50%; color:var(--rcor); background:rgba(0,0,0,.28); font-family:var(--fonte-titulo); font-size:11px; text-shadow:0 0 10px var(--rcor); } .talento-no-v3.ascensao .tn-glifo{ color:var(--ouro); border-color:color-mix(in srgb, var(--ouro) 54%, rgba(255,255,255,.18)); text-shadow:0 0 12px rgba(255,216,107,.55); } .talento-no-v3 .tn-nome{ width:100%; min-height:28px; display:flex; align-items:center; justify-content:center; color:inherit; font-size:15px; line-height:1.05; text-align:center; overflow-wrap:anywhere; } .talento-no-v3 .tn-tipo{ max-width:100%; padding:3px 6px; border-radius:5px; color:var(--apagado); background:rgba(0,0,0,.30); font-family:var(--fonte-titulo); font-size:7px; line-height:1.1; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .talento-pop-fundo{ position:fixed; inset:0; z-index:9250; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(2,5,7,.70); backdrop-filter:blur(10px); } .talento-pop{ width:min(720px,96vw); max-height:88vh; overflow:auto; padding:16px; border:1px solid color-mix(in srgb, var(--rcor) 44%, rgba(255,255,255,.14)); border-radius:8px; color:var(--pergaminho); background: linear-gradient(135deg, color-mix(in srgb, var(--rcor) 12%, transparent), rgba(255,255,255,.025) 36%, rgba(0,0,0,.18)), rgba(8,13,16,.98); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 28px 70px rgba(0,0,0,.55); } .talento-pop-head{ display:grid; grid-template-columns:46px 1fr; gap:12px; align-items:center; } .talento-pop-glifo{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--rcor) 58%, rgba(255,255,255,.18)); border-radius:8px; color:var(--rcor); background:rgba(0,0,0,.28); font-family:var(--fonte-titulo); font-size:15px; text-shadow:0 0 14px var(--rcor); } .talento-pop-tipo{ margin-bottom:5px; color:color-mix(in srgb, var(--rcor) 76%, #fff); font-family:var(--fonte-titulo); font-size:8px; text-transform:uppercase; } .talento-pop-title{ font-family:var(--fonte-titulo); font-size:17px; line-height:1.18; } .talento-pop-status{ display:inline-flex; margin:12px 0; padding:6px 9px; border:1px solid color-mix(in srgb, var(--rcor) 36%, rgba(255,255,255,.12)); border-radius:7px; color:var(--pergaminho2); background:rgba(0,0,0,.22); font-family:var(--fonte-titulo); font-size:8px; text-transform:uppercase; } .talento-pop-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .talento-pop-chip{ min-width:0; padding:9px; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:rgba(0,0,0,.22); } .talento-pop-chip span{ display:block; margin-bottom:4px; color:var(--apagado); font-family:var(--fonte-titulo); font-size:7px; text-transform:uppercase; } .talento-pop-chip b{ display:block; color:var(--pergaminho); font-weight:400; font-size:16px; line-height:1.25; overflow-wrap:anywhere; } .talento-pop-req{ margin-top:10px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:7px; color:var(--pergaminho2); background:rgba(0,0,0,.18); font-size:15px; line-height:1.3; } .talento-pop-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; } @media (max-width:720px){ .talento-wrap{ padding:10px; max-height:min(74vh,720px); } .talento-classe-hero{ grid-template-columns:1fr; } .talento-classe-hero p, .talento-pontos-card{ grid-column:1/-1; grid-row:auto; } .talento-trilhas{ grid-template-columns:1fr; } .talento-area-v3{ --node-w:104px; max-width:100%; } .talento-lane-label{ width:30%; padding:7px 4px; font-size:7px; } .talento-ascensao-band{ grid-template-columns:1fr; gap:4px; padding:9px; text-align:center; } .talento-ascensao-band span{ font-size:8px; } .talento-ascensao-band b{ font-size:13px; } .talento-no-v3{ min-height:74px; padding:7px 5px; } .talento-no-v3 .tn-glifo{ width:24px; height:24px; font-size:9px; } .talento-no-v3 .tn-nome{ font-size:13px; min-height:26px; } .talento-no-v3 .tn-tipo{ font-size:6px; padding:3px 4px; } .talento-pop-grid{ grid-template-columns:1fr; } .talento-pop-actions{ flex-direction:column-reverse; } .talento-pop-actions .btn{ width:100%; } } .cos-shop{ display:flex; flex-direction:column; gap:16px; } .cos-shop-top{ display:grid; grid-template-columns:170px 1fr; gap:16px; align-items:center; padding:14px; border:1px solid rgba(255,255,255,.10); border-radius:8px; background: radial-gradient(circle at 16% 18%, rgba(255,224,138,.18), transparent 34%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015)); } .cos-preview{ width:160px; height:160px; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), rgba(0,0,0,.20) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 28px rgba(255,224,138,.16); } .cos-shop-copy h3{ font-size:14px; color:var(--ouro); margin-bottom:6px; } .cos-shop-copy p{ max-width:680px; color:var(--pergaminho2); font-size:19px; line-height:1.2; } .cos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; } .cos-card{ min-height:286px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; text-align:center; border:1px solid var(--ui-line); border-radius:8px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)), rgba(0,0,0,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18); } .cos-card-preview{ width:112px; height:112px; border-radius:8px; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.18), rgba(0,0,0,.15)); } .cos-name{ min-height:32px; display:flex; align-items:center; justify-content:center; color:var(--pergaminho); font-family:var(--fonte-titulo); font-size:9px; line-height:1.25; } .cos-type{ color:var(--apagado); font-size:16px; text-transform:capitalize; } .cos-card .btn{ width:100%; margin-top:auto; } .card-classe .retrato-mini{ width:86px; height:86px; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), rgba(0,0,0,.18)); box-shadow:0 0 18px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08); } .card-sub .retrato-mini{ width:98px; height:98px; background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.16), rgba(0,0,0,.18)); box-shadow:0 0 18px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08); } .acao-cinema{ width:min(820px,94vw); padding:14px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:linear-gradient(180deg, rgba(12,18,22,.96), rgba(6,9,12,.96)); box-shadow:0 30px 80px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08); } .acao-cinema-canvas{ width:100%; aspect-ratio:420 / 236; display:block; border:1px solid rgba(255,255,255,.10); border-radius:6px; background:#071015; } .acao-cinema-hud{ display:grid; grid-template-columns:1fr auto; gap:10px 14px; align-items:center; margin-top:12px; } .acao-cinema-title{ font-family:var(--fonte-titulo); font-size:12px; color:var(--ouro); line-height:1.35; } .acao-cinema-phase{ color:var(--pergaminho2); font-size:18px; text-align:right; } .acao-cinema-progress{ grid-column:1/-1; height:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(0,0,0,.38); } .acao-cinema-progress span{ display:block; width:0; height:100%; background:linear-gradient(90deg, var(--acento), var(--ouro)); box-shadow:0 0 18px var(--brilho); transition:width .08s linear; } /* ============ ARENA (PVP) ============ */ .pvp-corpo{ display:flex; flex-direction:column; gap:14px; } .pvp-intro{ color:rgba(223,233,223,.82); line-height:1.55; font-size:15px; } .pvp-voce{ font-family:var(--fonte-titulo); font-size:10px; color:var(--acento-suave); padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--acento); border-radius:0 7px 7px 0; background:rgba(255,255,255,.03); } .pvp-lista{ display:flex; flex-direction:column; gap:8px; } .pvp-lista-tit{ font-family:var(--fonte-titulo); font-size:9px; color:rgba(223,233,223,.55); margin-top:4px; } .pvp-card{ display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:linear-gradient(158deg, rgba(192,68,74,.06), rgba(11,19,17,.6)); } .pvp-card:hover{ border-color:rgba(224,85,106,.4); } .pvp-av{ width:48px; height:48px; image-rendering:pixelated; border:1px solid rgba(255,255,255,.1); border-radius:6px; background:rgba(0,0,0,.3); } .pvp-nome{ font-family:var(--fonte-titulo); font-size:11px; color:#f2e6d6; } .pvp-meta{ font-size:13px; margin-top:3px; } .pvp-desafiar{ --acao-a:#e0556a; } .pvp-divino{ margin-top:4px; } .pvp-vazio{ padding:14px; border:1px dashed rgba(255,255,255,.16); border-radius:8px; line-height:1.5; font-size:14px; } /* céus — vitória */ .pvp-vit{ display:flex; flex-direction:column; gap:12px; text-align:center; } .pvp-vit-tit{ font-family:var(--fonte-titulo); font-size:14px; color:#ffd86b; text-shadow:0 0 14px rgba(255,216,107,.5); } .pvp-vit-fala{ color:rgba(223,233,223,.85); font-style:italic; line-height:1.55; font-size:15px; } .pvp-vit-recomp{ display:flex; flex-direction:column; gap:6px; align-items:center; } .pvp-vit-linha{ display:flex; gap:10px; font-family:var(--fonte-titulo); font-size:10px; color:var(--acento-suave); } .pvp-vit-linha b{ color:#ffe08a; } .pvp-bonus{ font-size:14px; color:#aee06f; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ border:1px solid rgba(255,255,255,.10); border-radius:999px; background:linear-gradient(180deg, rgba(107,212,157,.8), rgba(103,216,245,.72)); } @media (max-width:1100px){ .acoes{ grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); } .hud{ grid-template-columns:1fr; } .hud-recursos{ justify-content:flex-start; } } @media (max-width:900px){ body{ overflow:auto; } .tela{ min-height:100%; height:auto; overflow:auto; padding:10px; } /* layout EM BLOCO no mobile: nada de linhas de grid espremendo a cena/log. Tudo empilha em altura natural e a PÁGINA rola. */ .jogo-wrap{ display:block; width:100%; height:auto; min-height:0; } .jogo-wrap > *{ margin-bottom:10px; } .jogo-wrap > *:last-child{ margin-bottom:0; } /* corpo empilha: o LOBBY DO PERSONAGEM vem primeiro, depois a clareira */ .jogo-corpo{ display:flex; flex-direction:column; } .forja-layout{ grid-template-columns:1fr; } .lateral{ order:-1; min-height:auto; } /* a cena precisa de altura real, senão o canvas (flex:1) colapsa */ .cena{ height:46vw; min-height:190px; max-height:320px; } /* o log precisa de altura mínima para não sumir no empilhamento */ .lateral .log{ min-height:150px; max-height:240px; } /* barra de ações: mostra o cabeçalho/minimizar e fica em 3 colunas */ .acoes-head{ display:flex; } .acoes{ grid-template-columns:repeat(3,minmax(100px,1fr)); } /* ---- modo minimizado (lite): tira horizontal, ícone em destaque ---- */ .acoes-wrap.min .acoes{ display:flex; flex-wrap:nowrap; grid-template-columns:none; overflow-x:auto; gap:8px; padding:2px 2px 8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .acoes-wrap.min .acao-btn{ flex:0 0 auto; width:68px; min-height:66px; grid-template-columns:1fr; /* empilha ícone sobre rótulo */ justify-items:center; text-align:center; gap:5px; padding:8px 5px 9px; scroll-snap-align:start; } .acoes-wrap.min .acao-btn::before{ /* trilho de acento vai pro rodapé */ inset:auto 8px 0 8px; width:auto; height:3px; border-radius:3px 3px 0 0; } .acoes-wrap.min .ac-ico{ width:30px; height:30px; font-size:16px; } .acoes-wrap.min .ac-label{ font-size:7px; line-height:1.15; letter-spacing:0; } .cos-shop-top{ grid-template-columns:1fr; justify-items:center; text-align:center; } .acao-cinema-hud{ grid-template-columns:1fr; } .acao-cinema-phase{ text-align:left; } .logo-sky{ font-size:54px; } .titulo-wrap{ padding:18px; } } @media (max-width:560px){ .acoes{ grid-template-columns:repeat(2,minmax(118px,1fr)); } .treino-resumo{ grid-template-columns:1fr; } .inv-equip{ grid-template-columns:1fr; } .forja-equip-grid,.forja-fundir-grid{ grid-template-columns:1fr; } .cos-grid{ grid-template-columns:1fr; } .gm-hero{ grid-template-columns:1fr; justify-items:center; text-align:center; } .gm-grid,.gm-grid-attrs{ grid-template-columns:1fr; } .gm-set{ grid-template-columns:1fr; } .talento-wrap{ padding:12px; } .divino-topo{ grid-template-columns:1fr; justify-items:center; text-align:center; } .divino-selo{ width:56px; height:56px; } .divino-botoes{ justify-content:stretch; } .divino-falar-btn{ width:100%; } .btn-grande{ min-width:0; width:100%; } .modal{ width:98vw; } }