/* === 全局变量 (可选, 方便JS操作) === */
:root {
    --background-blur: 0px;
    --mask-color-r: 0;
    --mask-color-g: 0;
    --mask-color-b: 0;
    --mask-opacity: 0.2; /* 初始遮罩不透明度 */
}

/* 基本重置和全局设置 */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 使用系统默认字体 */
    display: flex;
    flex-direction: column; /* 垂直排列内容 */
    min-height: 100vh; /* 确保body至少占满整个视窗高度 */
    /* background-color: #f4f4f4; /* 可选：设置背景色 */
    color: #333; /* 默认文字颜色 */
    position: relative; /* 为 z-index 创建堆叠上下文 */
}

/* 主要内容容器 */
.container {
    max-width: 1280px; /* 最大宽度 */
    /* min-width: 640px; */
    width: 90%;        /* 在最大最小宽度之间，宽度为90% */
    margin: 40px auto; /* 上下边距20px，左右自动（实现水平居中）*/
    padding: 0px;     /* 容器内边距 */
    background-color: transparent; /* 给内容区一个半透明背景，以便看清文字 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：添加阴影 */
    text-align: center; /* 内部文本和内联元素居中 */
    flex-grow: 1;      /* 让内容区域占据可用空间，将footer推到底部 */
    flex-shrink: 0;
    position: relative; /* 确保 z-index 生效，或直接设置 z-index */
    overflow: hidden; /* 重要：确保模糊效果不会溢出容器边界 */
    border-radius: 8px; /* 给容器加个圆角，背景也会有圆角效果 */
    z-index: 1;
}

.container-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://myhkw.cn/open/img/bing');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(var(--background-blur));
    z-index: 1; /* 在 .container 内部堆叠 */
    transition: filter 0.2s ease-out;
    border-radius: inherit; /* 继承父容器的圆角 */
}

.container-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--mask-color-r), var(--mask-color-g), var(--mask-color-b), var(--mask-opacity));
    z-index: 2; /* 在背景之上 */
    transition: background-color 0.2s ease-out;
    border-radius: inherit; /* 继承父容器的圆角 */
}

.container-content {
    position: relative; /* 确保在遮罩之上 */
    z-index: 3;
    padding: 40px; /* 将原来的 .container padding 移到这里 */
    color: #fff; /* 假设背景较暗，文字用白色，具体根据背景调整 */
    /* 为了更好的可读性，可以给文字加轻微阴影 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* 调整内容区 h1 的颜色，确保在各种背景下可见 */
.container-content h1 {
    color: #ffffff; /* 或一个明亮的颜色 */
    /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

/* Logo样式 */
#logo {
    max-width: 200px; /* 可根据需要调整Logo最大宽度 */
    height: auto;     /* 高度自动，保持比例 */
    margin-bottom: 20px; /* Logo下方的间距 */
}


/* 底部样式 */
footer {
    /* max-width: 1280px; /* 最大宽度 */
    width: 100%; /* 宽度占满父元素（这里是body） */
    margin: 20px auto;
    padding: 20px 0; /* 上下内边距 */
    text-align: center; /* 文本居中 */
    font-size: 0.9em;   /* 稍小字体 */
    color: #666;       /* 稍浅文字颜色 */
    background-color: rgba(255, 255, 255, 0.3); /* 页脚也给个半透明背景 */
    border-top: 1px solid rgba(221, 221, 221, 0.3);
    color: #555; /* 页脚文字颜色 */
    margin-top: auto; /* 关键：将页脚推到 flex 容器的底部 */
    /* flex-grow: 1;      /* 让内容区域占据可用空间，将footer推到底部 */
    /* flex-shrink: 0; */
    position: relative; /* 确保 z-index 生效，或直接设置 z-index */
    z-index: 1;
}

/* 底部链接样式 */
footer a {
    color: #337ab7; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    margin: 0 5px; /* 链接左右外边距 */
    display: inline-block;
    vertical-align: middle;
}


/* 公安备案图标样式 */
.police-icon {
    height: 16px; /* 图标高度 */
    width: auto;  /* 宽度自动 */
    vertical-align: middle; /* 垂直居中对齐 */
    /* margin-bottom: 2px; /* 微调垂直对齐 */
    /* margin-right: 1px;
}

/* 公安备案链接整体（可选，用于微调） */
.police-link {
    display: inline-flex; /* 使用flex布局使图标和文字垂直对齐更方便 */
    align-items: center; /* 垂直居中对齐flex项目 */
    vertical-align: middle;
}

/* 控制面板样式 */
#controls-panel {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0; /* 内部元素自己控制 padding */
    border-radius: 50%; /* 初始是圆形图标 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 10;
    color: #333;
    overflow: hidden; /* 重要：配合展开动画 */
    transition: all 0.3s ease-in-out; /* 平滑过渡 */
    width: 48px; /* 图标大小 + padding */
    height: 48px; /* 图标大小 + padding */
    display: flex; /* 用于居中图标 */
    align-items: center;
    justify-content: center;
}

#controls-icon-wrapper {
    cursor: pointer;
    padding: 12px; /* 让图标居中并有点击区域 */
    font-size: 24px; /* 图标大小 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#controls-options {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
/* expanded 状态下显示，恢复交互 */
#controls-panel.expanded #controls-options {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* 控制面板展开后的样式 */
#controls-panel.expanded {
    width: auto; /* 自动宽度 */
    height: auto; /* 自动高度 */
    border-radius: 8px; /* 展开后变方形 */
    padding: 0; /* 因为选项有自己的 padding */
    align-items: flex-start; /* 展开后内容靠上 */
    justify-content: flex-start;
}
#controls-panel.expanded #controls-icon-wrapper {
    display: none;  /* 可以选择隐藏图标或保留 */
    padding: 10px 15px;
    border-bottom: 1px solid #eee; /* 图标和选项之间的分隔 */
    width: auto; /* 让其内容决定宽度 */
    height: auto;
}

