/* Mobile-first custom styles for 潮酷大玩家 promotional page */
:root{
  --brand-pink: #ff4d8a;
}
html,body{
  height:100%;
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #fff0f6 0%, #fff7fb 100%);
}
/* Ensure images are visually consistent */
img{
  display:block;
  max-width:100%;
  height:auto;
}
/* small tweaks for header/logo */
header .w-12{
  width:48px;
  height:48px;
}
/* gallery image fixed height for consistent rows */
#gallery img{
  height:96px;
}
/* make sure long text wraps nicely */
p, li, div{
  word-break: break-word;
}
@media (min-width: 640px){
  #gallery img{
    height:110px;
  }
}
@media (min-width: 1024px){
  /* Desktop tweaks */
  main{ max-width:1024px; }
  #gallery img{ height:160px; }
}
/* Lightbox overlay styles */
#lightbox-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.75);
  z-index:9999;
  padding: 16px;
}
#lightbox-overlay.visible{
  display:flex;
}
#lightbox-overlay img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform-origin: center center;
}
.lightbox img{ cursor: zoom-in; display:block; }
.lightbox{ display:block; }

/* controls */
.lb-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: none;
  width:44px;
  height:44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  z-index:10000;
  transition: background 160ms, transform 160ms;
  backdrop-filter: blur(4px);
}
.lb-control:hover{ background: rgba(255,255,255,0.12); transform: translateY(-50%) scale(1.05); }
#lightbox-prev{ left: 12px; }
#lightbox-next{ right: 12px; }

/* zoom + fade animation */
#lightbox-overlay img{
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  transform: scale(0.98);
  opacity: 0;
}
#lightbox-overlay.visible img{
  transform: scale(1);
  opacity: 1;
}

/* small-screen tweak: controls smaller */
@media (max-width:420px){
  .lb-control{ width:36px; height:36px; font-size:18px; }
}

/* Arc header styles */
.arc-header{
  --arc-bg-1: #ff4d8a;
  --arc-bg-2: #9b59ff;
  background: linear-gradient(90deg,var(--arc-bg-1),var(--arc-bg-2));
  color: #fff;
  position: relative;
  overflow: visible;
}
.arc-header .logo-badge{
  background: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.arc-header .accent-dot{ box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.arc-header .arc-title{ text-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.arc-header .btn-primary{
  background: #fff;
  color: var(--arc-bg-1);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight:600;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  text-decoration:none;
}
.arc-header .btn-outline{
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration:none;
}
.arc-svg{ display:block; width:100%; height:64px; margin-top: -4px; }

/* hero video */
#intro video.hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* hero banner video (above main) */
#hero-video .rounded-xl{ overflow:hidden; }
#hero-video video{ display:block; width:100%; height:100%; object-fit:cover; }

/* play overlay */
.hero-video-wrap{ position:relative; }
.video-play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.35);
  color:#fff;
  font-weight:700;
  border: none;
  cursor:pointer;
  font-size:16px;
  opacity:1;
  transition: opacity 180ms;
}
.video-play-overlay.hidden{ opacity:0; pointer-events:none; }
.video-play-overlay:hover{ background: rgba(0,0,0,0.45); }

/* QR box: ensure true square and prevent image distortion */
#contact .w-24{
  width:96px;
  height:96px;
  max-width:96px;
  max-height:96px;
  overflow:hidden;
  display:inline-block;
}
#contact .w-24 img,
#contact .w-24 > img,
#contact img[alt="二维码"]{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}