:root{
    --accent:#2b8aff;
    --success:#00c853;
    --muted:#666;
    --cell-size:90px;
    --cell-gap:1px;
    --board-cols: 5; /* JS动态修改 */
    font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;
  }
  .wrap{max-width:1100px;margin:18px auto;padding:14px;}
  
  /* Board */
  .board-wrapper {
    overflow: auto;
    max-height: 60vh;
    padding: 6px;
    /* background: #f4f6f9; */
    border-radius: 12px;
  }

  .board{
    display:grid;
    grid-template-columns: repeat(var(--board-cols), 1fr); 
    gap:var(--cell-gap);
    padding:8px;
    margin: 0 auto;
    /* 自动宽度：列数 * (格子+间隙) */
    max-width: calc(var(--board-cols) * (var(--cell-size) + var(--cell-gap)) + 20px);
  }

  .cell{
    aspect-ratio: 1 / 1;
    min-width: 0;
    background:linear-gradient(180deg,#fff,#f7fbff);
    border-radius:8px;
    border:2px solid rgba(20,30,60,0.06);
    box-shadow: 0 4px 12px rgba(12,20,40,0.03);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:4px;
    box-sizing:border-box;
    position:relative;
    transition: all .2s;
    user-select: none;
    opacity: 0.8;
  }
  
  .cell .idx{
      position:absolute; right:4px; top:2px;
      font-size:12px; font-weight: bold; color:#aab;
      font-family: Consolas, Monaco, monospace;
  }
  
  .cell .title{font-size:12px;font-weight:700;text-align:center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; --webkit-line-clamp: 2; -webkit-box-orient: vertical;}
  
  /* Active & Marked */
  .cell.active-target {
    border-color: var(--accent); background: #eaf4ff;
    transform: scale(1.05); opacity: 1; z-index: 10;
    box-shadow: 0 0 15px rgba(43,138,255,0.4);
  }
  .cell.marked {
    background: #e3fcef; border-color: var(--success); opacity: 1;
  }
  .cell.marked .title { color: #007a33; }
  .cell.marked .mark-icon { display: block; }
  .mark-icon {
    display: none; position: absolute; font-size: 24px; color: var(--success);
    font-weight: bold; z-index: 2; opacity: 0.4;
  }
  .bingo-line { border-color: #ff9800 !important; background: #fff8e1 !important; }

  /* Dice */
  .dice-container {
    display: flex; justify-content: center; gap: 20px;
    margin-bottom: 15px; padding: 10px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  }
  .dice-box { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .dice {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, #fff, #f0f0f0);
    border: 2px solid #333; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900; color: #222;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
  }
  .dice.rolling { animation: shake 0.1s infinite; background: #ffeb3b; }
  .dice-label { font-size: 12px; color: var(--muted); font-weight: bold; }
  .dice-range { font-size: 10px; color: #999; } /* 新增：显示范围 */

  @keyframes shake { 0%{transform:rotate(0deg);} 25%{transform:rotate(5deg);} 75%{transform:rotate(-5deg);} }
  
  /* Buttons */
  .action-btn{
    padding:12px 18px; background:var(--accent); color:#fff;
    border:none; border-radius:10px; font-weight:800; cursor:pointer;
    box-shadow: 0 8px 22px rgba(43,138,255,0.2); width: 100%; font-size: 16px;
  }
  .action-btn.roll-btn { background: linear-gradient(90deg, #ff9800, #ff5722); box-shadow: 0 8px 22px rgba(255,87,34,0.2); }
  .action-btn.success { background:linear-gradient(90deg,#00c853,#00e676); box-shadow: 0 8px 22px rgba(0,200,83,0.2); }
  .action-btn[disabled]{opacity:0.5;cursor:not-allowed;box-shadow:none;background:#999;}
  .btn-ghost{background:transparent;border:1px solid rgba(12,20,40,0.06);padding:8px 12px;border-radius:8px;cursor:pointer;}

  /* Intro Buttons */
  .diff-group { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
  .diff-btn {
      padding: 15px; border: none; border-radius: 10px;
      font-size: 16px; font-weight: bold; color: #fff; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      transition: transform 0.1s;
  }
  .diff-btn:active { transform: scale(0.98); }
  /* 难度选择 */
  .d-easy { background: linear-gradient(90deg, #4caf50, #81c784); box-shadow: 0 5px 15px rgba(76,175,80,0.3); }
  .d-normal { background: linear-gradient(90deg, #2196f3, #64b5f6); box-shadow: 0 5px 15px rgba(33,150,243,0.3); }
  .d-hard { background: linear-gradient(90deg, #f44336, #e57373); box-shadow: 0 5px 15px rgba(244,67,54,0.3); }
  .d-hell { background: linear-gradient(90deg, #673ab7, #9575cd); box-shadow: 0 5px 15px rgba(103,58,183,0.3); }

  /* Task Panel */
  .task-panel{margin-top:12px;background:#fff;border-radius:10px;padding:12px;border:1px solid rgba(12,20,40,0.03);display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
  .task-content{flex:1;min-width:220px;}
  .task-content .t-title{font-weight:800;margin-bottom:6px; font-size: 18px;}
  .task-content .t-text{font-size:15px;color:#222;line-height:1.6;}
  .task-media{width:240px;max-width:40%;min-width:160px;text-align:center;}
  .task-media img{max-width:100%;border-radius:8px;}
  .task-media audio{width:100%;margin-top:8px;}
  
  .info{background:#fbfdff;padding:6px 10px;border-radius:8px;border:1px solid rgba(12,20,60,0.03);flex:1; text-align: center;}
  .info .value{font-weight:800;font-size:16px;}
  .countdown{font-weight:900;color:#e67a00;font-size:18px;}

  /* Victory Modal */
  .victory-modal {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.8); z-index: 999;
      display: none; align-items: center; justify-content: center;
      flex-direction: column; color: #fff;
  }
  .victory-content {
      background: #fff; color: #333; padding: 30px; border-radius: 20px;
      text-align: center; max-width: 90%; width: 320px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .victory-title { font-size: 28px; font-weight: 900; color: #ff9800; margin-bottom: 10px; }
  @keyframes popIn { from {transform: scale(0.5); opacity: 0;} to {transform: scale(1); opacity: 1;} }
  
  @media (max-width:720px){
    .task-media{width:100%;max-width:100%;min-width:0;}
    .board{padding:2px;}
  }
/* 提示 */
.toast {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.5s, bottom 0.5s;
}
.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}

/* --- 闪卡专用样式 --- */
/* 隐藏在屏幕之外，用于生成图片 */
#shareCardContainer {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 375px; /* 朋友圈/手机标准宽度 */
  z-index: -1;
}

.share-card {
  width: 100%;
  background: linear-gradient(135deg, #6200ea 0%, #311b92 100%); /* 紫色渐变背景 */
  color: #fff;
  font-family: 'Microsoft YaHei', sans-serif;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 装饰性背景圆圈 */
.share-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}

.sc-header {
  font-size: 32px;
  font-weight: bold;
  color: #ffd700; /* 金色文字，突出胜利 */
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 5px;
}

.sc-sub {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sc-stats-box {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 20px;
  margin: 0 auto 20px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.2);
}

.sc-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 16px;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
  padding-bottom: 8px;
}
.sc-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.sc-label { opacity: 0.9; font-weight: normal; }
.sc-value { font-weight: bold; color: #fff; font-size: 18px; }

.sc-footer {
  margin-top: 20px;
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
}

/* 图片生成后的弹窗样式 */
.img-preview-modal {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.85);
  z-index: 2000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-preview-modal img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(103, 58, 183, 0.5);
}
.img-actions {
  margin-top: 20px;
  color: #fff;
  text-align: center;
}