html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  background: url("./bg.jpg") no-repeat center;
  background-size: cover;
}

.solitaire {
  max-width: 800px;
  height: 100%;
  margin: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden; /* important for win effect */

  --card-width: 73px;
  --card-height: 98px;
  --hover-card: 0 0 4px 2px #fff;
  --hover-deck: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.card {
  width: var(--card-width);
  height: var(--card-height);
  background-image: url("./spritesheet.png");
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
  transition: box-shadow 0.1s;
  border-radius: 4px;
}

.card--back {
  background-position: var(--background-position-facing-down);
}

.card--front {
  background-position: var(--background-position-facing-up);
}

.card--front:last-child:hover {
  box-shadow: var(--hover-card);
}

.card--moving {
  position: fixed;
  z-index: 1;
}

.deck__pile {
  flex-shrink: 0; /* for small viewport */
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 4px;
  background-image: url("./spritesheet.png");
  background-position: calc(var(--card-width) * -3)
    calc(var(--card-height) * -4);
  transition: 0.2s;
}

.deck__pile:hover {
  box-shadow: var(--hover-deck), var(--hover-card);
  background-color: rgba(255, 255, 255, 0.2);
}

.deck__pile .card + .card {
  margin-top: 1px;
  margin-left: 2px;
}

.deck__pile .card + .card + .card {
  margin-top: 2px;
  margin-left: 4px;
}

.deck__pile .card:last-child:hover {
  box-shadow: var(--hover-card);
}

.deck__deal {
  position: relative;
}

.deck__deal .card:last-child {
  left: 36px;
}

.deck__deal .card:nth-last-child(2) {
  left: 20px;
}

.deck__deal .card:nth-last-child(3) {
  left: 4px;
}

.finish-deck {
  flex: 4;
  display: flex;
  justify-content: center;
}

.upper {
  display: flex;
  padding-top: 3%;
  justify-content: space-evenly;
}

.upper__spacer {
  width: var(--card-width);
}

.board-deck {
  display: flex;
  padding-top: 5%;
  justify-content: space-evenly;
}

.board-deck .card--front > .card--front {
  top: 15px;
}

.board-deck .card--back > .card--front,
.board-deck .card--back > .card--back {
  top: 8px;
}

/* card cells */
.seven,
.aces {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 4px;
}

.seven {
  box-shadow: var(--hover-deck);
}

.aces {
  border: 2.5px solid rgba(255, 255, 255, 0.6);
  transition: 0.2s;
}

.aces:hover {
  box-shadow: var(--hover-deck);
  background-color: rgba(255, 255, 255, 0.2);
}


.card {
  /* ÀÌ¹Ì µå·¡±×¿¡¼­ ¾²°í ÀÖÀ» ÅÙµ¥, ´õºíÅÇ È®´ë/½ºÅ©·Ñ Ãæµ¹ ¹æÁö */
  touch-action: manipulation; /* ¶Ç´Â none; (µå·¡±× ÇÊ¿ä ½Ã none ±ÇÀå) */
  -webkit-tap-highlight-color: transparent;
}