/* ClickJ — clicker + PvP por turnos. */

#cj-mensagem:empty { display: none; }
.cj-view { display: none; }
.cj-view.ativa { display: block; }
.cj-subtitulo { margin: 18px 0 10px; font-size: 15px; color: #9dc2ff; }

/* Moeda J */
.cj-moeda { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe28a, #e0a526); color: #5a3a00; font-weight: 900; font-size: .8em; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); vertical-align: middle; }

/* Avatar com item da classe por cima da foto */
.cj-av { position: relative; width: var(--t, 96px); height: var(--t, 96px); flex-shrink: 0; }
.cj-av-foto { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #1c2c4a; border: 3px solid #2d4470; box-sizing: border-box; }
.cj-av-inicial { display: grid; place-items: center; color: #9dc2ff; font-weight: bold; font-size: calc(var(--t, 96px) * .4); }
.cj-av-deco { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: contain; pointer-events: none; }
.cj-av-item { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

/* Criação de personagem */
.cj-genero { display: flex; gap: 8px; margin-bottom: 14px; }
.cj-genero-btn { flex: 1; padding: 10px; border: 1px solid #26314f; border-radius: 10px; background: #111a2e; color: #c9ccda; font-weight: 600; cursor: pointer; }
.cj-genero-btn.ativo { border-color: #2f6fe0; background: #1c2c4a; color: #fff; }
.cj-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.cj-classe { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 8px 12px; border: 2px solid #26314f; border-radius: 14px; background: #111a2e; color: #f4f6ff; cursor: pointer; text-align: center; }
.cj-classe:hover { border-color: #3b82f6; }
.cj-classe.selecionada { border-color: #f5c542; background: #1d2338; box-shadow: 0 0 0 3px rgba(245, 197, 66, .15); }
.cj-classe strong { margin-top: 6px; font-size: 15px; }
.cj-classe small { color: #aeb2c7; font-size: 12px; line-height: 1.3; }
.cj-classe .cj-classe-bonus { color: #85e0ae; font-weight: bold; }
.cj-classe-pontos { list-style: none; margin: 6px 0 0; padding: 0; text-align: left; width: 100%; }
.cj-classe-pontos li { font-size: 11px; line-height: 1.4; color: #c9ccda; }
.cj-criar-btn { width: 100%; margin-top: 16px; padding: 13px; font-size: 15px; }
.cj-criar-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Layout principal */
.cj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 20px; align-items: start; }
.cj-heroi { display: flex; align-items: center; gap: 22px; padding: 26px 16px 14px; }
.cj-heroi-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cj-heroi-info strong { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-heroi-info small { color: #aeb2c7; }
.cj-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cj-badge { padding: 3px 9px; border: 1px solid #2d4470; border-radius: 999px; color: #9dc2ff; font-size: 12px; white-space: nowrap; }
.cj-badge:empty { display: none; }

.cj-recursos { padding: 12px 14px; border: 1px solid #20293f; border-radius: 14px; background: #111a2e; }
.cj-jcoins { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 28px; font-weight: bold; color: #ffd36a; font-variant-numeric: tabular-nums; word-break: break-all; }
.cj-jcoins-pequeno { font-size: 16px; }
.cj-progresso { height: 10px; margin: 10px 0 6px; border-radius: 999px; background: #1c2c4a; overflow: hidden; }
#cj-progresso-barra { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2f6fe0, #85e0ae); transition: width .25s; }
#cj-progresso-texto { color: #aeb2c7; font-size: 12px; }

/* Botão de clique */
.cj-botao-clique { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 190px; height: 190px; margin: 22px auto 8px; border: 3px solid #f5c542; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #2a3d66, #111a2e 70%); color: #f4f6ff; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 0 #8a6a1c, 0 14px 30px rgba(0,0,0,.4); transition: transform .06s, box-shadow .06s; }
.cj-botao-clique:hover { border-color: #ffe28a; }
.cj-botao-clique.apertado { transform: translateY(6px) scale(.97); box-shadow: 0 2px 0 #8a6a1c, 0 6px 16px rgba(0,0,0,.4); }
.cj-botao-clique strong { font-size: 20px; letter-spacing: 2px; }
.cj-botao-clique small { color: #ffd36a; font-weight: bold; }
.cj-botao-clique svg { width: 74px; height: 74px; }
.cj-flutuante { position: absolute; z-index: 5; color: #ffd36a; font-weight: bold; font-size: 16px; pointer-events: none; text-shadow: 0 2px 4px rgba(0,0,0,.7); animation: cj-subir .8s ease-out forwards; white-space: nowrap; }
@keyframes cj-subir { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -60px); } }
.cj-info-clique { margin: 12px 0 0; color: #aeb2c7; font-size: 13px; text-align: center; }

.cj-efeitos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.cj-efeito { padding: 4px 10px; border-radius: 999px; background: #2a1f45; border: 1px solid #6c4ab6; color: #d5c4ff; font-size: 12px; font-variant-numeric: tabular-nums; }

.cj-acoes { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cj-acoes .botao { min-width: 130px; }
.cj-rebirth-btn { border-color: #f5c542; color: #ffd36a; animation: cj-brilho 1.6s ease-in-out infinite; }
@keyframes cj-brilho { 50% { box-shadow: 0 0 16px rgba(245, 197, 66, .55); } }
.cj-ascender-btn { border-color: #a855f7; color: #d8b4fe; animation: cj-brilho-roxo 1.6s ease-in-out infinite; }
@keyframes cj-brilho-roxo { 50% { box-shadow: 0 0 16px rgba(168, 85, 247, .55); } }
.cj-dica { margin: 8px 0 0; color: #aeb2c7; font-size: 12px; text-align: center; }
.cj-dica:empty { display: none; }

.cj-skills { display: flex; flex-direction: column; gap: 8px; }
.cj-skill { display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.cj-skill-nome { color: #c9ccda; white-space: nowrap; }
.cj-skill.principal .cj-skill-nome { color: #ffd36a; font-weight: bold; }
.cj-skill-barra { height: 8px; border-radius: 999px; background: #1c2c4a; overflow: hidden; }
.cj-skill-barra div { height: 100%; border-radius: 999px; background: #5b9dff; }
.cj-skill.principal .cj-skill-barra div { background: #f5c542; }
.cj-skill-valor { min-width: 48px; text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.cj-skill-valor small { color: #c9a6ff; font-weight: normal; }

/* Online */
.cj-online { position: sticky; top: 70px; padding: 12px; border: 1px solid #20293f; border-radius: 14px; background: #111a2e; }
.cj-online .cj-subtitulo { margin-top: 0; }
.cj-online-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #1c2640; }
.cj-online-item:last-child { border-bottom: none; }
.cj-online-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cj-online-info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-online-info small { color: #aeb2c7; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-online-info .cj-online-jcoins { color: #ffd36a; font-size: 11px; }
.cj-online-info .cj-moeda { width: 14px; height: 14px; margin-right: 3px; font-size: 9px; }
.cj-desafiar { padding: 5px 9px; border: 1px solid #b64a4a; border-radius: 8px; background: transparent; color: #ff9a9a; font-size: 12px; cursor: pointer; white-space: nowrap; }
.cj-desafiar:hover { background: #3a1c1c; }
.cj-desafiar:disabled { opacity: .45; cursor: not-allowed; }
.cj-tag { font-size: 11px; color: #aeb2c7; white-space: nowrap; }

/* Loja */
.cj-loja-overlay { position: fixed; inset: 0; z-index: 1500; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .7); }
/* Popup de confirmação (ex: vender pet) tem que ficar acima da loja —
   .popup-overlay sozinho (z-index 100) renderizava atrás dela. */
#cj-popup { z-index: 1600; }
.cj-loja-overlay.ativa { display: flex; }
.cj-loja { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: 88vh; padding: 18px; border: 1px solid #26314f; border-radius: 16px; background: #141c30; }
.cj-loja-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding-right: 30px; }
.cj-loja-topo h3 { margin: 0; font-size: 20px; }
.cj-abas { display: flex; gap: 6px; margin-bottom: 10px; }
.cj-aba { flex: 1; padding: 9px 6px; border: none; border-radius: 8px; background: #1e2233; color: #9da3b4; font-weight: 600; font-size: 13px; cursor: pointer; }
.cj-aba.ativa { background: #2f6fe0; color: #fff; }
.cj-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cj-filtros:empty { display: none; }
.cj-filtro { padding: 5px 11px; border: 1px solid #2d4470; border-radius: 999px; background: transparent; color: #9dc2ff; font-size: 12px; cursor: pointer; }
.cj-filtro.ativo { border-color: #f5c542; color: #ffd36a; background: #2a2412; }
.cj-loja-lista { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.cj-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #26314f; border-radius: 10px; background: #111a2e; }
.cj-item.comprado { border-color: #2c5a41; }
.cj-item.bloqueado { opacity: .55; }
.cj-swatch { width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 14px; }
.cj-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cj-item-info strong { font-size: 14px; }
.cj-item-info small { color: #aeb2c7; font-size: 12px; }
.cj-cat { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10px; vertical-align: middle; }
.cj-cat-basico { background: #243049; color: #9dc2ff; }
.cj-cat-medio { background: #203a2c; color: #85e0ae; }
.cj-cat-avancado { background: #3a2a48; color: #d5a6ff; }
.cj-cat-lendario { background: #4a3410; color: #ffd36a; }
.cj-item-acao { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cj-comprar { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid #2f6fe0; border-radius: 8px; background: #1c2c4a; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cj-comprar .cj-moeda { width: 14px; height: 14px; margin-right: -1px; font-size: 9px; }
.cj-comprar:hover:not(:disabled) { background: #2563eb; }
.cj-comprar:disabled { opacity: .5; cursor: not-allowed; }
.cj-usar { border-color: #6c4ab6; background: #2a1f45; }
.cj-usar:hover:not(:disabled) { background: #4b2f86; }
.cj-possui { color: #85e0ae; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cj-auto-card { margin-bottom: 10px; padding: 12px; border: 1px solid #6c4ab6; border-radius: 12px; background: #1d1830; }
.cj-pets-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-top: 6px; }
.cj-pet-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 10px 6px; border: 1px solid #26314f; border-radius: 12px; background: #111a2e; }
.cj-pet-card.equipado { border-color: #2c5a41; background: #132a1d; }
.cj-pet-card .cj-pet-icone { font-size: 26px; line-height: 1; }
.cj-pet-card .cj-pet-nome { font-size: 12px; font-weight: 600; }
.cj-pet-card .cj-pet-tier { font-size: 10px; color: #aeb2c7; }
.cj-pet-card .cj-pet-mult { font-size: 12px; color: #85e0ae; font-weight: 700; }
.cj-pet-card .cj-pet-acoes { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 4px; }
.cj-pet-card .cj-pet-acoes .cj-comprar { width: 100%; justify-content: center; font-size: 11px; padding: 5px 6px; white-space: normal; line-height: 1.3; }
.cj-vender-pet { border-color: #5a2f3a !important; background: #2a1420 !important; color: #e8b6c4; }
.cj-vender-pet:hover:not(:disabled) { background: #3a1a29 !important; }
.cj-auto-card strong { display: block; margin-bottom: 4px; }
.cj-auto-card small { display: block; margin-bottom: 8px; color: #c9ccda; }
.cj-respec-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid #26314f; border-radius: 10px; background: #111a2e; }
.cj-respec-input { width: 64px; padding: 6px 8px; border: 1px solid #2d4470; border-radius: 8px; background: #0d1424; color: #f4f6ff; font-size: 14px; text-align: center; }
#cj-respec-restante { font-weight: 600; font-size: 13px; }

/* Luta */
.cj-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 34px 8px 10px; }
.cj-lutador { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.cj-lutador-av { position: relative; }
.cj-lutador-nick { max-width: 100%; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-lutador-titulo { color: #aeb2c7; font-size: 12px; }
.cj-hp { position: relative; width: 100%; max-width: 190px; height: 18px; border-radius: 999px; background: #3a1c1c; overflow: hidden; border: 1px solid #5a2a2a; }
.cj-hp-barra { height: 100%; background: linear-gradient(90deg, #2fb36b, #85e0ae); transition: width .5s ease-out; }
.cj-hp-barra.baixa { background: linear-gradient(90deg, #d94343, #ff8a8a); }
.cj-hp-texto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px #000; }
.cj-lutador-status { min-height: 18px; color: #9dc2ff; font-size: 12px; }
.cj-lutador.vez .cj-lutador-av .cj-av-foto { border-color: #f5c542; box-shadow: 0 0 18px rgba(245, 197, 66, .45); }
.cj-lutador.desconectado { opacity: .5; }
.cj-vs { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cj-vs span { font-size: 26px; font-weight: 900; color: #ff8a8a; }
.cj-vs small { color: #ffd36a; font-variant-numeric: tabular-nums; }
.cj-pocoes-luta-bloco { margin: 0 0 14px; padding: 10px 12px; border: 1px dashed #6c4ab6; border-radius: 12px; background: #1d1533; }
.cj-pocoes-luta-titulo { display: block; margin-bottom: 8px; color: #c9a6ff; text-align: center; font-weight: 600; }
.cj-pocoes-luta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cj-pocao-luta { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1.5px solid #9d6aff; border-radius: 10px; background: #3a2564; color: #ecdcff; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 0 #6c4ab6; }
.cj-pocao-luta:hover:not(:disabled) { background: #4b2f86; }
.cj-pocao-luta:disabled { opacity: .4; cursor: not-allowed; border-style: dashed; box-shadow: none; }
.cj-turno-msg { margin: 8px 0 12px; text-align: center; font-weight: bold; color: #9dc2ff; }
.cj-turno-msg.minha { color: #ffd36a; }
.cj-acoes-luta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cj-acao { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; border: 1px solid #29385c; border-radius: 12px; background: #141c30; color: #f4f6ff; font-size: 20px; cursor: pointer; }
.cj-acao span { font-size: 14px; font-weight: bold; }
.cj-acao small { color: #aeb2c7; font-size: 11px; }
.cj-acao:hover:not(:disabled) { border-color: #3b82f6; background: #16233d; }
.cj-acao:disabled { opacity: .4; cursor: not-allowed; }
.cj-log { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.cj-log p { margin: 0; padding: 7px 10px; border-radius: 8px; background: #111a2e; color: #c9ccda; font-size: 13px; }
.cj-log p:first-child { color: #f4f6ff; border-left: 3px solid #f5c542; }
.cj-desistir { display: block; margin: 14px auto 0; border-color: #5a2a2a; color: #ff9a9a; }
.cj-resultado { margin-top: 14px; padding: 16px; border: 1px solid #26314f; border-radius: 14px; background: #111a2e; text-align: center; }
.cj-resultado h3 { margin: 0 0 6px; font-size: 22px; }
.cj-resultado.vitoria h3 { color: #85e0ae; }
.cj-resultado.derrota h3 { color: #ff9a9a; }
.cj-resultado p { margin: 0 0 12px; color: #c9ccda; }

/* Efeitos de luta sobre o avatar */
.cj-escudo, .cj-cruz, .cj-mao { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.cj-escudo { width: 78%; height: 78%; transition: opacity .2s, transform .2s; }
.cj-lutador.defendendo .cj-escudo { opacity: .88; transform: translate(-50%, -50%) scale(1); }
.cj-lutador.esquivando .cj-av { opacity: .7; filter: drop-shadow(0 0 8px #9dc2ff); }
.cj-cruz { color: #51cf66; font-size: 48px; font-weight: 900; text-shadow: 0 0 12px #51cf66; }
.cj-mao { font-size: 46px; }
.cj-numeros { position: absolute; left: 50%; top: 0; width: 0; height: 0; }
.cj-numero { position: absolute; transform: translateX(-50%); font-weight: 900; font-size: 22px; white-space: nowrap; text-shadow: 0 2px 4px #000; animation: cj-numero 1.1s ease-out forwards; pointer-events: none; }
.cj-numero.dano { color: #ff8a8a; }
.cj-numero.total { color: #ff5c5c; font-size: 26px; }
.cj-numero.cura { color: #51cf66; }
.cj-numero.esquiva, .cj-numero.info { color: #9dc2ff; font-size: 15px; }
@keyframes cj-numero { from { opacity: 1; top: 0; } to { opacity: 0; top: -50px; } }

.cj-anim-tapa-dir { animation: cj-tapa-dir .6s ease-in-out; }
.cj-anim-tapa-esq { animation: cj-tapa-esq .6s ease-in-out; }
@keyframes cj-tapa-dir { 0% { transform: none; } 45% { transform: translateX(70px) rotate(12deg); } 100% { transform: none; } }
@keyframes cj-tapa-esq { 0% { transform: none; } 45% { transform: translateX(-70px) rotate(-12deg); } 100% { transform: none; } }
.cj-anim-tremer { animation: cj-tremer .45s; }
@keyframes cj-tremer { 20% { transform: translateX(-8px) rotate(-4deg); } 40% { transform: translateX(8px) rotate(4deg); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.cj-anim-mao { animation: cj-mao .5s ease-out; }
@keyframes cj-mao { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-30deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(10deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0); } }
.cj-anim-esquiva { animation: cj-esquiva .9s ease-in-out; }
@keyframes cj-esquiva { 0% { opacity: 1; filter: none; transform: none; } 35% { opacity: 0; filter: blur(6px); transform: scale(.75); } 65% { opacity: 0; filter: blur(6px); transform: scale(.75); } 100% { opacity: 1; filter: none; transform: none; } }
.cj-anim-escudo { animation: cj-escudo .5s ease-out; }
@keyframes cj-escudo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: .88; transform: translate(-50%, -50%) scale(1); } }
.cj-anim-cura .cj-av-foto { animation: cj-brilho-cura 1s ease-out; }
.cj-anim-cura .cj-cruz { animation: cj-cruz 1s ease-out; }
@keyframes cj-brilho-cura { 0% { box-shadow: 0 0 0 0 rgba(81, 207, 102, .9); border-color: #51cf66; } 100% { box-shadow: 0 0 30px 16px rgba(81, 207, 102, 0); } }
@keyframes cj-cruz { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -90%) scale(1); } }

/* Popup e aviso rápido */
.cj-popup .cj-av { margin: 22px auto 10px; }
.cj-popup-contagem { color: #ffd36a; font-size: 13px; }
.cj-toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; max-width: calc(100vw - 32px); padding: 10px 16px; border: 1px solid #2d4470; border-radius: 12px; background: rgba(17, 26, 46, .97); color: #f4f6ff; font-size: 14px; text-align: center; opacity: 0; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; pointer-events: none; }
.cj-toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.cj-toast.erro { border-color: #b64a4a; color: #ffb3b3; }

@media (min-width: 721px) {
  #tela-clickj .cj-layout { padding-right: 130px; }
}
@media (max-width: 720px) {
  .cj-layout { grid-template-columns: 1fr; }
  .cj-online { position: static; }
}
@media (max-width: 480px) {
  .cj-heroi { gap: 16px; padding: 22px 6px 12px; }
  .cj-jcoins { font-size: 22px; }
  .cj-botao-clique { width: 170px; height: 170px; }
  .cj-skill { grid-template-columns: 100px 1fr auto; font-size: 12px; }
  .cj-acoes-luta { grid-template-columns: repeat(2, 1fr); }
  .cj-arena { gap: 4px; padding-top: 30px; }
  .cj-vs span { font-size: 20px; }
  .cj-abas { flex-wrap: wrap; }
  .cj-aba { flex: 1 1 45%; }
  .cj-item { flex-wrap: wrap; }
  .cj-item-acao { width: 100%; justify-content: flex-end; }
}

/* Segurar o dedo no botão dispara cliques em sequência: sem isso o Android/iOS
   entende o toque longo como seleção de texto ou menu de contexto. */
#cj-botao-clique { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }