/* ---------- CONFIGURAÇÕES (abas na lateral) ---------- */ #cfg { position: fixed; inset: 0; z-index: 80; display: flex; background: linear-gradient(135deg, #15191e, #23282e); color: #e9edf1; font-family: inherit; } #cfg .cfgMain { flex: 1; min-width: 0; display: flex; flex-direction: column; } #cfg .cfgBody { flex: 1; overflow-y: auto; padding: 14px 18px 30px; -webkit-overflow-scrolling: touch; } #cfg .cfgSide { width: min(270px, 30vw); background: #0d1014e6; border-left: 1px solid #ffffff18; display: flex; flex-direction: column; overflow-y: auto; } #cfg .cfgHead { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px 16px; font-size: 20px; letter-spacing: .5px; } #cfg .cfgHead button { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer; } #cfg .cfgTab { text-align: left; background: none; border: 0; border-top: 1px solid #ffffff10; color: #c9d0d7; padding: 15px 16px; font-weight: 700; font-size: 15px; font-family: inherit; line-height: 1.15; letter-spacing: .6px; cursor: pointer; position: relative; } #cfg .cfgTab.sel { color: #111; background: linear-gradient(90deg, #e9edf1, #c9cfd6); } #cfg .cfgTab.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #2f6bff; } #cfg .cfgTit { margin: 2px 0 12px; font-size: 16px; letter-spacing: 1px; color: #ffd84a; border-bottom: 1px solid #ffffff18; padding-bottom: 8px; } #cfg .cfgRow { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #ffffff0c; } #cfg .cfgLab { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; } #cfg .cfgLab small { display: block; font-weight: 400; font-size: 11.5px; opacity: .6; margin-top: 2px; } #cfg .cfgCtl { flex: 1.2; display: flex; align-items: center; gap: 10px; justify-content: flex-end; } #cfg .cfgCtl input[type=range] { flex: 1; accent-color: #ffb020; height: 22px; } #cfg .cfgCtl b { min-width: 48px; text-align: right; font-size: 13px; } #cfg .cfgSeg { gap: 0; } #cfg .cfgSeg button { flex: 1; background: #ffffff10; color: #dfe4e9; border: 1px solid #ffffff22; padding: 8px 6px; font-weight: 600; font-size: 12.5px; font-family: inherit; line-height: 1.15; cursor: pointer; } #cfg .cfgSeg button:first-child { border-radius: 6px 0 0 6px; } #cfg .cfgSeg button:last-child { border-radius: 0 6px 6px 0; } #cfg .cfgSeg button.sel { background: #ffb020; color: #1a1205; border-color: #ffb020; } .cfgSw { position: relative; width: 46px; height: 26px; flex: none; } .cfgSw input { opacity: 0; width: 0; height: 0; } .cfgSw span { position: absolute; inset: 0; background: #ffffff25; border-radius: 13px; transition: .15s; cursor: pointer; } .cfgSw span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .15s; } .cfgSw input:checked + span { background: #ffb020; } .cfgSw input:checked + span::after { transform: translateX(20px); } #cfg .cfgCores { justify-content: flex-end; gap: 8px; } #cfg .cfgCores button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0008; cursor: pointer; } #cfg .cfgCores button.sel { outline: 3px solid #ffb020; outline-offset: 2px; } #cfg .cfgMiraPrev { display: flex; justify-content: center; padding: 16px; } #cfg .miraCaixa { position: relative; width: 140px; height: 90px; background: linear-gradient(#7bb3e0, #6aa83e); border-radius: 8px; } #cfg .cfgDica { font-size: 12.5px; opacity: .7; margin: 10px 4px; } #cfg .cfgConta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #cfg .cfgConta div { background: #ffffff0d; border-radius: 8px; padding: 10px; } #cfg .cfgConta small { display: block; opacity: .6; } #cfg .cfgConta b { font-size: 16px; } /* esquemas de controle (cartões com o desenho das áreas da tela) */ #cfg .cfgEsq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } #cfg .esq { background: #ffffff08; border: 2px solid transparent; border-radius: 6px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0; } #cfg .esq.sel { border-color: #ffc23a; background: #ffffff10; } #cfg .esqT { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.3; } #cfg .esqN { flex: none; width: 30px; height: 34px; border: 1px solid #ffffff60; display: flex; align-items: center; justify-content: center; font-size: 20px; } #cfg .esqD { display: flex; height: 130px; background: #00000030; border-radius: 4px; overflow: hidden; } #cfg .esqC { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; font-size: 11.5px; border-right: 1px solid #ffffff10; } #cfg .esqC:first-child { background: #ffffff06; } #cfg .esqC em { flex: 1; width: 1px; background: #ffffff55; margin: 8px 0 4px; } #cfg .esqC i { position: absolute; top: 18px; } #cfg .esqPt { width: 7px; height: 7px; border-radius: 50%; background: #ddd; } #cfg .esqBala { width: 40px; height: 40px; border-radius: 50%; background: #00000055; top: 10px !important; } #cfg .esqBala::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 22px; background: linear-gradient(#e8b06a 0 30%, #b8bcc2 30%); border-radius: 4px 4px 1px 1px; transform: translate(-50%, -50%) rotate(35deg); } #cfg .esqJoy { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(#ffffff60 25%, #ffffff18 30%); top: 14px !important; } #cfg .esqP { width: 100%; padding: 8px; } @media (max-height: 460px) { #cfg .cfgTab { padding: 11px 14px; font-size: 13px; } #cfg .cfgHead { font-size: 17px; padding: 8px 10px 6px 14px; } #cfg .cfgRow { padding: 7px 4px; } #cfg .esqD { height: 96px; } #cfg .esqT { font-size: 10.5px; } #cfg .esqN { width: 24px; height: 28px; font-size: 16px; } } @media (orientation: portrait) { #cfg { flex-direction: column-reverse; } #cfg .cfgSide { width: 100%; flex-direction: row; overflow-x: auto; border-left: 0; } #cfg .cfgHead { display: none; } #cfg .cfgTab { white-space: nowrap; } #cfg .cfgEsq { grid-template-columns: 1fr; } } /* mira configurável (cor, tamanho, espessura, ponto) */ #crosshair i, #miraPrev i { background: var(--mira, #fff) !important; } #crosshair i:nth-child(1), #crosshair i:nth-child(2), #miraPrev i:nth-child(1), #miraPrev i:nth-child(2) { width: var(--miraEsp, 2px) !important; height: var(--miraTam, 9px) !important; left: calc(var(--miraEsp, 2px) / -2) !important; } #crosshair i:nth-child(3), #crosshair i:nth-child(4), #miraPrev i:nth-child(3), #miraPrev i:nth-child(4) { height: var(--miraEsp, 2px) !important; width: var(--miraTam, 9px) !important; top: calc(var(--miraEsp, 2px) / -2) !important; } #crosshair b, #miraPrev b { background: var(--mira, #fff) !important; } #crosshair.semPonto b, #miraPrev.semPonto b { display: none; } #miraPrev { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } #miraPrev i { position: absolute; box-shadow: 0 0 2px #000; } #miraPrev i:nth-child(1) { bottom: 5px; } #miraPrev i:nth-child(2) { top: 5px; } #miraPrev i:nth-child(3) { right: 5px; } #miraPrev i:nth-child(4) { left: 5px !important; } #miraPrev b { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; border-radius: 50%; } body.semHitmark #hitmarker { display: none !important; } body.touch.joyFixo #joyBase { display: block; } /* editor de botões (painel no topo) */ #hudEditor { position: fixed; z-index: 70; left: 50%; top: 6px; transform: translateX(-50%); width: min(620px, 74vw); background: #2b3036f2; border: 1px solid #ffffff30; border-radius: 4px; padding: 8px 10px 16px; color: #eef1f4; display: flex; flex-direction: column; gap: 8px; touch-action: none; font-size: 13px; } #hudEditor .he-l1, #hudEditor .he-l2 { display: flex; gap: 6px; align-items: center; } #hudEditor .he-b, #hudEditor .he-slot { background: #f0f2f4; color: #15181c; border: 1px solid #00000040; padding: 7px 12px; font-weight: 700; font-size: 14px; font-family: inherit; line-height: 1.15; border-radius: 2px; cursor: pointer; } #hudEditor .he-slot { flex: 1; display: flex; justify-content: space-between; text-align: left; font-weight: 600; } #hudEditor .he-salvar { background: #15181c; color: #fff; border-bottom: 3px solid #2f6bff; } #hudEditor .he-sair { padding: 7px 14px; } #hudEditor .he-l2 span { font-weight: 700; margin-right: 6px; white-space: nowrap; } #hudEditor .he-l2 .he-b { font-size: 12px; padding: 6px 8px; flex: 1; } #hudEditor .he-l3 { display: flex; gap: 12px; align-items: center; } #hudEditor .he-sl { flex: 1; display: flex; flex-direction: column; gap: 4px; } #hudEditor .he-nome { color: #ffd84a; font-weight: 700; } #hudEditor .he-sl label { display: flex; align-items: center; gap: 8px; } #hudEditor .he-sl label span { width: 112px; font-weight: 600; } #hudEditor .he-sl input { flex: 1; accent-color: #ffb020; } #hudEditor .he-sl i { width: 42px; text-align: right; font-style: normal; } #hudEditor .he-setas { display: grid; grid-template-columns: 34px 34px 34px; grid-template-rows: 30px 30px 30px; gap: 2px; } #hudEditor .he-setas button { background: #1d2126; color: #fff; border: 1px solid #ffffff25; border-radius: 3px; font-size: 13px; cursor: pointer; touch-action: none; } #hudEditor .he-setas .up { grid-column: 2; grid-row: 1; } #hudEditor .he-setas .lf { grid-column: 1; grid-row: 2; } #hudEditor .he-setas .rt { grid-column: 3; grid-row: 2; } #hudEditor .he-setas .dn { grid-column: 2; grid-row: 3; } #hudEditor .he-recolhe { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 56px; height: 22px; background: #2b3036f2; color: #fff; border: 1px solid #ffffff30; border-top: 0; border-radius: 0 0 8px 8px; cursor: pointer; font-size: 14px; } #hudEditor.recolhido .he-mais { display: none; } #heCancelar { position: fixed; z-index: 71; left: 8px; top: 8px; width: 58px; height: 58px; border-radius: 50%; background: #e9edf1; color: #15181c; border: 0; font-weight: 700; font-size: 13px; font-family: inherit; line-height: 1.15; box-shadow: 0 2px 8px #0008; cursor: pointer; } body.hudEdit #joyBase { display: block !important; pointer-events: auto; } body.hudEdit #joyBase.heSel { border-color: #ffd84a; box-shadow: 0 0 0 4px #ffd84a88; } @media (max-height: 420px) { #hudEditor { padding: 5px 8px 14px; gap: 5px; font-size: 12px; width: min(600px, 78vw); top: 4px; } #hudEditor .he-b, #hudEditor .he-slot { padding: 5px 9px; font-size: 12.5px; } #hudEditor .he-setas { grid-template-columns: 28px 28px 28px; grid-template-rows: 24px 24px 24px; } #hudEditor .he-sl label span { width: 96px; } } /* ---------- sensibilidade / gráficos no estilo das imagens ---------- */ #cfg .cfgSub { display: flex; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid #ffffff14; } #cfg .cfgSub button { background: none; border: 0; color: #9aa4ae; padding: 9px 18px; font-weight: 700; font-size: 14px; font-family: inherit; letter-spacing: .5px; cursor: pointer; } #cfg .cfgSub button.sel { background: linear-gradient(#e9edf1, #c5ccd3); color: #111; box-shadow: inset 0 -3px 0 #2f6bff; } #cfg .cfgFaixa { display: flex; flex-direction: column; justify-content: center; background: #ffffff0d; border-left: 4px solid #ffc23a; padding: 9px 12px; margin: 10px 0 4px; font-size: 15px; font-weight: 700; } #cfg .cfgFaixa small { font-weight: 400; font-size: 11.5px; opacity: .6; } #cfg .cfgFaixaSeg { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; } #cfg .cfgFaixaSeg > span { flex: 1; min-width: 140px; } #cfg .cfgFaixaSeg .cfgSeg { display: flex; flex: 2; min-width: 260px; } #cfg .cfgFaixaSeg .cfgSeg button { flex: 1; background: #ffffff10; color: #dfe4e9; border: 1px solid #ffffff22; padding: 8px 4px; font-weight: 600; font-size: 12px; font-family: inherit; cursor: pointer; } #cfg .cfgFaixaSeg .cfgSeg button.sel { background: linear-gradient(#e9edf1, #c5ccd3); color: #111; box-shadow: inset 0 -3px 0 #2f6bff; } #cfg .cfgSeg button.sel { box-shadow: inset 0 -3px 0 #2f6bff; } #cfg .cfgSeg sup { font-size: 8px; background: #ffc23a; color: #111; padding: 1px 3px; margin-left: 3px; border-radius: 2px; vertical-align: top; } #cfg .cfgLinha { background: #ffffff08; margin-top: 2px; padding: 8px 10px; border-bottom: 0; } #cfg .cfgLinha .cfgCtl { flex: 1.6; } #cfg .cfgLinha .cfgCtl b { order: -1; min-width: 46px; } #cfg .cfgPM { width: 34px; height: 30px; flex: none; background: #0d1014; color: #fff; border: 1px solid #ffffff40; font-size: 20px; line-height: 1; cursor: pointer; touch-action: none; } #cfg .cfgPM:active { background: #ffb020; color: #111; } #cfg .cfgSegRow .cfgCtl { flex: 2.4; } #cfg .cfgTag { display: inline-block; border: 1px solid #ffffff30; padding: 2px 7px; margin: 3px 4px 0 0; font-size: 11.5px; opacity: .9; } #cfg .cfgTags { display: flex; flex-wrap: wrap; flex: 2; justify-content: flex-end; } #cfg .cfgAbre { cursor: pointer; } #cfg .cfgAbre > b { font-size: 18px; } #cfg .cfgRodape { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; } #cfg .cfgRodape span { flex: 1; font-size: 12px; opacity: .65; } #cfg .cfgRedef { background: #0d1014; color: #fff; border: 1px solid #ffffff40; padding: 9px 12px; font-weight: 700; font-family: inherit; cursor: pointer; } #cfg .cfgAceitar { background: linear-gradient(#ffd23a, #f0b416); color: #1a1205; border: 2px solid #fff2b0; padding: 10px 36px; font-weight: 800; font-size: 15px; font-family: inherit; cursor: pointer; box-shadow: 0 0 12px #ffc23a88; } @media (max-height: 460px) { #cfg .cfgLinha { padding: 5px 8px; } #cfg .cfgPM { width: 30px; height: 26px; } #cfg .cfgFaixa { padding: 6px 10px; font-size: 13.5px; } } /* ---------- botões de controle no estilo das imagens: círculo cinza translúcido + silhueta branca ---------- */ .tbtn { background: rgba(28,30,33,.40) !important; border: 2px solid rgba(255,255,255,.30) !important; box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; color: #fff; } .tbtn svg { width: 64% !important; height: 64% !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); } .tbtn.fire svg, .tbtn.fire2 svg { width: 74% !important; height: 74% !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); } .tbtn.fire, .tbtn.fire2 { background: radial-gradient(circle, rgba(20,22,25,.55) 55%, rgba(40,43,47,.40) 56%) !important; border-color: rgba(255,255,255,.34) !important; } .tbtn:active, .tbtn.on { background: rgba(255,255,255,.26) !important; border-color: rgba(255,255,255,.85) !important; } .tbtn.on svg { filter: drop-shadow(0 0 3px rgba(255,255,255,.7)); } .tbtn.small { border-radius: 50% !important; } .tbtn.small svg { width: 58% !important; height: 58% !important; } .tbtn.abil span { width: 66% !important; height: 66% !important; } .tbtn.abil i { background: conic-gradient(rgba(0,0,0,.55) var(--cd, 0deg), transparent 0) !important; } .tbtn.abil.ready { border-color: rgba(255,176,32,.95) !important; box-shadow: 0 0 0 2px rgba(255,176,32,.35) !important; } .tbtn.interact { background: rgba(28,30,33,.48) !important; } #joyBase { background: radial-gradient(circle, rgba(0,0,0,.10) 38%, rgba(0,0,0,.22) 70%), url("data:image/svg+xml;utf8,") center/100% 100% no-repeat !important; border: 2px solid rgba(255,255,255,.26) !important; box-shadow: none !important; } #joyKnob { background: radial-gradient(circle at 50% 40%, rgba(60,63,68,.75), rgba(20,22,25,.75)) !important; border: 2px solid rgba(255,255,255,.55) !important; box-shadow: 0 2px 6px rgba(0,0,0,.4) !important; } #joyBase.corre { border-color: #ffd84a !important; } .tbtn.abil span svg { width: 100% !important; height: 100% !important; }