Mudanças entre as edições de "Usuário Discussão:Larifk"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(6 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
{{Lari1
<html lang="pt-br">
| titulo = Sabaody Archipelago
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boss Rush — Preview</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #e8eaf0; }


/* ===== VARIABLES ===== */
| boss1nome = Urogue
#lk-outer {
| boss1skill1nome = Karmic Punishment
  --bg:      #f1f3f8;
| boss1skill1video = dQw4w9WgXcQ
  --surf:    #ffffff;
| boss1skill1desc = Converte dano recebido em força de ataque. Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.Converte dano recebido em força de ataque.
  --surf2:  #edf0f7;
| boss1skill2nome = Pillar Strike
  --border:  #dce1ee;
| boss1skill2video = dQw4w9WgXcQ
  --text:    #18202e;
| boss1skill2desc = Golpe com pilar causando dano massivo.
  --text2:  #636e88;
| boss1skill3nome = Endurance Aura
  --accent:  #c92a2a;
| boss1skill3video = dQw4w9WgXcQ
  --acct2:  #e03131;
| boss1skill3desc = Aumenta resistência temporariamente.
  --shadow:  0 1px 4px rgba(0,0,0,0.07);
| boss1hskill1nome = Karmic Fury
  --shadow2: 0 4px 20px rgba(0,0,0,0.10);
| boss1hskill1video = dQw4w9WgXcQ
  --r:      14px;
| boss1hskill1desc = Versão potencializada com dano dobrado.
  --r2:      9px;
| boss1hskill2nome = Divine Pillar
  --font:    'Outfit', system-ui, sans-serif;
| boss1hskill2video = dQw4w9WgXcQ
  --font-hd: 'Rajdhani', system-ui, sans-serif;
| boss1hskill2desc = Golpe celestial devastador.
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
#lk-outer * { box-sizing: border-box; }


/* DARK */
| boss2nome = Drake
#lk-outer.dk {
| boss2skill1nome = Dino Transformation
  --bg:      #0a0d16;
| boss2skill1video = dQw4w9WgXcQ
  --surf:    #111422;
| boss2skill1desc = Transforma-se em um T-Rex.
  --surf2:  #181c2e;
| boss2skill2nome = Savage Bite
  --border:  #242840;
| boss2skill2video = dQw4w9WgXcQ
  --text:    #dde4f5;
| boss2skill2desc = Mordida poderosa em forma zoan.
  --text2:  #6e789a;
| boss2skill3nome = Dual Blade Rush
  --shadow:  0 1px 6px rgba(0,0,0,.5);
| boss2skill3video = dQw4w9WgXcQ
  --shadow2: 0 4px 24px rgba(0,0,0,.6);
| boss2skill3desc = Investida com espada e machado.
}
| boss2hskill1nome = Apex Predator
| boss2hskill1video = dQw4w9WgXcQ
| boss2hskill1desc = Forma T-Rex aprimorada com armadura.
| boss2hskill2nome = Extinction Bite
| boss2hskill2video = dQw4w9WgXcQ
| boss2hskill2desc = Mordida devastadora.


/* HEADER */
| boss3nome = Bonney
#lk-hd {
| boss3skill1nome = Age Distortion
  display: flex;
| boss3skill1video = dQw4w9WgXcQ
  align-items: center;
| boss3skill1desc = Altera a idade do alvo.
  justify-content: space-between;
| boss3skill2nome = Heavy Meat Slam
  padding: 18px 32px;
| boss3skill2video = dQw4w9WgXcQ
  background: var(--surf);
| boss3skill2desc = Golpe com osso de carne gigante.
  border-bottom: 1px solid var(--border);
| boss3skill3nome = Youth Burst
  gap: 14px;
| boss3skill3video = dQw4w9WgXcQ
  flex-wrap: wrap;
| boss3skill3desc = Rejuvenesce para ganhar velocidade.
  position: sticky;
| boss3hskill1nome = Time Collapse
  top: 0;
| boss3hskill1video = dQw4w9WgXcQ
  z-index: 100;
| boss3hskill1desc = Envelhece tudo ao redor.
  transition: background .25s, border-color .25s;
| boss3hskill2nome = Berserk Youth
}
| boss3hskill2video = dQw4w9WgXcQ
#lk-eyebrow {
| boss3hskill2desc = Velocidade extrema rejuvenescida.
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
#lk-title {
  font-family: var(--font-hd);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.1;
  transition: color .25s;
}
#lk-hd-r { display: flex; align-items: center; gap: 10px; }


