/* LASTDRIB — Passe de Batalha diário (tela cheia). Base 1366×768, escalada via --bp-zoom */
.bp-root {
  position: fixed; inset: 0; z-index: 66; overflow: hidden; color: #f1f1f4;
  font-family: var(--ld-body, Inter, 'Segoe UI', sans-serif); background: #07060c;
}
.bp-root.hidden { display: none; }
.bp-root button { font-family: inherit; color: inherit; cursor: pointer; }
.bp-ico, .bp-cur { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.bp-ico.flip { transform: scaleX(-1); }

.bp-bg {
  position: absolute; inset: -4%;
  background:
    linear-gradient(90deg, rgba(7, 6, 12, 0.97) 0%, rgba(7, 6, 12, 0.82) 34%, rgba(7, 6, 12, 0.15) 62%, rgba(7, 6, 12, 0.35) 100%),
    linear-gradient(0deg, rgba(7, 6, 12, 1) 0%, rgba(7, 6, 12, 0.7) 26%, transparent 50%),
    url('/assets/battlepass/hero.jpg') 70% 30% / cover;
  animation: bpKen 26s ease-in-out infinite alternate;
}
@keyframes bpKen { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-1.5%); } }

.bp-embers { position: absolute; inset: 0; pointer-events: none; }
.bp-embers i {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: #ffb52e; box-shadow: 0 0 8px 2px rgba(255, 150, 30, 0.8);
  animation: bpEmber linear infinite; opacity: 0;
}
@keyframes bpEmber {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translate(60px, -105vh); opacity: 0; }
}

.bp-frame { position: absolute; inset: 0; zoom: var(--bp-zoom, 1); display: flex; flex-direction: column; }

/* topo */
.bp-top { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; }
.bp-back {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  font: 600 18px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1.5px; padding-top: 3px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.bp-back:hover { background: rgba(255, 194, 26, 0.12); border-color: rgba(255, 194, 26, 0.5); }
.bp-wallet { display: flex; gap: 10px; }
.bp-wallet span {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 18px;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1);
  font: 600 20px/1 var(--ld-head, Teko, sans-serif); padding-top: 2px;
}
.bp-wallet .bp-cur { width: 18px; height: 18px; margin-top: -2px; }

