/* TryDota restore (2026): icons from the Steam CDN (items are 88x64 without the old padding),
   explanations after an answer, links back to the site, layout for phones. */
body {
  font-family: Roboto, Arial, sans-serif;
}

.icon.item,
.example .icon.item {
  background-size: cover;
  background-position: center;
}

.icon.ability {
  background-size: cover;
  background-position: center;
}

.question .caption {
  max-width: 110px;
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.25;
  color: #bdbdbd;
}

.question.explained {
  height: auto;
  min-height: 110px;
}

.question > .explanation {
  display: block;
  max-width: 520px;
  margin: 2px auto 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #e0e0e0;
}

.patch-note {
  margin: 0.6em 0;
  color: #b0b0b0;
}

/* The instructions got one more line (patch): give the box a little more height than the original 365px. */
.keeper {
  height: 432px;
}

.td-back {
  max-width: 694px;
  margin: 0 auto;
  padding: 10px 0 0;
  font-size: 13px;
}

.td-back a,
.td-foot a {
  color: #ccc;
}

.td-back a:hover,
.td-foot a:hover,
a:hover {
  color: #FFE800;
}

.td-foot {
  padding: 16px;
  font-size: 12px;
  text-align: center;
  color: #888;
}

@media (max-width: 700px) {
  h1 {
    padding: 0 10px;
    font-size: 13px;
    line-height: 1.5em;
  }

  .td-back {
    padding: 10px 10px 0;
  }

  .keeper {
    width: auto;
    height: auto;
    min-height: 400px;
    margin: 0 8px;
    padding: 10px;
    font-size: 13px;
  }

  .example {
    width: 49%;
  }

  .icon {
    width: 76px;
    height: 57px;
  }

  .option {
    margin: 4px;
  }

  .question {
    height: auto;
    min-height: 104px;
  }
}