/* Game surfaces: Minesweeper grid, Solitaire / FreeCell / Hearts tables. */

/* -------------------------------------------------------- minesweeper */
.mine-cell {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  background: var(--face);
  font: bold 12px var(--mono);
  line-height: 1;
  cursor: default;
  user-select: none;
  box-shadow: inset -1px -1px var(--shadow), inset 1px 1px var(--hilite), inset -2px -2px var(--shadow), inset 2px 2px var(--face-lt);
}
.mine-cell svg { display: block; width: 16px; height: 16px; }
.mine-cell.open {
  box-shadow: inset 0 0 0 1px var(--shadow);
  background: var(--face);
}
.mine-cell.boom { background: #ff0000; }
.mine-cell.wrong { background: var(--face); }

/* ------------------------------------------------------------ cards */
.card-table {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #007a00;
  overflow: auto;
  user-select: none;
  /* Pointer drags are implemented with pointer events; without this the
     browser claims the gesture for scrolling/panning and cancels the drag. */
  touch-action: none;
}

.card {
  position: absolute;
  width: 71px;
  height: 96px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.4);
  display: grid;
  grid-template-columns: 14px 1fr 14px;
  grid-template-rows: 16px 1fr 16px;
  padding: 2px;
  cursor: default;
  background-clip: padding-box;
}
.card.face-down {
  background:
    repeating-linear-gradient(45deg, #000080 0 4px, #0000a0 4px 8px);
  box-shadow: 0 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 2px #fff;
}
.card.red { color: #ff0000; }
.card.black { color: #000; }
.card.selected { box-shadow: 0 0 0 2px #ffff00, 1px 1px 3px rgba(0, 0, 0, 0.5); }
.card.drag { z-index: 100; box-shadow: 0 0 0 1px #000, 4px 4px 6px rgba(0, 0, 0, 0.5); }
.card .c-rank {
  grid-column: 1; grid-row: 1;
  font: bold 13px var(--font);
  text-align: center;
  line-height: 1;
}
.card .c-suit-sm {
  grid-column: 1; grid-row: 2;
  align-self: start;
  justify-self: center;
  width: 12px; height: 12px;
}
.card .c-suit-sm svg { width: 12px; height: 12px; display: block; }
.card .c-corner-br {
  grid-column: 3; grid-row: 3;
  font: bold 13px var(--font);
  text-align: center;
  transform: rotate(180deg);
  line-height: 1;
}
.card .c-pips {
  grid-column: 2; grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  justify-items: center;
  gap: 1px;
}
.card .c-pips span { width: 14px; height: 14px; }
.card .c-pips svg { width: 14px; height: 14px; display: block; }
.card .c-center {
  grid-column: 1 / span 3; grid-row: 1 / span 3;
  display: grid;
  place-items: center;
}
.card .c-center svg { width: 46px; height: 46px; display: block; }

.card-slot {
  position: absolute;
  width: 71px;
  height: 96px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------- hearts */
.hearts-table { background: #007a00; display: grid; place-items: center; }
.hearts-hand { display: flex; gap: 4px; }
.hearts-hand .card { position: relative; margin-top: 0; }
.hearts-play { display: flex; gap: 8px; align-items: center; justify-content: center; }

/* ----------------------------------------------------------- status */
.game-status { font: 11px var(--font); }