/* DIFFICULTY PILL */
| boss4nome = Apoo
#lk-diff {
| boss4skill1nome = Sound Slash
  display: flex;
| boss4skill1video = dQw4w9WgXcQ
  background: var(--surf2);
| boss4skill1desc = Ataque sonoro cortante à distância.
  border: 1px solid var(--border);
| boss4skill2nome = Boom Explosion
  border-radius: 999px;
| boss4skill2video = dQw4w9WgXcQ
  padding: 3px;
| boss4skill2desc = Cria explosão sonora em área.
  gap: 2px;
| boss4skill3nome = Rhythm Combo
  transition: background .25s, border-color .25s;
| boss4skill3video = dQw4w9WgXcQ
}
| boss4skill3desc = Sequência de ataques musicais.
.lk-db {
| boss4hskill1nome = Sonic Overload
  padding: 5px 18px;
| boss4hskill1video = dQw4w9WgXcQ
  border: none;
| boss4hskill1desc = Explosão sonora potencializada.
  background: transparent;
| boss4hskill2nome = Death Beat
  border-radius: 999px;
| boss4hskill2video = dQw4w9WgXcQ
  cursor: pointer;
| boss4hskill2desc = Ritmo letal em área ampla.
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text2);
  transition: all .2s ease;
}
.lk-db.on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(201,42,42,.35);
}


/* THEME BTN */
| boss5nome = Killer
#lk-tb {
| boss5skill1nome = Punisher Rush
  width: 34px; height: 34px;
| boss5skill1video = dQw4w9WgXcQ
  border-radius: 50%;
| boss5skill1desc = Sequência rápida com lâminas giratórias.
  border: 1px solid var(--border);
| boss5skill2nome = Sonic Scythe
  background: var(--surf2);
| boss5skill2video = dQw4w9WgXcQ
  cursor: pointer;
| boss5skill2desc = Lança onda cortante à distância.
  font-size: 15px;
| boss5skill3nome = Beheading Claw
  display: flex; align-items: center; justify-content: center;
| boss5skill3video = dQw4w9WgXcQ
  transition: all .2s;
| boss5skill3desc = Golpe crítico visando o pescoço.
  flex-shrink: 0;
| boss5skill4nome = Spin Attack
}
| boss5skill4video = dQw4w9WgXcQ
#lk-tb:hover { background: var(--border); }
| boss5skill4desc = Gira com as lâminas em área.
| boss5hskill1nome = Massacre Rush
| boss5hskill1video = dQw4w9WgXcQ
| boss5hskill1desc = Versão letal do Punisher Rush.
| boss5hskill2nome = Death Scythe
| boss5hskill2video = dQw4w9WgXcQ
| boss5hskill2desc = Onda cortante aprimorada.


/* DIFF BANNER */
| boss6nome = Capone
#lk-ban {
| boss6skill1nome = Fortress Shot
  overflow: hidden;
| boss6skill1video = dQw4w9WgXcQ
  max-height: 0;
| boss6skill1desc = Dispara projéteis de dentro do corpo.
  transition: max-height .35s ease, padding .35s ease;
| boss6skill2nome = Gang Summon
  background: linear-gradient(90deg, rgba(201,42,42,.07) 0%, transparent 60%);
| boss6skill2video = dQw4w9WgXcQ
  border-bottom: 1px solid transparent;
