/* --- 字体定义 (使用国内镜像) --- */
@import url('https://fonts.font.im/css2?family=ZCOOL+KuaiLe&display=swap');

@font-face {
  font-family: "Alimama Dongfang Dakai";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/5IXJQJ8nRXPo/UXxc9c91xKXt.woff2") format("woff2"),
       url("//at.alicdn.com/wf/webfont/5IXJQJ8nRXPo/Dx14YCZ1YBxF.woff") format("woff");
  font-display: swap;
}

/* --- 全局样式 & 变量 --- */
:root {
    --primary-color: #ff8c69; /* 活泼的橙色 */
    --secondary-color: #69c0ff; /* 天蓝色 */
    --success-color: #52c41a; /* 成功绿 */
    --error-color: #f5222d; /* 错误红 */
    --font-system: "ZCOOL KuaiLe", cursive; /* 系统/UI可爱字体 */
    --font-game: "Alimama Dongfang Dakai", sans-serif; /* 游戏卡片字体 */
    --radius-l: 25px; /* 调整了圆角值 */
    --radius-m: 15px; /* 调整了圆角值 */
    --shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    --text-dark: #333;
    --text-light: #555;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-system);
    margin: 0; padding: 15px;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-dark);
}

/* --- [代码新增] 背景模糊效果 --- */
body::before {
    content: '';          /* 伪元素必须有 content 属性 */
    position: fixed;      /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;          /* 将其置于所有内容的后面 */
    
    /* 继承 body 上的内联背景图样式 (关键) */
    background: inherit; 
    
    /* 应用模糊效果，您可以调整这个值 */
    filter: blur(8px);
    
    /* 稍微放大以防止模糊后因边缘效应出现白边 */
    transform: scale(1.05); 
}


/* --- Logo和页面包裹容器 --- */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.page-logo {
    width: 600px; /* 确保基础宽度至少为600px */
    max-width: 90%; /* 在小屏幕上响应式缩放 */
    height: auto; /* 保持图片原始宽高比 */
    margin-bottom: 25px; /* logo与下方内容卡片的间距 */
}


.hidden { display: none !important; }

/* --- 登录/注册/弹窗通用 --- */
.auth-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 30px 40px; border-radius: var(--radius-l);
    box-shadow: var(--shadow); width: 100%; max-width: 620px;
    text-align: center; position: relative;
}
.auth-container h2 {
    color: var(--primary-color);
    margin: 0 0 25px; font-size: 2.5em;
}
.auth-container input {
    width: 100%; padding: 12px 15px; margin-bottom: 15px;
    border: 2px solid var(--secondary-color);
    border-radius: var(--radius-m);
    font-family: sans-serif; font-size: 1.1em;
    outline: none; transition: all 0.3s;
}
.auth-container input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(255, 140, 105, 0.5);
}
.auth-container .form-link { margin-top: 20px; margin-bottom: 0; } /* 修正了marginBottom */
.auth-container a { color: var(--primary-color); text-decoration: none; font-weight: bold; }
.auth-message { /* 重命名 .auth-message */
    margin-top: 15px;
    padding: 12px; border-radius: var(--radius-m);
    font-size: 1.1em; color: white;
    display: none;
}
.auth-message.error { background-color: var(--error-color); }
.auth-message.success { background-color: var(--success-color); }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 2em; background: none; border: none; cursor: pointer; color: #aaa; } /* 新增 */


/* --- [美化开始] 新增的游戏化动画 --- */
@keyframes bounce-in {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes star-sparkle {
    0%, 100% { transform: scale(1); text-shadow: 0 0 5px #fff; }
    50% { transform: scale(1.2) rotate(15deg); text-shadow: 0 0 15px #ffd700; }
}
@keyframes icon-wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}


/* --- Lobby v3 (Gamified Design) --- */
.lobby-container-v3 {
    width: 100%; max-width: 950px; padding: 25px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-l);
    border: 3px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1), 0 0 20px rgba(105, 192, 255, 0.3); /* 增加了蓝色光晕 */
}

