:root{
  --stroke: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.06);
  --muted:#a9b6c7;
  --gold:#ffb100;
  --r:16px;
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  color:#eaf1ff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.70)),
    url("../img/background/bg-main.png") center/cover no-repeat fixed;
}

/* =========================
   LAYOUT
========================= */
.wrap{
  max-width:1300px;
  margin:5px auto;
  padding:2px;
  padding-left:220px; /* espaço pro menu lateral */
}

/* =========================
   HEADER (alinhado)
========================= */
.header{
  max-width:1100px;
  margin:18px auto 0;
  padding:0 16px;
}

.brand{
  display:grid;
  grid-template-columns: 120px 1fr 120px; /* reserva igual nos lados -> texto central real */
  align-items:center;
  gap:12px;
}

.logo{
  width:120px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-shrink:0;
  overflow:hidden;
  animation: logoPulse 3s ease-in-out infinite;
}
.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.brand-text{
  text-align:center;
}
.brand-text h1{
  margin:0;
  font-size:38px;
  text-shadow: 0 0 15px rgba(0,120,255,.35);
}
.brand-text p{
  margin:6px 0 0;
  color:#4a73a9;
  font-size:22px;
}

/* =========================
   MENU (lateral fixo)
========================= */
.header nav,
.header .top-tabs,
.header .tabs,
.header .top-menu{
  position:fixed;
  left:24px;
  top:225px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  z-index:9999;
}

.header nav a,
.header nav button,
.header .top-tabs a,
.header .top-tabs button,
.header .tabs a,
.header .tabs button,
.header .top-menu a,
.header .top-menu button{
  width:170px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(13,48,131,.92);
  background: rgba(10,0,49,.99);
  color:#88b0ff;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.1;
  white-space:nowrap;
}

.header nav a:hover,
.header nav button:hover,
.header .top-tabs a:hover,
.header .top-tabs button:hover,
.header .tabs a:hover,
.header .tabs button:hover,
.header .top-menu a:hover,
.header .top-menu button:hover{
  border-color: rgba(0,153,255,.45);
  background: rgba(0,0,0,.55);
}

.header .active{
  border-color: rgba(255,177,0,.55) !important;
  box-shadow: 0 0 22px rgba(255,177,0,.18);
}

/* =========================
   CARROSSEL
========================= */
.carousel-wrap{margin-top:12px}
.carousel-head h2{margin:0;color:var(--gold);font-size:19px}
.carousel-head .muted{margin:9px 0 12px;color:var(--muted);font-size:16px}

.carousel{
  position:relative;
  border:3px solid rgb(4,137,255,.20);
  border-radius:35px;
  padding:5px 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), #11235514);
  overflow:hidden;

  display:flex;
  align-items:center;

  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    0 0 60px rgba(0,120,255,.15);
}

.track{
  flex:1;
  display:flex;
  gap:9px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}

/* =========================
   TILE
========================= */
.boss-tile{
  width:160px;
  flex:0 0 auto;
  border:2px solid var(--stroke);
  border-radius:43px;
  overflow:hidden;
  background: rgba(13,26,53,.67);
  position:relative;
  transition: all .25s ease;
}
.boss-tile:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0,0,0,.6);
  border-color: rgba(0,153,255,.4);
}

.tile-img{
  position:relative;
  height:210px;
  background:#060a12;
  border-bottom:1px solid var(--stroke);
}
.tile-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.tile-badge{
  position:absolute;left:4px;top:10px;
  padding:2px 10px;border-radius:999px;
  background: rgba(0,0,0,.1);
  border:2px solid rgba(15,62,91,.99);
  color:#acb7bf;
  font-weight:900;
  font-size:16px;
}

.tile-info{padding:10px}
.tile-title{font-weight:900;font-size:19px}
.tile-sub{margin-top:6px;color:var(--muted);font-size:13px;min-height:28px}

.tile-btn{
  margin-top:5px;width:100%;
  padding:9px 10px;border-radius:30px;
  border:1px solid rgba(114,121,169,.96);
  background: rgba(2,15,55,.63);
  color:#8c9ced;
  font-weight:900;
  cursor:pointer;
}