| boss6skill2desc = Convoca subordinados para atacar.
  padding: 0 32px;
| boss6skill3nome = Big Father
  display: flex;
| boss6skill3video = dQw4w9WgXcQ
  align-items: center;
| boss6skill3desc = Transforma-se em fortaleza gigante.
}
| boss6hskill1nome = Full Barrage
#lk-ban.on {
| boss6hskill1video = dQw4w9WgXcQ
  max-height: 60px;
| boss6hskill1desc = Disparo massivo de projéteis.
  padding: 10px 32px;
| boss6hskill2nome = Big Father Cannon
  border-bottom-color: var(--border);
| boss6hskill2video = dQw4w9WgXcQ
}
| boss6hskill2desc = Canhão devastador em forma fortaleza.
#lk-ban-bg {
  font-family: var(--font-hd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 3px 12px;
  border-radius: 6px;
  margin-right: 12px;
  flex-shrink: 0;
}
#lk-ban-tx { font-size: 13px; color: var(--text2); }


/* TABBER */
| boss7nome = Hawkins
#lk-tabs-bar {
| boss7skill1nome = Straw Sword
  background: var(--surf);
| boss7skill1video = dQw4w9WgXcQ
  border-bottom: 2px solid var(--border);
| boss7skill1desc = Ataque com espada de palha.
  overflow: hidden;
| boss7skill2nome = Voodoo Doll
  transition: background .25s, border-color .25s;
| boss7skill2video = dQw4w9WgXcQ
}
| boss7skill2desc = Transfere dano para bonecos.
#lk-tabs {
| boss7skill3nome = Straw Monster
  display: flex;
| boss7skill3video = dQw4w9WgXcQ
  overflow-x: auto;
| boss7skill3desc = Transforma-se em demônio de palha.
  padding: 0 24px;
| boss7skill4nome = Card Reading
  scrollbar-width: none;
| boss7skill4video = dQw4w9WgXcQ
}
| boss7skill4desc = Prevê ataques e contra-ataca.
#lk-tabs::-webkit-scrollbar { display: none; }
| boss7hskill1nome = Cursed Straw
.lk-tab {
| boss7hskill1video = dQw4w9WgXcQ
  flex-shrink: 0;
| boss7hskill1desc = Espada amaldiçoada potencializada.
  padding: 13px 22px 11px;
| boss7hskill2nome = Demon Form
  border: none;
| boss7hskill2video = dQw4w9WgXcQ
  background: transparent;
| boss7hskill2desc = Forma demoníaca aprimorada.
  cursor: pointer;
}}
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.lk-tab:hover { color: var(--text); }
.lk-tab.on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
 
/* PANELS */
#lk-panels { padding: 28px 32px; }
.lk-panel { display: none; }
.lk-panel.on { display: block; animation: lkFd .22s ease; }
 
@keyframes lkFd {
  from { opacity: 0; transform: translateY(7px); }
  to  { opacity: 1; transform: translateY(0); }
}
 
/* BOSS CARD */
.lk-bcard {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 22px 22px 22px 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow2);
  position: relative;
  overflow: hidden;
  transition: background .25s, border-color .25s;
}
.lk-bcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 100%;
  background: var(--accent);
}
 
.lk-bportrait {
  flex-shrink: 0;
  width: 110px; height: 110px;
  border-radius: var(--r2);
  background: var(--surf2);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  transition: background .25s, border-color .25s;
}
.lk-bportrait img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
 
.lk-binfo { flex: 1; min-width: 0; }
.lk-bname {
  font-family: var(--font-hd);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  transition: color .25s;
}
.lk-bdesc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  transition: color .25s;
}
 
/* SKILLS */
.lk-slbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  margin-bottom: 10px;
  transition: color .25s;
}
.lk-sk {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color .2s, background .25s;
  box-shadow: var(--shadow);
}
.lk-sk.open { border-color: var(--accent); }
 
