/* ====== 主题色变量 ====== */
:root{
  --bg-color:#fff0f6;
  --dot-color:#ffc1d8;
  --primary-color:#d64878;
  --accent-color:#f48fb1;
  --card-border:#ffe0ec;
  --modal-head-color:#d64878;
}

/* ====== 主题：粉色（默认） ====== */
body.theme-pink{
  --bg-color:#fff0f6;
  --dot-color:#ffc1d8;
  --primary-color:#d64878;
  --accent-color:#f48fb1;
  --card-border:#ffe0ec;
  --modal-head-color:#d64878;
}

/* ====== 主题：蓝色 ====== */
body.theme-blue{
  --bg-color:#e6f7ff;
  --dot-color:#91d5ff;
  --primary-color:#1890ff;
  --accent-color:#69c0ff;
  --card-border:#bae7ff;
  --modal-head-color:#1890ff;
}

/* ====== 主题：黄色 ====== */
body.theme-yellow{
  --bg-color:#fffbe6;
  --dot-color:#ffe58f;
  --primary-color:#d48806;
  --accent-color:#ffd666;
  --card-border:#fff1b8;
  --modal-head-color:#d48806;
}

/* ====== 主题：绿色 ====== */
body.theme-green{
  --bg-color:#f6ffed;
  --dot-color:#b7eb8f;
  --primary-color:#52c41a;
  --accent-color:#95de64;
  --card-border:#d9f7be;
  --modal-head-color:#52c41a;
}

/* ====== 基础重置 ====== */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}

body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  /* 波点背景，颜色由主题变量控制 */
  background-color:var(--bg-color);
  background-image:
    radial-gradient(var(--dot-color) 15%,transparent 16%),
    radial-gradient(var(--dot-color) 15%,transparent 16%);
  background-size:28px 28px;
  background-position:0 0,14px 14px;
  color:#333;
  padding:14px;
  min-height:100vh;
  transition:background-color 0.4s ease;
}

/* ====== 容器 ====== */
.wrap{max-width:1000px;margin:0 auto;}

/* ====== 头部 ====== */
header{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-bottom:14px;
  position:relative;
}
h1{
  font-size:24px;color:var(--primary-color);font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,0.08);
  white-space:nowrap;
}
.stats{
  display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;
  font-size:15px;color:#666;
}
.stats span{white-space:nowrap;}
.stats b{color:var(--primary-color);font-size:17px;}

/* ====== 设置图标 ====== */
.settings-icon{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;
  border-radius:50%;
  background:rgba(255,255,255,0.7);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  transition:transform 0.3s,background 0.3s;
  user-select:none;
  flex-shrink:0;
}
.settings-icon:hover{
  transform:rotate(90deg) scale(1.1);
  background:rgba(255,255,255,0.9);
}
.settings-icon:active{transform:rotate(90deg) scale(0.95);}