/* =========================
   SETAS
========================= */
.nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:27px;height:58px;border-radius:20px;
  border:2px solid rgba(42,110,155,.59);
  background: rgba(3,39,96,.94);
  color:#85a6e3;font-size:35px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.nav.left{left:4px}
.nav.right{right:4px}

/* =========================
   BADGES / DESTAQUES
========================= */
.tile-badge.world{
  background: linear-gradient(45deg, #ffb100, #ff3b30);
  color:#0b0b0f;
  border:none;
  box-shadow: 0 0 18px rgba(255,177,0,.35);
}

.tile-badge.world.main{
  background: linear-gradient(45deg, #ffd700, #ff6a00, #ff3b30);
  box-shadow: 0 0 26px rgba(255,177,0,.45);
  letter-spacing:.5px;
}

.boss-tile.boss-world{
  border-color: rgba(0,100,255,.65);
  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    0 0 60px rgba(255,177,0,.20);
}
.boss-tile.boss-world .tile-btn{ color:#ffe4a6; }

.boss-tile.boss-world-main{
  border-color: rgba(102,100,191,.70);
  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    0 0 70px rgba(255,177,0,.22),
    0 0 35px rgba(255,59,48,.14);
  transform: translateY(-2px);
}
.boss-tile.boss-world-main .tile-btn{ color:#8c9ced; }

.boss-tile.boss-world-main::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,215,0,.28), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(255,59,48,.18), transparent 60%);
  filter: blur(12px);
  opacity:.9;
  animation: worldPulse 2.4s ease-in-out infinite;
}

@keyframes worldPulse{
  0%,100%{ opacity:.65; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.01); }
}

/* VIP */
.boss-tile.boss-vip{
  border-color: rgba(38,63,135,.99);
  box-shadow:
    0 18px 46px rgba(0,0,0,.55),
    0 0 60px rgba(56,189,248,.22);
}
.tile-badge.vip{
  background: linear-gradient(45deg, #ffd700, #ff6a00, #ff3b30);
  color:#0b0b0f;
  border:none;
  box-shadow: 0 0 22px rgba(56,189,248,.40);
  letter-spacing:.6px;
}
.boss-tile.boss-vip .tile-btn{ color:#cfeaff; }

.boss-tile.boss-vip::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 25%, rgba(56,189,248,.24), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(124,58,237,.18), transparent 60%);
  filter: blur(12px);
  opacity:.9;
}

/* =========================
   MODAL
========================= */
.modal{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  z-index:9999;
  padding:18px;
}
.modal.open{display:grid}
.backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
}

.modal-box{
  position:relative;
  width:min(980px,100%);
  background: rgba(10,14,26,.94);
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.75);
}

.modal-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--stroke);
}
.modal-head h3{margin:0;color:var(--gold);font-size:16px}
.modal-head .sub{margin-top:4px;color:var(--muted);font-size:12px;font-weight:700}

.x{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer
}

.modal-body{
  padding:14px;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:14px;
  max-height:75vh;
  overflow-y:auto;
}

.modal-img{
  border:1px solid var(--stroke);
  border-radius:14px;
  overflow:hidden;
  background:#060a12
}
.modal-img img{width:100%;display:block}
.modal-text h4{margin:0 0 8px;color:#ff4d00}

.info-list{list-style:none;padding-left:0;margin:0 0 12px}
.info-list li{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:10px;
  color:#eaf1ff;
  margin:8px 0;
}

.reward{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,255,204,.08);
  border:1px solid rgba(0,255,204,.2);
  color:#7fffe8;
  font-weight:900;
}

/* DROPS COM ÍCONES */
.drops-icons{padding-left:0;list-style:none;margin:0}
.drops-icons li{display:flex;align-items:center;gap:10px;margin:8px 0;color:var(--muted)}
.drops-icons img{width:22px;height:22px;object-fit:contain}

/* =========================
   RESPONSIVO
========================= */
@media (max-width:900px){
  .modal-body{grid-template-columns:1fr}
}

/* X sempre visível no mobile */
@media (max-width:600px){
  .modal{ padding:10px; }
  .modal-box{ max-height:90vh; overflow-y:auto; }
  .modal-head{
    position: sticky;
    top: 0;
    background: rgba(10,14,26,.98);
    z-index: 10;
  }
  .x{ position: relative; z-index: 20; }
}

