/* =========================
   全局基础
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg-grad-a:#667eea;
  --bg-grad-b:#764ba2;
  --text-main:#333;
  --text-muted:#6c757d;
  --card:#ffffff;
  --card-weak:#f8f9fa;
  --border:#e9ecef;
  --border-weak:#dee2e6;
  --brand:#667eea;
  --ok:#28a745;
  --warn:#ffc107;
  --danger:#dc3545;
}

html, body { height: 100%; }

body{
  font-family:'Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;
  background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{ max-width:1200px; margin:0 auto; padding:20px; }

/* =========================
   头部
========================= */
.header{ text-align:center; color:#fff; }
.header h1{
  font-size:2.5rem; margin-bottom:10px;
  text-shadow:2px 2px 4px rgba(0,0,0,.3);
}
.subtitle{ font-size:1.1rem; opacity:.9; }

/* =========================
   主体壳与屏幕切换
========================= */
.main-content{
  background:var(--card);
  border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.1);
  overflow:hidden;
}
.screen{ display:none; padding:10px; min-height:500px; }
.screen.active{ display:block; }

/* =========================
   配置面板
========================= */
.config-panel{
  max-width:520px;
  margin:0 auto 40px;
  padding:30px;
  background:var(--card-weak);
  border-radius:15px;
  border:2px solid var(--border);
}
.config-panel h2{ text-align:center; margin-bottom:25px; color:#495057; }
.config-group{
  margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.config-group label{ font-weight:600; color:#495057; min-width:50px; }
.config-group select,
.config-group input[type="text"],
.config-group input[type="number"],
.config-group input[type="email"],
.config-group input[type="password"]{
  padding:10px 14px; border:2px solid var(--border-weak);
  border-radius:8px; font-size:16px; background:#fff; min-width:170px;
  transition:border-color .25s;
}
.config-group select:focus, .config-group input:focus{ outline:none; border-color:var(--brand); }
.config-group input[type="checkbox"], .config-group input[type="radio"]{
  width:16px; height:16px; margin:0; padding:0; appearance:auto;
}

.checkbox-group{ display:flex; gap:8px; flex-wrap:nowrap; width:fit-content; margin-left:auto; }
.checkbox-item{
  display:flex; align-items:center; gap:4px; cursor:pointer; padding:4px 8px;
  background:#f8f9fa; border-radius:6px; border:1px solid var(--border-weak);
  transition:all .2s ease;
}
.checkbox-item:hover{ background:#eef2ff; border-color:var(--brand); }
.checkbox-item span{ font-weight:500; color:#495057; white-space:nowrap; }

/* 启动按钮 */
#start-btn{ display:block; margin:28px auto 0; padding:14px 40px; font-size:18px; }

/* =========================
   历史成绩面板（记录）
========================= */
.history-panel{
  max-width:520px; margin:0 auto; padding:20px;
  background:var(--card-weak); border-radius:15px; border:2px solid var(--border);
}
.history-panel h3{ text-align:center; margin-bottom:14px; color:#495057; }
#history-list{ display:grid; gap:10px; }

.best-scores-section{
  padding:15px;
  background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%);
  border-radius:12px; color:#fff;
}
.best-scores-section h4{ margin:0 0 12px 0; text-align:center; font-size:16px; font-weight:600; }
.best-score-item{ background:rgba(255,255,255,.12); border-radius:8px; padding:12px; margin-bottom:10px; backdrop-filter:blur(10px); }
.best-score-header{ font-weight:600; margin-bottom:6px; text-align:center; font-size:14px; }
.best-score-details{ display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:12px; opacity:.95; }
.best-score-date{ text-align:center; font-size:11px; opacity:.8; font-style:italic; }

.recent-history-section h4{ margin:10px 0 6px; color:#495057; font-size:14px; text-align:center; }
.history-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; background:#fff; border-radius:8px; border:1px solid var(--border-weak);
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.history-item.completed{ border-color:var(--ok); background:#f8fff9; }
.history-item.completed:hover{ background:#e9f7ea; transform:translateY(-1px); box-shadow:0 2px 8px rgba(40,167,69,.2); }
.history-item.incomplete{ border-color:var(--warn); background:#fffdf8; opacity:.9; }
.history-item.incomplete:hover{ background:#fff8e3; transform:translateY(-1px); box-shadow:0 2px 8px rgba(255,193,7,.2); }

.history-actions{ display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }

/* =========================
   倒计时界面
========================= */
.countdown-content{ text-align:center; padding:60px 20px; }
.countdown-content h2{ font-size:2rem; margin-bottom:24px; color:#495057; }
.countdown-number{
  font-size:8rem; font-weight:800; color:var(--brand);
  margin:24px 0; text-shadow:2px 2px 4px rgba(0,0,0,.1); animation:pulse 1s infinite;
}
.countdown-content p{ font-size:1.1rem; color:var(--text-muted); }
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* =========================
   练习界面头部 + 倒计时加时徽标
========================= */
.practice-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:var(--card-weak);
  border-bottom:2px solid var(--border); position:sticky; top:0; z-index:100;
}
.back-btn{ padding:8px 14px; font-size:14px; min-width:auto; }

.timer-container{
  position:relative;             /* 让徽标相对这个容器定位 */
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.timer-label{ 
  font-size:12px; 
  color:var(--text-muted); 
  font-weight:500; 
  text-align:center;
  white-space:nowrap;
}
.timer{
  font-size:2rem; font-weight:800; color:var(--danger);
  background:#fff; padding:8px 16px; border-radius:10px; border:2px solid var(--danger);
}

/* 加时徽标 */
.timer-bonus{
  position:absolute; top:50%; left:calc(100% + 8px);
  transform: translateY(-50%);
  padding:2px 8px; font-size:12px; line-height:1.4;
  color:#fff; background:var(--ok);
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  box-shadow:0 2px 8px rgba(40,167,69,.25);
  opacity:0; pointer-events:none; white-space:nowrap;
}
@keyframes timerBonusPop{
  0%   { transform: translate(8px,-50%) scale(.92); opacity:0; }
  15%  { transform: translate(0,-50%)  scale(1.00); opacity:1; }
  70%  { transform: translate(0,-50%)  scale(1.00); opacity:1; }
  100% { transform: translate(0,-60%)  scale(.94); opacity:0; }
}
.timer-bonus.show{ animation: timerBonusPop 1s ease forwards; }

.progress{
  font-size:1.1rem; color:#495057; background:#fff;
  padding:8px 16px; border-radius:10px; border:2px solid var(--ok);
}

/* =========================
   练习内容布局
========================= */
.practice-content{
  display:flex; gap:36px; padding:28px; align-items:flex-start; flex-wrap:wrap;
}
.sudoku-display{
  flex: 1 1 400px;
  display:flex; justify-content:center; align-items:center;
  width:100%;
}
.number-input{ flex:1 1 320px; max-width:420px; text-align:center; }

/* =========================
   数独网格（行/列/宫高亮）——整合版
   思路：容器不画缝，所有边框在具体模式（行/列/宫）里画
========================= */
.sudoku-grid{
  display:inline-grid;
  gap:0; background:transparent; padding:0;
  border-radius:6px; margin-bottom:16px; position:relative;
}
.sudoku-grid.grid-6{ grid-template-columns:repeat(6, 1fr); }
.sudoku-grid.grid-9{ grid-template-columns:repeat(9, 1fr); }

/* 行/列/宫的网格维度 */
.sudoku-grid.highlight-row{ 
  grid-template-rows:1fr; 
  grid-template-columns:repeat(9, 1fr); 
}
.sudoku-grid.highlight-row.grid-6{ 
  grid-template-columns:repeat(6, 1fr); 
}
.sudoku-grid.highlight-col{ 
  grid-template-rows:repeat(9, 1fr); 
  grid-template-columns:1fr; 
}
.sudoku-grid.highlight-col.grid-6{ 
  grid-template-rows:repeat(6, 1fr); 
}
.sudoku-grid.highlight-box{ 
  grid-template-columns:repeat(3,1fr); 
  grid-template-rows:repeat(3,1fr); 
}
.sudoku-grid.highlight-box.grid-6{ 
  grid-template-columns:repeat(3,1fr); 
  grid-template-rows:repeat(2,1fr); 
}

/* 单元格基础（边框由具体模式绘制） */
.sudoku-cell{
  width:75px; height:75px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:27px; font-weight:800; color:#333;
  border:0; box-sizing:border-box; position:relative; z-index:2;
  transition: background .2s ease, transform .1s ease;
}
.sudoku-cell.filled{ 
  background:#fff; 
  color:#333;
}
.sudoku-cell.missing{ 
  background:#f8f9fa; 
  color:transparent;
}
.sudoku-cell.highlighted{
  position:relative;
}

/* ========= 行（第一行风格） ========= */
/* 9×9 行 */
.sudoku-grid.grid-9.highlight-row .sudoku-cell{
  border-top:2px solid #000; 
  border-bottom:2px solid #000; 
  border-right:1px solid #ccc;
  border-left:1px solid #ccc;
}
.sudoku-grid.grid-9.highlight-row .sudoku-cell:first-child{ 
  border-left:2px solid #000; 
}
.sudoku-grid.grid-9.highlight-row .sudoku-cell:nth-child(3),
.sudoku-grid.grid-9.highlight-row .sudoku-cell:nth-child(6),
.sudoku-grid.grid-9.highlight-row .sudoku-cell:nth-child(9){
  border-right:2px solid #000; /* 宫分界 */
}

/* 6×6 行 */
.sudoku-grid.grid-6.highlight-row .sudoku-cell{
  border-top:2px solid #000; 
  border-bottom:2px solid #000; 
  border-right:1px solid #ccc;
  border-left:1px solid #ccc;
}
.sudoku-grid.grid-6.highlight-row .sudoku-cell:first-child{ 
  border-left:2px solid #000; 
}
.sudoku-grid.grid-6.highlight-row .sudoku-cell:nth-child(3),
.sudoku-grid.grid-6.highlight-row .sudoku-cell:nth-child(6){
  border-right:2px solid #000;
}

/* ========= 列（第一列风格） ========= */
/* 9×9 列 */
.sudoku-grid.grid-9.highlight-col .sudoku-cell{
  border-left:2px solid #000; 
  border-right:2px solid #000; 
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
}
.sudoku-grid.grid-9.highlight-col .sudoku-cell:first-child{ 
  border-top:2px solid #000; 
}
.sudoku-grid.grid-9.highlight-col .sudoku-cell:nth-child(3),
.sudoku-grid.grid-9.highlight-col .sudoku-cell:nth-child(6),
.sudoku-grid.grid-9.highlight-col .sudoku-cell:nth-child(9){
  border-bottom:2px solid #000; /* 宫分界 */
}

/* 6×6 列 */
.sudoku-grid.grid-6.highlight-col .sudoku-cell{
  border-left:2px solid #000; 
  border-right:2px solid #000; 
  border-bottom:1px solid #ccc;
  border-top:1px solid #ccc;
}
.sudoku-grid.grid-6.highlight-col .sudoku-cell:first-child{ 
  border-top:2px solid #000; 
}
.sudoku-grid.grid-6.highlight-col .sudoku-cell:nth-child(2),
.sudoku-grid.grid-6.highlight-col .sudoku-cell:nth-child(4),
.sudoku-grid.grid-6.highlight-col .sudoku-cell:nth-child(6){
  border-bottom:2px solid #000; /* 宫分界 */
}

/* ========= 宫（外框粗、内部细） ========= */
/* 9×9 宫（3×3） */
.sudoku-grid.grid-9.highlight-box .sudoku-cell{ border:1px solid #ccc; }
.sudoku-grid.grid-9.highlight-box .sudoku-cell:nth-child(-n+3){ border-top:2px solid #000; }
.sudoku-grid.grid-9.highlight-box .sudoku-cell:nth-child(n+7){  border-bottom:2px solid #000; }
.sudoku-grid.grid-9.highlight-box .sudoku-cell:nth-child(3n+1){ border-left:2px solid #000; }
.sudoku-grid.grid-9.highlight-box .sudoku-cell:nth-child(3n){   border-right:2px solid #000; }

/* 6×6 宫（2×3） */
.sudoku-grid.grid-6.highlight-box .sudoku-cell{ border:1px solid #ccc; }
.sudoku-grid.grid-6.highlight-box .sudoku-cell:nth-child(-n+3){ border-top:2px solid #000; }
.sudoku-grid.grid-6.highlight-box .sudoku-cell:nth-child(n+4){  border-bottom:2px solid #000; }
.sudoku-grid.grid-6.highlight-box .sudoku-cell:nth-child(3n+1){ border-left:2px solid #000; }
.sudoku-grid.grid-6.highlight-box .sudoku-cell:nth-child(3n){   border-right:2px solid #000; }

/* =========================
   数字键盘（number-pad）
========================= */
.number-input h3{ margin-bottom:16px; color:#495057; font-size:1.05rem; }
.number-pad{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap:10px;
  justify-content:center;   /* 水平居中 */
  justify-items:center;     /* 子项居中 */
  margin:0 auto;
  max-width:280px;
}
.number-btn{
  width:56px; height:56px;
  border:1.5px solid var(--border-weak); background:#fff;
  border-radius:8px; font-size:22px; color:#495057; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}
.number-btn:hover{ background:#f8f9ff; border-color:var(--brand); transform:translateY(-1px); }
.number-btn.selected{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* 键盘提示 */
.keyboard-hints{ margin-top:8px; text-align:center; }
.hint-text{ font-size:12px; color:var(--text-muted); line-height:1.4; }
.hint-text kbd{
  background:#f8f9fa; border:1px solid var(--border-weak); border-radius:4px;
  padding:2px 6px; font-size:11px; font-family:monospace; color:#495057;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* =========================
   结果界面
========================= */
.result-content{ text-align:center; max-width:640px; margin:0 auto; }
.result-content h2{ font-size:2.3rem; margin-bottom:24px; color:var(--ok); }
.result-stats{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:16px; margin-bottom:26px;
}
.stat-item{ background:var(--card-weak); padding:16px; border-radius:12px; border:2px solid var(--border); }
.stat-label{ display:block; font-size:.95rem; color:var(--text-muted); margin-bottom:6px; }
.stat-value{ display:block; font-size:1.8rem; font-weight:800; color:#495057; }
.result-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =========================
   按钮
========================= */
.btn{
  padding:12px 22px; border:none; border-radius:10px;
  font-size:16px; font-weight:700; cursor:pointer;
  transition: transform .12s ease, box-shadow .18s ease, background .2s ease;
  min-width:120px; color:#fff;
}
.btn-sm{ padding:6px 12px; font-size:12px; border-radius:6px; min-width:auto; }
.btn-primary{ background: linear-gradient(135deg, var(--bg-grad-a) 0%, var(--bg-grad-b) 100%); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(102,126,234,.35); }
.btn-secondary{ background:#6c757d; }
.btn-secondary:hover{ background:#5a6268; transform:translateY(-2px); }
.btn-success{ background:var(--ok); }
.btn-success:hover{ background:#218838; transform:translateY(-2px); }

/* 自动提交视觉 */
.btn-success.auto-submit{
  background:var(--ok) !important; transform:scale(1.08) !important;
  box-shadow:0 0 18px rgba(40,167,69,.5) !important;
}

/* =========================
   响应式
========================= */
/* 手机竖屏 */
@media (max-width: 767px){
  .screen{ padding:22px; }
  .practice-header{ padding:10px 14px; }
  .timer{ font-size:1.6rem; padding:6px 12px; }
  .timer-label{ font-size:11px; }
  .progress{ font-size:1rem; padding:6px 12px; }

  .practice-content{ padding:18px; gap:16px; align-items:center; }
  /* 自适应单元格，避免九宫行过长 */
  :root{
    --cell-9: clamp(28px, calc((100vw - 64px) / 9), 44px);
    --cell-6: clamp(36px, calc((100vw - 64px) / 6), 58px);
  }
  .sudoku-grid{ max-width: calc(100vw - 48px); margin-inline:auto; }
  .sudoku-grid.grid-9 .sudoku-cell{
    width:var(--cell-9); height:var(--cell-9); font-size:calc(var(--cell-9) * 0.45);
  }
  .sudoku-grid.grid-6 .sudoku-cell{
    width:var(--cell-6); height:var(--cell-6); font-size:calc(var(--cell-6) * 0.40);
  }
  /* 行/列高亮也用自适应尺寸 */
  .sudoku-grid.highlight-row.grid-9 .sudoku-cell,
  .sudoku-grid.highlight-col.grid-9 .sudoku-cell{
    width:var(--cell-9); height:var(--cell-9);
  }
  .sudoku-grid.highlight-row.grid-6 .sudoku-cell,
  .sudoku-grid.highlight-col.grid-6 .sudoku-cell{
    width:var(--cell-6); height:var(--cell-6);
  }
  /* 宫高亮模式也需要自适应 */
  .sudoku-grid.highlight-box.grid-9 .sudoku-cell{
    width:var(--cell-9); height:var(--cell-9);
  }
  .sudoku-grid.highlight-box.grid-6 .sudoku-cell{
    width:var(--cell-6); height:var(--cell-6);
  }

  /* 返回按钮收紧 */
  .back-btn{ min-width:84px; padding:8px 12px; font-size:14px; border-radius:10px; }

  /* 数字键盘与标题水平居中 */
  .number-input{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .number-input h3{ text-align:center; width:100%; margin-inline:auto; }
  .number-pad{ margin:0 auto; justify-content:center; justify-items:center; }

  /* 列高亮时切换为左右布局 */
  .practice-content:has(.sudoku-grid.highlight-col){
    flex-wrap:nowrap; gap:14px; align-items:flex-start;
  }

  /* 问号按钮在手机端调整位置，避免遮挡标题 */
  .help-btn {
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  /* 标题在手机端添加右边距，为问号按钮留出空间 */
  .header h1 {
    padding-right: 60px;
    font-size: 2rem;
  }
}

/* 平板横屏 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
  .practice-content{ flex-wrap:nowrap; gap:24px; }
}

/* 桌面 */
@media (min-width: 1025px){
  .practice-content{ flex-wrap:nowrap; gap:36px; }
}

/* =========================
   问号帮助按钮
========================= */
.help-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.help-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.help-btn:active {
  transform: scale(0.95);
}

/* =========================
   规则介绍弹窗
========================= */
.help-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.help-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.help-content {
  background: white;
  border-radius: 20px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.3s ease;
}

.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px 20px;
  border-bottom: 2px solid #f0f0f0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px 20px 0 0;
}

.help-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.help-body {
  padding: 30px;
}

.rule-section {
  margin-bottom: 25px;
}

.rule-section h3 {
  color: #495057;
  font-size: 1.2rem;
  margin-bottom: 12px;
  border-left: 4px solid #667eea;
  padding-left: 15px;
}

.rule-section p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.rule-section ul {
  color: #666;
  line-height: 1.6;
  padding-left: 20px;
}

.rule-section li {
  margin-bottom: 8px;
}

.rule-section strong {
  color: #495057;
}

/* 弹窗动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 响应式弹窗 */
@media (max-width: 767px) {
  .help-content {
    margin: 20px;
    max-height: 90vh;
  }
  
  .help-header {
    padding: 20px 25px 15px;
  }
  
  .help-header h2 {
    font-size: 1.3rem;
  }
  
  .help-body {
    padding: 20px 25px;
  }
  
  .rule-section h3 {
    font-size: 1.1rem;
  }
}