:root{
  --bg:#e8eaf6;
  --panel:#ffffff;
  --muted:#6c7a92;
  --primary:#5e35b1;
  --primary-hover:#4527a0;
  --secondary:#7e57c2;
  --border:#d0d7de;
  --border-subtle:#e8e8f0;
  --shadow:0 2px 8px rgba(94,53,177,0.1);
  --shadow-lg:0 8px 24px rgba(94,53,177,0.15);
  --text-primary:#1f2328;
  --text-secondary:#656d76;
  --success:#1a7f37;
  --radius:12px;
  --card-bg:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow-x:hidden;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text-primary);margin:0;line-height:1.6;font-size:14px}

#main-container{display:flex;flex-direction:column;min-height:100vh;}

/* 顶部标题区域 - 使用banner1.png图片 */
#site-header{
  display:flex;
  justify-content:center;
  align-items:center;
  background:var(--bg);
  padding:0;
  margin:0;
  line-height:0;
}
.banner-img{
  display:block;
  width:100%;
  max-width:860px;
  height:auto;
  margin:0;
  padding:0;
}
.header-content{max-width:860px;margin:0 auto;}
.site-title{font-size:48px;font-weight:700;margin:0 0 12px 0;letter-spacing:-0.5px;text-shadow:0 2px 12px rgba(0,0,0,0.2);}
.site-subtitle{font-size:18px;margin:0 0 24px 0;opacity:0.95;font-weight:400;}
.header-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:24px;}
.user-badge{background:rgba(255,255,255,0.2);padding:8px 16px;border-radius:20px;font-size:14px;color:#fff;backdrop-filter:blur(10px);height:32px;display:flex;align-items:center;box-sizing:border-box;}
.btn-primary{padding:8px 18px;border-radius:25px;border:none;background:#fff;color:var(--primary);cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s;box-shadow:0 4px 12px rgba(0,0,0,0.15);height:32px;display:inline-flex;align-items:center;box-sizing:border-box;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2);}
.btn-secondary{padding:8px 18px;border-radius:25px;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s;height:32px;display:inline-flex;align-items:center;box-sizing:border-box;}
.btn-secondary:hover{background:rgba(255,255,255,0.15);}

#main-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  padding:16px 32px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:none;
  border-radius:16px;
  margin:12px auto;
  width:100%;
  max-width:860px;
  box-shadow:0 2px 12px rgba(94,53,177,0.08), 0 0 0 1px rgba(94,53,177,0.05);
  transition:all 0.3s ease;
  box-sizing:border-box;
}
.nav-content{display:flex;gap:4px;align-items:center;width:100%;max-width:860px;margin:0 auto;}
.nav-btn{padding:10px 20px;border-radius:var(--radius);border:none;background:transparent;color:var(--text-primary);cursor:pointer;transition:all 0.2s ease;font-size:14px;font-weight:600;position:relative;}
.nav-btn:hover{background:var(--border-subtle);color:var(--primary);}
.nav-btn.active{color:#fff;background:var(--primary);box-shadow:0 2px 8px rgba(94,53,177,0.3);}

/* 导航栏用户操作区域 */
.nav-user-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.nav-user-menu{position:relative;z-index:200;}
/* 确保导航栏不裁剪下拉菜单 */
#main-nav{overflow:visible!important;}
.nav-content{overflow:visible!important;}
.nav-user-actions{overflow:visible!important;}
.nav-user-menu{overflow:visible!important;}
.nav-user-badge{padding:6px 14px;border-radius:var(--radius);font-size:13px;color:var(--text-primary);background:var(--bg);border:1px solid var(--border-subtle);font-weight:500;display:flex;align-items:center;height:36px;box-sizing:border-box;transition:all 0.2s;}
.nav-user-badge:hover{background:var(--border-subtle);border-color:var(--border);}
.nav-user-badge svg{opacity:0.6;transition:transform 0.2s;}
.nav-user-badge.active svg{transform:rotate(180deg);}
.nav-btn-auth{padding:6px 16px;border-radius:var(--radius);border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s;height:36px;display:inline-flex;align-items:center;box-sizing:border-box;}
.nav-btn-auth:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 2px 8px rgba(94,53,177,0.3);}

/* 用户下拉菜单 */
.user-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:180px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  padding:8px 0;
  z-index:2000;
  overflow:visible;
  max-height:none;
}
.dropdown-item{width:100%;padding:10px 16px;border:none;background:transparent;color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:10px;text-align:left;}
.dropdown-item:hover{background:var(--bg);color:var(--primary);}
.dropdown-item svg{opacity:0.7;flex-shrink:0;}
.dropdown-item:hover svg{opacity:1;}
.dropdown-item-danger{color:var(--text-secondary);}
.dropdown-item-danger:hover{background:rgba(255,107,107,0.1);color:#ff6b6b;}
.dropdown-divider{height:1px;background:var(--border-subtle);margin:8px 0;}

#game-container{display:none;max-width:860px;margin:0 auto;}
#game-container.active{display:block;}

/* 游戏容器内的content-area样式 */
#game-container .content-area{padding:24px 32px;}

/* 游戏信息卡片 */
#game-info-card{background:var(--card-bg);border-radius:var(--radius);padding:24px;margin-bottom:20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--border-subtle);}
.info-group{display:flex;align-items:center;gap:12px;flex:1;min-width:150px;}
.info-icon{font-size:24px;}
.info-label{font-size:13px;color:var(--text-secondary);font-weight:500;}
.info-value{font-size:20px;font-weight:700;color:var(--primary);}
.info-divider{width:1px;height:40px;background:var(--border-subtle);}
.info-actions{display:flex;gap:12px;margin-left:auto;}
#game-info-card .btn-primary{padding:10px 20px;border-radius:var(--radius);background:var(--primary);color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;text-align:center;}
#game-info-card .btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
#game-info-card .btn-secondary{padding:10px 20px;border-radius:var(--radius);background:#fff;color:var(--primary);border:2px solid var(--primary);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;}
#game-info-card .btn-secondary:hover{background:var(--primary);color:#fff;}
#game-info-card .btn-secondary:disabled,
#game-info-card .btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

/* 游戏配置卡片 */
#game-config-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:20px;border:1px solid var(--border-subtle);}
.config-row{display:flex;flex-direction:column;gap:8px;}
.config-row label{font-size:13px;font-weight:600;color:var(--text-secondary);}
.config-row select{
  padding:10px 14px;
  border-radius:var(--radius);
  border:2px solid var(--border-subtle);
  background:#fff;
  color:var(--text-primary);
  font-size:14px;
  cursor:pointer;
  transition:all 0.2s;
  font-weight:500;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}
.config-row select:hover{border-color:var(--primary);background-color:#fafbfc;}
.config-row select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(94,53,177,0.1);}

/* 下拉框选项样式优化 */
.config-row select optgroup{
  font-weight:700;
  font-size:13px;
  color:var(--text-primary);
  background:#f6f8fa;
  padding:8px 0;
  font-style:normal;
}
.config-row select option{
  padding:8px 12px;
  font-weight:500;
  color:var(--text-primary);
  background:#fff;
}
.config-row select option:hover,
.config-row select option:focus{
  background:linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
  color:var(--primary);
}
.config-row select option:checked{
  background:linear-gradient(135deg, rgba(102,126,234,0.15) 0%, rgba(118,75,162,0.15) 100%);
  color:var(--primary);
  font-weight:600;
}



.page-container{padding:0;max-width:860px;margin:0 auto;width:100%;}
.content-area{background:#fff;padding:24px 32px;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);width:100%;}
.content-area h2{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 24px 0;padding-bottom:16px;border-bottom:1px solid var(--border-subtle);}
.content-area h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:24px 0 16px 0;}

#heatmap-container{margin-bottom:32px;padding:24px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border-subtle);}
#heatmap-container h3{margin-top:0;color:var(--text-primary);font-size:16px;font-weight:600;}
#heatmap-wrapper{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:auto;}
#heatmap-months{position:relative;height:16px;margin-bottom:6px;}
.heatmap-month{font-size:11px;color:var(--text-secondary);font-weight:500;}
#heatmap-grid{display:flex;gap:3px;}
.heatmap-weeks{display:flex;gap:3px;}
.heatmap-week{display:flex;flex-direction:column;gap:3px;}
.heatmap-day{width:11px;height:11px;border-radius:2px;cursor:pointer;border:1px solid rgba(27,31,36,0.06);}
.heatmap-day[data-level="0"]{background-color:#ebedf0;}
.heatmap-day[data-level="1"]{background-color:#9be9a8;}
.heatmap-day[data-level="2"]{background-color:#40c463;}
.heatmap-day[data-level="3"]{background-color:#30a14e;}
.heatmap-day[data-level="4"]{background-color:#216e39;}
.heatmap-day:hover{border:1px solid rgba(27,31,36,0.3);}
.heatmap-day-placeholder{visibility:hidden;}
.heatmap-month-separator{width:8px;display:flex;flex-direction:column;gap:3px;}
#heatmap-tooltip{position:fixed;background:rgba(27,31,36,0.9);color:#fff;padding:8px 12px;border-radius:var(--radius);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.15s;z-index:1000;box-shadow:var(--shadow-lg);}
#heatmap-legend{display:flex;align-items:center;margin-top:16px;font-size:11px;color:var(--text-secondary);}
#heatmap-legend-levels{display:flex;gap:3px;margin-left:8px;}

#other-stats{margin-top:32px;}
#user-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;}
.stat-item{background:var(--bg);padding:20px;border-radius:var(--radius);text-align:center;border:1px solid var(--border-subtle);transition:all 0.15s;}
.stat-item:hover{border-color:var(--border);box-shadow:var(--shadow);transform:translateY(-2px);}
.stat-value{font-size:32px;font-weight:700;color:var(--primary);margin-bottom:8px;}
.stat-label{font-size:13px;color:var(--text-secondary);font-weight:500;}

/* 游戏画布包装器 */
#phaser-game-wrapper{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;}

/* 游戏画布顶部栏 */
.game-canvas-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%);gap:20px;}

/* 时间进度条 */
.time-progress-wrapper{flex:1;max-width:400px;}
.time-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.time-progress-label{font-size:13px;font-weight:600;color:var(--text-secondary);}
.time-progress-text{font-size:13px;font-weight:600;color:var(--primary);}
.time-progress-bar{height:8px;background:var(--border-subtle);border-radius:20px;overflow:hidden;position:relative;}
.time-progress-fill{height:100%;background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);border-radius:20px;transition:width 0.3s linear;box-shadow:0 0 10px rgba(94,53,177,0.3);}

/* 游戏操作按钮 */
.game-actions{display:flex;gap:8px;}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border-subtle);background:#fff;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.icon-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow);}
.icon-btn:active{transform:translateY(0);}

/* 游戏画布主体 */
#phaser-game{display:flex;justify-content:center;align-items:center;padding:24px;background:linear-gradient(135deg, rgba(102,126,234,0.02) 0%, rgba(118,75,162,0.02) 100%);min-height:400px;position:relative;}
#phaser-game::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, rgba(94,53,177,0.03) 0%, transparent 70%);pointer-events:none;}

/* 游戏棋盘 */
.game-board{display:grid;gap:12px;position:relative;z-index:1;padding:20px;}

/* 游戏卡片 */
.game-card{background:#fff;border-radius:var(--radius);padding:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80px;border:2px solid var(--border-subtle);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(94,53,177,0.08);}
.game-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg, transparent 0%, rgba(94,53,177,0.03) 100%);opacity:0;transition:opacity 0.3s;}
.game-card:hover::before{opacity:1;}
.game-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(94,53,177,0.15);border-color:var(--primary);}
.game-card.selected{border-color:var(--primary);background:linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);transform:scale(1.05);box-shadow:0 8px 24px rgba(94,53,177,0.2);}
.game-card.matched{animation:cardMatch 0.6s ease-out forwards;pointer-events:none;}
.game-card.wrong{animation:cardShake 0.5s ease-out;}

