/* Hungry Wars VIP/PREMIUM wide layout v18 */
#modal[data-view="plans"]{
  padding:10px!important;
  background:rgba(8,6,18,.91)!important;
  backdrop-filter:blur(14px) saturate(.78)!important;
  -webkit-backdrop-filter:blur(14px) saturate(.78)!important;
}
#modal[data-view="plans"]>.modal-window{
  width:min(1280px,96vw)!important;
  height:min(960px,94vh)!important;
  max-width:none!important;
  max-height:none!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:28px!important;
  background:transparent!important;
  box-shadow:none!important;
}
#modal[data-view="plans"]>.modal-window>.modal-close{display:none!important;pointer-events:none!important}
#modal[data-view="plans"] #modalBody{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
}
#modal[data-view="plans"] .plans-art-screen{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  gap:0!important;
  filter:drop-shadow(0 24px 45px rgba(0,0,0,.58))!important;
}
#modal[data-view="plans"] .plan-art-stage,
#modal[data-view="plans"] .plans-art-screen.vip .plan-art-stage,
#modal[data-view="plans"] .plans-art-screen.premium .plan-art-stage{
  position:relative!important;
  width:min(1210px,94vw)!important;
  height:auto!important;
  max-width:none!important;
  max-height:91vh!important;
  aspect-ratio:1448/1086!important;
  overflow:visible!important;
  transform:none!important;
}
#modal[data-view="plans"] .plan-main-art{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  filter:drop-shadow(0 12px 25px rgba(0,0,0,.38))!important;
}
/* Status and price are already drawn into the new art, so the old strip must not duplicate them. */
#modal[data-view="plans"] .plan-live-strip{display:none!important}
/* Use only the tabs/close/buy controls already drawn in the art. */
#modal[data-view="plans"] .plan-art-hotspot{
  position:absolute!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  text-shadow:none!important;
  outline:none!important;
  cursor:pointer!important;
  z-index:50!important;
  font-size:0!important;
  line-height:0!important;
}
#modal[data-view="plans"] .plan-art-hotspot::before,
#modal[data-view="plans"] .plan-art-hotspot::after{content:none!important;display:none!important}
#modal[data-view="plans"] .plan-art-hotspot.tab-vip{
  left:26.2%!important;top:1.8%!important;width:23.5%!important;height:10.2%!important;border-radius:18px!important;
}
#modal[data-view="plans"] .plan-art-hotspot.tab-premium{
  left:49.7%!important;top:1.8%!important;width:24.5%!important;height:10.2%!important;border-radius:18px!important;
}
#modal[data-view="plans"] .plan-art-hotspot.close{
  right:1.4%!important;top:4.0%!important;width:8.4%!important;height:10.2%!important;border-radius:50%!important;
}
#modal[data-view="plans"] .plan-art-hotspot.buy{
  left:25.8%!important;bottom:9.2%!important;width:48.8%!important;height:13.2%!important;border-radius:28px!important;
  transition:transform .11s ease,box-shadow .11s ease,background .11s ease!important;
}
#modal[data-view="plans"] .plan-art-hotspot.buy:hover{
  transform:translateY(-2px) scale(1.012)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(90,255,70,.08))!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.35),0 0 30px rgba(77,255,55,.38)!important;
}
#modal[data-view="plans"] .plan-art-hotspot.buy:active{transform:translateY(2px) scale(.985)!important}
#modal[data-view="plans"] .plan-art-hotspot.tab-vip:hover,
#modal[data-view="plans"] .plan-art-hotspot.tab-premium:hover,
#modal[data-view="plans"] .plan-art-hotspot.close:hover{
  background:rgba(255,255,255,.055)!important;
  box-shadow:0 0 20px rgba(255,215,83,.32)!important;
}
@media(max-height:820px){
  #modal[data-view="plans"]>.modal-window{height:96vh!important}
  #modal[data-view="plans"] .plan-art-stage,
  #modal[data-view="plans"] .plans-art-screen.vip .plan-art-stage,
  #modal[data-view="plans"] .plans-art-screen.premium .plan-art-stage{width:min(1040px,92vw)!important;max-height:93vh!important}
}
@media(max-width:900px){
  #modal[data-view="plans"] .plan-art-stage,
  #modal[data-view="plans"] .plans-art-screen.vip .plan-art-stage,
  #modal[data-view="plans"] .plans-art-screen.premium .plan-art-stage{width:96vw!important}
}