/* MOBILE: header empilha + menu vira topo */
@media (max-width:700px){

  .wrap{
    padding-left:10px;
  }

  .brand{
    grid-template-columns: 1fr;
    justify-items:center;
  }

  .logo{
    width:140px;
    height:90px;
    justify-content:center;
  }

  .brand-text h1{ font-size:30px; }
  .brand-text p{ font-size:16px; }

  .header nav,
  .header .top-tabs,
  .header .tabs,
  .header .top-menu{
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:12px;
  }

  .header nav a,
  .header nav button,
  .header .top-tabs a,
  .header .top-tabs button,
  .header .tabs a,
  .header .tabs button,
  .header .top-menu a,
  .header .top-menu button{
    width:auto;
    min-width:120px;
  }
}

/* =========================
   ANIMAÇÕES
========================= */
@keyframes logoPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

/* =========================
   INVASÕES (CSS INDEPENDENTE)
   -> NÃO mexe em Boss
========================= */

/* se você quiser um "tema" diferente pra invasão, muda aqui */
.inv-tile{
  width:160px;
  flex:0 0 auto;
  border:2px solid var(--stroke);
  border-radius:43px;
  overflow:hidden;
  background: rgba(13,26,53,.67);
  position:relative;
  transition: all .20s ease;
}

/* IMPORTANTe: evita aquele “sobrepor” feio */
.inv-tile:hover{
  transform: translateY(-3px);   /* bem menor que boss */
  z-index: 5;                   /* se passar, passa por cima “certo” */
  border-color: rgba(0,153,255,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* imagem da invasão */
.inv-img{
  position:relative;
  height:210px;
  background:#060a12;
  border-bottom:1px solid var(--stroke);
}

.inv-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* badge invasão */
.inv-badge{
  position:absolute;
  left:6px;
  top:10px;
  padding:2px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.30);
  border:2px solid rgba(15,62,91,.99);
  color:#cfeaff;
  font-weight:900;
  font-size:14px;
  letter-spacing:.4px;
}

/* infos */
.inv-info{ padding:10px; }
.inv-title{ font-weight:900; font-size:18px; }
.inv-sub{ margin-top:6px; color:var(--muted); font-size:13px; min-height:28px; }

/* botão */
.inv-btn{
  margin-top:5px;
  width:100%;
  padding:9px 10px;
  border-radius:30px;
  border:1px solid rgba(114,121,169,.96);
  background: rgba(2,15,55,.63);
  color:#8c9ced;
  font-weight:900;
  cursor:pointer;
}

/* Se quiser, pode dar um brilho extra só nas invasões */
.inv-tile::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,120,255,.14), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(0,255,204,.08), transparent 62%);
  filter: blur(12px);
  opacity:.55;
}

/* =========================
   EVENTOS NOVOS (evt-*) - INDEPENDENTE
========================= */
.evt-wrap{ margin-top: 12px; }

.evt-head{
  margin-bottom: 12px;
}
.evt-head h2{
  margin:0;
  color: var(--gold);
  font-size: 19px;
}
.evt-muted{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.evt-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top: 12px;
}