/* 卡片内容 */
.card-lang{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;margin-bottom:4px;}
.card-text{font-size:18px;font-weight:700;color:var(--text-primary);text-align:center;line-height:1.3;word-break:break-word;overflow-wrap:break-word;}
.game-card[data-lang="zh"] .card-text{color:var(--primary);font-size:20px;}
.game-card[data-lang="en"] .card-text{color:var(--secondary);font-size:16px;}

/* 卡片动画 */
@keyframes cardMatch{
  0%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.2);opacity:0.8;}
  100%{transform:scale(0);opacity:0;}
}
@keyframes cardShake{
  0%,100%{transform:translateX(0);}
  10%,30%,50%,70%,90%{transform:translateX(-8px);}
  20%,40%,60%,80%{transform:translateX(8px);}
}
@keyframes cardFlip{
  0%{transform:rotateY(0);}
  50%{transform:rotateY(90deg);}
  100%{transform:rotateY(0);}
}

/* 成功特效 */
.success-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--primary);pointer-events:none;z-index:10;animation:particleFloat 1s ease-out forwards;}
@keyframes particleFloat{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0;}
}

/* 游戏画布底部栏 */
.game-canvas-footer{padding:12px 20px;background:rgba(94,53,177,0.03);}
.game-tips{display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-secondary);}
.game-tips svg{flex-shrink:0;opacity:0.7;}