/* --- [MODIFIED] 头部布局修改 --- */
.lobby-header-v3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 修改为两端对齐 */
    gap: 20px;
    align-items: center;
    margin-bottom: 30px;
}

/* --- [MODIFIED] 新增左右容器 --- */
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* 在空间不足时换行 */
}

/* 头部面板增加交互效果 */
.user-panel {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    padding: 8px 15px 8px 8px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text-dark);
    /* [REMOVED] animation: subtle-float 5s ease-in-out infinite; */ /* 去掉悬浮动画 */
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 增加弹性过渡 */
}
a.user-panel:hover {
    transform: scale(1.1); /* 悬浮时放大 */
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
a.user-panel:hover svg, .user-panel:hover svg {
    fill: #fff;
    animation: icon-wiggle 0.5s ease-in-out; /* 增加图标摆动动画 */
}

/* --- [MODIFIED] 头像增加根据性别变化的边框 --- */
.user-panel .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid; /* 预设边框样式 */
    object-fit: cover; /* 确保图片不变形 */
    border-color: var(--secondary-color); /* 默认为蓝色 (对应 male.jpg) */
}

.user-panel .avatar.avatar-female {
    border-color: #ff85a2; /* 女性头像 (female.jpg) 为粉红色 */
}

.user-panel .username { font-size: 1.4em; font-weight: bold; padding-right: 15px; }

/* 积分星星增加闪烁动画 */
.avatar-placeholder {
    width: 50px; height: 50px;
    border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    font-size: 2em;
    background-color: transparent; /* [MODIFIED] 去掉背景颜色 */
}
.user-panel svg {
    width: 30px; height: 30px;
    fill: var(--text-dark);
    margin-left: 10px;
    transition: fill 0.2s ease;
}

/* --- 游戏卡片游戏化 --- */
.game-selection-container-v3 {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 25px; margin-bottom: 30px;
    perspective: 1000px; /* 为3D效果增加透视 */
}
.game-card-v3 {
    position: relative; aspect-ratio: 4 / 3;
    border-radius: var(--radius-m); overflow: hidden;
    box-shadow: var(--shadow); cursor: pointer;
    transition: all 0.3s ease;
    transform-style: preserve-3d; /* 开启3D变换 */
    opacity: 0; /* 初始隐藏，为入场动画准备 */
    animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    border: 4px solid white;
}
/* 卡片错开入场 */
.game-card-v3:nth-child(1) { animation-delay: 0.2s; }
.game-card-v3:nth-child(2) { animation-delay: 0.4s; }
.game-card-v3:nth-child(3) { animation-delay: 0.6s; }

.game-card-v3:hover {
    transform: scale(1.05) rotateY(10deg) rotateX(5deg); /* 增加3D倾斜效果 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.game-card-v3 .bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 0.4s ease;
}
.game-card-v3:hover .bg { transform: scale(1.1); }
.game-card-v3 .title {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 54%) 30%, transparent);
    color: #fff; padding: 20px 15px 10px;
    text-shadow: 1px 1px 3px #000;
    font-family: var(--font-game); /* 使用游戏字体 */
    font-size: 1.3em; /* 增大字体 */
    text-align: center;
    transform: translateY(100%); /* 初始状态在卡片外 */
    opacity: 0;
    transition: all 0.4s ease;
}
.game-card-v3:hover .title {
    transform: translateY(0); /* 悬浮时滑入 */
    opacity: 1;
}

