* { margin: 0; padding: 0; 
  box-sizing: border-box; 
}
.cell.active { 
  background-color: darkmagenta; /* 设置高亮背景色 */
  color: lightgoldenrodyellow; /* 设置高亮文字颜色 */
  font-weight: bold; /* 设置高亮字体加粗 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  /*color: red !important; */
  font-weight: bold !important; 
  /*background-color: rgb(10, 3, 116) !important; */
}

body { 
  font-family: Arial, sans-serif; 
  overflow-x: hidden; 
}
#d0 { 
    height: 99vh; 
    width: 100vw; 
    display: grid; 
    /*
    grid-template-rows: 1fr 1fr 1fr 1fr 6fr 1fr 1fr 1.5fr; 
    */
    gap: 0.1vh; /*比首页0.3vh小*/
}
/*index.php在index.php之gap 为0.4vh*/
.row { display: grid; gap: 0.2vh; }
.row-1 { grid-template-columns: repeat(1, 1fr); }
.row-2 { grid-template-columns: repeat(2, 1fr); }
.row-3 { grid-template-columns: repeat(3, 1fr); }
.row-3b { grid-template-columns: 1fr 4fr 1fr; }
.row-4 { grid-template-columns: repeat(4, 1fr); 
}
.row-5 { grid-template-columns: repeat(5, 1fr); }
.row-5b { grid-template-columns: 1fr 2fr 4fr 1fr 1fr; }
.row-6 { grid-template-columns: repeat(6, 1fr); }
.row-7 { grid-template-columns: repeat(7, 1fr); }
.row-8 { grid-template-columns: repeat(8, 1fr); }
.row-9 { grid-template-columns: repeat(9, 1fr); }
.row-10 { grid-template-columns: repeat(10, 1fr); }
.row-11 { grid-template-columns: repeat(11, 1fr); }
.row-12 { grid-template-columns: repeat(12, 1fr); }

/*单元格格式,index.php中padding:1vh，此处为0.1*/
.cell { background-color: darkcyan; 
  color: white; padding: 0.1vh; text-align: center; 
  border-radius: 0.5vh; 
  /*index.php页面此处为3vh*/
  font-size: calc(2vh+0.5vw); 
  /**/
  display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; }
/*单元格鼠标悬浮格式*/
.cell:hover { 
  background-color: white; color: black; 
  border:1px solid blue; transform: scale(0.95); 
}
/* 不可点击按钮不响应悬浮 */
.cell.cell-static:hover {
    background-color: darkcyan;
    color: white;
    border: none;
    transform: none;
    cursor: default;
}
/*单元格字体大小对横屏竖屏的自适应*/
@media (orientation: portrait) {
  /*此处index.php为4vw*/
    .cell { font-size: 3vw; }
  }
@media (orientation: landscape) {
  /*此处index.php原为3vh*/
    .cell { font-size: 2.5vh; }
  }
  
  /*
  含义说明：
  - @media (orientation: portrait) 表示“竖屏”模式（高度大于宽度，常见于手机竖着拿）。
    - 这时 .cell 的字体大小设置为 3vw，即视窗宽度的3%。竖屏时宽度较窄，字体会相对较小。
  - @media (orientation: landscape) 表示“横屏”模式（宽度大于高度，常见于手机横着拿或PC显示器）。
    - 这时 .cell 的字体大小设置为 3vh，即视窗高度的3%。横屏时高度较小，字体会相对较小。
  
  这样设置可以让字体在横屏和竖屏切换时自适应，保证视觉效果更合理。
  */



p { font-size: 2vh; }


#xxx1, #xxx2, #xxx3 { font-size: 2vh !important; border-top: 1px solid #ccc; }
/* Example of a non-clickable button 
形如：<div class="cell cell-static">不可点击按钮</div>
*/