/* 移动端适配 */
@media (max-width:768px){
  body{font-size:13px;}
  #main-nav{
    padding:12px 16px;
    gap:6px;
    overflow:visible;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    margin:8px 12px;
    border-radius:12px;
  }
  .nav-content{max-width:100%;overflow-x:auto;}
  .nav-btn{padding:8px 14px;font-size:13px;white-space:nowrap;}
  .nav-user-actions{gap:6px;overflow:visible;}
  .nav-user-badge{font-size:12px;padding:5px 10px;height:32px;}
  .nav-btn-auth{padding:5px 12px;font-size:12px;height:32px;}
  .user-dropdown{min-width:160px;}
  .dropdown-item{padding:2px 12px;font-size:12px;}
  #game-container,
  .page-container{padding:0;max-width:100%;}
  #game-container .content-area{padding:16px;}
  #game-info-card{padding:16px;gap:16px;}
  .info-group{min-width:120px;}
  .info-icon{font-size:20px;}
  .info-value{font-size:18px;}
  .info-divider{display:none;}
  .info-actions{width:100%;margin-left:0;}
  #game-info-card .btn-primary,
  #game-info-card .btn-secondary{flex:1;padding:10px 16px;}
  #game-config-card{grid-template-columns:1fr;gap:16px;padding:16px;}
  .game-canvas-header{padding:12px 16px;}
  .icon-btn{width:28px;height:28px;}
  .icon-btn svg{width:14px;height:14px;}
  #phaser-game{padding:16px;min-height:300px;}
  .game-board{gap:8px;padding:12px;}
  .game-card{min-height:60px;padding:10px;}
  .card-text{font-size:15px;line-height:1.2;}
  .game-card[data-lang="zh"] .card-text{font-size:17px;}
  .game-card[data-lang="en"] .card-text{font-size:13px;}
  .game-canvas-footer{padding:10px 16px;}
  .game-tips{font-size:12px;}
  .game-tips svg{width:12px;height:12px;}
  .content-area{padding:16px;}
  .content-area h2{font-size:20px;margin-bottom:20px;}
  .content-area h3{font-size:16px;margin:20px 0 12px 0;}
  #heatmap-container{padding:16px;margin-bottom:20px;}
  #heatmap-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px;}
  #heatmap-day{width:10px;height:10px;}
  #user-stats{grid-template-columns:repeat(2,1fr);gap:12px;}
  .stat-item{padding:16px;}
  .stat-value{font-size:24px;}
  .rules-card{width:95vw!important;max-height:80vh;}
}

