app {
  background-image: none;
}

message {
  text-shadow: none;
}

.creating hints hint input.pointout,
.creating hints hint input.pointout::placeholder {
  margin-top: 2px;
  font-size: 1.1em;
}

/* fixed invalid selectors: card.ghost → ghost card (ghost is the element, card sits inside it) */
ghost card,
ghost card.empty,
.guessing ghost card.empty,
.reviewing ghost card.empty {
  opacity: 0;
}

ghost card,
ghost card.empty,
ghost card.show.empty {
  opacity: 0;
}

parking {
  opacity: 1;
}

.creating parking spot card,
.guessing parking spot card,
.reviewing parking spot card {
  outline-color: hsla(var(--simpleCardForegroundHSL), 1);
}

tray {
  mask-image: none;
  background: none;
  background-image: none;
}

tray diamond {
  background: none;
  background-image: none;
}

.creating diamond.back,
diamond.back,
.reviewing diamond.back,
.guessing diamond.back,
.solved diamond.back {
  background: none;
  background-image: none;
}

hints hint input {
  transform: unset;
  text-shadow: 0px 1px 1px hsla(var(--simpleCardBackgroundHSL), 0.6);
}

.creating hints hint input,
hints hint input:disabled,
.guessing hints hint input:disabled,
.creating hints hint input.readonly,
.creating hints hint input::placeholder,
.guessing hints hint input.readonly,
.guessing hints hint input::placeholder,
.reviewing hints hint input.readonly,
.reviewing hints hint input::placeholder,
.solved hints hint input.readonly,
.solved hints hint input::placeholder {
  color: hsla(var(--simpleCardForegroundHSL), 1);
}

.creating hints hint input::placeholder {
  opacity: 0.6;
}

.guessing hints hint input:disabled {
  opacity: 1;
  color: hsla(var(--simpleCardForegroundHSL), 1);
}

cards {
  transform: translateY(54px);
  scale: 1.1;
}

cards spot:nth-child(1) card words word:nth-child(2),
cards spot:nth-child(1) card words word:nth-child(3),
cards spot:nth-child(2) card words word:nth-child(3),
cards spot:nth-child(2) card words word:nth-child(4),
cards spot:nth-child(3) card words word:nth-child(1),
cards spot:nth-child(3) card words word:nth-child(2),
cards spot:nth-child(4) card words word:nth-child(1),
cards spot:nth-child(4) card words word:nth-child(4) {
  opacity: 1;
}

spot {
  outline: none;
  border: none;
  border-radius: var(--borderRadius);
}

spot.empty,
parking spot.empty card,
.guessing parking spot.empty card,
.creating parking spot.empty card {
  outline-color: hsl(var(--simpleCardForegroundHSL));
  outline-style: dashed;
  outline-width: 1px;
  background: none;
}

spot rotators button icon {
  background: hsla(var(--simpleCardForegroundHSL), 0.2);
}

.guessing spot:hover rotators button icon {
  background: hsla(var(--linkColorDarkHSL), 1);
}

parking spot rotators button icon {
  background: hsla(var(--hueMain), 100%, 40%, 0);
}

.creating parking spot rotators button icon,
.guessing parking spot rotators button icon,
.reviewing parking spot rotators button icon,
.solved.guessing parking spot rotators button icon {
  background: hsla(var(--hueMain), 100%, 0%, 0);
}

card {
  outline: 1.7px solid hsla(var(--hueGuessing), 100%, 40%, 1);
  border-radius: var(--borderRadius);
}

/* fixed invalid selectors: card.ghost → ghost card (ghost is the element, card sits inside it) */
card,
tray card,
parking card,
.creating card,
.guessing card,
.reviewing card,
.solved card,
ghost card,
ghost card.empty,
.guessing ghost card.empty,
.reviewing ghost card.empty,
.creating ghost card,
.guessing ghost card,
.solved ghost card,
.reviewing ghost card,
cards card,
.guessing cards card,
.reviewing cards card {
  box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
  border: none;
  background: hsl(var(--simpleCardBackgroundHSL));
  color: hsl(var(--simpleCardForegroundHSL));
}

.solved cards card {
  outline: 1px solid hsla(var(--hueSolved), 100%, 70%, 1);
}

/* must stay after the card group above: equal-specificity override that blanks cards in empty spots */
wrapper parking spot.empty card,
.portrait wrapper.mobile parking spot.empty card,
cards spot.empty card,
.guessing cards spot.empty card,
.reviewing cards spot.empty card,
parking spot.empty card,
.guessing spot.empty card,
.creating spot.empty card,
.reviewing spot.empty card {
  outline: none;
  box-shadow: none;
  background: none;
}

word {
  padding-top: 10px;
  height: calc(var(--cardSize) - 10px);
}

.portrait wrapper.main {
  padding: 0;
}

.portrait.simple wrapper.mobile parking spot {
  outline-width: 0px;
  background: none;
}

.portrait wrapper.mobile parking spot.empty {
  outline-width: 2px;
}