/* Путёвка сезона (js/screens/pass.js): билет с уровнем, покупка, дорожка уровней (бесплатно — слева, Путёвка —
   справа, узлы посередине), выбор легендарки, карточка на вкладке «Задания». Двигаются только transform и opacity. */

/* билет: вырезы перфорации — маской (видно фон под билетом), справа пунктир отрыва */
.ps-ticket { position: relative; margin-top: 16px; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 22px; overflow: hidden;
  background: linear-gradient(115deg, rgba(243, 210, 139, .22), rgba(255, 255, 255, .07) 58%); border: 1px solid rgba(243, 210, 139, .45);
  -webkit-mask: radial-gradient(circle at 112px 0, transparent 10px, #000 10.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at 112px 100%, transparent 10px, #000 10.5px) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at 112px 0, transparent 10px, #000 10.5px) top / 100% 51% no-repeat,
    radial-gradient(circle at 112px 100%, transparent 10px, #000 10.5px) bottom / 100% 51% no-repeat; }
.ps-ticket.paid { color: #2A1D05; border-color: transparent;
  background: linear-gradient(110deg, #C8922F 0%, #FFE39A 36%, #E2AE4C 62%, #FFF0C4 82%, #C8922F 100%); }
.ps-tl { padding: 12px 0 12px 16px; display: flex; flex-direction: column; border-right: 2px dashed rgba(243, 210, 139, .45); }
.ps-tr { padding: 12px 16px 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.ps-k { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; color: rgba(246, 243, 236, .72); white-space: nowrap; }
.ps-k svg { width: 16px; height: 16px; }
.ps-lv { font-size: 72px; font-weight: 900; line-height: .85; color: var(--accent); font-variant-numeric: tabular-nums; }
.ps-tl small { font-size: 16px; font-weight: 800; color: rgba(246, 243, 236, .6); }
.ps-pts { font-size: 30px; font-weight: 900; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ps-bar i { display: block; width: var(--p); height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #FFF1C9); }
.ps-tr small { font-size: 12.5px; font-weight: 600; color: rgba(246, 243, 236, .72); }
.ps-ticket.paid .ps-k, .ps-ticket.paid small { color: rgba(42, 29, 5, .72); }
.ps-ticket.paid .ps-lv { color: #2A1D05; }
.ps-ticket.paid .ps-tl { border-right-color: rgba(42, 29, 5, .35); }
.ps-ticket.paid .ps-bar { background: rgba(42, 29, 5, .2); }
.ps-ticket.paid .ps-bar i { background: #2A1D05; }
/* в билете — следующая бесплатная награда (разбор экранов 06.10) */
.ps-next { display: flex; align-items: center; gap: 7px; margin-top: 3px; padding-top: 7px; border-top: 1px dashed rgba(243, 210, 139, .35);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgba(246, 243, 236, .86); }
.ps-next svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.ps-next b { font-weight: 800; color: var(--ink); }
.ps-ticket.paid .ps-next, .ps-ticket.paid .ps-next b, .ps-ticket.paid .ps-next svg { color: #2A1D05; }
.ps-ticket.paid .ps-next { border-top-color: rgba(42, 29, 5, .35); }

/* покупка */
.ps-buy { position: relative; overflow: hidden; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 4px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(243, 210, 139, .3), rgba(243, 210, 139, 0) 60%), rgba(30, 24, 12, .72);
  border: 1px solid rgba(243, 210, 139, .5); }
.ps-buy-k { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; color: var(--accent); }
.ps-buy-k svg { width: 18px; height: 18px; }
.ps-buy-t { font-size: 28px; font-weight: 900; line-height: 1; }
.ps-buy-s { font-size: 13px; font-weight: 600; line-height: 1.38; color: rgba(246, 243, 236, .8); }
.ps-buy-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ps-buy-btns .tp-btn { min-width: 0; padding: 0 8px; justify-content: center; white-space: nowrap; }
.ps-buy-n { margin-top: 4px; font-size: 12px; font-weight: 600; color: rgba(246, 243, 236, .6); text-align: center; }

/* дорожка уровней */
.ps-cols { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; font-size: 15px; font-weight: 800;
  color: rgba(246, 243, 236, .6); }
.ps-cols span:last-child { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--accent); }
.ps-cols svg { width: 15px; height: 15px; }
.ps-track { margin-top: 6px; display: flex; flex-direction: column; }
.ps-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; align-items: center; min-height: 58px; }
.ps-row::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: rgba(255, 255, 255, .12); }
.ps-row.done::before { background: var(--accent); }
.ps-row.next::before { background: linear-gradient(180deg, var(--accent) var(--p, 0%), rgba(255, 255, 255, .12) var(--p, 0%)); }
.ps-node { position: relative; z-index: 1; grid-column: 2; justify-self: center; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; font-weight: 900; background: #1B2224; border: 2px solid rgba(255, 255, 255, .2); color: rgba(246, 243, 236, .7); }
.ps-row.done .ps-node { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #170D05); }
.ps-row.next .ps-node { border-color: var(--accent); color: var(--accent); }
.ps-gap { display: block; }
.ps-rw { position: relative; min-width: 0; margin: 4px 0; min-height: 50px; padding: 7px 8px; border-radius: 16px; text-align: left; color: var(--ink);
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 5px; padding-right: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: transform .15s; }
.ps-rw:active { transform: scale(.96); }
.ps-ic { width: 22px; height: 24px; display: grid; place-items: center; color: rgba(246, 243, 236, .85); }
.ps-ic svg { width: 20px; height: 20px; }
.ps-ic img { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }
/* вещи только этого сезона (поплавки, звания, фон, цвет имени, рамка): золотая кромка */
.ps-rw.season { box-shadow: inset 0 0 0 1px rgba(243, 210, 139, .55), 0 0 14px rgba(243, 210, 139, .14); }
.ps-rw.season .ps-tx { color: #f3d28b; }
.ps-info-ic.pic img { width: 64px; height: 64px; object-fit: contain; }
.ps-season { display: inline-flex; align-items: center; gap: 6px; color: #f3d28b; font-weight: 700; }
.ps-season svg { width: 14px; height: 14px; }
/* 07.10: «2 контейнера», «Рамка «Путёвка»», «Легендарный предмет на выбор» обрезались — замок ушёл в угол, слова переносятся */
.ps-tx { min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  /* короткие слова не рвём: «Ла-тунь 1974» (12.10) — перенос только в словах длиннее 8 букв */
  hyphenate-limit-chars: 9 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
.ps-st { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; display: grid; place-items: center; color: rgba(246, 243, 236, .5); }
.ps-st svg { width: 12px; height: 12px; }
.ps-st.ok { color: var(--aqua); }
.ps-go { grid-column: 1 / -1; padding: 3px 0; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 900;
  background: var(--accent); color: var(--accent-ink, #170D05); }
.ps-rw.l-paid { background: rgba(243, 210, 139, .08); border-color: rgba(243, 210, 139, .28); }
.ps-rw.l-paid .ps-ic { color: var(--accent); }
.ps-rw.s-locked, .ps-rw.s-paid { opacity: .8; }
.ps-rw.s-claimed { opacity: .5; background: none; border-style: dashed; }
.ps-rw.s-ready { background: rgba(243, 210, 139, .18); border-color: var(--accent); box-shadow: 0 0 16px rgba(243, 210, 139, .22); }
.ps-rw.s-ready::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid rgba(243, 210, 139, .75); pointer-events: none;
  opacity: 0; animation: psHalo 2.2s ease-out infinite; }
@keyframes psHalo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.07); } }
html.idle .ps-rw.s-ready::after { animation: none; }
.ps-rw.k-legend { border-color: #F3C35B; background: radial-gradient(120% 100% at 0% 0%, rgba(243, 195, 91, .3), rgba(243, 195, 91, .06) 70%); }
.ps-rw.k-legend .ps-ic { color: #F3C35B; }
.ps-rw.k-legend .ps-tx { -webkit-line-clamp: 4; }   /* «Легендарный предмет на выбор» — в три строки */
.ps-rw.taken { animation: tkClaiming .5s ease-in both; }
.ps-plus { font-size: 20px; font-weight: 900; color: var(--accent); white-space: nowrap; }
/* «Как копить очки» — один компактный список обычным шрифтом: крупные карточки были похожи на кнопки (разбор экранов 06.10) */
.ps-earn { gap: 0; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.ps-earn .tp-row { min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 9px 14px 9px 12px;
  grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; }
.ps-earn .tp-row + .tp-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.ps-earn .tp-th { width: 26px; height: 26px; background: none; }
.ps-earn .tp-th svg { width: 20px; height: 20px; }
.ps-earn .tp-tx b { font: 700 15px/1.25 var(--f-text); }
.ps-earn .tp-tx small { font-size: 12px; }
.ps-earn .ps-plus { font-size: 18px; }

/* окна: что пришло, о награде */
.ps-gotm { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.ps-gotm > b { font-size: 26px; font-weight: 900; }
.ps-got { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; text-align: left; }
.ps-got span { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-size: 14px; font-weight: 700; }
.ps-info { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ps-info-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 210, 139, .16); color: var(--accent); }
.ps-info-ic svg { width: 30px; height: 30px; }
.ps-info > b { font-size: 24px; font-weight: 900; }
.ps-info .tp-btn { margin-top: 6px; }

/* легендарка на выбор */
.ps-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ps-leg-o { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border-radius: 18px; text-align: center;
  color: var(--ink); background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .12); transition: transform .15s, border-color .15s; }
.ps-leg-o:active { transform: scale(.97); }
.ps-leg-o.on { border-color: #F3C35B; background: rgba(243, 195, 91, .16); box-shadow: 0 0 18px rgba(243, 195, 91, .35); }
.ps-leg-art { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle, rgba(243, 195, 91, .35), rgba(243, 195, 91, 0) 70%); }
.ps-leg-art img { width: 100%; height: 100%; object-fit: contain; }
.ps-leg-o b { font-size: 19px; font-weight: 900; line-height: 1.05; }
.ps-leg-o small { font-size: 12px; font-weight: 700; color: rgba(246, 243, 236, .6); }
.ps-leg-st { font-size: 12px; font-weight: 700; line-height: 1.2; color: #F3C35B; }

/* карточка на вкладке «Задания» */
.tk-pass { margin-top: 10px; width: 100%; min-height: 64px; border-radius: 20px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center;
  gap: 10px; padding: 9px 12px 9px 14px; text-align: left; color: var(--ink); transition: transform .15s; }
.tk-pass:active { transform: scale(.975); }
.tk-pass.ready { border-color: rgba(243, 210, 139, .55); }
.tk-pass-ico { display: grid; place-items: center; color: var(--accent); }
.tk-pass-ico svg { width: 28px; height: 28px; }
.tk-pass-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-pass-tx b { font-size: 22px; line-height: 1; }
.tk-pass-tx small { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: rgba(246, 243, 236, .72); white-space: normal; overflow-wrap: anywhere; }
.tk-pass-n { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 17px; display: grid; place-items: center; font-size: 18px; font-weight: 900;
  background: var(--accent); color: var(--accent-ink, #170D05); }
.tk.intro .tk-pass { animation: hbRise .55s cubic-bezier(.2, .8, .2, 1) .22s both; }