@media (max-width:480px){
  .banner-img{max-width:100%;}
  #main-nav{
    padding:10px 12px;
    gap:4px;
    margin:6px 0;
    border-radius:10px;
    overflow:visible;
  }
  .nav-content{max-width:100%;overflow-x:auto;}
  .nav-btn{padding:6px 12px;font-size:12px;}
  .nav-user-actions{gap:4px;overflow:visible;}
  .nav-user-badge{font-size:11px;padding:4px 8px;height:28px;}
  .nav-btn-auth{padding:4px 10px;font-size:11px;height:28px;}
  .user-dropdown{min-width:140px;right:0;}
  .dropdown-item{padding:2px 12px;font-size:11px;gap:8px;}
  #game-container,
  .page-container{padding:0;max-width:100%;}
  #game-container .content-area{padding:12px;}
  #game-info-card{padding:12px;gap:12px;}
  .info-group{flex:1 1 100%;min-width:auto;}
  .info-actions{flex-direction:column;}
  #game-info-card .btn-primary,
  #game-info-card .btn-secondary{width:100%;}
  .game-canvas-header{padding:10px 12px;}
  .game-actions{gap:6px;}
  .icon-btn{width:26px;height:26px;}
  .icon-btn svg{width:12px;height:12px;}
  #phaser-game{padding:2px;min-height:250px;}
  .game-board{gap:3px;padding:8px;}
  .game-card{min-height:50px;padding:8px;}
  .card-lang{font-size:9px;}
  .card-text{font-size:13px;line-height:1.2;}
  .game-card[data-lang="zh"] .card-text{font-size:15px;}
  .game-card[data-lang="en"] .card-text{font-size:11px;}
  .game-canvas-footer{padding:8px 12px;}
  .game-tips{font-size:11px;}
  .game-tips span{font-size:11px;}
  .content-area{padding:12px;}
  .content-area h2{font-size:18px;}
  .content-area h3{font-size:15px;}
  .rules-card{padding:12px;}
  .rules-header{padding:12px 16px;}
  .rules-header strong{font-size:14px;}
  .rules-body{padding:12px 16px;}
  .rules-list li{padding:10px 12px;gap:8px;font-size:13px;margin:12px 0;}
  .rule-icon{font-size:18px;}
  .rule-label{font-size:13px;}
  #user-stats{grid-template-columns:1fr;}
  #heatmap-grid{gap:2px;}
  .heatmap-week{gap:2px;}
  .heatmap-month{font-size:10px;}
  #heatmap-legend{font-size:10px;}
  /* 成就弹窗移动端适配 */
  #achievement-unlock-modal > div{padding:24px 20px;max-width:85vw;}
  #achievement-unlock-modal .modal-title{font-size:18px;margin-bottom:20px;}
  #achievement-unlock-modal img{width:180px!important;height:180px!important;}
  #achievement-unlock-content > div > div:first-child{font-size:16px!important;margin-bottom:20px!important;}
  #achievement-unlock-content button{padding:10px 24px!important;font-size:14px!important;}
  #achievement-unlock-close{top:12px;right:12px;width:32px;height:32px;font-size:20px;}
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .nav-btn:active{background:var(--border);}
  #game-toolbar button:active{transform:scale(0.95);}
  .stat-item:active{transform:translateY(0);}
}

