/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* 导航栏样式 */
nav {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: #333;
    color: white;
}

nav ul {
    display: flex;
    list-style: none;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0 1rem;
}

/* 头部标题块 */
/* 先确保已引入两个字体（之前的 @font-face 声明） */
@font-face {
    font-family: 'BonheurRoyale';
    src: url('./fonts/BonheurRoyale-Regular.ttf') format('truetype');
    font-weight: normal; /* 该字体通常只有常规字重 */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Baloo2';
    src: url('./fonts/Baloo2-VariableFont_wght.ttf') format('truetype');
    font-weight: normal; /* 可根据需求调整为 600（SemiBold）等 */
    font-style: normal;
    font-display: swap;
}

/* 垂直内容块：初始隐藏，视频结束后显示 */
.top-vstack {
    /* 初始隐藏 */
    display: none;
    /* 定位：覆盖在中间区域上方，垂直居中 */
    position: relative;
    top: 45px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40; /* 比静态容器（z-index:20）和控制按钮（z-index:30）高，确保可见 */
    /* 垂直居中布局 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* 元素之间的间距，可调整 */
}

/* 补充图标和文字的样式（确保显示效果） */
.vstack-icon {
    width: 50px; /* 图标大小，可调整 */
    height: auto;
   /* filter: drop-shadow(0 0 8px rgba(0,0,0,0.5)); /* 加阴影，增强辨识度 */
}

.vstack-text-1 {
    font-family: 'BonheurRoyale', cursive; /* 正确调用字体 */
    font-size: 18pt; /* 你要求的 24pt */
    color: #000; /* 黑色，可根据背景调整 */
    margin: 0;
    text-shadow: 0 0 4px rgba(255,255,255,0.8); /* 加文字阴影，避免和背景融合 */
}

.vstack-text-2 {
    font-family: 'Baloo2', sans-serif; /* 正确调用字体 */
    font-size: 18pt; 
    color: #ffd45d; /* 你指定的颜色 */
    margin: 0;
    text-decoration: none;
    border-radius: 8px;
      /* 关键：负margin往上移，数值可按需调整（如 -5px、-10px） */
    margin-top: -8px; /* 示例：往上移 8px，想再往上就改大负数值（如 -12px） */
    transition: all 0.3s; /*  hover 过渡效果 */
}

.vstack-text-2:hover {
     color: #ffc400; /*  hover 时颜色加深一点 */
    /* text-decoration: underline;  hover 时显示下划线 */
   /* background-color: rgba(0,0,0,0.9); /* hover 时加深背景 */
}

/* 控制按钮容器 */
.control-buttons {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 999;
}

/* 按钮基础样式 - liquid glass 效果，无边框 */
.control-btn, .barcode-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 0 !important; /* 强制移除边框 */
    outline: 0 !important; /* 移除焦点轮廓 */
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    box-shadow: none !important; /* 确保没有阴影模拟的边框 */
}

/* liquid glass 核心效果 */
.control-btn::before, .barcode-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(2px) saturate(180%);
    /*border: 1px solid rgba(255, 255, 255, 0.8);*/
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
                inset 0 4px 20px rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.control-btn::after, .barcode-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(1px);
    box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
                inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
    opacity: 0.6;
    z-index: -1;
    filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}

/* 按钮激活状态（前两个按钮） */
.control-btn.active::before {
    background: rgba(0, 0, 0, 0.3); /* 提高透明度让玻璃效果更深 */
    backdrop-filter: blur(6px) saturate(200%); /* 增加模糊度和饱和度 */
   /*  border-color: rgba(200, 200, 200, 0.6); */
}

.control-btn.active::after {
    opacity: 0.4;
    filter: blur(1px) drop-shadow(5px 2px 3px black) brightness(85%);
}

/* 点击反馈（第三个按钮） */
.barcode-btn:active::before {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(6px) saturate(200%);
  /*   border-color: rgba(200, 200, 200, 0.6); */
}

.barcode-btn:active::after {
    opacity: 0.4;
    filter: blur(1px) drop-shadow(5px 2px 3px black) brightness(85%);
}

/* 按钮图标样式 */
.btn-icon {
    width: 65%;
    height: 65%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* SVG 显示修复 */
svg {
    visibility: visible !important;
    opacity: 1 !important;
}

/* 循环视频初始状态 */
.loop-video {
    clip-path: none;
    opacity: 1;
}

/* 语言选择器 */
.language-dropdown {
    display: none; /* 默认隐藏 */
}
.language-dropdown.active {
    display: block; /* 激活后显示 */
}

/* 统一圆角 */
.rounded-img {
  border-radius: 100px; /* 统一圆角大小 */
}