/* ====== 设置栏 ====== */
.settings-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
  background:rgba(255,255,255,0.7);
  border-radius:12px;padding:10px 12px;margin-bottom:10px;
  backdrop-filter:blur(4px);
}
.setting-group{
  display:flex;flex-direction:column;gap:3px;
}
.setting-group label{
  font-size:12px;color:#999;font-weight:600;
}
.setting-group select{
  padding:6px 10px;font-size:13px;border:2px solid var(--card-border);
  border-radius:8px;background:#fff;color:#555;cursor:pointer;
  outline:none;transition:border-color 0.2s;
}
.setting-group select:hover{border-color:var(--accent-color);}
.setting-group select:focus{border-color:#4295ff;}

/* ====== 按钮通用 ====== */
button{
  padding:8px 14px;font-size:14px;font-weight:600;
  border:none;border-radius:10px;cursor:pointer;
  transition:all 0.2s;white-space:nowrap;
}
button:active{transform:scale(0.96);}

.btn-error{background:#ff9800;color:#fff;}
.btn-error:hover{background:#f57c00;}

/* ====== 模式切换栏 ====== */
.mode-bar{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;
}
.mode-btn{
  background:#fff;color:#888;border:2px solid var(--card-border);
}
.mode-btn:hover{border-color:var(--accent-color);color:var(--primary-color);}
.mode-btn.active{
  background:linear-gradient(135deg,var(--accent-color),var(--primary-color));
  color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

/* ====== 控制栏 ====== */
.control-bar{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;
}
.btn-pause{background:#4dd0e1;color:#fff;}
.btn-pause:hover{background:#26c6da;}
.btn-pause.paused{background:#ffa726;}
.btn-reset{background:var(--accent-color);color:#fff;}
.btn-reset:hover{opacity:0.85;}

/* ====== 信息面板 ====== */
.info-panel{
  background:rgba(255,255,255,0.6);
  border-radius:10px;padding:10px 14px;margin-bottom:14px;
  font-size:13px;color:#888;line-height:1.6;
  border-left:4px solid var(--accent-color);
}

/* ====== 游戏面板 ====== */
#board{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;
  margin-bottom:20px;
}

/* ====== 卡片 ====== */
.card{
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  min-height:96px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  transition:transform 0.2s,box-shadow 0.2s;
  border:2px solid rgba(255,255,255,0.5);
  text-align:center;padding:8px;
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}
/* 音标卡片 */
.card.phon-card{
  font-size:30px;font-weight:700;color:#444;
  font-family:"Segoe UI","Charis SIL","Doulos SIL",serif;
}
/* 口诀卡片 */
.card.mn-card{
  font-size:14px;color:#555;line-height:1.5;
  font-weight:600;
}
/* 选中状态 */
.card.selected{
  background:#ffe872 !important;
  border-color:#ffc107;
  transform:scale(1.06);
  box-shadow:0 4px 14px rgba(255,193,7,0.45);
  animation:selectPulse 0.8s ease infinite alternate;
}
@keyframes selectPulse{
  from{box-shadow:0 4px 14px rgba(255,193,7,0.35);}
  to{box-shadow:0 4px 20px rgba(255,193,7,0.6);}
}
/* 错误状态 — 红色提示 + 抖动动画 */
.card.error{
  background:#ff6b6b !important;
  color:#fff !important;
  border-color:#e03131;
  animation:shake 0.5s ease;
}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  15%{transform:translateX(-10px) rotate(-2deg);}
  30%{transform:translateX(10px) rotate(2deg);}
  45%{transform:translateX(-8px) rotate(-1deg);}
  60%{transform:translateX(8px) rotate(1deg);}
  75%{transform:translateX(-5px);}
  90%{transform:translateX(5px);}
}
/* 配对成功 — 消除动画 */
.card.matched{
  animation:matchFade 0.55s ease forwards;
  pointer-events:none;
}
@keyframes matchFade{
  0%{transform:scale(1);opacity:1;}
  40%{transform:scale(1.18);opacity:1;
       box-shadow:0 0 24px rgba(76,175,80,0.6);}
  100%{transform:scale(0);opacity:0;}
}
/* 已消除（隐藏） */
.card.hidden{
  visibility:hidden;pointer-events:none;
}

/* ====== 模态框 ====== */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.4);
  display:none;align-items:center;justify-content:center;
  z-index:100;
  animation:modalBgFade 0.3s ease;
}
.modal.show{display:flex;}
@keyframes modalBgFade{
  from{opacity:0;}to{opacity:1;}
}
.modal-box{
  background:#fff;border-radius:18px;padding:30px 36px;
  text-align:center;max-width:90vw;
  box-shadow:0 10px 40px rgba(0,0,0,0.2);
  animation:modalPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalPop{
  from{transform:scale(0.7);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.modal-box h2{font-size:22px;color:var(--modal-head-color);margin-bottom:12px;}
.modal-box h3{font-size:18px;color:#555;margin-bottom:14px;}
.modal-box p{font-size:16px;color:#666;margin-bottom:8px;line-height:1.6;}
.modal-box .btn-row{
  display:flex;gap:10px;justify-content:center;margin-top:18px;
}
.btn-primary{background:#4295ff;color:#fff;padding:10px 24px;}
.btn-primary:hover{background:#2b7cd3;}
.btn-secondary{background:#e0e0e0;color:#666;padding:10px 20px;}
.btn-secondary:hover{background:#bdbdbd;}

#errorList{
  margin:12px 0;max-height:300px;overflow-y:auto;
  text-align:left;font-size:14px;color:#555;line-height:2;
}
#errorList .err-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 12px;border-radius:8px;margin-bottom:4px;
  background:#fff5f5;
}
#errorList .err-item .phon{
  font-size:20px;font-weight:700;color:var(--primary-color);
  font-family:"Segoe UI","Charis SIL",serif;
}
#errorList .err-item .count{color:#e03131;font-weight:600;}
#errorList .empty{text-align:center;color:#bbb;padding:20px 0;}

/* ====== 设置弹窗专用样式 ====== */
#settingsModal .modal-box{
  width:90%;
  max-width:420px;
  max-height:85vh;
  overflow-y:auto;
  text-align:left;
  padding:28px 30px;
  position:relative;
}
#settingsModal .modal-box h2{
  text-align:center;
  margin-bottom:20px;
}

/* 右上角关闭按钮 */
.modal-close{
  position:absolute;
  top:12px;right:14px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#ccc;cursor:pointer;
  border-radius:50%;transition:all 0.2s;
  user-select:none;line-height:1;
  z-index:10;
}
.modal-close:hover{
  color:#4295ff;
  background:rgba(66,149,255,0.1);
  transform:scale(1.15);
}
.modal-close:active{transform:scale(0.9);}

/* 底部提示文字 */
.modal-hint{
  text-align:center;
  font-size:12px;color:#bbb;
  margin-top:14px;margin-bottom:0;
}

/* 开关组件 */
.toggle-switch{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;
}
.toggle-switch input{
  display:none;
}
.toggle-slider{
  width:46px;height:26px;
  background:#e0e0e0;border-radius:13px;
  position:relative;transition:background 0.3s;
  flex-shrink:0;
}
.toggle-slider::after{
  content:'';
  width:20px;height:20px;
  background:#fff;border-radius:50%;
  position:absolute;top:3px;left:3px;
  transition:transform 0.3s;
  box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider{
  background:var(--primary-color,#4295ff);
}
.toggle-switch input:checked + .toggle-slider::after{
  transform:translateX(20px);
}
.toggle-label-text{
  font-size:14px;color:#555;font-weight:600;
}
.setting-item{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid #f0f0f0;
}
.setting-item:last-of-type{
  border-bottom:none;
  margin-bottom:12px;
}
.setting-item h4{
  font-size:16px;color:#333;margin-bottom:6px;font-weight:700;
  display:flex;align-items:center;gap:6px;
}
.setting-item .setting-desc{
  font-size:12px;color:#999;line-height:1.6;margin-bottom:12px;
  background:#fafafa;border-radius:8px;padding:8px 12px;
}
.setting-item .setting-desc b{color:#666;}

/* 主题色选择器 */
.color-options{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;
}
.color-option{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
}
.color-circle{
  width:40px;height:40px;border-radius:50%;
  border:3px solid transparent;
  transition:transform 0.2s,border-color 0.2s;
  position:relative;
}
.color-circle:hover{transform:scale(1.15);}
.color-option.active .color-circle{
  border-color:#4295ff;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #4295ff;
}
.color-option .color-label{
  font-size:11px;color:#999;font-weight:600;
}
.color-option.active .color-label{color:#4295ff;}

/* 各主题色圆形预览 */
.color-circle[data-theme="pink"]{
  background-color:#fff0f6;
  background-image:
    radial-gradient(#ffc1d8 15%,transparent 16%),
    radial-gradient(#ffc1d8 15%,transparent 16%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
}
.color-circle[data-theme="blue"]{
  background-color:#e6f7ff;
  background-image:
    radial-gradient(#91d5ff 15%,transparent 16%),
    radial-gradient(#91d5ff 15%,transparent 16%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
}
.color-circle[data-theme="yellow"]{
  background-color:#fffbe6;
  background-image:
    radial-gradient(#ffe58f 15%,transparent 16%),
    radial-gradient(#ffe58f 15%,transparent 16%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
}
.color-circle[data-theme="green"]{
  background-color:#f6ffed;
  background-image:
    radial-gradient(#b7eb8f 15%,transparent 16%),
    radial-gradient(#b7eb8f 15%,transparent 16%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
}

/* 重置按钮专用 */
.btn-danger{
  background:#ff6b6b;color:#fff;padding:10px 20px;
}
.btn-danger:hover{background:#e03131;}

/* 图片预览弹窗 */
#imagePreviewModal .modal-box{
  position:relative;
}
#imagePreviewContainer img{
  width:100%;max-width:100%;
  border-radius:10px;
  border:1px solid #f0f0f0;
  -webkit-touch-callout:default;
  -webkit-user-select:auto;
  user-select:auto;
  pointer-events:auto;
}
#imagePreviewContainer img:hover{
  cursor:grab;
}

/* ====== Toast 提示 ====== */
#toast{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.8);
  background:rgba(0,0,0,0.75);color:#fff;
  padding:14px 28px;border-radius:12px;font-size:16px;
  z-index:200;opacity:0;pointer-events:none;
  transition:opacity 0.3s,transform 0.3s;
  white-space:nowrap;
}
#toast.show{
  opacity:1;transform:translate(-50%,-50%) scale(1);
}
#toast.success{background:rgba(76,175,80,0.9);}
#toast.error{background:rgba(224,49,49,0.9);}

/* ====== 进度条 ====== */
.progress-bar{
  height:8px;background:var(--card-border);border-radius:4px;
  margin-bottom:14px;overflow:hidden;
}
.progress-fill{
  height:100%;background:linear-gradient(90deg,var(--accent-color),#4295ff);
  border-radius:4px;transition:width 0.4s ease;width:0%;
}

/* ====== 响应式 ====== */
@media(max-width:600px){
  body{padding:10px;}
  h1{font-size:18px;}
  #board{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px;}
  .card{min-height:80px;}
  .card.phon-card{font-size:24px;}
  .card.mn-card{font-size:12px;}
  .stats{font-size:13px;gap:10px;margin-left:0;width:100%;}
  .settings-bar{gap:6px;padding:8px;}
  .setting-group select{font-size:12px;padding:5px 8px;}
  .settings-icon{width:32px;height:32px;font-size:18px;}
  #settingsModal .modal-box{padding:20px 18px;max-height:80vh;}
  .color-options{gap:10px;}
  .color-circle{width:34px;height:34px;}
  .setting-item h4{font-size:14px;}
  .setting-item .setting-desc{font-size:11px;padding:6px 10px;}
  .toggle-label-text{font-size:13px;}
  #errorModal .modal-box{min-width:auto !important;width:92%;}
}

@media(max-width:380px){
  #settingsModal .modal-box{padding:16px 14px;max-height:78vh;}
  .color-options{gap:8px;}
  .color-circle{width:30px;height:30px;}
  .color-option .color-label{font-size:10px;}
  .modal-box h2{font-size:18px;}
  .modal-box h3{font-size:16px;}
}

@media(min-width:601px) and (max-width:900px){
  #settingsModal .modal-box{max-width:380px;}
}