.evt-figure{
  margin:0;
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.evt-figure img{
  width:100%;
  display:block;
}
.evt-figure figcaption{
  padding:10px 12px;
  color:#eaf1ff;
  font-weight:800;
  font-size: 13px;
  border-top:1px solid var(--stroke);
  background: rgba(10,14,26,.55);
}

.evt-box{
  margin-top: 12px;
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}
.evt-box h3{
  margin:0 0 10px;
  color:#ff4d00;
  font-size: 15px;
}

.evt-list{
  margin:0;
  padding-left: 18px;
  color:#eaf1ff;
}
.evt-list li{
  margin: 7px 0;
  color: var(--muted);
}
.evt-list b{ color:#eaf1ff; }

.evt-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.evt-floor{
  margin:0;
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  background: rgba(13,26,53,.45);
}
.evt-floor img{
  width:100%;
  height: 160px;
  object-fit: cover;
  display:block;
}
.evt-floor figcaption{
  padding:10px 12px;
  color:#88b0ff;
  font-weight:900;
  font-size: 13px;
  border-top:1px solid var(--stroke);
  background: rgba(10,0,49,.45);
}

@media (max-width: 900px){
  .evt-hero{ grid-template-columns: 1fr; }
  .evt-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .evt-grid{ grid-template-columns: 1fr; }
  .evt-floor img{ height: 190px; }
}

/* =========================
   EVENTOS NOVOS (event-*) - INDEPENDENTE
   (Tower of Trial / futuros eventos)
========================= */

.event-page{
  margin-top: 12px;
}

.event-block{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:14px;

  border:1px solid var(--stroke);
  border-radius:18px;
  padding:14px;

  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
}

.event-img{
  border:1px solid var(--stroke);
  border-radius:14px;
  overflow:hidden;
  background:#060a12;
}

.event-img img{
  width:100%;
  display:block;
  object-fit: cover;
}

.event-text h3{
  margin:0 0 10px;
  color:#ff4d00;
  font-size: 15px;
}

.event-text p{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.event-list{
  margin:0;
  padding-left: 18px;
}

.event-list li{
  margin: 7px 0;
  color: var(--muted);
}

.event-list b{
  color:#eaf1ff;
}

/* GRID dos 11 pisos */
.floors-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.floor-card{
  margin:0;
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  background: rgba(13,26,53,.45);
}

.floor-card img{
  width:100%;
  height: 160px;
  object-fit: cover;
  display:block;
}

.floor-card figcaption{
  padding:10px 12px;
  color:#88b0ff;
  font-weight:900;
  font-size: 13px;
  border-top:1px solid var(--stroke);
  background: rgba(10,0,49,.45);
}

/* Responsivo */
@media (max-width:900px){
  .event-block{ grid-template-columns: 1fr; }
  .floors-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:520px){
  .floors-grid{ grid-template-columns: 1fr; }
  .floor-card img{ height: 190px; }
}

.floor-card{
  position:relative;
  overflow:hidden;
}

.floor-thumb{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.floor-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:220px;
  object-fit:cover;
  opacity:0;
  transition:opacity .3s ease;
  display:block;
}

<section class="event-page">

  <!-- BOTÕES DOS EVENTOS NOVOS -->
  <div class="empty-panel" style="margin-top:12px">
    <div class="new-events-tabs">
      <button class="new-event-btn is-active" type="button" data-new-event="tower-of-trial">Tower of Trial</button>
      <button class="new-event-btn" type="button" data-new-event="new-race">New Race</button>
      <button class="new-event-btn" type="button" data-new-event="abyss-storm">Abyss Storm</button>
      <button class="new-event-btn" type="button" data-new-event="war-of-thrones">War of Thrones</button>
      <button class="new-event-btn" type="button" data-new-event="npc-invasion">NPC Invasion</button>
    </div>
  </div>

  <!-- EVENTO: TOWER OF TRIAL -->
  <div class="new-event-panel" data-new-event-panel="tower-of-trial">

    <div class="empty-panel" style="margin-top:12px">
      <p class="muted">
        11 pisos • dificuldade progressiva • bosses e drops únicos • entrada 1x ao dia (Guild ou Party)
      </p>
    </div>

    <!-- BLOCO 1 -->
    <div class="event-block">
      <div class="event-img">
        <img src="assets/img/eventos/tower-of-trial/local.png" alt="Local do evento" loading="lazy">
      </div>
      <div class="event-text">
        <h3>📍 Cidade e Coordenadas</h3>
        <p class="muted">NPC fica Localizado em Lorencia - 144x148.</p>
      </div>
    </div>

    <!-- BLOCO 2 -->
    <div class="event-block">
      <div class="event-img">
        <img src="assets/img/eventos/tower-of-trial/requisitos.png" alt="Itens necessários" loading="lazy">
      </div>
      <div class="event-text">
        <h3>🎟️ Itens Necessários</h3>
        <ul class="event-list">
          <li>1x Stone Soul Core</li>
          <li>1x Rune Shard</li>
          <li>1x Guardian Seal</li>
        </ul>
        <p class="muted">Item Adquirido apenas nos eventos: BC / CC / DS</p>
        <p class="muted">possui Drop de 20% para conseguir</p>
      </div>
    </div>

    <!-- TEXTO GERAL -->
    <div class="empty-panel" style="margin-top:12px">
      <h2>📜 Como funciona</h2>
      <ul class="event-list">
        <li>Pode entrar <b>1 vez ao dia</b> (por Guild ou Party)</li>
        <li>Dentro do Evento possui <b>Quest</b> com recompensas em moedas e itens</li>
        <li>Cada piso possui seus <b>Boss</b> (alguns com Mini Boss)</li>
        <li>São <b>11 pisos</b> nessa primeira fase</li>
      </ul>
    </div>

    <!-- 11 PISOS -->
    <div class="empty-panel" style="margin-top:12px">
      <h2>🧱 Pisos (01 a 11)</h2>

      <div class="floors-grid">

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/01.png" alt="Piso 01">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/01.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 01 - Cavaleiro Trevas</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/02.png" alt="Piso 02">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/02.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 02 - Ogro</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/03.png" alt="Piso 03">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/03.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 03 - Shiryu</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/04.png" alt="Piso 04">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/04.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 04 - Rei Dragon + Mini boss</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/05.png" alt="Piso 05">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/05.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 05 - Shao Kahn</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/06.png" alt="Piso 06">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/06.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 06 - Wotanaz</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/07.png" alt="Piso 07">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/07.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 07 - Leviata</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/08.png" alt="Piso 08">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/08.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 08 - 4 Mini Boss</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/09.png" alt="Piso 09">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/09.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 09 - Murkhowler + Mini Boss</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/10.png" alt="Piso 10">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/10.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 10 - Nyxarion + Mini Boss</figcaption>
        </figure>

        <figure class="floor-card">
          <img class="floor-thumb" src="assets/img/eventos/tower-of-trial/pisos/11.png" alt="Piso 11">
          <video class="floor-video" muted loop playsinline preload="metadata">
            <source src="assets/img/eventos/tower-of-trial/pisos/11.mp4" type="video/mp4">
          </video>
          <figcaption>Piso 11 - Gedo Murath + Mini Boss</figcaption>
        </figure>

      </div>
    </div>
  </div>

  <!-- EVENTO: NEW RACE -->
  <div class="new-event-panel" data-new-event-panel="new-race" hidden>
    <div class="empty-panel" style="margin-top:12px">
      <h2>🏁 New Race</h2>
      <p class="muted">Em breve...</p>
    </div>
  </div>

  <!-- EVENTO: ABYSS STORM -->
  <div class="new-event-panel" data-new-event-panel="abyss-storm" hidden>
    <div class="empty-panel" style="margin-top:12px">
      <h2>🌊 Abyss Storm</h2>
      <p class="muted">Em breve...</p>
    </div>
  </div>

  <!-- EVENTO: WAR OF THRONES -->
  <div class="new-event-panel" data-new-event-panel="war-of-thrones" hidden>
    <div class="empty-panel" style="margin-top:12px">
      <h2>👑 War of Thrones</h2>
      <p class="muted">Em breve...</p>
    </div>
  </div>

  <!-- EVENTO: NPC INVASION -->
  <div class="new-event-panel" data-new-event-panel="npc-invasion" hidden>
    <div class="empty-panel" style="margin-top:12px">
      <h2>🧙 NPC Invasion</h2>
      <p class="muted">Em breve...</p>
    </div>
  </div>

</section>

/* =========================
   BOTÕES EVENTOS NOVOS
========================= */

.new-events-tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}

/* botão base */
.new-event-btn{
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(13,48,131,.92);
  background: rgba(10,0,49,.99);
  color:#88b0ff;
  font-weight:900;
  cursor:pointer;
  transition: all .25s ease;
  position:relative;
  overflow:hidden;
}

/* efeito glow */
.new-event-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,120,255,.35), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0,255,204,.20), transparent 60%);
  opacity:.0;
  transition:.3s;
}

/* hover */
.new-event-btn:hover{
  border-color: rgba(0,153,255,.65);
  background: rgba(0,0,0,.55);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0,120,255,.25);
}

.new-event-btn:hover::before{
  opacity:.8;
}

/* botão ativo */
.new-event-btn.is-active{
  border-color: rgba(255,177,0,.65);
  color:#ffe4a6;
  box-shadow:
    0 0 22px rgba(255,177,0,.35),
    inset 0 0 12px rgba(255,177,0,.15);
}

/* animação leve */
.new-event-btn.is-active::before{
  opacity:.6;
}