:root{
    --accent:#2b8aff;
    --muted:#666;
    --cell-size:110px;
    --cell-gap:10px;
    font-family: "Microsoft Yahei", "PingFang SC", Arial, sans-serif;
  }
  .wrap{max-width:1100px;margin:18px auto;padding:14px;}
  .sub{color:var(--muted);font-size:13px;}
  .board-area{margin-top:14px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 30px rgba(12,20,40,0.06);}
  /* board */
  .board{
    display:flex;
    gap:var(--cell-gap);
    align-items:center;
    padding:8px;
    min-height: calc(var(--cell-size) + 24px);
  }
  .cell{
    /*width:var(--cell-size);*/
    min-width:var(--cell-size);
    height:var(--cell-size);
    background:linear-gradient(180deg,#fff,#f7fbff);
    border-radius:10px;
    border:1px solid rgba(20,30,60,0.06);
    box-shadow: 0 6px 18px rgba(12,20,40,0.03);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:8px;
    box-sizing:border-box;
    position:relative;
    transition:transform .18s, box-shadow .18s;
  }
  .cell .idx{position:absolute;right:6px;top:6px;font-size:11px;color:var(--muted);}
  .cell .title{font-size:13px;font-weight:700;text-align:center;}
  .cell .desc{font-size:11px;color:var(--muted);text-align:center;margin-top:6px;}
  .cell.active{
    transform:translateY(-6px) scale(1.03);
    box-shadow: 0 16px 36px rgba(11,90,255,0.12);
    border-color: rgba(43,138,255,0.7);
    background:linear-gradient(180deg,#eaf4ff,#fff);
  }
  .piece{
    position:absolute;
    bottom:-12px;
    left:50%;
    transform:translateX(-50%);
    width:26px;height:26px;border-radius:50%;
    background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px;
    box-shadow:0 6px 14px rgba(43,138,255,0.2);
    border:2px solid #fff;
  }

  /* controls & info */
  /* .controls-d{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap;} */
  .controls-d{display:grid;gap:12px;align-items:center;}
  .dice-btn{
    padding:12px 18px;background:linear-gradient(90deg,var(--accent),#0b6cff);color:#fff;border:none;border-radius:10px;font-weight:800;cursor:pointer;
    box-shadow: 0 8px 22px rgba(11,108,255,0.14);
  }
  .dice-btn[disabled]{opacity:0.45;cursor:not-allowed;box-shadow:none;}
  .dice-display{min-width:64px;/*text-align:center;*/font-weight:900;font-size:20px;color:#222;}
  .info{background:#ffffff;border:1px solid rgba(12,20,60,0.03);flex:1;min-width:200px;}
  .info .label{font-size:12px;color:var(--muted);}
  .info .value{font-weight:800;font-size:18px;margin-top:6px;}

  /* 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;}
  .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;box-shadow:0 8px 30px rgba(12,20,40,0.06);}
  .task-media audio{width:100%;margin-top:8px;}

  /* mobile adjustments */
  @media (max-width:720px){
    /* :root{--cell-size:90px;} */
    .task-media{width:100%;max-width:100%;min-width:0;}
    .board{padding:6px;}
  }

  /* small helpers */
  .muted{color:var(--muted);font-size:13px;}
  .center{display:flex;align-items:center;justify-content:center;}
  .countdown{font-weight:900;color:#e67a00;font-size:18px;}
  .btn-ghost{background:transparent;border:1px solid rgba(12,20,40,0.06);padding:8px 12px;border-radius:8px;cursor:pointer;}

.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell-size), 1fr));
  gap: var(--cell-gap);
  justify-content: start;      /* 左对齐，便于 scrollTo */
}

.info {
  display: flex;             /* 开启弹性布局 */
  justify-content: space-around; /* 在项之间均匀分布空间 */
  align-items: center;       /* 垂直居中 */
  padding: 15px;
  border-radius: 10px;       /* 圆角 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.info-item {
  flex: 1;                   /* 每个 box 占据等宽空间 */
  text-align: center;        /* 文字居中 */
  border-right: 1px solid #ddd; /* 分割线 */
}

.info-item:last-child {
  border-right: none;        /* 最后一项不需要分割线 */
}

.label {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;        /* 替代之前的 height:6px 占位符 */
}

.dice-display, .value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 特殊处理点数显示的透明度（保留原意图） */
#diceDisplay {
  opacity: 1;
}