.lk-skbtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: none;
  background: var(--surf2);
  cursor: pointer;
  transition: background .15s;
  gap: 12px;
}
.lk-skbtn:hover,
.lk-sk.open .lk-skbtn { background: var(--surf); }
 
.lk-skl {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.lk-snum {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: var(--font);
}
.lk-sname {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .25s;
}
.lk-sarr {
  font-size: 10px;
  color: var(--text2);
  transition: transform .22s ease;
  flex-shrink: 0;
}
.lk-sk.open .lk-sarr { transform: rotate(180deg); }
 
.lk-skbody {
  display: none;
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surf);
  transition: border-color .25s, background .25s;
}
.lk-skbody.open { display: block; animation: lkFd .18s ease; }
 
.lk-yvid {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--r2);
  overflow: hidden;
  background: #111;
  margin-bottom: 14px;
}
.lk-yvid-ph {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #1a1a2e;
  flex-direction: column;
  gap: 10px;
}
.lk-yvid-ph .play { font-size: 44px; opacity: .7; }
.lk-yvid-ph .lbl { font-size: 12px; color: #888; font-family: var(--font); }
.lk-yvid iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: 0;
}
 
.lk-sdesc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
  transition: color .25s;
}
 
/* REWARD */
.lk-reward-wrap {
  margin: 0 32px 32px;
  padding: 18px 24px;
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  transition: background .25s, border-color .25s;
}
.lk-reward-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text2);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .25s;
}
.lk-reward-lbl::before { content: '🏆'; font-size: 14px; }
.reward-items {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.mock-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surf2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background .25s, border-color .25s, color .25s;
}
.mock-item-icon { font-size: 20px; }
.mock-item-qty { color: var(--accent); font-weight: 700; }
 
/* RESPONSIVE */
@media (max-width: 640px) {
  #lk-hd { padding: 14px 16px; }
  #lk-title { font-size: 20px; }
  .lk-db { padding: 4px 12px; font-size: 10px; }
  #lk-tabs { padding: 0 10px; }
  .lk-tab { padding: 11px 14px 9px; font-size: 12px; }
  #lk-panels { padding: 16px; }
  .lk-reward-wrap { margin: 0 16px 16px; padding: 14px 16px; }
  .lk-bcard { flex-direction: column; align-items: center; text-align: center; padding: 18px 18px 18px 20px; gap: 14px; }
  .lk-bcard::before { width: 100%; height: 5px; }
  .lk-bportrait { width: 80px; height: 80px; }
  .lk-bname { font-size: 18px; }
  #lk-ban.on { padding: 8px 16px; }
}
</style>
</head>
<body>
<div id="lk-outer">
 
  <!-- HEADER -->
  <div id="lk-hd">
    <div>
      <div id="lk-eyebrow">Dinâmica</div>
      <div id="lk-title">Boss Rush</div>
    </div>
    <div id="lk-hd-r">
      <div id="lk-diff">
        <button class="lk-db" data-d="elite">Elite</button>
        <button class="lk-db" data-d="hard">Hard</button>
      </div>
      <button id="lk-tb" title="Alternar tema">🌙</button>
    </div>
  </div>
 
  <!-- DIFFICULTY BANNER -->
  <div id="lk-ban">
    <span id="lk-ban-bg"></span>
    <span id="lk-ban-tx"></span>
  </div>
 
  <!-- TABBER -->
  <div id="lk-tabs-bar">
    <div id="lk-tabs"></div>
  </div>
 
  <!-- PANELS -->
  <div id="lk-panels"></div>
 
  <!-- REWARD -->
  <div class="lk-reward-wrap">
    <div class="lk-reward-lbl">Recompensa Final</div>
    <div class="reward-items">
      <div class="mock-item"><span class="mock-item-icon">💰</span><span class="mock-item-qty">x5.000</span> Berries</div>
      <div class="mock-item"><span class="mock-item-icon">🏅</span><span class="mock-item-qty">x3</span> Medalha de Honra</div>
      <div class="mock-item"><span class="mock-item-icon">💊</span><span class="mock-item-qty">x2</span> Poção de EXP Grande</div>
      <div class="mock-item"><span class="mock-item-icon">💎</span><span class="mock-item-qty">x1</span> Cristal Radiante</div>
    </div>
  </div>
