/* =======================================================================
   Casino Hydra - Screenshots Block v6
   Height: 620px fixed | Width: adaptive to container
   8 STYLES | Never overflow container
   ======================================================================= */

/* ===== RESET ===== */
.hydra-scr,.hydra-scr *,.hydra-scr *::before,.hydra-scr *::after{
  box-sizing:border-box!important;
  margin:0!important;
  padding:0!important;
}

/* ===== CSS Variables ===== */
.hydra-scr.hydra-scr.hydra-scr{
  --scr-bg:#ffffff;
  --scr-text:#111827;
  --scr-muted:#6b7280;
  --scr-accent:#3b82f6;
  --scr-border:#e5e7eb;
  --scr-frame:#1f2937;
  --scr-frame-shadow:0 20px 40px rgba(0,0,0,0.2);
  --scr-nav-bg:#ffffff;
  --scr-nav-border:#e5e7eb;
  --scr-dots:#e5e7eb;
  --scr-fan-from:#1e3a5f;
  --scr-fan-to:#0d1b2a;
  
  /* Fixed height */
  --phone-h:620px;
  --phone-w:calc(var(--phone-h) * 9 / 16); /* 348.75px */
  --frame-r:40px;
  --frame-p:10px;
  --screen-r:30px;
  --notch-w:90px;
  --notch-h:28px;
  
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:32px 0!important;
  padding:40px!important;
  background:var(--scr-bg)!important;
  border-radius:24px!important;
  box-shadow:0 4px 24px rgba(0,0,0,0.06)!important;
  overflow:hidden!important;
}

/* Dark Theme */
.hydra-scr.hydra-scr--dark{
  --scr-bg:#0f172a;
  --scr-text:#f8fafc;
  --scr-muted:#94a3b8;
  --scr-border:#334155;
  --scr-nav-bg:#1e293b;
  --scr-nav-border:#334155;
  --scr-dots:#334155;
}

/* ===== Header ===== */
.hydra-scr__head{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin:0 0 32px 0!important;
}
.hydra-scr__icon{
  width:52px!important;height:52px!important;min-width:52px!important;
  background:linear-gradient(135deg,var(--scr-accent),#1d4ed8)!important;
  border-radius:14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:26px!important;
}
.hydra-scr__title{
  font-size:26px!important;font-weight:700!important;
  color:var(--scr-text)!important;
}

/* =======================================================================
   PHONE FRAME - Fixed 620px height
   ======================================================================= */
.hydra-scr__phone{
  position:relative!important;
  display:inline-flex!important;
  flex-direction:column!important;
  background:var(--scr-frame)!important;
  border-radius:var(--frame-r)!important;
  padding:var(--frame-p)!important;
  box-shadow:var(--scr-frame-shadow),inset 0 1px 0 rgba(255,255,255,0.1)!important;
  transition:transform 0.3s ease,box-shadow 0.3s ease!important;
  cursor:pointer!important;
  flex-shrink:0!important;
}
.hydra-scr__phone:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 30px 50px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.15)!important;
}

