body {
font: 16px sans-serif;
}
#hanabi-game-table {
border-collapse: collapse;
background: #555;
color: #fff;
width: max-content; /* Don't allow the table rows to wrap on narrow displays. */
}
th, td {
border: 1px solid #000;
font-weight: normal;
padding: 2px 4px;
}
td.solved {
  background: #0a0;
}
td.SAT {
  background: #0a0;
}
td.unsolved {
  background: red;
}
td.UNSAT {
  background: orange;
}

/* For the buttons to load a seed*/
.load-seed {
  background-color: #00ff09;
  border-radius: 7pt;
  border: 1px solid green;
}


.suitIndex-0 { --color: #b54a4a; } /* muted red */
.suitIndex-1 { --color: #b5a64a; } /* muted golden yellow */
.suitIndex-2 { --color: #4a9b4a; } /* muted green */
.suitIndex-3 { --color: #4a74b5; } /* muted blue */
.suitIndex-4 { --color: #8b4ab5; } /* muted purple */
.suitIndex-5 { --color: #4ab5b5; } /* muted teal */

/* Each card is rendered with two HTML elements: the `.card` which is a parent of the "card face".
   When a card is trash, its entire card face has decreased opacity.
   Therefore anything which we don't to decreased opacity must be attached to the card instead.
   Specifically, we put glow effects on the card face which should look the same on trash and non-trash. */
.card {
  display: inline-block;
  margin: 2px;

  /* Override the default button padding and background. */
  padding: 0px;
  background: none;

  transition: transform 0.15s ease, box-shadow 0.15s ease;

  /* Even though the visible border is on the card face,
     setting the border radius here affects the shape of the box-shadow. */
  border-radius: 4px;
}

.card-face {
  display: inline-block;
  width: 18px;
  height: 28px;
  line-height: 29px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  box-sizing: content-box; /* With this setting, the width and height do not include the border. */
  padding: 0px;

  transition: box-shadow 0.15s ease;

  /* Soft inner and outer shading for depth */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 0 4px rgba(0, 0, 0, 0.25);

  background: var(--color);
  color: white;
  /* Black outline around the number on the card face. */
  text-shadow:  1px -1px 0px black,
                1px  1px 0px black,
               -1px  1px 0px black,
               -1px -1px 0px black;

  /* Card-like border & shape */
  border: 2px solid black;
  border-radius: 4px;
}

.card:hover {
  transform: translateY(-2px);
}

.card:hover > .card-face {
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 4px rgba(0, 0, 0, 0.3);
}

.card:active {
  transform: translateY(0);
}

.card:active > .card-face {
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.3),
    inset 0 0 5px rgba(0, 0, 0, 0.4);
}

.card.selected.discard {
/*  box-shadow: 0 0 3px 3px white;*/
  box-shadow: 0 0 3px 3px var(--color);
}

.card.selected.discard > .card-face {
  /*  border: 2px solid white;*/
  /*  text-decoration: double line-through; */
  box-shadow: none;

  background-image: url("strikethrough.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%, auto;
}

.card.selected.strike {
/*  box-shadow: 0 0 3px 3px white;*/
  box-shadow: 0 0 3px 3px var(--color);
}

.card.selected.strike > .card-face {
  /*  border: 2px solid white;*/
  /*  text-decoration: double line-through; */
  box-shadow: none;

  background-image: url("criss-cross.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%, auto;
}

.card.selected.playable {
  box-shadow: 0 0 3px 3px var(--color);
}

.card.selected.playable > .card-face {
  box-shadow: none;

  border: 2px solid white;
}

.card.trash > .card-face {
  opacity: 0.4;
}

.card.hidden > .card-face {
  background: transparent;
}

.card.critical > .card-face {
  text-decoration: dotted underline;
}

.card.first-occurrence > .card-face {
  /*  font-weight: 700;*/
  /*  border: 2px solid white;*/
    border-color: white;
}

.card.further-copy > .card-face {
  border-color: var(--color);
  border: 0px;
/*  opacity: .6;*/
}

.card.selected.forceDiscarded {
  box-shadow: 0 0 0px 3px #ccc;
}
button {
font: inherit;
border: none;
}
.invalid {
background: #633;
}
.postEnd {
background: #282828;
opacity: .8;
}