/* style */
table {
  border-collapse: separate;   /* border-spacingを有効に */
  border-spacing: 0 1px;       /* 縦方向に1px間隔 */
  outline: 5px transparent;
}
table.solved {
  animation: rainbow-border 1s infinite;
}
@keyframes rainbow-border {
  0%   { outline: 5px solid red; }
  14%  { outline: 5px solid orange; }
  28%  { outline: 5px solid yellow; }
  42%  { outline: 5px solid green; }
  57%  { outline: 5px solid blue; }
  71%  { outline: 5px solid indigo; }
  85%  { outline: 5px solid violet; }
  100% { outline: 5px solid red; }
}
td.S {
  border-top: 5px solid;
  border-bottom: 5px soid;
  border-left: 5px solid;
  border-right: 5px solid;
  border-style: inset;
}
td.selected { /* only for type "S" */
  border-style: outset;
}
td.C {
  border-top: 5px inset;
  border-bottom: 5px inset;
  border-right: none;
  border-left: none;
}
td.C.selected {
  border-top: 5px outset;
  border-bottom: 5px outset;
  border-right: none;
  border-left: none;
}
td.R {
  border-top: 5px inset;
  border-bottom: 5px inset;
  border-right: 5px inset;
  border-left: none;
}
td.R.selected {
  border-top: 5px outset;
  border-bottom: 5px outset;
  border-right: 5px outset;
  border-left: none;
}
td.L {
  border-top: 5px inset;
  border-bottom: 5px inset;
  border-left: 5px inset;
  border-right: none;
}
td.L.selected {
  border-top: 5px outset;
  border-bottom: 5px outset;
  border-left: 5px outset;
  border-right: none;
}
.pointer-cursor {
  cursor: pointer;
}