/* 滚动条样式 */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--border-subtle);border-radius:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-secondary);}

.rules-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
.rules-backdrop{position:absolute;inset:0;background:rgba(27,31,36,0.5);}
.rules-card{position:relative;z-index:1000;width:min(680px,90vw);max-height:75vh;overflow:auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.rules-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-subtle);}
.rules-header strong{font-size:16px;font-weight:600;color:var(--text-primary);}
.rules-close{padding:6px;border-radius:var(--radius);border:1px solid var(--border);background:#fff;color:var(--text-secondary);cursor:pointer;font-size:20px;line-height:1;transition:all 0.15s;}
.rules-close:hover{background:var(--border-subtle);color:var(--text-primary);}
.rules-body{padding:20px 24px;}
.rules-list{margin:0;padding:0;list-style:none;color:var(--text-primary);}
.rules-list li{margin:16px 0;padding:12px 16px;background:linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%);border-radius:var(--radius);border-left:3px solid var(--primary);display:flex;align-items:flex-start;gap:12px;line-height:1.6;transition:all 0.2s;}
.rules-list li:hover{background:linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);transform:translateX(4px);}
.rule-icon{font-size:20px;line-height:1;flex-shrink:0;}
.rule-label{font-weight:600;color:var(--primary);flex-shrink:0;}
#auth-modal .rules-card{width:min(400px,90vw);}
#auth-modal input{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border);font-size:14px;transition:all 0.15s;}
#auth-modal input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(9,105,218,0.1);}
#auth-modal button{padding:10px 16px;border-radius:var(--radius);font-size:14px;font-weight:600;transition:all 0.15s;cursor:pointer;}
#auth-modal button[style*="linear-gradient"]{background:var(--primary)!important;border:1px solid var(--primary)!important;}
#auth-modal button[style*="linear-gradient"]:hover{background:var(--primary-hover)!important;}

/* 成就解锁弹窗样式 */
#achievement-unlock-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;background:rgba(27,31,36,0.85);backdrop-filter:blur(8px);}
#achievement-unlock-modal > div{background:#fff;border-radius:16px;padding:56px 48px;box-shadow:0 20px 60px rgba(0,0,0,0.25);text-align:center;max-width:min(90vw, 900px);position:relative;border:1px solid rgba(102,126,234,0.1);}
#achievement-unlock-modal .modal-title{font-size:28px;font-weight:700;color:#1f2328;margin-bottom:40px;letter-spacing:-0.3px;}
#achievement-unlock-modal img{width:300px;height:300px;max-width:100%;}
#achievement-unlock-content > div > div:first-child{font-size:32px;}
#achievement-unlock-close{position:absolute;top:24px;right:24px;background:rgba(0,0,0,0.04);border:none;font-size:24px;color:#57606a;cursor:pointer;line-height:1;padding:8px;width:40px;height:40px;border-radius:8px;transition:all 0.2s;}
#achievement-unlock-close:hover{background:rgba(0,0,0,0.08)!important;color:#24292f!important;}

/* 重新开始确认弹窗样式 */
#restart-confirm-close:hover{background:rgba(0,0,0,0.08)!important;color:#24292f!important;}
#restart-cancel:hover{background:#f6f8fa;border-color:#afb8c1;}
#restart-confirm:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(102,126,234,0.4);background:linear-gradient(135deg,#5a6fd8 0%,#6a4192 100%);}