.tb {
  table-layout: fixed;
  border-collapse: collapse;
  text-align: center;
  top: 2px;
  left: 0px; }

/* 列号图片 - 始终与棋盘等宽 */
.column-labels-img {
  display: block;
  width: 100%;
  height: auto;
  margin: 5px 0 0 0;
  padding: 0; }

button.square {
  color: #000000; }

button.square2 {
  color: #0000ff; }

/* 选中格子的视觉反馈 */
button.square:focus,
button.square2:focus,
button.square3:focus {
  outline: 3px solid #4a90e2;
  outline-offset: -3px;
  background-color: #e6f2ff;
  box-shadow: inset 0 0 8px rgba(74, 144, 226, 0.3);
  z-index: 10;
  position: relative; }

button.square, button.square2 {
  font-size: 22px;
  font-weight: bold;
  padding: 0px;
  margin: 0px; }
  @media screen and (min-width: 1185px) {
    button.square, button.square2 {
      font-size: 24px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    button.square, button.square2 {
      font-size: 24px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    button.square, button.square2 {
      font-size: 24px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    button.square, button.square2 {
      font-size: 24px; } }
  @media screen and (max-width: 747px) {
    button.square, button.square2 {
      font-size: 24px; } }
  @media screen and (max-width: 747px) {
    button.square, button.square2 {
      font-size: 24px; } }

button.square, button.square2, button.square3 {
  width: 34px;
  height: 34px;
  overflow: hidden;
  text-align: center;
  border: none; }
  @media screen and (min-width: 1185px) {
    button.square, button.square2, button.square3 {
      width: 34px;
      height: 34px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    button.square, button.square2, button.square3 {
      width: 34px;
      height: 34px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    button.square, button.square2, button.square3 {
      width: 34px;
      height: 34px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    button.square, button.square2, button.square3 {
      width: 34px;
      height: 34px; } }
  @media screen and (max-width: 747px) {
    button.square, button.square2, button.square3 {
      width: 34px;
      height: 34px; } }
  @media screen and (max-width: 359px) {
    button.square, button.square2, button.square3 {
      width: 30px;
      height: 30px; } }

button.square3 {
  vertical-align: middle;
  white-space: pre-wrap;
  font-family: "courier new", courier, monospace;
  color: #000;
  padding: 0px;
  margin: 0px;
  font-size: 12px;
  letter-spacing: 3px;
  line-height: 10px; }
  @media screen and (min-width: 1185px) {
    button.square3 {
      font-size: 10px;
      letter-spacing: 2px;
      line-height: 9px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    button.square3 {
      font-size: 10px;
      letter-spacing: 2px;
      line-height: 9px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    button.square3 {
      font-size: 10px;
      letter-spacing: 2px;
      line-height: 9px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    button.square3 {
      font-size: 10px;
      letter-spacing: 2px;
      line-height: 9px; } }
  @media screen and (max-width: 747px) {
    button.square3 {
      font-size: 10px;
      letter-spacing: 2px;
      line-height: 9px; } }

select {
  font-size: 10px;
  margin-top: 7px;
  width: 235px; }

.tr20, .tr10, .tr12, .tr00 {
  overflow: hidden;
  height: 34px; }

/* 行号对齐样式 */
.tr00 td {
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 14px;
  line-height: 34px; }
  @media screen and (min-width: 1185px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 34px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 34px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 34px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 34px; } }
  @media screen and (max-width: 747px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 34px; } }
  @media screen and (max-width: 359px) {
    .tr20, .tr10, .tr12, .tr00 {
      height: 30px; }
    .tr00 td {
      width: 30px;
      height: 30px;
      line-height: 30px; } }

.td20, .td10, .td12, .td00 {
  text-align: center;
  overflow: hidden;
  width: 34px;
  vertical-align: middle;
  font-weight: bold;
  font-size: 14px;
  box-sizing: border-box; }
  @media screen and (min-width: 1185px) {
    .td20, .td10, .td12, .td00 {
      width: 34px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    .td20, .td10, .td12, .td00 {
      width: 34px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    .td20, .td10, .td12, .td00 {
      width: 34px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    .td20, .td10, .td12, .td00 {
      width: 34px; } }
  @media screen and (max-width: 747px) {
    .td20, .td10, .td12, .td00 {
      width: 34px; } }
  @media screen and (max-width: 359px) {
    .td20, .td10, .td12, .td00 {
      width: 30px;
      font-size: 12px; } }

.tr20 {
  border-top: #000 2px solid; }

.tr10 {
  border-top: #000 1px solid; }

.tr12 {
  border-top: #000 1px solid;
  border-bottom: #000 2px solid; }

.td20 {
  border-left: #000 2px solid; }

.td10 {
  border-left: #000 1px solid; }

.td12 {
  border-left: #000 1px solid;
  border-right: #000 2px solid; }

.hintdiv {
  margin: 0 auto;
  text-align: center; }

.bigbutton {
  width: 150px;
  height: 40px; }
  @media screen and (min-width: 1185px) {
    .bigbutton {
      width: 140px;
      height: 40px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    .bigbutton {
      width: 140px;
      height: 40px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    .bigbutton {
      width: 140px;
      height: 40px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    .bigbutton {
      width: 140px;
      height: 40px; } }
  @media screen and (max-width: 747px) {
    .bigbutton {
      width: 140px;
      height: 40px; } }

#hint {
  padding-top: 5px;
  font-size: 14px;
  line-height: 22px;
  height: 75px; }
  @media screen and (min-width: 1185px) {
    #hint {
      padding-top: 5px;
      font-size: 16px;
      line-height: 22px;
      height: 75px; } }
  @media screen and (min-width: 1035px) and (max-width: 1184px) {
    #hint {
      padding-top: 5px;
      font-size: 16px;
      line-height: 22px;
      height: 75px; } }
  @media screen and (min-width: 895px) and (max-width: 1034px) {
    #hint {
      padding-top: 5px;
      font-size: 16px;
      line-height: 22px;
      height: 75px; } }
  @media screen and (min-width: 748px) and (max-width: 894px) {
    #hint {
      padding-top: 5px;
      font-size: 16px;
      line-height: 22px;
      height: 75px; } }
  @media screen and (max-width: 747px) {
    #hint {
      padding-top: 5px;
      font-size: 16px;
      line-height: 22px;
      height: 75px; } }

.divcenter {
  text-align: center; }

.hide {
  display: none; }

.puzzleh1 {
  display: block;
  text-align: center;
  font-size: 12px; }
  @media screen and (max-width: 359px) {
    .puzzleh1 {
      font-size: 10px; } }

.button2 {
  min-width: 85px;
  margin: 2px; }

/* 响应式控制按钮组 */
.solver-controls {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  align-items: center; }
  @media screen and (max-width: 768px) {
    .solver-controls {
      flex-direction: column;
      padding: 10px; }
    .solver-controls .button2 {
      width: 100%;
      max-width: 280px;
      min-height: 40px;
      font-size: 14px; }
    .solver-controls select {
      width: 100% !important;
      max-width: 280px;
      min-height: 40px;
      font-size: 14px; }
    .solver-controls br {
      display: none; } }
  @media screen and (min-width: 769px) {
    .solver-controls select {
      margin-left: 10px; } }

/* 响应式工具栏 */
.solver-toolbar {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap; }
  .solver-toolbar .btn {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s; }
    .solver-toolbar .btn:hover {
      background: #e9ecef;
      border-color: #999; }
    .solver-toolbar .btn:active {
      transform: scale(0.95); }
  @media screen and (max-width: 768px) {
    .solver-toolbar {
      padding: 10px; }
    .solver-toolbar .btn {
      flex: 1;
      min-width: 60px;
      min-height: 44px;
      font-size: 18px; } }