/* hero */
.bp-hero { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 48px 0 56px; }
.bp-copy { width: 560px; animation: bpIn 0.6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes bpIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
.bp-cycle {
  display: inline-block; padding: 5px 10px 3px; border-radius: 3px;
  font: 600 15px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 2px; color: #1a0f00;
  background: linear-gradient(90deg, #ffd54a, #ff9d2e);
}
.bp-copy h1 {
  margin: 10px 0 6px; font: italic 700 92px/0.82 var(--ld-head, Teko, sans-serif); letter-spacing: 1px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}
.bp-copy h1 b {
  display: block; font-weight: 700;
  background: linear-gradient(100deg, #ffe27a 0%, #ffb21e 40%, #fff5c8 50%, #ffb21e 60%, #ff8a00 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bpShine 4s linear infinite; filter: drop-shadow(0 4px 18px rgba(255, 150, 0, 0.35));
}
@keyframes bpShine { from { background-position: 120% 0; } to { background-position: -130% 0; } }
.bp-copy p { margin: 0 0 22px; max-width: 470px; font-size: 15px; line-height: 1.5; color: #c9cad3; }
.bp-copy p b { color: #fff; }
.bp-copy p b.gold { color: #ffc21a; }

.bp-prog { margin-bottom: 20px; max-width: 500px; }
.bp-prog-txt { font: 600 18px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; color: #a9abb6; margin-bottom: 8px; }
.bp-prog-txt b { color: #fff; font-size: 22px; }
.bp-segs { display: flex; gap: 4px; }
.bp-segs i {
  flex: 1; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.1);
  transform: skewX(-18deg); transition: background 0.3s;
}
.bp-segs i.ms { flex: 1.5; box-shadow: inset 0 0 0 1px rgba(255, 194, 26, 0.45); }
.bp-segs i.on { background: linear-gradient(90deg, #ffb21e, #ffd54a); box-shadow: 0 0 10px rgba(255, 178, 30, 0.55); }
.bp-segs i.now { background: rgba(255, 194, 26, 0.35); animation: bpBlink 1s ease-in-out infinite; }
@keyframes bpBlink { 50% { background: rgba(255, 194, 26, 0.85); } }

.bp-claim {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  height: 62px; padding: 6px 34px 0; border: 0; border-radius: 6px;
  font: 700 30px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1.5px;
  color: #8d8f9a !important; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bp-claim .bp-ico { width: 22px; height: 22px; margin-top: -5px; }
.bp-claim:disabled { cursor: default; }
.bp-claim .bp-clock { color: #fff; font-variant-numeric: tabular-nums; }
.bp-claim.ready {
  color: #1a0f00 !important; background: linear-gradient(180deg, #ffe066, #ffb21e 55%, #ff9000);
  box-shadow: 0 0 0 2px rgba(255, 230, 140, 0.6), 0 10px 40px rgba(255, 160, 20, 0.55);
  animation: bpPulse 1.6s ease-in-out infinite;
}
.bp-claim.ready::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: skewX(-20deg);
  animation: bpSweep 2.2s ease-in-out infinite;
}
.bp-claim.ready:hover { filter: brightness(1.08); transform: translateY(-2px); }
@keyframes bpPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 230, 140, 0.35), 0 10px 60px rgba(255, 160, 20, 0.85); } }
@keyframes bpSweep { 0%, 40% { left: -80px; } 100% { left: 110%; } }

/* destaque */
.bp-feature {
  padding: 16px 18px 18px; cursor: pointer; text-align: center;
  border-radius: 10px; border: 1px solid rgba(255, 194, 26, 0.45);
  background: linear-gradient(180deg, rgba(40, 26, 4, 0.75), rgba(10, 8, 6, 0.85));
  box-shadow: 0 0 40px rgba(255, 170, 20, 0.18), inset 0 0 40px rgba(255, 170, 20, 0.08);
  backdrop-filter: blur(4px); animation: bpFloat 5s ease-in-out infinite;
  position: absolute; right: 48px; bottom: 6px; width: 290px;
}
.bp-hero:has(.bp-odds) .bp-feature { display: none; }
@keyframes bpFloat { 50% { transform: translateY(-8px); } }
.bp-feature:hover { border-color: #ffc21a; }
.bp-feat-tag { font: 600 15px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 2px; color: #ffc21a; }
.bp-feat-art { height: 130px; display: grid; place-items: center; margin: 6px 0; }
.bp-feature b { display: block; font: italic 700 30px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; }
.bp-feature small { font-size: 11px; color: #a9abb6; }

.bp-3d { max-width: 100%; max-height: 100%; opacity: 0; transition: opacity 0.4s; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
.bp-3d.on { opacity: 1; }

/* chances do baú */
.bp-odds-wrap { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); }
.bp-odds {
  position: relative; width: 320px; padding: 14px 20px 18px; border-radius: 10px; text-align: center;
  background: rgba(10, 9, 14, 0.94); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--rc) 25%, transparent);
  animation: bpPop 0.35s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes bpPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.bp-odds img { width: 150px; height: 150px; object-fit: contain; animation: bpFloat 3s ease-in-out infinite; }
.bp-odds h4 { margin: 0; font: italic 700 30px/1 var(--ld-head, Teko, sans-serif); color: var(--rc); }
.bp-odds p { margin: 2px 0 10px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8d8f9a; }
.bp-odds ul { list-style: none; margin: 0 0 10px; padding: 0; text-align: left; }
.bp-odds li { display: flex; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 13px; }
.bp-odds li b { color: var(--rc); }
.bp-odds small { font-size: 11px; color: #8d8f9a; }
.bp-odds-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }

/* trilha */
.bp-track-wrap { flex: none; padding: 0 0 26px; }
.bp-track {
  display: flex; gap: 10px; padding: 18px 40px 6px; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: rgba(255, 194, 26, 0.4) transparent;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.bp-day {
  --rc: #9aa4b2;
  position: relative; flex: none; width: 124px; height: 186px; padding: 0; scroll-snap-align: center;
  display: flex; flex-direction: column; text-align: left; overflow: hidden;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(24, 24, 32, 0.92), rgba(10, 10, 14, 0.96));
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  animation: bpRise 0.5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.bp-day:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes bpRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.bp-day::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); box-shadow: 0 0 12px var(--rc); }
.bp-day:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--rc) 70%, transparent); }
.bp-day.chest { width: 162px; }
.bp-day-n {
  position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 7px 1px; border-radius: 3px;
  font: 600 14px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; background: rgba(0, 0, 0, 0.55);
}
.bp-day-art { flex: 1; min-height: 0; display: grid; place-items: center; padding: 26px 8px 0; }
.bp-day-art .bp-pack { width: 84px; height: 84px; object-fit: contain; mix-blend-mode: screen; }
.bp-day-art .bp-chest-img { width: 128px; height: 112px; object-fit: contain; animation: bpFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 60%, transparent)); }
.bp-swatch {
  width: 70px; height: 70px; border-radius: 14px; transform: rotate(45deg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 80%, #fff), 0 0 22px color-mix(in srgb, var(--rc) 55%, transparent);
  position: relative; overflow: hidden;
}
.bp-swatch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 50%); }
.bp-duo { display: flex; }
.bp-duo .bp-pack { width: 60px !important; height: 60px !important; }
.bp-day-foot { flex: none; padding: 6px 9px 10px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); }
.bp-day-foot b { display: flex; align-items: center; gap: 4px; font: 600 19px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-day-foot b .bp-cur { width: 14px; height: 14px; margin-top: -3px; }
.bp-day-foot small { font-size: 10px; font-weight: 600; color: #8d8f9a; }

.bp-day.done { filter: saturate(0.4) brightness(0.65); }
.bp-day-ok {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgba(0, 0, 0, 0.25);
}
.bp-day-ok .bp-ico { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #3ee66b; color: #04210d; box-shadow: 0 0 18px rgba(62, 230, 107, 0.6); }
.bp-day-lock { position: absolute; right: 8px; top: 8px; z-index: 2; opacity: 0.6; }
.bp-day-lock .bp-ico { width: 14px; height: 14px; }
.bp-day.lock .bp-day-art { opacity: 0.75; }
.bp-day-tag {
  position: absolute; right: 7px; top: 7px; z-index: 2; padding: 3px 7px 1px; border-radius: 3px;
  font: 700 14px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; color: #1a0f00; background: #ffc21a;
}
.bp-day-tag.soon { background: rgba(255, 255, 255, 0.85); }
.bp-day.today {
  border-color: #ffc21a;
  box-shadow: 0 0 0 1px #ffc21a, 0 0 34px rgba(255, 194, 26, 0.45);
  animation: bpRise 0.5s both, bpToday 1.4s ease-in-out 0.5s infinite;
}
.bp-day.today .bp-day-art > * { animation: bpBounce 1.4s ease-in-out infinite; }
@keyframes bpToday { 50% { box-shadow: 0 0 0 2px #ffe27a, 0 0 54px rgba(255, 194, 26, 0.7); } }
@keyframes bpBounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.06); } }
.bp-day.today .bp-swatch { animation: bpBounceR 1.4s ease-in-out infinite; }
@keyframes bpBounceR { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) translateY(-6px) scale(1.06); } }
.bp-day.next { border-color: rgba(255, 255, 255, 0.35); }
.bp-day.chest-legend::before, .bp-day.chest-grand::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 50px; left: -60px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.22), transparent); transform: skewX(-20deg);
  animation: bpSweep 3.4s ease-in-out infinite;
}
.bp-day.chest-grand { width: 178px; border-color: rgba(255, 90, 60, 0.5); }