</div>
 
<script>
var BOSSES = [
  {
    nome: "Monkey D. Luffy",
    emoji: "🌀",
    desc: "Capitão dos Piratas do Chapéu de Palha. Usa o poder da Akuma no Mi Gomu Gomu, transformando seu corpo em borracha. Em sua forma Gear Fourth, os ataques se tornam devastadores.",
    skills: [
      { nome: "Gear Second — Gomu Gomu no Red Hawk", video: "", desc: "Luffy aumenta drasticamente a velocidade de circulação do sangue, envolvendo o punho em fogo de atrito. Causa dano de fogo em área." },
      { nome: "Gear Fourth — Kong Gun", video: "", desc: "Luffy infla o braço dentro do músculo e o dispara como um projétil maciço. Dano massivo em linha reta." },
      { nome: "Gear Third — Gigant Pistol", video: "", desc: "Luffy sopra ar para dentro dos ossos do braço, aumentando-o a proporções gigantescas antes do impacto." },
      { nome: "Haki de Rei", video: "", desc: "Emite uma onda de pressão de Haki que atordoa todos os inimigos em um raio de 15 metros." }
    ]
  },
  {
    nome: "Portgas D. Ace",
    emoji: "🔥",
    desc: "Segundo Divisão dos Barba Branca. Usuário da Mera Mera no Mi, controlando o fogo. Sua chegada é anunciada por chamas que consomem o campo de batalha.",
    skills: [
      { nome: "Hiken — Fire Fist", video: "", desc: "O ataque mais icônico de Ace — um soco de fogo que avança em linha reta, queimando tudo em seu caminho." },
      { nome: "Dai Enkai — Entei", video: "", desc: "Ace cria uma bola de fogo de proporções imensas e a lança contra o inimigo. Dano em área ao impacto." },
      { nome: "Flame Wall", video: "", desc: "Uma parede de chamas que bloqueia projéteis e causa dano contínuo a quem tentar atravessá-la." }
    ]
  },
  {
    nome: "Roronoa Zoro",
    emoji: "⚔️",
    desc: "Primeiro oficial dos Chapéu de Palha e aspirante ao título de espadachim mais forte do mundo. Usa o estilo Santōryū com três katanas simultâneas.",
    skills: [
      { nome: "Oni Giri", video: "", desc: "Zoro sela as três espadas e executa um corte triplo em forma de arco. Alta velocidade, baixa antecipação." },
      { nome: "Tatsumaki", video: "", desc: "Cria um tornado de cortes que aspira os inimigos próximos antes de despedaçá-los com lâminas giratórias." },
      { nome: "Asura — Makyū Sendan", video: "", desc: "Zoro manifesta a técnica de Asura, multiplicando seus braços e cabeças, e desencadeia nove cortes simultâneos." },
      { nome: "Santōryū Ogi — Rokudō no Tsuji", video: "", desc: "Um dos ataques finais de Santōryū — um corte circular que divide tudo em seis planos ao mesmo tempo." }
    ]
  },
  {
    nome: "Trafalgar D. Water Law",
    emoji: "💀",
    desc: "Capitão dos Piratas Heart. Usuário da Ope Ope no Mi, a Fruta Operação. Dentro de sua 'ROOM' esférica, possui controle absoluto sobre tudo dentro do espaço.",
    skills: [
      { nome: "ROOM — Shambles", video: "", desc: "Cria a esfera de operação e teleporta objetos ou pessoas dentro do espaço de forma imprevisível." },
      { nome: "Tact", video: "", desc: "Levita e controla objetos dentro da ROOM, podendo usá-los como projéteis ou criar barreiras improvisadas." },
      { nome: "Injection Shot", video: "", desc: "Law perfura o inimigo com Kikoku dentro da ROOM, injetando um feixe de energia cortante." }
    ]
  },
  {
    nome: "Charlotte Katakuri",
    emoji: "🔮",
    desc: "Segundo filho de Big Mom e comandante da Treze Divisões. Usuário da Mochi Mochi no Mi Especial — uma Logia especial de mochi. Possui Haki de Observação superior.",
    skills: [
      { nome: "Mochi Tsuki", video: "", desc: "Soco revestido de mochi com Haki de Armamento, combinando elasticidade e dureza em um ataque difícil de esquivar." },
      { nome: "Mogura", video: "", desc: "Katakuri transforma seu dedo em uma espiga de mochi gigante e perfura com precisão cirúrgica." },
      { nome: "Rhino Schneider", video: "", desc: "Dois socos simultâneos revestidos de Haki que criam uma onda de impacto em cone." }
    ]
  },
  {
    nome: "Kaido dos Cem Animais",
    emoji: "🐉",
    desc: "Governador Geral dos Piratas das Feras. Considerado o ser mais forte do mundo. Usuário do modelo Azure Dragon da Zoan Mítica do Dragão.",
    skills: [
      { nome: "Raimei Hakke — Heavenly Dragon Drum", video: "", desc: "Kaido bate no peito, criando uma onda de choque sônica que atinge todo o campo de batalha." },
      { nome: "Kaifu — Ocean Blaze", video: "", desc: "Em sua forma de dragão, expele um sopro de chamas azuis que atravessa metade do mapa." },
      { nome: "Boro Breath", video: "", desc: "Sopro massiço de chamas em forma de cone. Dano de fogo em grande área." },
      { nome: "Ragnarok — Heaven and Earth Sever", video: "", desc: "Golpe final: Kaido concentra toda a força de seu kanabō revestido de Haki e desce em arco vertical. Dano devastador." }
    ]
  },
  {
    nome: "Marshall D. Teach — Barba Negra",
    emoji: "🌑",
    desc: "Único ser conhecido a possuir dois poderes de Akuma no Mi: a Yami Yami no Mi (Trevas) e a Gura Gura no Mi (Tremor). O vilão mais temido da era atual.",
    skills: [
      { nome: "Black Hole — Darkness Vortex", video: "", desc: "Barba Negra cria um vórtice de trevas que absorve tudo ao redor, incluindo ataques inimigos." },
      { nome: "Kurouzu — Dark Whirlpool", video: "", desc: "Puxa o inimigo com força gravitacional inexorável para dentro do alcance do Dark Hole." },
      { nome: "Gura Gura — Seismic Surge", video: "", desc: "Treme o ar criando um tsunami de impacto que se propaga pelo campo de batalha." },
      { nome: "Liberate", video: "", desc: "Libera toda a energia das trevas absorvidas de volta ao inimigo em uma explosão de dano puro." },
      { nome: "Sky Quake", video: "", desc: "Ataque final — Barba Negra segura o ar com as duas mãos e rasga o espaço ao meio, causando dano massivo em toda a área." }
    ]
  }
];
 