#controls-panel label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
}
#controls-panel div > div { /* 指 specific option divs */
    margin-bottom: 10px;
}
#controls-panel div > div:last-child {
    margin-bottom: 0;
}
#controls-panel input[type="range"] {
    width: 180px;
    vertical-align: middle;
}
#controls-panel input[type="color"] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    vertical-align: middle;
    cursor: pointer;
}
#controls-panel span {
    display: inline-block;
    min-width: 25px; /* 给数值显示留出空间 */
    font-weight: bold;
}


/* 响应式调整：当屏幕宽度小于等于 768px 时 (平板和手机) */
@media (max-width: 768px) {
    .container-content {
        width: 95%;   /* 在中等屏幕上，使用更宽的百分比 */
	padding: 15px;
	/* 如果希望在中等屏幕也调整背景透明度 */
        /* background-color: rgba(255, 255, 255, 0.9); */
    }
    /* 在小屏幕上可以适当调整字体大小 */
    .container-content h1 {
        font-size: 1.5em;
    }
    footer {
        font-size: 0.8em;
	/* 如果希望在中等屏幕也调整背景透明度 */
        /* background-color: rgba(238, 238, 238, 0.9); */
    }
    /* 如果需要在768px下调整控制面板，可以在这里添加 #controls-panel 的样式 */
    /* 通常控制面板的较大调整会在更小的屏幕上，如下面的 640px */
}

/* 当屏幕宽度小于等于 640px 时 (主要是手机) */
@media (max-width: 640px) {
    .container-content {
        padding: 20px; /* 左右内边距可以更小 */
    }

    #logo {
        max-width: 140px; /* 进一步缩小 logo */
    }

    .container-content h1 {
        font-size: 1.4em; /* 手机上的标题字体 */
        margin-bottom: 25px;
    }

    footer {
        padding: 15px 0;
        font-size: 0.6em; /* 手机上的页脚字体 */
	background-color: rgba(238, 238, 238, 0.9);
    }

    /* 让页脚链接垂直堆叠 */
    footer a {
        display: block;    /* 每个链接占据一行 */
        margin: 8px auto;  /* 上下外边距增加间距，左右自动保持居中 */
        padding: 5px 0;    /* 增加点击区域 */
    }

    #controls-panel, #controls-panel.expanded {
        /* 在小屏幕上，即使展开也可能需要优化宽度 */
        max-width: calc(100vw - 20px); /* 减去左右边距 */
        /* left: 10px;
        bottom: 10px;
        right: 10px;
        width: auto; */
    }
    #controls-panel input[type="range"] {
        width: 150px;
    }

    /* 如果使用了 .police-link 的 flex 布局，通常在 display:block 后无需更改，它内部依然生效 */
    /* .police-link { } */
}