/* revelação */
.bp-reveal { position: absolute; inset: 0; z-index: 10; display: none; place-items: center; background: rgba(4, 3, 8, 0.88); backdrop-filter: blur(6px); }
.bp-reveal.show { display: grid; animation: bpFade 0.25s both; }
@keyframes bpFade { from { opacity: 0; } }
.bp-rays {
  position: absolute; left: 50%; top: 46%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 45%, transparent) 0deg 7deg, transparent 7deg 20deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 62%);
  animation: bpSpin 14s linear infinite; opacity: 0; transition: opacity 0.5s;
}
.bp-reveal.stage-item .bp-rays, .bp-reveal.opening .bp-rays { opacity: 1; }
.bp-reveal.opening:not(.stage-item) .bp-rays { opacity: 0.45; animation-duration: 4s; }
@keyframes bpSpin { to { transform: rotate(360deg); } }
.bp-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fff, color-mix(in srgb, var(--rc) 70%, #fff) 30%, transparent 70%); opacity: 0; pointer-events: none; }
.bp-reveal.burst .bp-flash { animation: bpFlash 0.9s ease-out both; }
@keyframes bpFlash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.bp-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.bp-rv-box { position: relative; zoom: var(--bp-zoom, 1); display: grid; place-items: center; }
.bp-rv-chest { width: 380px; height: 380px; object-fit: contain; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--rc) 70%, transparent)); }
.bp-reveal.opening .bp-rv-chest { animation: bpShake 1.7s ease-in both; }
.bp-reveal.stage-item .bp-rv-chest { display: none; }
@keyframes bpShake {
  0% { transform: scale(0.6); opacity: 0; }
  12% { transform: scale(1); opacity: 1; }
  30% { transform: rotate(-3deg); } 36% { transform: rotate(3deg); }
  50% { transform: rotate(-5deg) scale(1.03); } 56% { transform: rotate(5deg) scale(1.03); }
  66% { transform: rotate(-8deg) scale(1.06); } 72% { transform: rotate(8deg) scale(1.08); }
  80% { transform: rotate(-10deg) scale(1.1); } 86% { transform: rotate(10deg) scale(1.12); }
  100% { transform: rotate(0) scale(1.3); filter: brightness(3) drop-shadow(0 0 60px #fff); }
}
.bp-rv-item { display: none; flex-direction: column; align-items: center; text-align: center; }
.bp-reveal.stage-item .bp-rv-item { display: flex; }
.bp-rv-day { font: 600 16px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 3px; color: #a9abb6; animation: bpUp 0.4s both; }
.bp-rv-rar {
  margin-top: 4px; font: italic 700 64px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 2px; font-style: italic;
  color: var(--rc); text-shadow: 0 0 30px var(--rc); animation: bpSlam 0.55s cubic-bezier(.2, .9, .3, 1.4) 0.05s both;
}
.bp-reveal.rar-lendario .bp-rv-rar {
  background: linear-gradient(100deg, #ffe27a, #ffb21e 40%, #fff 50%, #ffb21e 60%, #ff8a00); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(255, 170, 20, 0.8));
  animation: bpSlam 0.55s cubic-bezier(.2, .9, .3, 1.4) 0.05s both, bpShine 2.4s linear 0.6s infinite;
}
@keyframes bpSlam { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } }
@keyframes bpUp { from { opacity: 0; transform: translateY(14px); } }
.bp-rv-art {
  width: 420px; height: 240px; display: grid; place-items: center; margin: 4px 0 6px;
  animation: bpItem 0.7s cubic-bezier(.2, .9, .3, 1.3) 0.15s both;
}
.bp-rv-art > * { animation: bpFloat 3s ease-in-out 0.9s infinite; }
.bp-rv-art .bp-3d { width: 420px; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 60%, transparent)); }
.bp-rv-art .bp-pack { width: 210px; height: 210px; object-fit: contain; mix-blend-mode: screen; }
.bp-rv-art .bp-duo .bp-pack { width: 170px !important; height: 170px !important; }
@keyframes bpItem { from { opacity: 0; transform: scale(0.3) rotate(-12deg); } to { opacity: 1; transform: none; } }
.bp-rv-item h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: italic 700 46px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; animation: bpUp 0.4s 0.3s both; }
.bp-rv-item h3 .bp-cur { width: 30px; height: 30px; margin-top: -6px; }
.bp-rv-item p { margin: 4px 0 22px; color: #a9abb6; font-size: 14px; animation: bpUp 0.4s 0.38s both; }
.bp-rv-ok {
  height: 52px; padding: 5px 60px 0; border: 0; border-radius: 6px;
  font: 700 26px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 2px; color: #1a0f00 !important;
  background: linear-gradient(180deg, #ffe066, #ffb21e 55%, #ff9000); box-shadow: 0 10px 30px rgba(255, 160, 20, 0.45);
  animation: bpUp 0.4s 0.5s both;
}
.bp-rv-ok:hover { filter: brightness(1.08); }

.bp-toast {
  position: absolute; left: 50%; bottom: 40px; z-index: 12; transform: translate(-50%, 20px); opacity: 0;
  padding: 12px 20px; border-radius: 6px; background: rgba(20, 20, 26, 0.96); border: 1px solid rgba(255, 194, 26, 0.5);
  font-size: 14px; font-weight: 600; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
}
.bp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* card do lobby: resgate disponível */
.bp-card { position: relative; }
.bp-card .bp-art-chest { object-fit: contain; transform: scale(1.25); animation: bpFloatS 3.4s ease-in-out infinite; }
@keyframes bpFloatS { 50% { transform: translateY(-4px) scale(1.25); } }
.bp-card.bp-ready { border-color: rgba(255, 194, 26, 0.9) !important; animation: bpCard 1.6s ease-in-out infinite; }
@keyframes bpCard { 50% { box-shadow: 0 0 26px rgba(255, 194, 26, 0.55), 0 10px 30px rgba(0, 0, 0, 0.45); } }
.bp-card .bp-claim-dot {
  position: absolute; right: 8px; top: 8px; padding: 3px 6px 1px; border-radius: 3px;
  font: 700 12px/1 var(--ld-head, Teko, sans-serif); letter-spacing: 1px; color: #1a0f00; background: #ffc21a;
  animation: bpBlinkTag 1s ease-in-out infinite;
}
@keyframes bpBlinkTag { 50% { opacity: 0.55; } }