/* CTN v54 final-safe floating bottom banners
   Desktop/mobile no-crop layout. */
:root{
  --ctn-banner-z: 2147483000;
  --ctn-gold: #f6d487;
  --ctn-bg: #030806;
}

#ctn-floating-banner-root{
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 28px));
  z-index: var(--ctn-banner-z);
  display: none;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

#ctn-floating-banner-root.ctn-show{ display:block; }

.ctn-floating-shell{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(3,8,6,.94);
  border: 1px solid rgba(246,212,135,.78);
  box-shadow:
    0 16px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.05) inset;
  animation: ctnBannerIn .38s ease both, ctnSoftGlow 2.8s ease-in-out infinite;
  pointer-events: auto;
}

.ctn-floating-link{
  display:block;
  text-decoration:none;
  color:inherit;
  line-height:0;
  background: #030806;
}

.ctn-floating-link picture,
.ctn-floating-link img{
  display:block;
  width:100%;
}

.ctn-floating-link img{
  height:auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 17px;
}

/* Desktop: use the normalized 4:1 file at full width. No cropping. */
@media (min-width: 641px){
  #ctn-floating-banner-root{
    width: min(900px, calc(100vw - 32px));
  }
  .ctn-floating-link img{
    max-height: none;
  }
}

/* Mobile: show vertical file, but cap height so it does not eat the full screen. No crop. */
@media (max-width: 640px){
  #ctn-floating-banner-root{
    width: min(360px, calc(100vw - 24px));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .ctn-floating-shell{ border-radius: 20px; }
  .ctn-floating-link{
    display:flex;
    align-items:center;
    justify-content:center;
    background: #030806;
  }
  .ctn-floating-link img{
    width:auto;
    max-width: 100%;
    max-height: min(52vh, 520px);
    object-fit: contain;
  }
}

.ctn-banner-close,
.ctn-banner-min{
  position:absolute;
  top:7px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(246,212,135,.72);
  background:rgba(0,0,0,.72);
  color:#fff3c4;
  font-weight:900;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.ctn-banner-close{ right:7px; }
.ctn-banner-min{ right:43px; }

.ctn-banner-dots{
  position:absolute;
  left:12px;
  bottom:8px;
  display:flex;
  gap:6px;
  z-index:3;
}
.ctn-banner-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
}
.ctn-banner-dot.active{
  background:var(--ctn-gold);
  box-shadow:0 0 10px var(--ctn-gold);
}

#ctn-floating-banner-root.ctn-minimized{
  width:auto;
  left:auto;
  right:14px;
  transform:none;
}
#ctn-floating-banner-root.ctn-minimized .ctn-floating-shell{
  width:188px;
  height:70px;
  border-radius:999px;
}
#ctn-floating-banner-root.ctn-minimized .ctn-floating-link,
#ctn-floating-banner-root.ctn-minimized picture{
  height:100%;
}
#ctn-floating-banner-root.ctn-minimized img{
  width:100%;
  height:100%;
  object-fit:contain;
}
#ctn-floating-banner-root.ctn-minimized .ctn-banner-dots,
#ctn-floating-banner-root.ctn-minimized .ctn-banner-min{
  display:none;
}

@media (max-width: 640px){
  .ctn-banner-close,
  .ctn-banner-min{
    width:32px;
    height:32px;
    font-size:15px;
  }
  .ctn-banner-min{ right:46px; }
  #ctn-floating-banner-root.ctn-minimized .ctn-floating-shell{
    width:156px;
    height:58px;
  }
}

@keyframes ctnBannerIn{
  from{ opacity:0; transform: translateY(22px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes ctnSoftGlow{
  0%,100%{
    box-shadow:0 16px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(246,212,135,.22) inset;
  }
  50%{
    box-shadow:0 16px 46px rgba(0,0,0,.48), 0 0 26px rgba(246,212,135,.34), 0 0 0 1px rgba(246,212,135,.58) inset;
  }
}