var DIFF = {
  elite: "Modo Elite ativado — os bosses ganham 50% a mais de HP e novos padrões de ataque. Recomendado para jogadores nível 80+.",
  hard:  "Modo Hard ativado — os bosses ganham 25% a mais de HP. Ataques mais frequentes. Recomendado para jogadores nível 60+."
};
 
var tabsEl  = document.getElementById('lk-tabs');
var panelsEl = document.getElementById('lk-panels');
var outer    = document.getElementById('lk-outer');
var ban      = document.getElementById('lk-ban');
var banBg    = document.getElementById('lk-ban-bg');
var banTx    = document.getElementById('lk-ban-tx');
var curDiff  = null;
 
BOSSES.forEach(function(boss, idx) {
  // Tab
  var tab = document.createElement('button');
  tab.className = 'lk-tab' + (idx === 0 ? ' on' : '');
  tab.textContent = boss.nome.split(' ').slice(-1)[0]; // surname for brevity
  tab.addEventListener('click', function() { switchTab(idx); });
  tabsEl.appendChild(tab);
 
  // Panel
  var panel = document.createElement('div');
  panel.className = 'lk-panel' + (idx === 0 ? ' on' : '');
 
  // Boss card
  var card = document.createElement('div');
  card.className = 'lk-bcard';
 
  var port = document.createElement('div');
  port.className = 'lk-bportrait';
  port.textContent = boss.emoji;
  card.appendChild(port);
 
  var info = document.createElement('div');
  info.className = 'lk-binfo';
  info.innerHTML = '<div class="lk-bname">' + boss.nome + '</div><p class="lk-bdesc">' + boss.desc + '</p>';
  card.appendChild(info);
  panel.appendChild(card);
 
  // Skills
  if (boss.skills.length > 0) {
    var slbl = document.createElement('div');
    slbl.className = 'lk-slbl';
    slbl.textContent = 'Habilidades';
    panel.appendChild(slbl);
 
    boss.skills.forEach(function(skill, si) {
      var item = document.createElement('div');
      item.className = 'lk-sk';
 
      var btn = document.createElement('button');
      btn.className = 'lk-skbtn';
      btn.innerHTML =
        '<div class="lk-skl">' +
          '<span class="lk-snum">' + (si+1) + '</span>' +
          '<span class="lk-sname">' + skill.nome + '</span>' +
        '</div>' +
        '<span class="lk-sarr">&#9660;</span>';
 
      var body = document.createElement('div');
      body.className = 'lk-skbody';
 
      body.innerHTML =
        '<div class="lk-yvid">' +
          '<div class="lk-yvid-ph">' +
            '<span class="play">▶</span>' +
            '<span class="lbl">Vídeo da habilidade</span>' +
          '</div>' +
        '</div>' +
        '<p class="lk-sdesc">' + skill.desc + '</p>';
 
      item.appendChild(btn);
      item.appendChild(body);
 
      btn.addEventListener('click', function() {
        var isOpen = item.classList.contains('open');
        item.classList.toggle('open', !isOpen);
        body.classList.toggle('open', !isOpen);
      });
 
      panel.appendChild(item);
    });
  }
 
  panelsEl.appendChild(panel);
});
 