/* Notch */
.hydra-scr__notch{
  position:absolute!important;
  top:calc(var(--frame-p) + 6px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:var(--notch-w)!important;
  height:var(--notch-h)!important;
  background:var(--scr-frame)!important;
  border-radius:14px!important;
  z-index:10!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
}
.hydra-scr__notch::before{
  content:''!important;width:10px!important;height:10px!important;
  background:#374151!important;border-radius:50%!important;
}
.hydra-scr__notch::after{
  content:''!important;width:6px!important;height:6px!important;
  background:#3b82f6!important;border-radius:50%!important;
  box-shadow:0 0 6px rgba(59,130,246,0.5)!important;
}

/* Screen */
.hydra-scr__screen{
  width:var(--phone-w)!important;
  height:var(--phone-h)!important;
  border-radius:var(--screen-r)!important;
  overflow:hidden!important;
  background:#0f172a!important;
}
.hydra-scr__screen img{
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;
}

/* Zoom overlay */
.hydra-scr__zoom{
  position:absolute!important;
  inset:var(--frame-p)!important;
  background:rgba(0,0,0,0.5)!important;
  border-radius:var(--screen-r)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  opacity:0!important;
  transition:opacity 0.25s ease!important;
}
.hydra-scr__phone:hover .hydra-scr__zoom{opacity:1!important}

.hydra-scr__zoom-btn{
  width:60px!important;height:60px!important;
  background:#fff!important;border:none!important;border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;
  box-shadow:0 6px 20px rgba(0,0,0,0.25)!important;
  transition:transform 0.2s ease!important;
}
.hydra-scr__zoom-btn:hover{transform:scale(1.1)!important}
.hydra-scr__zoom-btn svg{
  width:26px!important;height:26px!important;
  stroke:#1f2937!important;stroke-width:2!important;fill:none!important;
}

/* =======================================================================
   STYLE 1: CAROUSEL - 3 visible, centered
   ======================================================================= */
.hydra-scr--carousel .hydra-scr__viewport{
  position:relative!important;
  width:100%!important;
  overflow:hidden!important;
}
.hydra-scr--carousel .hydra-scr__track{
  display:flex!important;
  gap:24px!important;
  overflow-x:auto!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  padding:16px 0 20px 0!important;
  scrollbar-width:none!important;
}
.hydra-scr--carousel .hydra-scr__track::-webkit-scrollbar{display:none!important}

.hydra-scr--carousel .hydra-scr__slide{
  flex:0 0 auto!important;
  scroll-snap-align:center!important;
  display:flex!important;
  justify-content:center!important;
}

/* Navigation */
.hydra-scr__nav{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:10!important;
  width:52px!important;height:52px!important;
  background:var(--scr-nav-bg)!important;
  border:2px solid var(--scr-nav-border)!important;
  border-radius:14px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;
  transition:all 0.2s ease!important;
  box-shadow:0 4px 12px rgba(0,0,0,0.08)!important;
}
.hydra-scr__nav:hover{
  background:var(--scr-accent)!important;
  border-color:var(--scr-accent)!important;
}
.hydra-scr__nav:hover svg{stroke:#fff!important}
.hydra-scr__nav svg{
  width:22px!important;height:22px!important;
  stroke:var(--scr-text)!important;stroke-width:2.5!important;fill:none!important;
  transition:stroke 0.2s ease!important;
}
.hydra-scr__nav--prev{left:16px!important}
.hydra-scr__nav--next{right:16px!important}
.hydra-scr__nav:disabled{opacity:0.3!important;cursor:not-allowed!important}

/* Dots */
.hydra-scr__dots{
  display:flex!important;justify-content:center!important;gap:10px!important;
  margin:24px 0 0 0!important;
}
.hydra-scr__dot{
  width:10px!important;height:10px!important;
  background:var(--scr-dots)!important;
  border:none!important;border-radius:5px!important;
  cursor:pointer!important;
  transition:all 0.3s ease!important;
}
.hydra-scr__dot.is-active{
  width:32px!important;
  background:var(--scr-accent)!important;
}

/* =======================================================================
   STYLE 2: GRID - 3 columns, fit container
   ======================================================================= */
.hydra-scr--grid .hydra-scr__grid{
  display:flex!important;
  justify-content:center!important;
  gap:24px!important;
  flex-wrap:wrap!important;
}
.hydra-scr--grid .hydra-scr__cell{
  flex:0 0 auto!important;
}

/* =======================================================================
   STYLE 3: FAN - Centered, within container
   ======================================================================= */
.hydra-scr--fan.hydra-scr--fan{
  background:linear-gradient(135deg,var(--scr-fan-from),var(--scr-fan-to))!important;
  text-align:center!important;
  padding:48px 40px 60px 40px!important;
}
.hydra-scr--fan .hydra-scr__head{justify-content:center!important}
.hydra-scr--fan .hydra-scr__title{color:#fff!important}

.hydra-scr--fan .hydra-scr__fan-wrap{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  position:relative!important;
  height:calc(var(--phone-h) + 80px)!important;
  margin:20px 0 0 0!important;
}
.hydra-scr--fan .hydra-scr__phone{
  position:absolute!important;
  transition:all 0.4s cubic-bezier(0.25,0.8,0.25,1)!important;
}
.hydra-scr--fan .hydra-scr__phone[data-pos="0"]{transform:translateX(-55%) rotate(-12deg)!important;z-index:1!important}
.hydra-scr--fan .hydra-scr__phone[data-pos="1"]{transform:translateX(-28%) rotate(-6deg)!important;z-index:2!important}
.hydra-scr--fan .hydra-scr__phone[data-pos="2"]{transform:translateX(0) rotate(0deg)!important;z-index:3!important}
.hydra-scr--fan .hydra-scr__phone[data-pos="3"]{transform:translateX(28%) rotate(6deg)!important;z-index:2!important}
.hydra-scr--fan .hydra-scr__phone:hover{
  transform:translateY(-40px) rotate(0deg) scale(1.05)!important;
  z-index:10!important;
}

/* =======================================================================
   STYLE 4: MOCKUP - Centered, side phones smaller
   ======================================================================= */
.hydra-scr--mockup .hydra-scr__head{
  justify-content:center!important;
  flex-direction:column!important;
  text-align:center!important;
  gap:8px!important;
}
.hydra-scr--mockup .hydra-scr__phones{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:32px!important;
  flex-wrap:wrap!important;
}
.hydra-scr--mockup .hydra-scr__phone--main{
  --phone-h:620px;
}
.hydra-scr--mockup .hydra-scr__phone--side{
  --phone-h:520px;
  --frame-r:36px;
  --screen-r:26px;
  opacity:0.6!important;
}
.hydra-scr--mockup .hydra-scr__phone--side:hover{
  opacity:1!important;
}

/* =======================================================================
   STYLE 5: STACK - Layered, centered
   ======================================================================= */
.hydra-scr--stack .hydra-scr__stack-wrap{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  position:relative!important;
  height:calc(var(--phone-h) + 80px)!important;
}
.hydra-scr--stack .hydra-scr__phone{
  position:absolute!important;
  transition:all 0.4s ease!important;
}
.hydra-scr--stack .hydra-scr__phone[data-pos="0"]{
  transform:translateX(-25%) translateY(30px) scale(0.88)!important;
  z-index:1!important;filter:brightness(0.7)!important;
}
.hydra-scr--stack .hydra-scr__phone[data-pos="1"]{
  transform:translateX(-12%) translateY(15px) scale(0.94)!important;
  z-index:2!important;filter:brightness(0.85)!important;
}
.hydra-scr--stack .hydra-scr__phone[data-pos="2"]{
  transform:translateX(0) translateY(0) scale(1)!important;
  z-index:3!important;
}
.hydra-scr--stack .hydra-scr__phone[data-pos="3"]{
  transform:translateX(12%) translateY(15px) scale(0.94)!important;
  z-index:2!important;filter:brightness(0.85)!important;
}
.hydra-scr--stack .hydra-scr__phone:hover{
  transform:translateY(-30px) scale(1.02)!important;
  z-index:10!important;filter:brightness(1)!important;
}

/* =======================================================================
   STYLE 6: GALLERY - Grid with labels
   ======================================================================= */
.hydra-scr--gallery .hydra-scr__gallery-wrap{
  display:flex!important;
  justify-content:center!important;
  gap:32px!important;
  flex-wrap:wrap!important;
}
.hydra-scr--gallery .hydra-scr__item{
  text-align:center!important;
  flex:0 0 auto!important;
}
.hydra-scr--gallery .hydra-scr__label{
  margin:14px 0 0 0!important;
  font-size:14px!important;font-weight:600!important;
  color:var(--scr-text)!important;
}

/* =======================================================================
   STYLE 7: MINIMAL - Horizontal scroll
   ======================================================================= */
.hydra-scr--minimal.hydra-scr--minimal{
  padding:28px 32px!important;
}
.hydra-scr--minimal .hydra-scr__head{margin:0 0 20px 0!important}
.hydra-scr--minimal .hydra-scr__minimal-wrap{
  display:flex!important;
  gap:20px!important;
  overflow-x:auto!important;
  padding:12px 0 16px 0!important;
  scroll-snap-type:x mandatory!important;
  scrollbar-width:none!important;
}
.hydra-scr--minimal .hydra-scr__minimal-wrap::-webkit-scrollbar{display:none!important}
.hydra-scr--minimal .hydra-scr__phone{
  scroll-snap-align:start!important;
  --phone-h:480px;
  --frame-r:32px;
  --frame-p:8px;
  --screen-r:24px;
  --notch-w:70px;
  --notch-h:22px;
}

/* =======================================================================
   STYLE 8: SHOWCASE - Featured + thumbnails
   ======================================================================= */
.hydra-scr--showcase .hydra-scr__showcase-wrap{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  gap:40px!important;
  flex-wrap:wrap!important;
}
.hydra-scr--showcase .hydra-scr__featured{
  flex:0 0 auto!important;
}
.hydra-scr--showcase .hydra-scr__featured .hydra-scr__phone{
  --phone-h:620px;
}
.hydra-scr--showcase .hydra-scr__thumbs{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  gap:16px!important;
  align-content:start!important;
}
.hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone{
  --phone-h:280px;
  --frame-r:24px;
  --frame-p:5px;
  --screen-r:19px;
  --notch-w:45px;
  --notch-h:16px;
  opacity:0.7!important;
}
.hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone:hover,
.hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone.is-active{
  opacity:1!important;
}
.hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone.is-active{
  box-shadow:0 0 0 3px var(--scr-accent),var(--scr-frame-shadow)!important;
}

/* =======================================================================
   LIGHTBOX
   ======================================================================= */
.hydra-scr-lightbox{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  background:rgba(0,0,0,0.95)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  padding:24px!important;
  animation:hscrFadeIn 0.2s ease!important;
}
@keyframes hscrFadeIn{from{opacity:0}to{opacity:1}}

.hydra-scr-lightbox img{
  max-width:90vw!important;max-height:90vh!important;
  border-radius:20px!important;
  box-shadow:0 24px 60px rgba(0,0,0,0.5)!important;
}
.hydra-scr-lightbox__close{
  position:absolute!important;top:20px!important;right:20px!important;
  width:52px!important;height:52px!important;
  background:#fff!important;border:none!important;border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer!important;
  transition:transform 0.2s ease!important;
}
.hydra-scr-lightbox__close:hover{transform:scale(1.1)!important}
.hydra-scr-lightbox__close svg{
  width:22px!important;height:22px!important;
  stroke:#1f2937!important;stroke-width:2.5!important;fill:none!important;
}

/* =======================================================================
   RESPONSIVE
   ======================================================================= */

/* Tablet */
@media(max-width:1100px){
  .hydra-scr.hydra-scr.hydra-scr{
    --phone-h:520px;
    --frame-r:36px;
    --screen-r:26px;
    --notch-w:80px;
    --notch-h:24px;
    padding:32px!important;
  }
  .hydra-scr--fan .hydra-scr__fan-wrap,
  .hydra-scr--stack .hydra-scr__stack-wrap{
    height:calc(var(--phone-h) + 60px)!important;
  }
  .hydra-scr--mockup .hydra-scr__phone--side{
    --phone-h:440px;
  }
  .hydra-scr--showcase .hydra-scr__featured .hydra-scr__phone{
    --phone-h:520px;
  }
}

/* Mobile landscape / small tablet */
@media(max-width:900px){
  .hydra-scr.hydra-scr.hydra-scr{
    --phone-h:460px;
    --frame-r:32px;
    --frame-p:8px;
    --screen-r:24px;
    --notch-w:70px;
    --notch-h:22px;
    padding:28px 20px!important;
  }
  .hydra-scr__head{margin:0 0 24px 0!important;gap:12px!important}
  .hydra-scr__icon{width:46px!important;height:46px!important;min-width:46px!important;font-size:22px!important;border-radius:12px!important}
  .hydra-scr__title{font-size:22px!important}
  
  /* Hide side phones on mockup */
  .hydra-scr--mockup .hydra-scr__phone--side{display:none!important}
  .hydra-scr--mockup .hydra-scr__phone--main{--phone-h:520px}
  
  /* Fan adjustments */
  .hydra-scr--fan .hydra-scr__phone[data-pos="0"]{transform:translateX(-45%) rotate(-10deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="1"]{transform:translateX(-22%) rotate(-5deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="3"]{transform:translateX(22%) rotate(5deg)!important}
  
  /* Stack adjustments */
  .hydra-scr--stack .hydra-scr__phone[data-pos="0"]{transform:translateX(-20%) translateY(25px) scale(0.9)!important}
  .hydra-scr--stack .hydra-scr__phone[data-pos="1"]{transform:translateX(-10%) translateY(12px) scale(0.95)!important}
  .hydra-scr--stack .hydra-scr__phone[data-pos="3"]{transform:translateX(10%) translateY(12px) scale(0.95)!important}
  
  .hydra-scr--showcase .hydra-scr__showcase-wrap{gap:24px!important}
  .hydra-scr--showcase .hydra-scr__thumbs{grid-template-columns:repeat(4,1fr)!important;gap:12px!important}
  .hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone{--phone-h:200px;--frame-r:18px;--frame-p:4px;--screen-r:14px}
  
  .hydra-scr--minimal .hydra-scr__phone{--phone-h:400px}
}

/* Mobile portrait */
@media(max-width:640px){
  .hydra-scr.hydra-scr.hydra-scr{
    --phone-h:400px;
    --frame-r:28px;
    --frame-p:7px;
    --screen-r:21px;
    --notch-w:60px;
    --notch-h:20px;
    padding:20px 16px!important;
    margin:20px 0!important;
    border-radius:16px!important;
  }
  .hydra-scr__head{margin:0 0 20px 0!important}
  .hydra-scr__icon{width:42px!important;height:42px!important;min-width:42px!important;font-size:20px!important;border-radius:10px!important}
  .hydra-scr__title{font-size:19px!important}
  
  /* Navigation smaller */
  .hydra-scr__nav{width:44px!important;height:44px!important;border-radius:12px!important}
  .hydra-scr__nav svg{width:18px!important;height:18px!important}
  .hydra-scr__nav--prev{left:8px!important}
  .hydra-scr__nav--next{right:8px!important}
  
  .hydra-scr__dots{margin:20px 0 0 0!important;gap:8px!important}
  .hydra-scr__dot{width:8px!important;height:8px!important}
  .hydra-scr__dot.is-active{width:24px!important}
  
  /* Zoom button smaller */
  .hydra-scr__zoom-btn{width:48px!important;height:48px!important}
  .hydra-scr__zoom-btn svg{width:22px!important;height:22px!important}
  
  /* Fan mobile */
  .hydra-scr--fan{padding:32px 16px 40px 16px!important}
  .hydra-scr--fan .hydra-scr__fan-wrap{height:calc(var(--phone-h) + 40px)!important;margin:16px 0 0 0!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="0"]{transform:translateX(-38%) rotate(-8deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="1"]{transform:translateX(-18%) rotate(-4deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="3"]{transform:translateX(18%) rotate(4deg)!important}
  
  /* Stack mobile */
  .hydra-scr--stack .hydra-scr__stack-wrap{height:calc(var(--phone-h) + 40px)!important}
  .hydra-scr--stack .hydra-scr__phone[data-pos="0"]{transform:translateX(-16%) translateY(20px) scale(0.92)!important}
  .hydra-scr--stack .hydra-scr__phone[data-pos="1"]{transform:translateX(-8%) translateY(10px) scale(0.96)!important}
  .hydra-scr--stack .hydra-scr__phone[data-pos="3"]{transform:translateX(8%) translateY(10px) scale(0.96)!important}
  
  /* Mockup mobile */
  .hydra-scr--mockup .hydra-scr__phone--main{--phone-h:440px}
  
  /* Showcase mobile */
  .hydra-scr--showcase .hydra-scr__showcase-wrap{flex-direction:column!important;gap:20px!important}
  .hydra-scr--showcase .hydra-scr__featured .hydra-scr__phone{--phone-h:400px}
  .hydra-scr--showcase .hydra-scr__thumbs{grid-template-columns:repeat(4,1fr)!important}
  .hydra-scr--showcase .hydra-scr__thumbs .hydra-scr__phone{--phone-h:160px;--frame-r:14px;--frame-p:3px;--screen-r:11px;--notch-w:35px;--notch-h:12px}
  
  /* Minimal mobile */
  .hydra-scr--minimal.hydra-scr--minimal{padding:20px 16px!important}
  .hydra-scr--minimal .hydra-scr__phone{--phone-h:340px;--frame-r:24px;--screen-r:18px}
  
  /* Grid & Gallery - 2 columns on mobile */
  .hydra-scr--grid .hydra-scr__grid,
  .hydra-scr--gallery .hydra-scr__gallery-wrap{
    gap:16px!important;
  }
}

/* Very small */
@media(max-width:400px){
  .hydra-scr.hydra-scr.hydra-scr{
    --phone-h:340px;
    --frame-r:24px;
    --frame-p:6px;
    --screen-r:18px;
    --notch-w:50px;
    --notch-h:16px;
    padding:16px 12px!important;
  }
  .hydra-scr__nav{width:38px!important;height:38px!important;border-radius:10px!important}
  .hydra-scr__nav svg{width:16px!important;height:16px!important}
  .hydra-scr__nav--prev{left:4px!important}
  .hydra-scr__nav--next{right:4px!important}
  
  .hydra-scr--fan .hydra-scr__phone[data-pos="0"]{transform:translateX(-32%) rotate(-6deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="1"]{transform:translateX(-15%) rotate(-3deg)!important}
  .hydra-scr--fan .hydra-scr__phone[data-pos="3"]{transform:translateX(15%) rotate(3deg)!important}
}