/* --- 底部按钮游戏化 --- */
.lobby-footer-v3 { display: flex; justify-content: center; gap: 20px; }
.footer-button {
    background: #fff; border-radius: var(--radius-m);
    padding: 15px 25px; text-decoration: none;
    color: var(--text-dark); font-size: 1.2em;
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow);
    border-bottom: 4px solid rgba(0,0,0,0.2); /* 增加3D厚度感 */
    /* [REMOVED] animation: subtle-float 4.5s ease-in-out infinite; */ /* 去掉悬浮动画 */
    transition: all 0.2s ease-out;
}
.footer-button:hover {
    transform: translateY(-5px) scale(1.05);
    background: var(--secondary-color); color: #fff;
    border-bottom-width: 2px;
}
.footer-button:active {
    transform: translateY(1px) scale(1);
    border-bottom-width: 0;
}
.footer-button:hover .icon {
    animation: icon-wiggle 0.5s ease-in-out; /* 图标摆动 */
}
.footer-button .icon { font-size: 1.5em; transition: transform 0.3s; }
/* --- [美化结束] --- */


/* --- 以下为其他页面所需的原始样式，已完整保留 --- */

/* 原有的points-panel, nav-panel等样式保留，供给其他页面使用 */
.points-panel { background: linear-gradient(135deg, #ffd700, #ffb347); color: #fff; padding: 10px; border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center; gap: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: var(--shadow); }
.points-panel .icon { font-size: 2em; }
.points-panel .text { text-align: left; }
.points-panel .value { font-size: 1.6em; font-weight: bold; display: block; line-height: 1; }
.points-panel .label { font-size: 0.9em; opacity: 0.9; }
.nav-panel { display: flex; gap: 10px; justify-content: flex-end; }
.nav-panel .nav-button { background: #fff; padding: 10px 15px; border-radius: var(--radius-m); text-decoration: none; color: var(--text-dark); font-size: 1em; box-shadow: var(--shadow); transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nav-panel .nav-button:hover { transform: translateY(-3px); background: var(--primary-color); color: #fff; }
.nav-panel .nav-button svg { width: 24px; height: 24px; fill: currentColor; }

/* --- 游戏大厅 (UI重构 - 最终版) --- */
/* 001中已包含的Lobby样式，此处不做重复添加，保持001的最终状态 */
/* .lobby-container-v2 { ... } */
/* .lobby-header-final-v2 { ... } */
/* .user-info-box { ... } */
/* ... (其他 .lobby-container-v2 相关的样式) ... */


/* --- 会员中心 UI 重构 --- */
.member-wrapper { width: 100%; max-width: 800px; background: rgba(255, 255, 255, 0.97); padding: 30px; border-radius: var(--radius-l); box-shadow: var(--shadow); }
.member-header { text-align: center; margin-bottom: 30px; }
.member-header h2 { font-size: 2.8em; color: var(--primary-color); margin: 0; }
.member-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; text-align: left; }
.member-card { background: #fff; padding: 25px; border-radius: var(--radius-m); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 1.1em; color: var(--text-light); }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-family: sans-serif; font-size: 1em;}
.avatar-selection { display: flex; gap: 15px; align-items: center; }
.avatar-option { width: 60px; height: 60px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.3s; }
.avatar-option.selected { border-color: var(--primary-color); transform: scale(1.1); box-shadow: 0 0 10px rgba(255, 140, 105, 0.7); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; text-align: center; margin-bottom: 20px;}
.stat-item { background: #f0f8ff; padding: 15px; border-radius: var(--radius-m); }
.stat-item .label { font-size: clamp(0.9rem, 2.5vw, 1rem); color: var(--text-light); white-space: nowrap;}
.stat-item .value { font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--primary-color); font-weight: bold; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; margin-top: 10px;}
.invite-code-box { background: #fffaf0; padding: 15px; border-radius: var(--radius-m); text-align: center; border: 1px dashed var(--primary-color); }
.invite-code-box .label { margin-bottom: 5px; font-size: 1.1em; }
.invite-code-box .value { font-size: 1.8em; letter-spacing: 3px; font-weight: bold; color: var(--primary-color); user-select: all; }
.invite-code-box .description { font-size: 0.9em; color: var(--text-light); margin-top: 10px;}
.member-footer { text-align: center; margin-top: 30px; display: flex; gap: 15px; justify-content: center; }


/* --- 游戏通用头部 --- */
.game-wrapper {
    width: min(1400px, 98vw);
    height: 95vh;
    max-height: 900px;
    background: rgba(240, 248, 255, 0.95);
    border-radius: var(--radius-l); padding: 20px;
    box-shadow: var(--shadow); display: flex; flex-direction: column;
    overflow: hidden;
}

/* --- 游戏头部 (保留了原始的防iPad换行逻辑，并集成了下拉菜单) --- */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px);
    padding-bottom: 15px;
    border-bottom: 3px dashed var(--secondary-color);
    margin-bottom: 15px;
    flex-shrink: 0;
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 20px); /* 内部间距也自适应 */
    min-width: 0; /* 允许flex子元素在空间不足时收缩 */
}

/* 新增：用户下拉菜单 */
.user-dropdown {
    position: relative;
    cursor: pointer;
    min-width: 0;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1em, 1.8vw, 1.2em);
}
.user-info img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    flex-shrink: 0; /* 头像不允许收缩 */
}
.user-info .username {
    white-space: nowrap; /* 防止用户名过长时换行 */
    overflow: hidden; /* 隐藏超出的部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 150px; /* 给一个最大宽度，防止挤压其他元素 */
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: var(--radius-m);
    padding: 5px 0;
    margin-top: 8px;
}
.dropdown-content a {
    color: var(--text-dark);
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 1.1em;
}
.dropdown-content a:hover { background-color: #f1f1f1; }
.user-dropdown:hover .dropdown-content { display: block; }

/* 游戏数据 (保留原始逻辑) */
.game-stats {
    display: flex;
    gap: clamp(8px, 1.2vw, 15px);
}
/* 修正了.stat-item的命名为.stat-box */
.stat-box {
    font-size: clamp(1.1em, 2vw, 1.4em); /* 字体大小自适应 */
    background: #fff;
    padding: 5px clamp(8px, 1.5vw, 15px); /* 内边距自适应 */
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    white-space: nowrap;
}
/* 数字和文字大小一致 */
.stat-box span span { font-weight: bold; } /* 修正了.game-stats span span */

/* 修正了音量控制的结构 */
.volume-control-group { display: flex; gap: 10px; } /* 新增 */
.volume-control {
    display: flex;
    align-items: center;
    gap: 5px; /* 调整了gap */
    background: #fff;
    padding: 5px;
    border-radius: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.volume-control .vol-icon { /* 新增 */
    width: 24px; height: 24px; fill: var(--secondary-color);
}
.volume-control input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 80px; background: transparent; cursor: pointer; /* 添加cursor */
}
.volume-control input[type=range]::-webkit-slider-runnable-track { height: 8px; background: #ccebff; border-radius: 5px; }
.volume-control input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; height: 16px; width: 16px; background: var(--secondary-color); border-radius: 50%; }


/* --- 连连看游戏 --- */
#game-board-container {
    flex-grow: 1; position: relative;
    display: flex; justify-content: center; align-items: center;
    min-height: 0;
}
#game-board-overlay {
    position: absolute; inset: 0; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    background: rgba(240, 248, 255, 0.7);
    transition: opacity 0.5s, visibility 0.5s;
}
#game-board-overlay.hidden { opacity: 0; visibility: hidden; }