function switchTab(idx) {
  tabsEl.querySelectorAll('.lk-tab').forEach(function(t, i) { t.classList.toggle('on', i === idx); });
  panelsEl.querySelectorAll('.lk-panel').forEach(function(p, i) { p.classList.toggle('on', i === idx); });
}
 
// Difficulty
document.querySelectorAll('.lk-db').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var d = btn.getAttribute('data-d');
    if (curDiff === d) {
      curDiff = null;
      document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.remove('on'); });
      ban.classList.remove('on');
    } else {
      curDiff = d;
      document.querySelectorAll('.lk-db').forEach(function(b) { b.classList.toggle('on', b.getAttribute('data-d') === d); });
      banBg.textContent = d === 'elite' ? 'Elite' : 'Hard';
      banTx.textContent = DIFF[d];
      ban.classList.add('on');
    }
  });
});
 
// Theme
var dark = localStorage.getItem('lk-theme') === 'dark';
function applyTheme(d) {
  dark = d;
  outer.classList.toggle('dk', d);
  document.getElementById('lk-tb').textContent = d ? '☀️' : '🌙';
  localStorage.setItem('lk-theme', d ? 'dark' : 'light');
}
applyTheme(dark);
document.getElementById('lk-tb').addEventListener('click', function() { applyTheme(!dark); });
</script>
</body>
</html>

Edição atual tal como às 13h40min de 17 de março de 2026