.game-pass-ad[hidden]{display:none}
.game-pass-ad{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:26px;
  border:1px solid #b8f86a30;
  border-radius:26px;
  background:radial-gradient(ellipse at 6% 84%,#36661e25,transparent 48%),linear-gradient(115deg,#101b20,#0c1420 65%);
  box-shadow:0 22px 60px #0003;
  color:#f7faf6;
}
.game-pass-ad:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  top:-270px;
  right:-85px;
  border:1px solid #b5fa641b;
  border-radius:50%;
  box-shadow:0 0 0 55px #b5fa6405,0 0 0 110px #b5fa6404;
  pointer-events:none;
}
.gp-bar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:57px;
  padding:14px 30px;
  border-bottom:1px solid #c3e8b31a;
  background:#aaff4f06;
  font-size:12px;
  font-weight:850;
  letter-spacing:.14em;
}
.gp-bar>span:first-child{display:flex;align-items:center;gap:11px}
.gp-bar>span:first-child:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#b4f865;box-shadow:0 0 16px #b4f86a80}
.gp-bar-tag{font-size:9px;letter-spacing:.12em;color:#b9d0bb;white-space:nowrap}
.gp-inner{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);align-items:center;gap:34px;padding:30px}
.gp-art{
  height:322px;
  overflow:hidden;
  border:1px solid #c4eea12e;
  border-radius:18px;
  background:#050906;
  box-shadow:0 16px 34px #0005;
  transform:rotate(-2deg);
}
.gp-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.05)}
.gp-content{min-width:0}
.gp-tag{display:inline-block;color:#b5f66a;font-size:10px;font-weight:800;letter-spacing:.18em}
.gp-content h2{max-width:620px;margin:10px 0 10px;font-size:clamp(27px,3.1vw,38px);line-height:1.08;letter-spacing:-.045em;font-weight:850;text-wrap:balance}
.gp-content p{max-width:540px;margin:0 0 22px;color:#acb9c1;font-size:13px;line-height:1.6}
.gp-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gp-plan{position:relative;min-width:0;min-height:189px;padding:18px;border:1px solid #b8d0dd22;border-radius:16px;background:#18263091;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,background .2s}
.gp-plan:hover{border-color:#a7e8667a;background:#1b2b32}
.gp-plan.gp-ultimate{border-color:#b5f66a8c;background:linear-gradient(130deg,#b5f66a14,#b5f66a05)}
.gp-plan strong{color:#d4e3dc;font-size:11px;font-weight:800;letter-spacing:.14em}
.gp-ultimate strong{color:#b5f66a}
.gp-price{margin-top:12px;font-size:36px;line-height:1.12;font-weight:850;letter-spacing:-.045em;white-space:nowrap;font-variant-numeric:tabular-nums}
.gp-price small{font-size:12px;font-weight:500;letter-spacing:0;color:#aebcbf}
.gp-usd{margin-top:5px;margin-bottom:15px;color:#aebcbf;font-size:12px}
.gp-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:12px 14px;min-height:45px;border:1px solid #b6c9d330;border-radius:9px;background:#b6c9d30a;color:#f0f6f3;text-align:left;font-size:12px;font-weight:800;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}
.gp-link:after{content:"↗";font-size:18px;line-height:1;font-weight:600}
.gp-link:hover{background:#b6c9d31c;transform:translateY(-1px)}
.gp-link:focus-visible{outline:3px solid #d3ff9c;outline-offset:4px}
.gp-ultimate .gp-link{background:#b5f66a;border-color:#b5f66a;color:#16270a;box-shadow:0 4px 18px #adf65b12}
.gp-ultimate .gp-link:hover{background:#ceff95;box-shadow:0 6px 24px #adf65b26}
@media(max-width:900px){
  .gp-inner{grid-template-columns:180px minmax(0,1fr);gap:24px;padding:25px}
  .gp-art{height:280px;border-radius:14px}
  .gp-bar{padding-inline:25px}
  .gp-content h2{font-size:29px}
  .gp-plan{padding:15px}
  .gp-price{font-size:31px}
  .gp-link{padding-inline:11px}
}
@media(max-width:680px){
  .game-pass-ad{border-radius:22px;margin-top:20px}
  .gp-bar{min-height:49px;padding:15px 20px;font-size:10px;letter-spacing:.1em;gap:8px}
  .gp-bar>span:first-child{gap:8px}
  .gp-bar-tag{font-size:8px;letter-spacing:.07em}
  .gp-inner{display:block;padding:22px 20px}
  .gp-art{float:right;width:109px;height:150px;margin:1px 0 16px 17px;border-radius:12px;transform:rotate(3deg)}
  .gp-tag{font-size:9px;letter-spacing:.15em}
  .gp-content h2{font-size:29px;line-height:1.08;margin-top:11px;margin-bottom:13px;text-wrap:initial}
  .gp-content p{clear:both;font-size:12px;line-height:1.6;margin:0 0 19px;padding-top:3px}
  .gp-plans{clear:both;gap:10px}
  .gp-plan{padding:15px;min-height:199px;border-radius:14px}
  .gp-plan strong{font-size:10px;letter-spacing:.12em}
  .gp-price{margin-top:14px;font-size:32px}
  .gp-price small{display:block;margin-top:4px;font-size:10px}
  .gp-usd{font-size:11px;margin-top:7px;margin-bottom:16px}
  .gp-link{font-size:11px;min-height:45px;padding:11px 10px;gap:5px}
  .gp-link:after{font-size:16px}
}
@media(max-width:370px){
  .gp-inner{padding:20px 15px}
  .gp-bar{padding-inline:15px}
  .gp-bar-tag{font-size:7px}
  .gp-art{width:87px;height:126px;margin-left:13px}
  .gp-content h2{font-size:26px}
  .gp-plan{padding:12px}
  .gp-price{font-size:29px}
  .gp-link{padding-inline:8px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.gp-plan,.gp-link{transition:none}}

