/* =====================================================================
   Zibll 深色主题对齐层 (对标 hmgal.com) - 精修版
   统一黑色 + 精致边框/阴影 + 细腻粉色点缀
   保留：现有布局 + 黑色背景
   ===================================================================== */

/* ===== 文字颜色层次 (zibll 深色) ===== */
body {
  color: #e5eef7;
}

/* ===== 卡片：统一黑色 + 精致边框 + 柔和阴影 + 8px 圆角 ===== */
.glass-card,
.glass-card-static,
.surface-card,
.surface-elevated,
.surface-glass,
.liquid-glass,
.liquid-glass-static,
.liquid-glass-panel,
.game-card,
.game-card-compact,
.card,
.card-static,
.tilt-card,
.carousel-container {
  background: #0a0a0c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* 卡片 hover：粉色描边 + 阴影柔和加深 (zibll 精致 hover) */
.glass-card:hover,
.surface-card:hover,
.game-card:hover,
.card:hover {
  border-color: rgba(240, 68, 148, 0.45) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

/* ===== 主按钮：粉色渐变 pill (zibll .but 风格) ===== */
.btn-primary,
.button-primary,
.liquid-btn-primary,
.glass-btn-primary {
  background: linear-gradient(135deg, #f56ab0 0%, #f04494 100%) !important;
  background-image: linear-gradient(135deg, #f56ab0 0%, #f04494 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(240, 68, 148, 0.35) !important;
}
.btn-primary:hover,
.button-primary:hover,
.liquid-btn-primary:hover,
.glass-btn-primary:hover {
  background: linear-gradient(135deg, #f77fbe 0%, #f56ab0 100%) !important;
  background-image: linear-gradient(135deg, #f77fbe 0%, #f56ab0 100%) !important;
  box-shadow: 0 4px 14px rgba(240, 68, 148, 0.45) !important;
}

/* ===== 次要按钮：pill 圆角 ===== */
.btn-secondary,
.glass-btn,
.btn {
  border-radius: 20px !important;
}

/* ===== 标签/徽章：pill 圆角 ===== */
.tag,
.badge,
.tag-accent,
.tag-selectable,
.admin-badge,
.notification-badge,
.developer-tag,
.tag-badge {
  border-radius: 20px !important;
}

/* 激活标签：粉色背景 (zibll index-tab active) */
.tag-active {
  background: #f04494 !important;
  color: #fff !important;
  border-color: #f04494 !important;
}

/* ===== 导航：黑色实底 + 激活项粉色 ===== */
.header-glass {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.nav-item-active {
  color: #f04494 !important;
}

/* ===== 输入框：8px 圆角 + 黑色背景 ===== */
.input-glass,
.input-glass-search,
.glass-input {
  border-radius: 8px !important;
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* ===== 骨架屏 ===== */
.skeleton,
.skeleton-unified {
  border-radius: 8px !important;
  background: linear-gradient(90deg, #141416 25%, #1c1c1f 50%, #141416 75%) !important;
}

/* ===== 滚动条 (zibll 风格) ===== */
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16) !important;
  border-radius: 4px !important;
}

/* ===== pink 色系类（替代 blue，zibll 粉） ===== */
.bg-pink-500 { background-color: #f04494 !important; }
.bg-pink-400 { background-color: #f56ab0 !important; }
.bg-pink-600 { background-color: #d13a80 !important; }
.bg-pink-700 { background-color: #c4207a !important; }
.bg-pink-300 { background-color: #f9a8d4 !important; }
.text-pink-400 { color: #f56ab0 !important; }
.text-pink-500 { color: #f04494 !important; }
.text-pink-600 { color: #d13a80 !important; }
.text-pink-300 { color: #f9a8d4 !important; }
.border-pink-500 { border-color: #f04494 !important; }
.border-pink-400 { border-color: #f56ab0 !important; }
.bg-pink-500\/30 { background-color: rgba(240, 68, 148, 0.3) !important; }
.bg-pink-500\/20 { background-color: rgba(240, 68, 148, 0.2) !important; }
.bg-pink-500\/10 { background-color: rgba(240, 68, 148, 0.1) !important; }
.bg-pink-500\/5 { background-color: rgba(240, 68, 148, 0.05) !important; }
.bg-pink-400\/20 { background-color: rgba(245, 106, 176, 0.2) !important; }
.border-pink-500\/30 { border-color: rgba(240, 68, 148, 0.3) !important; }
.hover\:bg-pink-500\/5:hover { background-color: rgba(240, 68, 148, 0.05) !important; }
.hover\:bg-pink-500\/10:hover { background-color: rgba(240, 68, 148, 0.1) !important; }
.hover\:border-pink-500\/30:hover { border-color: rgba(240, 68, 148, 0.3) !important; }
.hover\:text-pink-400:hover { color: #f56ab0 !important; }
.hover\:text-pink-500:hover { color: #f04494 !important; }
.hover\:border-pink-500:hover { border-color: #f04494 !important; }
.hover\:bg-pink-500:hover { background-color: #f04494 !important; }
.ring-pink-500 { --tw-ring-color: #f04494 !important; }

/* ===== 手机端 footer 给底部导航栏留白（修复遮挡） ===== */
@media (max-width: 1023px) {
  footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
}

/* =====================================================================
   Uiverse 风格增强（发光按钮 / 光泽扫过 / 聚焦光效 / 卡片上浮）
   ===================================================================== */

/* 主按钮：光泽扫过 + 上浮发光（Uiverse glow button） */
.liquid-btn-primary, .btn-primary, .button-primary, .glass-btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.liquid-btn-primary::after,
.btn-primary::after,
.button-primary::after,
.glass-btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.liquid-btn-primary:hover::after,
.btn-primary:hover::after,
.button-primary:hover::after,
.glass-btn-primary:hover::after {
  left: 130%;
}
.liquid-btn-primary:hover,
.btn-primary:hover,
.button-primary:hover,
.glass-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240,68,148,.5), 0 0 24px rgba(240,68,148,.22) !important;
}
.liquid-btn-primary:active,
.btn-primary:active,
.button-primary:active,
.glass-btn-primary:active {
  transform: translateY(0) scale(.98);
}

/* 输入框：聚焦粉色发光（Uiverse glowing input） */
.liquid-input,
.input-glass,
.input-glass-search,
.glass-input {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.liquid-input:focus,
.input-glass:focus,
.input-glass-search:focus,
.glass-input:focus {
  border-color: rgba(240,68,148,.6) !important;
  box-shadow: 0 0 0 3px rgba(240,68,148,.12), 0 0 18px rgba(240,68,148,.15) !important;
}

/* 卡片：hover 上浮 + 粉色光晕（Uiverse card hover） */
.game-card,
.glass-card,
.surface-card,
.card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.game-card:hover,
.glass-card:hover,
.surface-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(240,68,148,.12) !important;
}

/* 标签/徽章 hover 微动效 */
.tag:hover,
.tag-selectable:hover,
.badge:hover {
  transform: translateY(-1px);
  transition: transform .2s ease;
}

/* 导航链接 hover 下划线发光 */
.nav-item-active {
  text-shadow: 0 0 12px rgba(240,68,148,.4);
}

/* 滚动条 hover 增强 */
::-webkit-scrollbar-thumb:hover {
  background: rgba(240,68,148,.4) !important;
}

/* =====================================================================
   Uiverse 组件级增强（搜索框图标 / 下载图标 / 开关）
   ===================================================================== */

/* 搜索框：聚焦时放大镜图标旋转 + 发光（Uiverse animated search） */
.group\/search svg,
.group\/search > svg {
  transition: transform .35s ease, color .2s ease;
}
.group\/search:focus-within svg {
  transform: rotate(90deg) scale(1.2);
  color: #f04494 !important;
}

/* 搜索框 hover：边框微光 */
.group\/search:hover .liquid-input {
  border-color: rgba(240, 68, 148, .35) !important;
}

/* 下载链接按钮：hover 图标缩放 + 光晕 */
.liquid-glass-static button svg,
.liquid-glass button svg {
  transition: transform .25s ease;
}
.liquid-glass-static:hover button svg,
.liquid-glass:hover button svg {
  transform: scale(1.15);
}
.liquid-glass-static button .rounded-lg,
.liquid-glass button .rounded-lg {
  transition: box-shadow .25s ease, transform .25s ease;
}
.liquid-glass-static:hover button .rounded-lg,
.liquid-glass:hover button .rounded-lg {
  box-shadow: 0 0 14px rgba(240, 68, 148, .3);
}

/* 下载链接整行 hover：左移微动 */
.liquid-glass-static:hover button,
.liquid-glass:hover button {
  padding-left: 1.25rem !important;
}

/* 图标按钮（点赞/收藏/分享等）：hover 弹跳 */
button:has(> svg):active svg {
  transform: scale(.85);
}

/* 开关/状态徽章：发光（注册开关等） */
.bg-green-500\/15, .bg-red-500\/15 {
  transition: box-shadow .25s ease;
}
.bg-green-500\/15:hover, .bg-red-500\/15:hover {
  box-shadow: 0 0 12px rgba(240, 68, 148, .2);
}

/* =====================================================================
   Uiverse 三件套：玻璃输入框 / 底部导航发光 / 签到按钮发光
   ===================================================================== */

/* 1. 登录注册输入框：玻璃拟态 + 聚焦发光 + 标签浮动交互 */
input.border-gray-800 {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transition: all .25s ease;
}
input.border-gray-800:focus {
  background: rgba(240, 68, 148, 0.05) !important;
  border-color: rgba(240, 68, 148, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(240, 68, 148, 0.12), 0 0 20px rgba(240, 68, 148, 0.18) !important;
}
input.border-gray-800:focus::placeholder {
  opacity: 0.45;
  transform: translateY(-2px);
}
input.border-gray-800::placeholder {
  transition: opacity .2s ease, transform .2s ease;
}
/* 标签：聚焦时浮动发光（floating label 交互） */
div:focus-within > label {
  color: #f56ab0 !important;
  transform: translateY(-1px);
  text-shadow: 0 0 8px rgba(240, 68, 148, 0.4);
}
div > label {
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease;
}

/* 2. 底部导航：选中项图标发光 */
nav .text-primary-400 svg,
.text-primary-400 svg {
  filter: drop-shadow(0 0 5px rgba(240, 68, 148, 0.65));
}

/* 3. 签到按钮：发光 + hover 上浮 */
button[class*="from-primary-600"] {
  box-shadow: 0 4px 16px rgba(240, 68, 148, 0.35) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
button[class*="from-primary-600"]:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(240, 68, 148, 0.5), 0 0 22px rgba(240, 68, 148, 0.3) !important;
}

/* ===== 内嵌浮动标签（Uiverse floating label） ===== */
.floating-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: var(--text-secondary, #9ca3af);
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 10;
  letter-spacing: .02em;
}
div:focus-within > .floating-label,
div:has(input:not(:placeholder-shown)) > .floating-label,
div:has(input:-webkit-autofill) > .floating-label,
div:has(input:autofill) > .floating-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #f56ab0;
  background: #0a0a0c;
  padding: 0 6px;
  left: 12px;
  letter-spacing: .05em;
}
/* placeholder 透明（label 替代提示） */
.placeholder-transparent::placeholder {
  color: transparent !important;
}

/* ===== 陀螺加载器（Uiverse Peg Top Loader） ===== */
.loader {
  --fill-color: #f56ab0;
  --shine-color: rgba(245, 106, 176, 0.22);
  width: 100px;
  height: 100px;
  position: relative;
  filter: drop-shadow(0 0 10px var(--shine-color));
}
.loader #pegtopone {
  position: absolute;
  inset: 0;
  animation: flowe-one 1s linear infinite;
}
.loader #pegtoptwo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0) translateY(-200px) translateX(-100px);
  animation: flowe-two 1s linear infinite;
  animation-delay: 0.3s;
}
.loader #pegtopthree {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0) translateY(-200px) translateX(100px);
  animation: flowe-three 1s linear infinite;
  animation-delay: 0.6s;
}
.loader svg path {
  fill: var(--fill-color);
}
@keyframes flowe-one {
  0% { transform: scale(0.5) translateY(-200px); opacity: 0; }
  25% { transform: scale(0.75) translateY(-100px); opacity: 1; }
  50% { transform: scale(1) translateY(0px); opacity: 1; }
  75% { transform: scale(0.5) translateY(50px); opacity: 1; }
  100% { transform: scale(0) translateY(100px); opacity: 0; }
}
@keyframes flowe-two {
  0% { transform: scale(0.5) rotateZ(-10deg) translateY(-200px) translateX(-100px); opacity: 0; }
  25% { transform: scale(1) rotateZ(-5deg) translateY(-100px) translateX(-50px); opacity: 1; }
  50% { transform: scale(1) rotateZ(0deg) translateY(0px) translateX(-25px); opacity: 1; }
  75% { transform: scale(0.5) rotateZ(5deg) translateY(50px) translateX(0px); opacity: 1; }
  100% { transform: scale(0) rotateZ(10deg) translateY(100px) translateX(25px); opacity: 0; }
}
@keyframes flowe-three {
  0% { transform: scale(0.5) rotateZ(10deg) translateY(-200px) translateX(100px); opacity: 0; }
  25% { transform: scale(1) rotateZ(5deg) translateY(-100px) translateX(50px); opacity: 1; }
  50% { transform: scale(1) rotateZ(0deg) translateY(0px) translateX(25px); opacity: 1; }
  75% { transform: scale(0.5) rotateZ(-5deg) translateY(50px) translateX(0px); opacity: 1; }
  100% { transform: scale(0) rotateZ(-10deg) translateY(100px) translateX(-25px); opacity: 0; }
}