:root{
  --lp-accent:#ff2d95;
  --lp-panel:rgba(12,16,25,.84);
}

/* Shared player controls: loaded after each route's legacy styles. */
.card-wrap{
  left:12px;
  right:12px;
  bottom:max(16px,env(safe-area-inset-bottom));
  transform:none;
  width:auto;
  max-width:380px;
  margin:0 auto;
  align-items:stretch;
}
.card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  padding:16px;
  background:linear-gradient(145deg,rgba(15,20,32,.9),rgba(8,11,18,.82));
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
}
.card.show{animation:lpCardIn .42s cubic-bezier(.22,1,.36,1) both}
.title{font-size:18px;line-height:1.35;font-weight:850;margin:0 0 3px;letter-spacing:.01em}
.sub{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 10px}
.count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  margin:0 auto 12px;
  padding:3px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.82);
  font-size:11.5px;
  font-weight:650;
}
.count span{font-size:15px;margin-right:2px;font-weight:850}
.btn{
  width:100%;
  min-width:0;
  height:50px;
  border-radius:999px;
  padding:0 22px;
  font-size:15px;
  font-weight:850;
  letter-spacing:.02em;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:active{transform:scale(.98)}
.btn.pulse{animation:lpPulse 2.2s ease-in-out infinite}
.sound-btn{
  position:absolute;
  top:calc(100% - 50px);
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  margin-left:0!important;
  margin-right:0!important;
  align-self:center;
  transition:top .46s cubic-bezier(.22,1,.36,1),background-color .2s,border-color .2s;
  min-width:92px;
  height:38px;
  margin:0;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(10,14,22,.7);
  font-size:11.5px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.card.show + .sound-btn{top:-48px}
.sound-btn:before{content:"◖";margin-right:6px;font-size:13px}
.sound-btn:active{transform:translateX(-50%) scale(.97)!important}

body.gate-modal-open{overflow:hidden}
.gate-modal{position:fixed;inset:0;z-index:100;display:none}
.gate-modal.is-open{display:block}
.gate-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,7,13,.66);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.gate-modal__dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(92vw,390px);
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:30px;
  background:#fff;
  color:#0b0f18;
  box-shadow:0 34px 90px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.85) inset;
}
.gate-modal.is-open .gate-modal__dialog{animation:lpModalIn .28s cubic-bezier(.22,1,.36,1) both}
.gate-modal__close{
  position:absolute;
  z-index:5;
  right:16px;
  top:16px;
  width:36px;
  height:36px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#a3a3a3;
  font-size:34px;
  line-height:1;
  box-shadow:none;
}
.gate-modal__hero{display:none}
.gate-modal__top{display:grid;grid-template-columns:78px 1fr;gap:16px;align-items:center;padding-right:30px;text-align:left}
.gate-modal__headline{min-width:0}
.gate-modal__badge{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:3px 12px;margin-bottom:8px;border-radius:999px;background:linear-gradient(180deg,#eff6ff,#e0f2fe);color:#2563eb;font-size:12px;line-height:1;font-weight:800;letter-spacing:.03em}
.gate-modal__phone{
  position:relative;
  width:78px;
  height:78px;
  padding:0;
  border:0;
  border-radius:23px;
  background:linear-gradient(180deg,#85d7ff 0%,#1689ff 58%,#066bea 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 15px 26px rgba(37,99,235,.24);
}
.gate-modal__phone:before{content:"";position:absolute;left:22px;top:39px;width:33px;height:8px;border-radius:999px;background:#fff;transform:rotate(-55deg);transform-origin:left center}
.gate-modal__phone:after{content:"";position:absolute;right:15px;bottom:22px;width:22px;height:7px;border-radius:999px;background:#fff}
.gate-modal__phone-notch,.gate-modal__phone-screen,.gate-modal__phone-home,.gate-modal__bubble,.gate-modal__bubble--small{display:none}
.gate-modal__body{padding:34px 28px 28px;text-align:left}
.gate-modal__title{margin:0;color:#05070b;font-size:23px;line-height:1.12;font-weight:700;letter-spacing:0;white-space:nowrap}
.gate-modal__text{max-width:none;margin:20px 0;color:#686f7b;font-size:12.5px;line-height:1.7;font-weight:600}
.gate-modal__features{border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;margin:0 0 24px}
.gate-modal__feature{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:center;min-height:66px}
.gate-modal__feature+.gate-modal__feature{border-top:1px solid #ececec}
.gate-modal__feature-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef5ff;color:#2563eb;font-size:20px;font-weight:800}
.gate-modal__feature-icon--lock{font-size:16px}
.gate-modal__feature strong{display:block;color:#05070b;font-size:18px;line-height:1.15;font-weight:700;letter-spacing:0}
.gate-modal__feature small{display:block;margin-top:4px;color:#777;font-size:12.5px;line-height:1.3;font-weight:600}
.gate-modal__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:58px;
  height:auto;
  margin:0;
  border-radius:999px;
  background:linear-gradient(180deg,#222 0%,#080808 100%);
  color:#fff;
  font-size:19px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 20px 34px rgba(0,0,0,.2);
}
.gate-modal__note{margin:16px 0 0;text-align:center;color:#8b8b8b;font-size:12.5px;line-height:1.5;font-weight:600}
.gate-modal__ios-icon{display:none}
.gate-modal__ios-points{display:none}
.gate-modal--ios .gate-modal__text:empty{display:none}

@keyframes lpCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes lpModalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.965)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes lpPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.025);filter:brightness(1.06)}}

@media (min-width:700px){
  .card-wrap{bottom:24px}
  .card{padding:18px}
}

@media (max-width:480px){
  .card-wrap{left:10px;right:10px;bottom:max(12px,env(safe-area-inset-bottom));width:auto}
  .card{border-radius:20px;padding:14px}
  .title{font-size:16px}
  .sub{font-size:12px;margin-bottom:8px}
  .count{min-height:26px;margin-bottom:10px;font-size:11px}
  .count span{font-size:14px}
  .btn{height:48px;font-size:14px}
  .sound-btn{top:calc(100% - 46px);left:50%!important;right:auto!important;height:35px;min-width:86px;font-size:11px}
  .card.show + .sound-btn{top:-44px}
  .gate-modal__dialog{width:min(92vw,390px);border-radius:28px}
  .gate-modal__body{padding:30px 24px 26px}
  .gate-modal__top{grid-template-columns:74px 1fr;gap:14px}
  .gate-modal__phone{width:74px;height:74px;border-radius:22px}
  .gate-modal__title{font-size:22px}
  .gate-modal__text{font-size:12.5px;margin:18px 0}
  .gate-modal__feature{min-height:62px;grid-template-columns:36px 1fr;gap:13px}
  .gate-modal__feature strong{font-size:16px}
  .gate-modal__cta{min-height:54px;font-size:17px}
}
@media (max-width:360px){
  .gate-modal__body{padding:28px 20px 24px}
  .gate-modal__top{grid-template-columns:64px 1fr;gap:12px;padding-right:22px}
  .gate-modal__phone{width:64px;height:64px;border-radius:19px}
  .gate-modal__phone:before{left:18px;top:32px;width:27px;height:7px}
  .gate-modal__phone:after{right:12px;bottom:18px;width:19px;height:6px}
  .gate-modal__badge{min-height:24px;padding:2px 10px;font-size:11px}
  .gate-modal__title{font-size:19px}
  .gate-modal__feature strong{font-size:16px}
  .gate-modal__cta{font-size:16px}
}