#game-board {
    display: none; grid-template-columns: repeat(9, 1fr);
    gap: clamp(5px, 1.2vw, 12px);
    padding: 10px; width: 100%; max-height: 100%;
}

.tile {
    aspect-ratio: 1 / 1;
    background: linear-gradient(145deg, #ffffff, #e6f7ff);
    border: 3px solid var(--secondary-color);
    border-radius: var(--radius-m);
    box-shadow: 0 4px 6px rgba(105, 192, 255, 0.2);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; user-select: none;
    transition: all 0.2s ease-in-out;
    position: relative;
}
.tile .pinyin {
    font-family: sans-serif;
    font-size: clamp(12px, 1.8vw, 18px); /* 保持与成语游戏一致 */
    color: var(--text-light);
    line-height: 1.2;
}
.tile .char {
    font-family: var(--font-game);
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1.2;
    color: var(--text-dark);
}
.tile:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(105, 192, 255, 0.3); }
.tile.selected {
    background: #ffe4b5;
    transform: scale(1.08) translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 15px rgba(255, 140, 105, 0.4);
}
.tile.matched { visibility: hidden; }
.tile.eliminating { animation: disappear-effect 0.5s forwards; }

/* --- 按钮 (美化) --- */
.btn {
    background: var(--primary-color); color: white; border: none;
    padding: 10px 24px; border-radius: 30px;
    font-family: var(--font-system); font-size: 1.2em;
    cursor: pointer; transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-bottom: 4px solid #d2691e;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(1px); border-bottom-width: 2px; }
.btn.btn-large { font-size: 2em; padding: 18px 40px; border-radius: 50px; }
.btn.btn-secondary { background-color: var(--secondary-color); border-bottom-color: #4682B4;}
.btn.btn-secondary1 { background-color: var(--primary-color); border-bottom-color: #d2691e;}
.btn svg { width: 1.4em; height: 1.4em; fill: currentColor; }
.btn:disabled { background-color: #ccc; border-bottom-color: #999; cursor: not-allowed; } /* 新增 */


/* --- 模态框 (Modal) --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.visible { opacity: 1; visibility: visible; }
.modal-content {
    background: white; padding: 40px;
    border-radius: var(--radius-l); text-align: center;
    transform: scale(0.7); transition: transform 0.3s;
    width: 90%; max-width: 450px;
}
.modal-overlay.visible .modal-content { transform: scale(1); }
#level-up-modal .celebration {
    font-size: 4em; display: inline-block;
    animation: bounce-celebrate 1s ease-out;
}
/* 休息提醒模态框 */
#lock-modal .modal-content h3 { font-size: 1.8em; color: var(--primary-color); }
#lock-modal .modal-content p { font-size: 1.1em; color: var(--text-light); }
#lock-challenge { margin: 20px 0; font-size: 2.5em; font-family: 'Alimama Dongfang Dakai'; letter-spacing: 5px; }
#lock-input { width: 80%; padding: 10px; text-align: center; font-size: 1.2em; border-radius: var(--radius-m); border: 1px solid #ccc; margin-bottom: 15px;}
#lock-timer { margin-top: 15px; color: #888; }
/* AI模态框样式 */
#ai-image-modal .modal-content { width: 90%; max-width: 550px; }
#ai-modal-content { margin: 20px 0; min-height: 100px; display: flex; justify-content: center; align-items: center; }
#ai-modal-content img { max-width: 100%; border-radius: var(--radius-m); }
.spinner-large { border: 8px solid #f3f3f3; border-top: 8px solid var(--primary-color); border-radius: 50%; width: 80px; height: 80px; animation: spin 1s linear infinite; }


/* --- 更新：Toast 通知 (居中显示) --- */
#toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none; /* 允许点击穿透 */
}
.toast {
    pointer-events: all; /* toast自身可以响应事件 */
    padding: 15px 25px; border-radius: var(--radius-m);
    color: white; font-size: 1.2em; box-shadow: var(--shadow);
    transform: scale(0.8); opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: scale(1); opacity: 1; }
.toast.success { background-color: var(--success-color); }
.toast.error { background-color: var(--error-color); }
.toast svg { width: 24px; height: 24px; fill: white; }

/* --- 成语游戏 --- */
.idiom-game-container { max-width: 1200px; margin: auto; }
.idiom-game-main-vertical {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 15px;
}
#game-area-top-2-3 {
    flex-grow: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
}
#info-area-bottom-1-3 {
    flex-grow: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0;
        margin-bottom: -100px;
}
.info-box {
    display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.8);
    border: 2px solid #fff; padding: 15px; border-radius: var(--radius-m);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    height: 200px;
}
.info-box-title.with-speaker {
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0; margin: 0 0 10px;
}
.info-box-title span { font-size: 1.5em; color: var(--primary-color); }
.speaker-icon { width: 24px; height: 24px; fill: var(--secondary-color); cursor: pointer; transition: transform 0.2s; }
.speaker-icon:hover { transform: scale(1.1); }
.btn-small { font-size: 1em; padding: 5px 15px; border-bottom-width: 3px; width: auto; }
.info-box p {
    flex-grow: 1; margin: 0; font-family: sans-serif;
    line-height: 1.7; font-size: 1.1em; color: var(--text-light);
    overflow-y: auto;
    padding-right: 8px;
}
#idiom-container {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center;
    gap: 15px;
}
.idiom-card, .choice-btn {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    font-family: var(--font-game);
    background: #fff;
    border: 3px solid var(--secondary-color);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.idiom-card {
    width: clamp(70px, 10vw, 120px);
    height: clamp(70px, 10vw, 120px);
    font-size: clamp(2rem, 5vw, 4rem);
}
.choice-btn {
    width: clamp(70px, 10vw, 120px);
    height: clamp(70px, 10vw, 120px);
    font-size: clamp(2rem, 5vw, 4rem);
}
.idiom-card .pinyin, .choice-btn .pinyin {
    font-family: sans-serif;
    font-size: clamp(12px, 1.8vw, 18px);
    color: var(--text-light);
    height: 1.5em;
    line-height: 1.2;
}
.idiom-card .char { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
.choice-btn .char { font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
.idiom-card.blank { background: #ffe4b5; color: var(--primary-color); border-color: var(--primary-color); font-size: 3.5rem; }
#choices-container { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.choice-btn:hover:not(:disabled) { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.choice-btn.correct { border-color: #87e8de !important; background: #e6fffb !important; color: #006d75; }
.choice-btn.wrong { border-color: #ffccc7 !important; background: #fff1f0 !important; color: #a8071a; animation: shake-horizontal 0.5s; }
.tada-animation { animation: tada 1s; }
#ai-image-result img { width: 100%; border-radius: var(--radius-m); margin-top: 10px; }
.spinner-small { border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-color); border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }


/* --- 加减乘除游戏 --- */
.arithmetic-game-main { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; }
#question-visual { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 80px;}
.visual-item { font-size: clamp(2rem, 5vw, 3rem); animation: float 3s ease-in-out infinite; }
.visual-operator { font-size: clamp(2.5rem, 6vw, 4rem); color: var(--primary-color); }
#equation {text-align: center; margin-top: 20px; margin-bottom: 20px;font-weight: bold; font-family: var(--font-game); font-size: clamp(3rem, 10vw, 6rem); color: var(--text-dark); text-shadow: 2px 2px 5px rgba(0,0,0,0.1); }
.arithmetic-choice { font-size: clamp(1.5rem, 4vw, 3rem) !important; /* Larger font */ width: clamp(80px, 12vw, 150px); height: clamp(80px, 12vw, 150px); }
.arithmetic-choice.correct, .choice-btn.correct { border-color: #87e8de !important; background: #e6fffb !important; color: #006d75; }
.arithmetic-choice.wrong, .choice-btn.wrong { border-color: #ffccc7 !important; background: #fff1f0 !important; color: #a8071a; animation: shake-horizontal 0.5s; }
.progress-container { display: flex; align-items: center; gap: 8px; }
.progress-bar-bg { width: 120px; height: 12px; background: #e0e0e0; border-radius: 6px; overflow: hidden; }
#progress-bar { height: 100%; width: 0%; background: var(--success-color); border-radius: 6px; transition: width 0.5s; }


/* --- [MODIFIED] AI画廊 --- */
.gallery-container {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.gallery-header {
    color: white;
    margin-top: 10px;
    margin-bottom: 30px;
}
.gallery-header h1 {
    font-size: 3.5em;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
#gallery-grid {
    display: inline-block;
    text-align: left;
    
    /* [修改] 默认列数改为 5 */
    column-count: 5;
    column-gap: 20px;
}
.gallery-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    break-inside: avoid;
    box-shadow: var(--shadow);
    position: relative;
}
.gallery-card a.image-link {
    display: block;
    position: relative;
}
.gallery-card img {
    width: 100%;
    display: block;
}
.idiom-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 15px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, transparent);
    font-family: var(--font-game);
    font-size: 1.3em;
    color: white;
    text-shadow: 0 1px 3px black;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.card-info-bar {
    background: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-info-bar .user {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--text-light);
}
.card-info-bar .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.likes {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1em;
    color: var(--text-light);
}
.like-icon {
    width: 18px;
    height: 18px;
    fill: #ccc;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.like-icon.liked {
    fill: #ff4d4f;
    transform: scale(1.2);
}
#loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    color: white;
    font-size: 1.5em;
    padding: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.spinner {
    animation: rotate 2s linear infinite;
    width: 30px;
    height: 30px;
}
.spinner .path {
    stroke: #FFF;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

/* --- AI画廊详情页样式 (美化) --- */
.view-image-wrapper { max-width: 1200px; margin: 40px auto; padding: 20px; }
.back-to-gallery-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 1.2em; text-decoration: none; color: white; background: rgba(0,0,0,0.4); padding: 10px 20px; border-radius: 30px; margin-bottom: 20px; }
.back-to-gallery-btn svg { fill: #fff; width: 24px; height: 24px; }
.back-to-gallery-btn span { line-height: 1; }
.view-image-container-final { display: grid; grid-template-columns: 3fr 2fr; gap: 30px; align-items: flex-start; }
.image-display-panel-final { background: #fff; border-radius: var(--radius-l); padding: 15px; box-shadow: var(--shadow); }
.image-display-panel-final img { width: 100%; border-radius: var(--radius-m); }
.image-creator-info { text-align: center; padding: 10px 0; font-size: 1.1em; color: var(--text-light); }
.idiom-details-panel-final { display: flex; flex-direction: column; gap: 20px; }
.idiom-word-display-final { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; background: #fff; padding: 20px; border-radius: var(--radius-l); box-shadow: var(--shadow); }
.char-pinyin-card { background: linear-gradient(145deg, #e6f7ff, #ffffff); border: 2px solid var(--secondary-color); border-radius: var(--radius-m); padding: 10px; text-align: center; width: 85px;}
.char-pinyin-card .pinyin { font-size: 1em; color: var(--text-light); font-family: sans-serif; height: 1.2em; display: block;}
.char-pinyin-card .char { font-family: var(--font-game); font-size: 2.5em; }
.info-box-final { background: #fff; padding: 20px; border-radius: var(--radius-l); box-shadow: var(--shadow); }
.info-box-final.story-box { flex-grow: 1; display: flex; flex-direction: column; }
.info-box-final .info-box-title { color: var(--primary-color); font-size: 1.6em; margin: 0 0 10px; }
.info-box-final p { line-height: 1.8; font-family: sans-serif; }


/* --- 排行榜UI重构 (最终版) --- */
.ranking-container { position: relative; width: 100%; max-width: 800px; padding: 30px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-radius: 30px; text-align: center; border: 3px solid #fff; }
.ranking-title { font-size: 3em; color: var(--primary-color); margin: 0 0 30px; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 60px;}
.ranking-title svg { width: 1em; height: 1em; fill: currentColor; }
.back-to-lobby-btn { position: absolute; top: 39px; right: 30px; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin-bottom: 30px; }
.podium-item { display: flex; flex-direction: column; align-items: center; width: 140px; position: relative; }
.podium-item .avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.podium-item .username { font-size: 1.2em; font-weight: bold; }
.podium-item .points { font-size: 1.1em; color: var(--primary-color); font-weight: bold; }
.podium-rank { font-size: 1.8em; font-weight: bold; color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; margin-bottom: 10px; }
.first { order: 2; transform: translateY(-20px); }
.first .podium-rank { background: #FFD700; }
.first .avatar { width: 120px; height: 120px; border: 5px solid #FFD700; }
.second { order: 1; }
.second .podium-rank { background: #C0C0C0; }
.second .avatar { border: 5px solid #C0C0C0; }
.third { order: 3; }
.third .podium-rank { background: #CD7F32; }
.third .avatar { border: 5px solid #CD7F32; }
.crown { position: absolute; top: -35px; font-size: 3em; color: #FFD700; }
.ranking-list-container { background: rgba(255,255,255,0.7); border-radius: 20px; padding: 10px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.1); }
.ranking-list { max-height: 35vh; overflow-y: auto; padding-right: 5px; }
.list-item { display: grid; grid-template-columns: 50px 50px 1fr auto; align-items: center; gap: 15px; padding: 10px; background: #fff; border-radius: 10px; margin-bottom: 8px; }
.list-item .rank { font-size: 1.1em; color: var(--text-light); }
.list-item .avatar { width: 40px; height: 40px; border-radius: 50%; }
.list-item .username { text-align: left; font-weight: bold; }
.list-item .points { font-weight: bold; color: var(--primary-color); }
.list-item.current-user { background: #FFF4E8; border: 2px solid var(--primary-color); }


/* --- [MODIFIED] 响应式布局 --- */
@media (max-width: 1600px) {
    /* [修改] 屏幕小于1600px时，显示 4 列 */
    #gallery-grid { column-count: 4; }
}
@media (max-width: 1400px) {
    /* [修改] 屏幕小于1400px时，显示 3 列 */
    #gallery-grid { column-count: 3; }
}
@media (max-width: 1200px) {
    /* [修改] 屏幕小于1200px时，显示 3 列（保持不变） */
    #gallery-grid { column-count: 3; }
}
@media (max-width: 950px) {
    .game-selection-container-v3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: center; }
}
@media (max-width: 900px) {
    .view-image-container-final { grid-template-columns: 1fr; }
    .lobby-header-final-v2 { flex-direction: column; }
    .podium { transform: scale(0.9); }
    .back-to-lobby-btn { position: static; margin-top: 20px; }
}
@media (max-width: 768px) {
    body { padding: 10px; }
    .game-header { flex-wrap: wrap; justify-content: center; }
    .member-content { grid-template-columns: 1fr; }
    /* [修改] 屏幕小于768px时，显示 2 列 */
    #gallery-grid { column-count: 2; }
    #info-area-bottom-1-3 { grid-template-columns: 1fr; }
    .podium { flex-direction: column; align-items: center; }
    .first, .second, .third { order: 0; transform: none; margin-bottom: 15px; }
}
@media (max-width: 600px) {
    /* [修改] 屏幕小于600px时，显示 1 列 */
    #gallery-grid { column-count: 1; }
    .game-selection-container-v3 { grid-template-columns: 1fr; }
}

/* --- 全局动画 --- */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes disappear-effect { 0% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes bounce-celebrate { 0% { transform: scale(0.5); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} }
@keyframes shake-horizontal { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } }
@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }


/* --- [新增/修改] 您的特定需求样式 --- */

/* 新增：用于包裹标题右侧图标的容器 */
.title-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 修改：AI作画按钮美化 */
#ai-image-btn {
    background: linear-gradient(135deg, var(--primary-color), #ff6347);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* 新增：题目区域容器样式，用于对齐卡片和按钮 */
.idiom-question-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* 新增：朗读按钮样式 */
.read-aloud-button {
    padding: 8px 16px !important;
    font-size: 1.1em !important;
    background-color: var(--secondary-color) !important;
    border-bottom-color: #4682B4 !important;
    height: auto;
    min-height: 60px;
}

/* 新增：朗读按钮中的大喇叭图标样式 */
.read-aloud-button .speaker-icon-large {
    width: 32px;
    height: 32px;
    fill: white;
}