* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
        }

        body {
            background: linear-gradient(145deg, #0a2f2c 0%, #032622 100%);
            min-height: 100vh;
            padding: 30px 20px;
            position: relative;
            overflow-x: hidden;
        }

        /* Header com perfil */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(10px);
            border-radius: 60px;
            padding: 12px 24px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .logo-area h1 {
            font-size: 1.6rem;
            background: linear-gradient(135deg, #FFD966, #FFB347);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .perfil-area {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #1f4e46cc;
            padding: 8px 20px;
            border-radius: 50px;
        }
        .perfil-area span { color: #ffefb9; font-weight: 600; }
        .btn-perfil {
            background: #f5a623;
            border: none;
            padding: 8px 20px;
            border-radius: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.1s;
        }
        .btn-perfil:hover { background: #ffb347; transform: scale(1.02); }
        .user-avatar { font-size: 1.8rem; }

        /* Tabela executivos */
        .tabela-container {
            background: rgba(255,250,225,0.97);
            border-radius: 36px;
            overflow-x: auto;
            margin-bottom: 30px;
            box-shadow: 0 25px 40px rgba(0,0,0,0.5);
        }
        .tabela { width: 100%; border-collapse: collapse; min-width: 700px; }
        .tabela th { background: #003c2f; color: #FFE6B3; padding: 18px; border-bottom: 4px solid #F9C74F; font-weight: 800; }
        .tabela td { padding: 14px; text-align: center; background: #fffef7; border-bottom: 1px solid #e2d5b6; }
        .executivo-nome { background: #ebfaf5; border: none; cursor: pointer; padding: 6px 16px; border-radius: 50px; font-weight: 800; transition: 0.1s; }
        .executivo-nome:hover { background: #ffe2b5; transform: scale(1.02); }
        .badge-fig { background: linear-gradient(135deg, #e7b42c, #f3a712); border-radius: 40px; padding: 4px 12px; font-size: 0.7rem; }

        /* MODAL ÁLBUM DO EXECUTIVO */
        .modal-album {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 20, 10, 0.94);
            backdrop-filter: blur(8px);
            z-index: 2500;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .album-card {
            max-width: 900px;
            width: 100%;
            background: linear-gradient(145deg, #fff7e8, #fff1dd);
            border-radius: 60px;
            box-shadow: 0 30px 45px rgba(0,0,0,0.5), 0 0 0 6px #ffcd7e, 0 0 0 12px #2b6e5c;
            overflow: hidden;
            animation: fadeSlideUp 0.3s ease-out;
        }
        @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: translateY(0); } }
        .album-header { background: #004d3b; padding: 20px 28px; color: #ffeaac; display: flex; justify-content: space-between; align-items: center; }
        .album-header h2 { font-size: 1.8rem; display: flex; align-items: center; gap: 10px; }
        .fechar-album { background: #f5bc5c; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 1.8rem; cursor: pointer; transition: 0.1s; }
        .album-stats { background: #ebdabc; padding: 14px 28px; display: flex; justify-content: space-between; font-weight: 700; }
        .progress-bar-bg { background: #c0a16b; border-radius: 30px; height: 10px; width: 180px; overflow: hidden; }
        .progress-fill { background: #2e9c46; width: 0%; height: 100%; transition: width 0.2s; }
        .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 20px; padding: 32px 28px; max-height: 55vh; overflow-y: auto; }
        .figurinha-card { background: white; border-radius: 24px; text-align: center; padding: 15px 6px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border: 2px solid #ffcf8a; transition: 0.2s; }
        .figurinha-card.possui { background: linear-gradient(145deg, #d2ffcf, #b9efb0); border: 3px solid #1f8a3c; }
        .figurinha-card.falta { background: #f3ecdb; opacity: 0.8; cursor: pointer; }
        .figurinha-icone { font-size: 2.8rem; }
        .figurinha-status { font-size: 0.7rem; margin-top: 10px; border-radius: 50px; display: inline-block; padding: 4px 12px; }
        .status-tenho { background: #1c6b2f; color: white; }
        .status-falta { background: #a8682c; color: #fff2dc; }
        .legenda-copa { background: #dccfaf; padding: 12px 28px; display: flex; gap: 30px; font-size: 0.75rem; font-weight: 600; }

        /* MODAL PERFIL / LOGIN */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.9);
            backdrop-filter: blur(8px);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        .modal-card {
            background: #fff9ef;
            border-radius: 48px;
            max-width: 450px;
            width: 90%;
            padding: 30px;
            text-align: center;
            border: 3px solid #ffcd7e;
            animation: fadeSlide 0.2s ease;
        }
        @keyframes fadeSlide { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .modal-card h2 { color: #1f5e4f; margin-bottom: 20px; }
        .modal-card input { width: 100%; padding: 14px; margin: 10px 0; border-radius: 60px; border: 1px solid #ddd; font-size: 1rem; }
        .modal-card button { background: #006653; color: white; border: none; padding: 12px; border-radius: 60px; font-weight: bold; margin-top: 10px; cursor: pointer; width: 100%; }
        .btn-fechar-modal { background: #aa6f3c; margin-top: 5px; }
        .status-login { margin-top: 12px; font-size: 0.8rem; color: #b4510c; }

        /* MODAL PACOTE (RASGAR) */
        .modal-pacote {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(12px);
            z-index: 3000;
            justify-content: center;
            align-items: center;
        }
        .pacote-wrapper { text-align: center; animation: bounceIn 0.4s ease; }
        @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
        .pacote-fechado {
            background: radial-gradient(circle at 30% 20%, #e2b87a, #b36b2a);
            width: 280px;
            height: 200px;
            border-radius: 30px;
            margin: 0 auto;
            cursor: pointer;
            position: relative;
            box-shadow: 0 20px 30px rgba(0,0,0,0.5);
            border: 3px solid #ffdd99;
        }
        .pacote-fechado::before { content: "🎁"; font-size: 4rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .pacote-fechado::after { content: "✂️ RASGAR"; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: #ffb347; padding: 6px 18px; border-radius: 50px; font-size: 0.8rem; white-space: nowrap; }
        .rasgando { animation: rasgarAnim 0.3s forwards; }
        @keyframes rasgarAnim { 0% { transform: scale(1); } 50% { transform: scale(1.2) rotate(3deg); filter: blur(2px); opacity: 0.8; } 100% { transform: scale(0.5); opacity: 0; visibility: hidden; } }
        .figurinha-revelada { background: linear-gradient(145deg, #fff8e7, #ffe6c2); border-radius: 48px; padding: 30px; margin-top: 20px; animation: revelar 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); border: 4px solid gold; }
        .figurinha-grande { font-size: 5rem; }
        .btn-fechar-pacote { background: #1e6b57; padding: 12px 28px; border-radius: 50px; color: white; border: none; margin-top: 20px; cursor: pointer; }

        /* NOTIFICAÇÃO */
        .notificacao {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #1f4e46;
            color: #ffefb9;
            padding: 12px 24px;
            border-radius: 50px;
            z-index: 3500;
            animation: fadeOut 4s forwards;
            font-weight: bold;
            box-shadow: 0 4px 12px black;
        }
        @keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

        .footer { text-align: center; color: #ffeaaf; margin-top: 20px; font-size: 0.8rem; }
        .taxa-badge { display: inline-block; padding: 5px 12px; border-radius: 60px; font-weight: bold; }
        .conversao-alta { background: #218c53; color: white; }
        .conversao-media { background: #e68a2e; color: white; }
        .conversao-baixa { background: #9e6d3b; color: #f9eec1; }
        @media (max-width: 700px) { .top-bar { flex-direction: column; text-align: center; } .album-grid { grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); } }


        /* =========================
   MODAL ABRIR PACOTE PREMIUM
========================= */

.pacote-open-area{
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

/* FUNDO ANIMADO */

.pacote-open-area::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,215,0,.15), transparent 20%),
    radial-gradient(circle at 80% 30%, rgba(0,255,255,.12), transparent 20%),
    radial-gradient(circle at 50% 80%, rgba(255,0,255,.12), transparent 20%);
  animation:fundoPulse 5s infinite linear;
}

@keyframes fundoPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
  100%{ transform:scale(1); }
}

/* PACOTE FECHADO */

.pack-rasgar{
  width:230px;
  height:320px;
  border-radius:28px;
  background:
    linear-gradient(145deg,#ffcc4d,#ff7b00);
  border:6px solid gold;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:6rem;
  cursor:pointer;
  z-index:2;
  position:relative;
  box-shadow:
    0 0 40px rgba(255,215,0,.7),
    0 0 100px rgba(255,166,0,.5);
  animation:
    packFloat 2s ease-in-out infinite,
    brilhoPack 2s linear infinite;
  overflow:hidden;
}

.pack-rasgar::before{
  content:"";
  position:absolute;
  width:200%;
  height:40px;
  background:rgba(255,255,255,.35);
  transform:rotate(35deg);
  animation:shinePack 2s linear infinite;
}

@keyframes shinePack{
  0%{ left:-200%; }
  100%{ left:200%; }
}

@keyframes brilhoPack{
  0%{
    box-shadow:
      0 0 20px rgba(255,215,0,.5),
      0 0 60px rgba(255,166,0,.3);
  }

  50%{
    box-shadow:
      0 0 40px rgba(255,255,255,.9),
      0 0 120px rgba(255,215,0,.8);
  }

  100%{
    box-shadow:
      0 0 20px rgba(255,215,0,.5),
      0 0 60px rgba(255,166,0,.3);
  }
}

@keyframes packFloat{
  0%,100%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-15px);
  }
}

/* RASGAR */

.pack-rasgar.rasgando{
  animation:
    rasgarAnim .9s forwards;
}

@keyframes rasgarAnim{
  0%{
    transform:scale(1) rotate(0deg);
    opacity:1;
  }

  50%{
    transform:scale(1.25) rotate(10deg);
  }

  100%{
    transform:scale(0);
    opacity:0;
  }
}

/* CARTAS */

.cartas-reveladas{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  z-index: 30 !important;
  margin-top: -80px !important;
  pointer-events: auto !important;
}

.pack-stage{
  position: relative;
  z-index: 40;
}

.pack-premium,
#packRasgar{
  position: relative;
  z-index: 50;
  pointer-events: auto !important;
}

.flip-card{
  margin: 0 !important;
}

/* CARTA PREMIUM */

.carta-premium{
  width:240px;
  min-height:360px;
  border-radius:28px;
  padding:18px;
  background:
    linear-gradient(145deg,#fff7e0,#f3dfb4);
  position:relative;
  overflow:hidden;
  text-align:center;
  animation:
    aparecerCarta .7s cubic-bezier(.2,1.3,.2,1) forwards;
  transform:translateY(120px) scale(.7);
  opacity:0;
  border:5px solid #ffcf5c;
  box-shadow:
    0 20px 40px rgba(0,0,0,.4);
}

@keyframes aparecerCarta{
  to{
    transform:translateY(0px) scale(1);
    opacity:1;
  }
}

.carta-premium img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:22px;
  border:4px solid rgba(255,255,255,.7);
}

/* TEXTO */

.carta-premium h3{
  margin-top:12px;
  font-size:1.3rem;
  color:#1b463e;
}

.carta-premium p{
  margin-top:6px;
  font-weight:bold;
  color:#7b5b2c;
}

/* RARIDADES */

.carta-premium.comum{
  border-color:#d3c29d;
}

.carta-premium.rara{
  border-color:#3cff82;
  box-shadow:
    0 0 30px rgba(60,255,130,.7),
    0 20px 40px rgba(0,0,0,.4);
}

.carta-premium.epica{
  border-color:#c14dff;
  box-shadow:
    0 0 40px rgba(193,77,255,.9),
    0 20px 40px rgba(0,0,0,.4);
}

.carta-premium.lendaria{
  border-color:#ffd700;
  animation:
    aparecerCarta .7s cubic-bezier(.2,1.3,.2,1) forwards,
    lendariaGlow 1.4s infinite alternate;
}

@keyframes lendariaGlow{
  from{
    box-shadow:
      0 0 20px rgba(255,215,0,.7),
      0 0 60px rgba(255,166,0,.6);
  }

  to{
    box-shadow:
      0 0 50px rgba(255,255,255,.95),
      0 0 140px rgba(255,215,0,1);
  }
}

/* TAGS */

.repetida-tag,
.nova-tag{
  margin-top:12px;
  display:inline-block;
  padding:8px 16px;
  border-radius:30px;
  font-weight:900;
  font-size:.85rem;
}

.repetida-tag{
  background:#ff6767;
  color:white;
}

.nova-tag{
  background:#2bc76b;
  color:white;
}

/* BOTAO FECHAR */

.btn-fechar-pack{
  width:260px;
  margin-top:30px;
  border:none;
  border-radius:60px;
  padding:16px;
  font-size:1rem;
  font-weight:900;
  cursor:pointer;
  background:
    linear-gradient(145deg,#006653,#00a878);
  color:white;
  transition:.2s;
}

.btn-fechar-pack:hover{
  transform:scale(1.04);
  box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}

/* MOBILE */

@media(max-width:900px){

  .cartas-reveladas{
    gap:15px;
  }

  .carta-premium{
    width:170px;
    min-height:290px;
  }

  .carta-premium img{
    height:150px;
  }

  .pack-rasgar{
    width:170px;
    height:250px;
  }
}

.screen-shake {
  animation: screenShake .7s linear;
}

@keyframes screenShake {
  0%,100% { transform: translate(0); }
  10% { transform: translate(-8px, 5px); }
  20% { transform: translate(8px, -5px); }
  30% { transform: translate(-10px, 4px); }
  40% { transform: translate(10px, -4px); }
  50% { transform: translate(-6px, 6px); }
  60% { transform: translate(6px, -6px); }
  70% { transform: translate(-4px, 3px); }
  80% { transform: translate(4px, -3px); }
}

.confete {
  position: fixed;
  top: -20px;
  width: 10px;
  height: 16px;
  z-index: 9999;
  animation: cairConfete 2.8s linear forwards;
}

@keyframes cairConfete {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

.contador-pop {
  animation: contadorPop .45s ease;
}

@keyframes contadorPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); color: #00a878; }
  100% { transform: scale(1); }
}

/* CENTRAL DE TROCAS */
.troca-card {
  max-width: 980px;
  width: 94%;
  max-height: 88vh;
  overflow: hidden;
}

.troca-body {
  padding: 24px;
  max-height: 70vh;
  overflow-y: auto;
}

.troca-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
}

.troca-box {
  background: linear-gradient(145deg, #fff8e8, #f1dfbd);
  border: 2px solid #f4c16d;
  border-radius: 30px;
  padding: 18px;
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

.troca-box h3 {
  color: #064d3d;
  margin-bottom: 14px;
  font-size: 1.25rem;
}

.troca-box label {
  display: block;
  margin: 12px 0 6px;
  font-size: .82rem;
  font-weight: 900;
  color: #6c4a1d;
}

.troca-box select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid #d6bd8b;
  background: #fffdf7;
  font-weight: 700;
  outline: none;
}

.troca-box select:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 4px rgba(245,166,35,.18);
}

.btn-troca-principal {
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #00745d, #00a878);
  color: white;
  font-weight: 900;
  cursor: pointer;
}

.btn-troca-principal:hover {
  transform: scale(1.02);
}

.troca-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.troca-item {
  background: #fffdf7;
  border: 1px solid #e3cfa4;
  border-radius: 22px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-weight: 700;
}

.troca-item strong {
  color: #064d3d;
}

.troca-item span {
  background: #ffe1a8;
  border-radius: 30px;
  padding: 5px 10px;
  font-size: .78rem;
}

.troca-item b {
  background: #ccefdc;
  border-radius: 30px;
  padding: 5px 10px;
  font-size: .78rem;
  color: #07543f;
}

.troca-proposta {
  align-items: flex-start;
}

.troca-proposta small {
  color: #5d4a2b;
  line-height: 1.5;
}

.troca-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.troca-actions button {
  border: none;
  padding: 9px 12px;
  border-radius: 30px;
  font-weight: 900;
  cursor: pointer;
}

.troca-actions button:first-child {
  background: #00a878;
  color: white;
}

.troca-actions button:last-child {
  background: #b6462d;
  color: white;
}

@media (max-width: 760px) {
  .troca-grid {
    grid-template-columns: 1fr;
  }

  .troca-card {
    width: 96%;
    border-radius: 34px;
  }

  .troca-body {
    padding: 16px;
  }

  .troca-item {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ÁLBUM PREMIUM */
.album-card {
  max-width: 1050px;
  border-radius: 44px;
}

.album-grid {
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  padding: 28px;
  background: radial-gradient(circle at top, #fff7e4, #f4e4c4);
}

@media(max-width:900px){
  .album-grid{
    grid-template-columns: repeat(2,1fr);
  }
}

.figurinha-card {
  min-height: 205px;
  border-radius: 26px;
  padding: 14px 10px;
  background: linear-gradient(145deg, #fff8e8, #f1dfbd);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}

.figurinha-card.possui {
  background: linear-gradient(145deg, #e6ffd8, #c9f4b8);
  border-color: #26a647;
  box-shadow: 0 0 22px rgba(38,166,71,.35);
}

.figurinha-card.falta {
  opacity: .72;
  filter: grayscale(.25);
}

.figurinha-card:hover {
  transform: translateY(-5px) scale(1.03);
}

.figurinha-icone img {
  width: 96px !important;
  height: 96px !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

.figurinha-status {
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 900;
}

.album-paginacao {
  background: #e2d2ac;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
  font-weight: 900;
}

.album-paginacao button {
  border: none;
  background: linear-gradient(135deg, #00745d, #00a878);
  color: white;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 900;
}

.album-paginacao span {
  background: #fff7df;
  padding: 9px 18px;
  border-radius: 999px;
}

.legenda-copa {
  justify-content: center;
  flex-wrap: wrap;
}

.carta-premium.extra{
  border-color:#00e5ff;
  animation:
    aparecerCarta .7s cubic-bezier(.2,1.3,.2,1) forwards,
    extraGlow 1.2s infinite alternate;
}

@keyframes extraGlow{
  from{
    box-shadow:
      0 0 20px rgba(0,229,255,.5),
      0 0 50px rgba(0,229,255,.4);
  }

  to{
    box-shadow:
      0 0 50px rgba(255,255,255,.9),
      0 0 120px rgba(0,229,255,1);
  }
}

.pack-taca {
    animation:
  flutuarPack 2s ease-in-out infinite,
  brilhoPack 1.4s infinite alternate;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd700, #f5a623, #006653);
  border: 8px solid #ffefb0;
}

.pack-taca::after {
  content: "MOViDA";
  position: absolute;
  bottom: 38px;
  font-size: 18px;
  font-weight: 900;
  color: #004d3b;
  background: #fff3c4;
  padding: 6px 14px;
  border-radius: 999px;
}

@keyframes flutuarPack{
  0%{
    transform: translateY(0px) scale(1);
  }

  50%{
    transform: translateY(-10px) scale(1.03);
  }

  100%{
    transform: translateY(0px) scale(1);
  }
}

@keyframes brilhoPack{
  from{
    box-shadow:
      0 0 20px #ffd700,
      0 0 50px rgba(255,215,0,.5);
  }

  to{
    box-shadow:
      0 0 40px #fff,
      0 0 90px rgba(255,215,0,1);
  }
}

/* FLIP REVEAL DAS CARTAS */
.flip-card {
  width: 240px;
  height: 365px;
  perspective: 1200px;
  cursor: pointer;
  animation: aparecerCarta .7s cubic-bezier(.2,1.3,.2,1) forwards;
  transform: translateY(120px) scale(.7);
  opacity: 0;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .8s cubic-bezier(.2,.9,.2,1.2);
  transform-style: preserve-3d;
}

.flip-card.virada .flip-inner {
  transform: rotateY(180deg);
}

.flip-back,
.flip-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 28px;
}

.flip-back {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.55), transparent 25%),
    linear-gradient(145deg, #ffcf4d, #ff8800);
  border: 6px solid #ffd700;
  box-shadow:
    0 0 35px rgba(255,215,0,.7),
    0 18px 35px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #064d3d;
  text-align: center;
  font-weight: 900;
}

.verso-logo {
  font-size: 4.5rem;
  animation: versoPulse 1.4s infinite alternate;
}

.verso-texto {
  background: #fff3c4;
  border-radius: 18px;
  padding: 10px 18px;
  font-size: 1.1rem;
  line-height: 1.1;
}

.flip-back small {
  color: #fff8d8;
  background: rgba(0,0,0,.25);
  padding: 7px 14px;
  border-radius: 999px;
}

@keyframes versoPulse {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.08); filter: brightness(1.25); }
}

.flip-front {
  transform: rotateY(180deg);
}

.flip-card.lendaria .flip-back {
  border-color: #fff4a8;
  animation: versoLendaria 1.2s infinite alternate;
}

.flip-card.extra .flip-back {
  border-color: #00e5ff;
  animation: versoExtra 1.2s infinite alternate;
}

@keyframes versoLendaria {
  from { box-shadow: 0 0 35px rgba(255,215,0,.7), 0 18px 35px rgba(0,0,0,.45); }
  to { box-shadow: 0 0 75px rgba(255,255,255,.95), 0 0 130px rgba(255,215,0,1); }
}

@keyframes versoExtra {
  from { box-shadow: 0 0 35px rgba(0,229,255,.6), 0 18px 35px rgba(0,0,0,.45); }
  to { box-shadow: 0 0 75px rgba(255,255,255,.95), 0 0 130px rgba(0,229,255,1); }
}

@media(max-width:900px){
  .flip-card {
    width: 170px;
    height: 300px;
  }
}

.flip-front {
  transform: rotateY(180deg);
}

.flip-back {
  transform: rotateY(0deg);
}

.flip-card:not(.virada) .flip-front {
  pointer-events: none;
}

.flip-card.virada .flip-inner {
  transform: rotateY(180deg);
}

.flip-card.rara.virada .flip-front {
  animation: revealRara .8s ease forwards;
}

.flip-card.epica.virada .flip-front {
  animation: revealEpica .9s ease forwards;
}

.flip-card.lendaria.virada .flip-front {
  animation: revealLendaria 1s ease forwards, lendariaGlow 1.4s infinite alternate;
}

.flip-card.extra.virada .flip-front {
  animation: revealExtra 1s ease forwards, extraGlow 1.2s infinite alternate;
}

@keyframes revealRara {
  0% { filter: brightness(2); box-shadow: 0 0 20px #2cff7b; }
  100% { filter: brightness(1); }
}

@keyframes revealEpica {
  0% { filter: brightness(2); box-shadow: 0 0 40px #c14dff; }
  100% { filter: brightness(1); }
}

@keyframes revealLendaria {
  0% { transform: rotateY(180deg) scale(.9); filter: brightness(3); }
  60% { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

@keyframes revealExtra {
  0% { transform: rotateY(180deg) scale(.85); filter: brightness(3); }
  60% { transform: rotateY(180deg) scale(1.1); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* CORREÇÃO: CARTAS SEMPRE COMEÇAM PELO VERSO */
.flip-card {
  perspective: 1200px;
}

.flip-inner {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.9,.2,1.2);
}

.flip-card.virada .flip-inner {
  transform: rotateY(180deg);
}

.flip-back,
.flip-front {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.flip-back {
  transform: rotateY(0deg) !important;
  z-index: 2;
}

.flip-front {
  transform: rotateY(180deg) !important;
  z-index: 1;
}

/* impede a animação antiga da frente aparecer sozinha */
.flip-front.carta-premium {
  animation: none !important;
  opacity: 1 !important;
}

/* animação só depois que clicar */
.flip-card.virada .flip-front.rara {
  animation: revealRara .8s ease forwards !important;
}

.flip-card.virada .flip-front.epica {
  animation: revealEpica .9s ease forwards !important;
}

.flip-card.virada .flip-front.lendaria {
  animation: revealLendaria 1s ease forwards, lendariaGlow 1.4s infinite alternate !important;
}

.flip-card.virada .flip-front.extra {
  animation: revealExtra 1s ease forwards, extraGlow 1.2s infinite alternate !important;
}

/* ANIMAÇÃO LENDÁRIA PREMIUM */
.flip-card.virada .flip-front.lendaria {
  animation:
    lendariaRevealPremium 1.3s ease forwards,
    lendariaAura 1.1s infinite alternate !important;
}

@keyframes lendariaRevealPremium {
  0% {
    transform: rotateY(180deg) scale(.65);
    filter: brightness(4) blur(8px);
  }

  35% {
    transform: rotateY(180deg) scale(1.18);
    filter: brightness(3) blur(0);
  }

  65% {
    transform: rotateY(180deg) scale(.96);
  }

  100% {
    transform: rotateY(180deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes lendariaAura {
  from {
    box-shadow:
      0 0 30px #ffd700,
      0 0 80px rgba(255, 215, 0, .8),
      0 0 140px rgba(255, 180, 0, .5);
  }

  to {
    box-shadow:
      0 0 60px #fff,
      0 0 130px rgba(255, 215, 0, 1),
      0 0 220px rgba(255, 180, 0, .9);
  }
}

.flip-card.virada .flip-front.epica {
  animation:
    epicaRevealPremium 1s ease forwards,
    epicaAura 1.3s infinite alternate !important;
}

@keyframes epicaRevealPremium {
  0% {
    transform: rotateY(180deg) scale(.75) rotateZ(-4deg);
    filter: brightness(3);
  }

  60% {
    transform: rotateY(180deg) scale(1.08) rotateZ(3deg);
  }

  100% {
    transform: rotateY(180deg) scale(1) rotateZ(0);
    filter: brightness(1);
  }
}

@keyframes epicaAura {
  from {
    box-shadow: 0 0 35px rgba(193,77,255,.8);
  }

  to {
    box-shadow: 0 0 95px rgba(193,77,255,1);
  }
}

.flip-card.virada .flip-front.extra {
  animation:
    extraRevealPremium 1.1s ease forwards,
    extraAura 1.1s infinite alternate !important;
}

@keyframes extraRevealPremium {
  0% {
    transform: rotateY(180deg) scale(.7);
    filter: brightness(4) hue-rotate(90deg);
  }

  50% {
    transform: rotateY(180deg) scale(1.15);
  }

  100% {
    transform: rotateY(180deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes extraAura {
  from {
    box-shadow: 0 0 35px rgba(0,229,255,.8);
  }

  to {
    box-shadow: 0 0 120px rgba(0,229,255,1);
  }
}

.btn-audio{
  background: linear-gradient(135deg,#006653,#00a878);
  color:white;
  border:none;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  transition:.2s;
}

.btn-audio:hover{
  transform:scale(1.05);
}

.album-capa {
  min-height: 58vh;
  background: radial-gradient(circle at center, #fff0bd, #e1c98d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  perspective: 1200px;
}

.album-capa img {
  width: min(360px, 78vw);
  max-height: 480px;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: 0 30px 55px rgba(0,0,0,.45);
  transform-origin: left center;
}

.album-capa.abrindo img {
  animation: abrirCapaAlbum .9s ease forwards;
}

@keyframes abrirCapaAlbum {
  0% { transform: rotateY(0) scale(1); opacity: 1; }
  70% { transform: rotateY(-75deg) scale(1.04); opacity: .9; }
  100% { transform: rotateY(-105deg) scale(.9); opacity: 0; }
}

.album-capa {
  animation: capaEntrada .45s ease;
}

@keyframes capaEntrada {
  from{
    opacity:0;
    transform:scale(.92);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}

.album-fechado {
  display: none !important;
}

.album-aberto {
  animation: virarPaginaAlbum .45s ease;
}

@keyframes virarPaginaAlbum {
  from {
    transform: rotateY(8deg) translateX(30px);
    opacity: .3;
  }
  to {
    transform: rotateY(0) translateX(0);
    opacity: 1;
  }
}

.card-album-real {
  min-height: 245px;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(145deg, #fff8e6, #ead6a8);
  border: 3px solid #e1bd67;
}

.card-album-real .figurinha-icone {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-album-real .figurinha-icone img {
  width: 118px !important;
  height: 158px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.25);
}

.card-album-real.possui {
  background: linear-gradient(145deg, #dcffd0, #b8efaa);
  border-color: #17a94a;
  box-shadow: 0 0 28px rgba(23,169,74,.35);
}

.card-album-real.falta {
  filter: grayscale(.25);
  opacity: .68;
}

.card-album-real.lendaria.possui {
  border-color: #ffd700;
  box-shadow: 0 0 40px rgba(255,215,0,.75);
}

.card-album-real.epica.possui {
  border-color: #c14dff;
  box-shadow: 0 0 36px rgba(193,77,255,.55);
}

.card-album-real.extra.possui {
  border-color: #00e5ff;
  box-shadow: 0 0 36px rgba(0,229,255,.6);
}

.carta-detalhe-card {
  position: relative;
  width: min(420px, 92vw);
  background: linear-gradient(145deg, #fff8e6, #ead6a8);
  border: 4px solid #ffcf5c;
  border-radius: 34px;
  padding: 24px;
  text-align: center;
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 55px rgba(255,215,0,.35);
  animation: detalheCartaIn .28s ease;
}

@keyframes detalheCartaIn {
  from {
    opacity: 0;
    transform: scale(.86) translateY(25px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.carta-detalhe-card img {
  width: min(260px, 75vw);
  height: 350px;
  object-fit: contain;
  border-radius: 20px;
  margin-bottom: 14px;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.32));
}

.carta-detalhe-card h2 {
  color: #064d3d;
  font-size: 1.7rem;
}

.carta-detalhe-card p {
  font-weight: 900;
  color: #8a641e;
  margin: 6px 0 14px;
}

.detalhe-como-conseguir {
  background: #fff1cf;
  border: 1px solid #e7c576;
  border-radius: 22px;
  padding: 14px;
  color: #5f4319;
  font-weight: 700;
  line-height: 1.45;
}

.detalhe-como-conseguir strong,
.detalhe-como-conseguir span {
  display: block;
}

.fechar-carta-detalhe {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #f5a623;
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
}

#modalCartaDetalhe{
  z-index: 50000 !important;
}

.carta-detalhe-card{
  z-index: 50001 !important;
}

.album-modal{
  z-index: 1000;
}

/* LENDÁRIA BRILHANDO NO ÁLBUM */
.card-album-real.lendaria.possui {
  position: relative;
  overflow: hidden;
  border-color: #ffd700 !important;
  animation: brilhoLendariaAlbum 1.4s infinite alternate;
}

.card-album-real.lendaria.possui::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.75) 50%,
    transparent 65%
  );
  transform: translateX(-120%) rotate(25deg);
  animation: reflexoLendariaAlbum 2.2s infinite;
  pointer-events: none;
}

@keyframes brilhoLendariaAlbum {
  from {
    box-shadow:
      0 0 22px rgba(255,215,0,.65),
      0 0 55px rgba(255,180,0,.35);
  }

  to {
    box-shadow:
      0 0 42px rgba(255,255,255,.95),
      0 0 95px rgba(255,215,0,.9);
  }
}

@keyframes reflexoLendariaAlbum {
  0% {
    transform: translateX(-120%) rotate(25deg);
  }

  55%, 100% {
    transform: translateX(120%) rotate(25deg);
  }
}

/* MODAL DETALHE LENDÁRIA */
.carta-detalhe-card.lendaria {
  border-color: #ffd700 !important;

  animation:
    modalLendariaPulse 1.3s infinite alternate;
}

.carta-detalhe-card.lendaria::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -80%;
  width: 45%;
  height: 160%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.15) 35%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,.15) 65%,
    transparent 100%
  );
  transform: rotate(24deg);
  animation: reflexoModalLendariaCorrigido 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes reflexoModalLendariaCorrigido {
  0% {
    left: -90%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  55% {
    left: 140%;
    opacity: 1;
  }

  56% {
    opacity: 0;
  }

  100% {
    left: 140%;
    opacity: 0;
  }
}

.carta-detalhe-card.lendaria img {
  animation:
    cartaLendariaFloat 2.2s infinite ease-in-out;
}

@keyframes modalLendariaPulse {

  from{
    box-shadow:
      0 0 35px rgba(255,215,0,.65),
      0 0 80px rgba(255,180,0,.35),
      0 30px 60px rgba(0,0,0,.55);
  }

  to{
    box-shadow:
      0 0 65px rgba(255,255,255,.95),
      0 0 140px rgba(255,215,0,.95),
      0 30px 60px rgba(0,0,0,.65);
  }
}



@keyframes cartaLendariaFloat {

  0%{
    transform: translateY(0px) scale(1);
  }

  50%{
    transform: translateY(-10px) scale(1.02);
  }

  100%{
    transform: translateY(0px) scale(1);
  }
}

/* EXTRA ULTRA RARO */
.card-album-real.extra.possui {
  position: relative;
  overflow: hidden;

  border: 3px solid #b300ff !important;

  background:
    radial-gradient(circle at top, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(145deg,#180022,#32004a,#120018) !important;

  animation:
    extraPulseAlbum 1.5s infinite alternate;
}

/* aura roxa */
@keyframes extraPulseAlbum {

  from{
    box-shadow:
      0 0 25px rgba(179,0,255,.55),
      0 0 60px rgba(125,0,255,.35);
  }

  to{
    box-shadow:
      0 0 45px rgba(255,255,255,.85),
      0 0 95px rgba(179,0,255,1),
      0 0 160px rgba(0,255,255,.45);
  }
}

/* reflexo passando */
.card-album-real.extra.possui::before{
  content:"";
  position:absolute;
  top:-35%;
  left:-80%;
  width:40%;
  height:170%;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.1) 35%,
      rgba(0,255,255,.75) 50%,
      rgba(255,0,255,.4) 60%,
      transparent 100%
    );

  transform:rotate(24deg);

  animation:
    extraReflexoAlbum 2.4s linear infinite;

  pointer-events:none;
}

@keyframes extraReflexoAlbum{

  0%{
    left:-90%;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  55%{
    left:150%;
    opacity:1;
  }

  56%{
    opacity:0;
  }

  100%{
    left:150%;
    opacity:0;
  }
}

/* brilho interno */
.card-album-real.extra.possui::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,255,.22), transparent 30%),
    radial-gradient(circle at 80% 30%, rgba(255,0,255,.18), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(179,0,255,.16), transparent 35%);

  animation:
    extraNebula 4s infinite alternate;

  pointer-events:none;
}

@keyframes extraNebula{

  from{
    transform:scale(1) rotate(0deg);
    filter:hue-rotate(0deg);
  }

  to{
    transform:scale(1.08) rotate(6deg);
    filter:hue-rotate(35deg);
  }
}

/* MODAL EXTRA */
.carta-detalhe-card.extra{
  border-color:#b300ff !important;

  background:
    linear-gradient(145deg,#fff8e6,#efe1ff) !important;

  animation:
    modalExtraPulse 1.2s infinite alternate;
}

@keyframes modalExtraPulse{

  from{
    box-shadow:
      0 0 35px rgba(179,0,255,.55),
      0 0 80px rgba(0,255,255,.25);
  }

  to{
    box-shadow:
      0 0 65px rgba(255,255,255,.95),
      0 0 120px rgba(179,0,255,1),
      0 0 180px rgba(0,255,255,.5);
  }
}

.carta-detalhe-card.extra img{
  animation:
    extraFloat 2s infinite ease-in-out;
}

@keyframes extraFloat{

  0%{
    transform:translateY(0px) rotate(-1deg);
  }

  50%{
    transform:translateY(-12px) rotate(1deg) scale(1.03);
  }

  100%{
    transform:translateY(0px) rotate(-1deg);
  }
}

.btn-x-perfil{
  position:absolute;
  top:18px;
  right:18px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:#f5b63a;
  color:#000;
  font-size:1.3rem;
  font-weight:900;
  cursor:pointer;
  transition:.25s;
  z-index:20;
}

.btn-x-perfil:hover{
  transform:scale(1.08) rotate(8deg);
  background:#ffd166;
}

.modal-card-perfil{
  position:relative;
  overflow:hidden;
}

.perfil-email{
  text-align:center;
  margin-bottom:18px;
  font-size:1rem;
  color:#002f34;
}

.perfil-resumo{
  background:linear-gradient(145deg,#e9d8b7,#dbc59d);
  border-radius:28px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:22px;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.4),
    0 10px 30px rgba(0,0,0,.12);
}

.perfil-item{
  background:rgba(255,255,255,.28);
  border-radius:18px;
  padding:14px;
  text-align:center;
  backdrop-filter:blur(8px);
}

.perfil-item span{
  display:block;
  font-size:.82rem;
  opacity:.7;
  margin-bottom:4px;
}

.perfil-item strong{
  font-size:1.1rem;
  color:#004d40;
}

.perfil-botoes{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.perfil-botoes button{
  height:58px;
  border:none;
  border-radius:40px;
  background:linear-gradient(90deg,#006b56,#008f73);
  color:#fff;
  font-weight:800;
  font-size:1rem;
  cursor:pointer;
  transition:.25s;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
}

.perfil-botoes button:hover{
  transform:translateY(-2px) scale(1.02);
  filter:brightness(1.08);
}

.btn-x-perfil {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #f5a623 !important;
  color: #000 !important;
  z-index: 10 !important;
}

.modal-card-perfil h2 {
  margin-top: 10px;
  padding-right: 45px;
}

.btn-loading {
  opacity: .75;
  pointer-events: none;
  animation: pulseLoading .8s infinite alternate;
}

@keyframes pulseLoading {
  from { filter: brightness(.9); transform: scale(.99); }
  to { filter: brightness(1.12); transform: scale(1.01); }
}

.pack-card-back{
  width:220px;
  height:320px;

  border-radius:22px;

  overflow:hidden;

  position:relative;

  cursor:pointer;

  transition:.25s;

  animation:
    pacoteFloat 2s ease-in-out infinite;

  filter:
    drop-shadow(0 0 25px rgba(255,180,0,.55))
    drop-shadow(0 0 55px rgba(255,120,0,.35));
}

.pack-card-back img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* brilho passando */
.pack-card-back::before{
  content:"";
  position:absolute;

  top:-20%;
  left:-80%;

  width:40%;
  height:150%;

  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.08) 35%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.08) 65%,
      transparent 100%
    );

  transform:rotate(22deg);

  animation:
    brilhoPacoteMovida 2.4s linear infinite;
}

@keyframes brilhoPacoteMovida{

  0%{
    left:-90%;
    opacity:0;
  }

  10%{
    opacity:1;
  }

  55%{
    left:140%;
    opacity:1;
  }

  56%{
    opacity:0;
  }

  100%{
    left:140%;
    opacity:0;
  }
}

@keyframes pacoteFloat{

  0%{
    transform:translateY(0px) rotate(-2deg);
  }

  50%{
    transform:translateY(-12px) rotate(2deg) scale(1.02);
  }

  100%{
    transform:translateY(0px) rotate(-2deg);
  }
}

.card-verso-premium{
  width:100%;
  height:100%;
  border-radius:22px;
  background:
    linear-gradient(145deg,#ff9f0a,#ff7b00);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#fff6d2;
  position:relative;
  overflow:hidden;
}

.card-verso-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,.35) 50%,
      transparent 80%
    );
  animation: brilhoVerso 2.5s linear infinite;
}



.verso-texto{
  font-size:1.2rem;
  font-weight:900;
  text-align:center;
  line-height:1.1;
  z-index:2;
}

.card-verso-premium small{
  z-index:2;
  opacity:.9;
  font-weight:700;
}

@keyframes brilhoVerso{
  0%{
    transform:translateX(-160%);
  }
  100%{
    transform:translateX(160%);
  }
}

.trofeu-verso{
  font-size: 5rem;
  animation: trofeuPulse 1.2s infinite alternate;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.7));
}

@keyframes trofeuPulse{
  from{
    transform: scale(1);
    filter: brightness(1);
  }

  to{
    transform: scale(1.08);
    filter: brightness(1.35);
  }
}

.verso-texto{
  background: rgba(255,255,255,.18);
  color: #fff7d1;
  border: 2px solid rgba(255,255,255,.25);
  backdrop-filter: blur(5px);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* PADRONIZA IMAGENS DAS CARTAS REVELADAS */
.flip-front.carta-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flip-front.carta-premium img {
  width: 190px !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 18px !important;
}

/* quando for imagem já montada como card completo */
.flip-front.carta-premium img[src*="carta"] {
  object-fit: contain !important;
  background: transparent !important;
}

.flip-front.carta-premium img {
  width: 190px !important;
  height: 260px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 18px !important;
}

/* CARTAS REVELADAS - TAMANHO PADRÃO */
.flip-front.carta-premium{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* IMAGEM PADRONIZADA */
.flip-front.carta-premium img{
  width:190px !important;
  height:260px !important;

  object-fit:contain !important;
  object-position:center !important;

  border-radius:18px !important;

  background:transparent;

  image-rendering:auto;

  filter:
    drop-shadow(0 8px 20px rgba(0,0,0,.35));

  transition:.25s;
}

/* HOVER */
.flip-front.carta-premium:hover img{
  transform:scale(1.03);
}

.perfil-botoes button {
  position: relative;
  overflow: hidden;
}

.btn-spinner {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

.btn-loading .btn-spinner {
  opacity: 1;
  animation: girarSpinner 0.7s linear infinite;
}

.btn-loading {
  opacity: 0.85;
  pointer-events: none;
}

@keyframes girarSpinner {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* SUSPENSE EXTRA / LENDÁRIA ANTES DE REVELAR */
.flip-card.suspense-1 .flip-back {
  animation: suspensePulse1 .7s infinite alternate !important;
}

.flip-card.suspense-2 .flip-back {
  animation: suspensePulse2 .45s infinite alternate !important;
}

.flip-card.suspense-1.lendaria .flip-back,
.flip-card.suspense-2.lendaria .flip-back {
  border-color: #ffd700 !important;
}

.flip-card.suspense-1.extra .flip-back,
.flip-card.suspense-2.extra .flip-back {
  border-color: #b300ff !important;
}

@keyframes suspensePulse1 {
  from {
    transform: scale(1);
    box-shadow: 0 0 35px rgba(255,255,255,.4);
  }

  to {
    transform: scale(1.04);
    box-shadow: 0 0 90px rgba(255,215,0,.8);
  }
}

@keyframes suspensePulse2 {
  from {
    transform: scale(1.02) rotate(-1deg);
    filter: brightness(1.4);
  }

  to {
    transform: scale(1.09) rotate(1deg);
    filter: brightness(2.2);
  }
}

/* REVELAÇÃO LENDÁRIA IMPACTANTE */
.flip-card.virada .flip-front.lendaria {
  animation:
    revelarLendariaImpacto 1.4s ease forwards,
    auraLendariaRevelada 1s infinite alternate !important;
}

@keyframes revelarLendariaImpacto {
  0% {
    transform: rotateY(180deg) scale(.45);
    filter: brightness(6) blur(10px);
  }

  35% {
    transform: rotateY(180deg) scale(1.28);
    filter: brightness(3) blur(0);
  }

  60% {
    transform: rotateY(180deg) scale(.95);
  }

  100% {
    transform: rotateY(180deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes auraLendariaRevelada {
  from {
    box-shadow:
      0 0 40px #ffd700,
      0 0 100px rgba(255,215,0,.85);
  }

  to {
    box-shadow:
      0 0 75px #fff,
      0 0 170px rgba(255,215,0,1),
      0 0 240px rgba(255,140,0,.8);
  }
}

/* REVELAÇÃO EXTRA IMPACTANTE */
.flip-card.virada .flip-front.extra {
  background:
    radial-gradient(circle at top, rgba(255,255,255,.25), transparent 45%),
    linear-gradient(145deg,#170024,#3b0058,#120018) !important;

  animation:
    revelarExtraImpacto 1.3s ease forwards,
    auraExtraRevelada .9s infinite alternate !important;
}

@keyframes revelarExtraImpacto {
  0% {
    transform: rotateY(180deg) scale(.45) rotateZ(-8deg);
    filter: brightness(5) blur(8px) hue-rotate(90deg);
  }

  40% {
    transform: rotateY(180deg) scale(1.25) rotateZ(5deg);
    filter: brightness(2.8) blur(0);
  }

  70% {
    transform: rotateY(180deg) scale(.96) rotateZ(-2deg);
  }

  100% {
    transform: rotateY(180deg) scale(1) rotateZ(0);
    filter: brightness(1);
  }
}

@keyframes auraExtraRevelada {
  from {
    box-shadow:
      0 0 45px rgba(179,0,255,.75),
      0 0 110px rgba(0,229,255,.45);
  }

  to {
    box-shadow:
      0 0 80px rgba(255,255,255,.95),
      0 0 170px rgba(179,0,255,1),
      0 0 230px rgba(0,229,255,.8);
  }
}

.card-album-real{
  position:relative;
}

.badge-repetida-card{
  position:absolute;
  right:6px;
  bottom:6px;

  min-width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;

  background:linear-gradient(135deg,#ff2d55,#ff4d4d);
  color:#fff;

  font-weight:900;
  font-size:13px;

  padding:0 10px;

  border-radius:999px;

  box-shadow:
    0 0 12px rgba(255,45,85,.6),
    0 4px 12px rgba(0,0,0,.25);

  border:2px solid rgba(255,255,255,.25);

  z-index:30;

  animation:pulseRepetida 1.6s infinite;
}

@keyframes pulseRepetida{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.08);
  }
  100%{
    transform:scale(1);
  }
}

.placar-pagina-album{
  background:linear-gradient(135deg,#004d3b,#006b55);
  color:#fff4c2;
  padding:14px 24px;
  border-top:3px solid #f5b63a;
}

.placar-pagina-title{
  font-weight:900;
  margin-bottom:10px;
  text-align:center;
}

.placar-pagina-lista{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.placar-pagina-item{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:18px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:.85rem;
}

.placar-pagina-item strong{
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.placar-pagina-item b{
  background:#f5b63a;
  color:#003c2f;
  padding:4px 9px;
  border-radius:999px;
}

.placar-pagina-vazio{
  text-align:center;
  opacity:.85;
  font-size:.85rem;
}

@media(max-width:800px){
  .placar-pagina-lista{
    grid-template-columns:1fr;
  }
}

.repetidas-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.repetida-card{
  position:relative;
  background:linear-gradient(145deg,#fff8e8,#f1dfbd);
  border:2px solid #f3bf68;
  border-radius:22px;
  padding:10px;
  text-align:center;
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}

.repetida-img-wrap{
  position:relative;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fffaf0;
  border-radius:18px;
  overflow:hidden;
}

.repetida-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.repetida-qtd{
  position:absolute;
  top:6px;
  right:6px;
  background:linear-gradient(135deg,#ff4d4d,#ff1f1f);
  color:white;
  font-weight:900;
  font-size:.78rem;
  padding:5px 9px;
  border-radius:999px;
  box-shadow:0 0 14px rgba(255,0,0,.55);
}

.repetida-card strong{
  display:block;
  margin-top:8px;
  color:#004d3b;
  font-size:.9rem;
}

.repetida-card small{
  color:#7b5b2c;
  font-weight:700;
}

@media(max-width:700px){
  .repetidas-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

.footer-dev{
    width:100%;
    padding:18px 20px;
    margin-top:30px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;

    background:rgba(0,0,0,.25);
    border-top:2px solid rgba(255,190,60,.25);

    backdrop-filter:blur(10px);
}

.footer-dev-nomes{
    color:#ffe7b0;
    font-size:15px;
    font-weight:700;
    text-align:center;
}

.footer-dev-nomes a{
    color:#ffbf3f;
    text-decoration:none;
    transition:.25s;
}

.footer-dev-nomes a:hover{
    color:#fff;
    text-shadow:0 0 12px #ffbf3f;
}

.footer-dev-versao{
    font-size:12px;
    color:#d5c9a4;
    opacity:.85;
    letter-spacing:1px;
}

#btnSair{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.btn-icon{
    width:22px;
    height:22px;
    object-fit:contain;
}

.logo-movida{
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px 28px;

    background:
      linear-gradient(
        90deg,
        rgba(0,40,35,.95),
        rgba(0,70,60,.75)
      );

    border:2px solid rgba(255,190,60,.25);

    border-radius:999px;

    width:fit-content;

    backdrop-filter:blur(10px);

    box-shadow:
      0 10px 30px rgba(0,0,0,.35),
      inset 0 0 20px rgba(255,190,60,.05);
}

.logo-icon{
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
      linear-gradient(135deg,#ffdb6e,#ffb300);

    color:#08352f;

    font-size:26px;

    box-shadow:
      0 0 20px rgba(255,190,60,.45);
}

.logo-textos h1{
    margin:0;

    color:#ffd56b;

    font-size:20px;
    font-weight:900;
    letter-spacing:.5px;
}

.logo-textos span{
    color:#d9d3b4;

    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.logo-live{
    width:14px;
    height:14px;

    border-radius:50%;

    background:#ffbf00;

    box-shadow:
      0 0 0 rgba(255,191,0,.7);

    animation:livePulse 1.8s infinite;
}

@keyframes livePulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,191,0,.7);
    }

    70%{
        transform:scale(1.15);
        box-shadow:0 0 0 14px rgba(255,191,0,0);
    }

    100%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,191,0,0);
    }
}

.pack-stage{
  position:relative;
  width:360px;
  height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}

.pack-premium{
  position:relative;
  width:260px;
  height:360px;
  border-radius:28px;
  cursor:pointer;
  z-index:8;
  filter:drop-shadow(0 0 35px rgba(255,190,0,.7));
  animation:packSuspense 1.8s ease-in-out infinite;
}

.pack-premium img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:28px;
}

.pack-texto-clique{
  position:absolute;
  bottom:-42px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,#ffbf3f,#ff8c00);
  color:#003c2f;
  padding:9px 18px;
  border-radius:999px;
  font-weight:900;
  font-size:.85rem;
  white-space:nowrap;
  box-shadow:0 0 18px rgba(255,191,63,.55);
}

.rasgo-linha{
  position:absolute;
  top:48%;
  left:10%;
  width:80%;
  height:6px;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  transform:rotate(-8deg) scaleX(0);
  transform-origin:left;
  box-shadow:0 0 18px rgba(255,255,255,.9);
}

.pack-premium.rasgando-premium .rasgo-linha{
  animation:linhaRasgo .45s ease forwards;
}

.pack-premium.rasgando-premium{
  animation:rasgarPacotePremium 1.2s ease forwards;
}

.cartas-saindo{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
}

.carta-saindo{
  position:absolute;
  left:50%;
  top:50%;
  width:105px;
  height:155px;
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  border-radius:18px;
}

.card-verso-mini{
  width:100%;
  height:100%;
  border-radius:18px;
  background:linear-gradient(145deg,#ffcf4d,#ff8500);
  border:4px solid #ffd700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 22px rgba(255,215,0,.9),
    0 18px 28px rgba(0,0,0,.45);
}

.trofeu-verso-mini{
  font-size:2.5rem;
  animation:versoPulse 1s infinite alternate;
}

.carta-saindo-1{
  animation:cartaSai1 1.35s ease forwards;
}

.carta-saindo-2{
  animation:cartaSai2 1.35s ease .12s forwards;
}

.carta-saindo-3{
  animation:cartaSai3 1.35s ease .24s forwards;
}

@keyframes packSuspense{
  0%,100%{
    transform:translateY(0) scale(1);
  }
  50%{
    transform:translateY(-12px) scale(1.03);
  }
}

@keyframes linhaRasgo{
  from{
    transform:rotate(-8deg) scaleX(0);
  }
  to{
    transform:rotate(-8deg) scaleX(1);
  }
}

@keyframes rasgarPacotePremium{
  0%{
    transform:scale(1) rotate(0);
    filter:brightness(1);
  }
  35%{
    transform:scale(1.08) rotate(-4deg);
    filter:brightness(1.5);
  }
  70%{
    transform:scale(1.12) rotate(5deg);
    opacity:1;
  }
  100%{
    transform:scale(.75) rotate(0);
    opacity:0;
  }
}

@keyframes cartaSai1{
  0%{
    transform:translate(-50%,-50%) scale(.35) rotate(0);
    opacity:0;
  }
  25%{
    opacity:1;
  }
  100%{
    transform:translate(-210px,-120px) scale(1) rotate(-14deg);
    opacity:1;
  }
}

@keyframes cartaSai2{
  0%{
    transform:translate(-50%,-50%) scale(.35) rotate(0);
    opacity:0;
  }
  25%{
    opacity:1;
  }
  100%{
    transform:translate(-50%,-150px) scale(1) rotate(3deg);
    opacity:1;
  }
}

@keyframes cartaSai3{
  0%{
    transform:translate(-50%,-50%) scale(.35) rotate(0);
    opacity:0;
  }
  25%{
    opacity:1;
  }
  100%{
    transform:translate(120px,-120px) scale(1) rotate(14deg);
    opacity:1;
  }
}