/* ZALP PASS — окно баттл-пасса и пополнения кристаллов (стиль темы zalp-cartoon) */
#zp-overlay, #zp-overlay *, #zp-modal, #zp-modal *, #zp-toast { box-sizing: border-box; font-family: var(--z-font, "Rubik", system-ui, sans-serif); }
#zp-overlay {
  position: fixed; inset: 0; z-index: 9000; display: none; flex-direction: column; color: #fff;
  background: radial-gradient(1200px 600px at 75% -10%, rgba(255, 154, 0, .28), transparent 60%),
    linear-gradient(180deg, #2b1d8f 0%, #1d1466 55%, #140d4a 100%);
  overflow: hidden;
}
#zp-overlay.open { display: flex; }
.zp-out { text-shadow: var(--z-outline-sm, 0 2px 0 #1a1340); }
.zp-out-lg { text-shadow: var(--z-outline, 0 3px 0 #1a1340); }

/* header */
.zp-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px 8px; }
.zp-season { display: flex; flex-direction: column; line-height: 1; }
.zp-season-tag { align-self: flex-start; background: var(--z-yellow, #ffd21f); color: var(--z-ink, #1a1340); font-weight: 900;
  font-size: 12px; letter-spacing: .08em; padding: 4px 9px; border-radius: 8px; box-shadow: 0 3px 0 var(--z-ink, #1a1340); }
.zp-season-name { font-size: 30px; font-weight: 900; margin-top: 6px; text-transform: uppercase; letter-spacing: .02em; }
.zp-timer { font-size: 13px; font-weight: 700; opacity: .9; margin-top: 4px; }
.zp-spacer { flex: 1; }
.zp-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 6px; border-radius: 20px;
  background: rgba(10, 6, 40, .55); border: 3px solid var(--z-ink, #1a1340); font-weight: 900; font-size: 17px; color: #fff; }
.zp-pill img { width: 30px; height: 30px; }
.zp-pill .zp-plus { margin-left: 4px; width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--z-ink, #1a1340);
  background: var(--z-green, #3fd13a); color: #fff; font-size: 20px; line-height: 20px; font-weight: 900; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.zp-close { width: 44px; height: 44px; border-radius: 14px; border: 3px solid var(--z-ink, #1a1340); background: var(--z-red, #ff4d63);
  color: #fff; font-size: 22px; font-weight: 900; cursor: pointer; box-shadow: var(--z-btn-shadow, 0 4px 0 #1a1340); }

/* hero row */
.zp-hero { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.25fr); gap: 16px; padding: 6px 20px 12px; }
.zp-card { position: relative; border-radius: 22px; border: 4px solid var(--z-ink, #1a1340);
  background: linear-gradient(180deg, var(--z-panel-top, #4b3cc4), var(--z-panel-bot, #2a1e84));
  box-shadow: var(--z-panel-shadow, 0 6px 0 #1a1340); padding: 14px 16px; }
.zp-progress { display: flex; gap: 14px; align-items: center; }
.zp-hex { flex: none; width: 92px; height: 100px; display: grid; place-items: center; font-size: 40px; font-weight: 900;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(180deg, var(--z-yellow-hi, #ffe970), var(--z-orange, #ff9a00)); color: #fff; }
#zp-overlay .zp-hex small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-align: center; line-height: 1; }
#zp-overlay .zp-hex .zp-hex-n { display: block; font-size: 42px; font-weight: 900; line-height: 1; text-align: center; }
.zp-prog-main { flex: 1; min-width: 0; }
.zp-prog-title { font-weight: 900; font-size: 17px; }
.zp-bar { position: relative; height: 26px; margin: 8px 0 6px; border-radius: 13px; border: 3px solid var(--z-ink, #1a1340);
  background: rgba(10, 6, 40, .6); overflow: hidden; }
.zp-bar-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #7dff6a, var(--z-green, #3fd13a));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); transition: width .5s; }
.zp-bar-txt { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.zp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.zp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border-radius: 14px; border: 3px solid var(--z-ink, #1a1340); font-weight: 900; font-size: 15px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--z-blue, #31a8ff), var(--z-blue-dk, #1b63e0)); box-shadow: var(--z-btn-shadow, 0 4px 0 #1a1340);
  text-shadow: var(--z-outline-sm, 0 2px 0 #1a1340); transition: transform .08s; }
.zp-btn:active { transform: translateY(3px); }
.zp-btn[disabled] { filter: grayscale(.8) brightness(.8); cursor: default; transform: none; }
.zp-btn img { width: 22px; height: 22px; margin: -4px 0; }
.zp-btn.gold { background: linear-gradient(180deg, var(--z-yellow-hi, #ffe970), var(--z-orange, #ff9a00)); }
.zp-btn.green { background: linear-gradient(180deg, #6ff05f, var(--z-green-dk, #1f9a22)); }
.zp-btn.purple { background: linear-gradient(180deg, var(--z-purple, #a06bff), var(--z-purple-dk, #6a38dc)); }
.zp-boost-on { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; font-weight: 900;
  background: rgba(255, 210, 31, .2); border: 2px solid var(--z-yellow, #ffd21f); }
.zp-boost-on img { width: 24px; height: 24px; }

.zp-prem { overflow: hidden; min-height: 168px; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(42, 20, 110, .96) 0%, rgba(42, 20, 110, .82) 45%, rgba(42, 20, 110, .1) 100%),
    var(--zp-keyart, none) center right / cover no-repeat, #3a1f9c; }
.zp-prem-body { position: relative; z-index: 1; max-width: 60%; }
.zp-prem h3 { margin: 0 0 6px; font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.zp-prem h3 img { width: 38px; height: 38px; }
.zp-prem ul { margin: 0 0 10px; padding-left: 18px; font-weight: 700; font-size: 14px; line-height: 1.45; }
.zp-prem.owned h3 { color: var(--z-yellow, #ffd21f); }

/* reward track */
.zp-track-wrap { position: relative; flex: 1; min-height: 0; display: flex; margin: 0 20px 14px; border-radius: 22px;
  border: 4px solid var(--z-ink, #1a1340); background: rgba(10, 6, 40, .45); box-shadow: var(--z-panel-shadow, 0 6px 0 #1a1340); }
.zp-labels { flex: none; width: 112px; display: grid; grid-template-rows: 1fr 46px 1fr; padding: 12px 0 12px 12px; }
.zp-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px;
  font-weight: 900; font-size: 13px; letter-spacing: .06em; text-align: center; }
.zp-label.free { background: rgba(49, 168, 255, .22); border: 3px solid var(--z-blue, #31a8ff); }
.zp-label.prem { background: rgba(255, 210, 31, .18); border: 3px solid var(--z-yellow, #ffd21f); color: var(--z-yellow-hi, #ffe970); }
.zp-label img { width: 40px; height: 40px; }
.zp-track { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 12px 12px 8px; }
.zp-track::-webkit-scrollbar { height: 10px; }
.zp-track::-webkit-scrollbar-thumb { background: var(--z-purple, #a06bff); border-radius: 6px; border: 2px solid var(--z-ink, #1a1340); }
.zp-cols { display: flex; gap: 10px; height: 100%; }
.zp-col { flex: none; width: 116px; display: grid; grid-template-rows: 1fr 46px 1fr; }
.zp-lvl { position: relative; display: grid; place-items: center; }
.zp-lvl::before { content: ""; position: absolute; left: -10px; right: 0; top: 50%; height: 8px; transform: translateY(-50%);
  background: rgba(255, 255, 255, .15); }
.zp-col.done .zp-lvl::before { background: var(--z-green, #3fd13a); }
.zp-lvl span { position: relative; min-width: 38px; height: 32px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 900; font-size: 16px; background: #2a1e84; border: 3px solid var(--z-ink, #1a1340); }
.zp-col.done .zp-lvl span { background: var(--z-green-dk, #1f9a22); }
.zp-col.current .zp-lvl span { background: var(--z-yellow, #ffd21f); color: var(--z-ink, #1a1340); transform: scale(1.18); }
.zp-slot { position: relative; margin: 4px 0; border-radius: 16px; }
.zp-rw { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 6px 8px; border-radius: 16px; border: 3px solid var(--z-ink, #1a1340); cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, #5a4fd8, #3a2fa8); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.18); }
.zp-rw.r-common { background: linear-gradient(180deg, #7c86a8, #4f587a); }
.zp-rw.r-uncommon { background: linear-gradient(180deg, #47c96a, #24894a); }
.zp-rw.r-rare { background: linear-gradient(180deg, #3fb4ff, #1d6fd6); }
.zp-rw.r-epic { background: linear-gradient(180deg, #b77bff, #7136e0); }
.zp-rw.r-mythic { background: linear-gradient(180deg, #ffcf3f, #ff7a1a); }
.zp-rw.r-cur { background: linear-gradient(180deg, #ff6fd8, #b0279f); }
.zp-rw.r-coin { background: linear-gradient(180deg, #ffd85a, #e0a019); }
.zp-rw img { width: 74%; max-height: 64%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(26, 19, 64, .6)); }
.zp-rw .zp-rw-n { margin-top: 4px; font-size: 12px; font-weight: 900; line-height: 1.05; text-align: center;
  text-shadow: var(--z-outline-sm, 0 2px 0 #1a1340); max-height: 2.2em; overflow: hidden; }
.zp-rw .zp-rw-amt { font-size: 20px; font-weight: 900; text-shadow: var(--z-outline-sm, 0 2px 0 #1a1340); }
.zp-rw.locked::after { content: ""; position: absolute; inset: 0; background: rgba(12, 6, 40, .45); }
.zp-rw .zp-badge { position: absolute; z-index: 2; top: 4px; right: 4px; width: 26px; height: 26px; }
.zp-rw.got .zp-badge { border-radius: 50%; background: var(--z-green, #3fd13a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
  border: 2px solid var(--z-ink, #1a1340); }
.zp-rw.got { filter: saturate(.75) brightness(.92); }
.zp-slot.empty { border: 3px dashed rgba(255, 255, 255, .14); }
.zp-col.current .zp-rw { outline: 3px solid var(--z-yellow, #ffd21f); outline-offset: 1px; }

.zp-foot { padding: 0 20px 12px; font-size: 13px; font-weight: 700; opacity: .85; }
.zp-login { margin: auto; text-align: center; max-width: 420px; font-size: 18px; font-weight: 800; line-height: 1.4; }

/* tooltip */
#zp-tip { position: fixed; z-index: 9600; pointer-events: none; display: none; max-width: 220px; padding: 8px 10px; border-radius: 12px;
  background: #140d4a; border: 3px solid var(--z-ink, #1a1340); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
#zp-tip b { display: block; font-size: 15px; }
#zp-tip i { font-style: normal; opacity: .8; }

/* modal (confirm / crystal shop) */
#zp-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center;
  background: rgba(8, 4, 30, .65); padding: 16px; }
#zp-modal.open { display: flex; }
.zp-dialog { width: 100%; max-width: 820px; max-height: 92vh; overflow: auto; color: #fff; }
.zp-dialog.small { max-width: 420px; text-align: center; }
.zp-dialog h3 { margin: 0 0 12px; font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 8px; justify-content: center; }
.zp-dialog h3 img { width: 34px; height: 34px; }
.zp-dialog p { font-weight: 700; margin: 0 0 14px; line-height: 1.4; }
.zp-dlg-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.zp-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.zp-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px; border-radius: 18px;
  border: 3px solid var(--z-ink, #1a1340); background: linear-gradient(180deg, #5a4fd8, #3a2fa8); position: relative; }
.zp-pack img { width: 96px; height: 96px; object-fit: contain; }
.zp-pack .zp-pack-n { font-size: 24px; font-weight: 900; display: flex; align-items: center; gap: 4px; }
.zp-pack .zp-pack-n img { width: 24px; height: 24px; }
.zp-pack .zp-bonus { position: absolute; top: -10px; right: -8px; background: var(--z-red, #ff4d63); border: 2px solid var(--z-ink, #1a1340);
  border-radius: 10px; padding: 2px 7px; font-size: 12px; font-weight: 900; transform: rotate(6deg); }
.zp-pack.best { background: linear-gradient(180deg, #ffb84d, #e0661a); }
.zp-email { width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 3px solid var(--z-ink, #1a1340);
  font-size: 15px; font-weight: 700; color: var(--z-ink, #1a1340); }
.zp-note { margin-top: 12px; font-size: 12px; font-weight: 700; opacity: .8; text-align: center; }
.zp-err { color: #ffd0d6; font-weight: 800; margin-top: 8px; min-height: 1.2em; text-align: center; }

#zp-toast { position: fixed; z-index: 9700; left: 50%; top: 18px; transform: translateX(-50%); display: none; padding: 12px 18px;
  border-radius: 16px; border: 3px solid var(--z-ink, #1a1340); background: var(--z-green-dk, #1f9a22); color: #fff; font-weight: 900;
  box-shadow: 0 6px 0 var(--z-ink, #1a1340); }

/* main-menu entry points */
#zp-open-pass { margin: 8px 10px 4px; }
#vw-crystal-btn img { width: 22px; height: 22px; }

@media (max-width: 900px) {
  #zp-overlay { overflow-y: auto; }
  .zp-head { flex-wrap: wrap; }
  .zp-season-name { white-space: nowrap; }
  .zp-hint { display: none; }
  #zp-overlay .zp-hex { width: 70px; height: 78px; }
  #zp-overlay .zp-hex .zp-hex-n { font-size: 30px; }
  #zp-overlay .zp-hex small { font-size: 9px; }
  .zp-btn { font-size: 13px; min-height: 34px; padding: 4px 10px; }
  .zp-prem ul { font-size: 13px; }
  .zp-track-wrap { flex: none; height: 330px; }
  .zp-head { padding: 10px 10px 6px; gap: 8px; }
  .zp-season-name { font-size: 20px; }
  .zp-hero { grid-template-columns: 1fr; padding: 4px 10px 8px; gap: 10px; }
  .zp-prem-body { max-width: 100%; }
  .zp-track-wrap { margin: 0 10px 10px; }
  .zp-labels { width: 78px; }
  .zp-label { font-size: 8.5px; letter-spacing: 0; }
  .zp-label img { width: 30px; height: 30px; }
  .zp-col { width: 92px; }
  .zp-packs { grid-template-columns: repeat(2, 1fr); }
  .zp-pill { height: 34px; font-size: 14px; }
  .zp-pill img { width: 24px; height: 24px; }
}
@media (max-height: 640px) {
  .zp-hero .zp-prem ul { display: none; }
  .zp-prem { min-height: 0; }
}

/* top-bar pills (theme hides <img> in .vw-pill and draws icons as backgrounds; same specificity trick) */
:root:not(#zz#zz) #vw-bar .vw-pill { white-space: nowrap !important; }
:root:not(#zz#zz) #vw-pass-btn,
:root:not(#zz#zz) #vw-crystal-btn {
  padding-left: 40px !important;
  background-repeat: no-repeat !important;
  background-size: 28px 28px, auto !important;
  background-position: 8px 50%, 0 0 !important;
}
:root:not(#zz#zz) #vw-pass-btn {
  background-image: url(/img/zalp-ui/zp-premium.webp), linear-gradient(180deg, #c99bff 0%, var(--z-purple) 55%, var(--z-purple-dk) 100%) !important;
}
:root:not(#zz#zz) #vw-crystal-btn {
  background-image: url(/img/zalp-ui/zp-crystal.webp), linear-gradient(180deg, #ff9be6 0%, #e04fc4 55%, #a3249a 100%) !important;
}
@media (max-width: 760px) {
  :root:not(#zz#zz) #vw-pass-btn,
  :root:not(#zz#zz) #vw-crystal-btn {
    padding-left: 28px !important;
    background-size: 20px 20px, auto !important;
    background-position: 5px 50%, 0 0 !important;
  }
}