/* Роли и иконки героев. У каждой игры свои картинки ролей.
   Цвета страницы здесь не задаются. */

html.rd body .tier1Name .heroIcon { width: 32px; height: 32px; object-fit: contain; flex: none; }
html.rd body .mistakePickPlayer .heroIcon { width: 32px; height: 32px; }
html.rd body .seriesPlayer .heroIcon { width: 26px; height: 26px; }
html.rd body[data-game="mlbb"] .slot { grid-template-columns: 44px minmax(0, 1fr); }

/* Role marks. On a phone the word is replaced by an icon, because five lane
   names do not fit a slot row. The opened menu of a native select still lists
   the words: that is how a choice is made. Desktop keeps the words. */
html.rd {
  --role-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%23f2c14e'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23140f06'/%3E%3C/svg%3E");
  --role-exp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237eb6ff' d='M6 1h4v3l3 8a3 3 0 0 1-2.7 4H5.7A3 3 0 0 1 3 12l3-8z'/%3E%3C/svg%3E");
  --role-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d27bff' d='M8 1l6 7-6 7-6-7z'/%3E%3C/svg%3E");
  --role-jungle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237dff6a' d='M8 1l5 6H10l3 6H3l3-6H3z'/%3E%3C/svg%3E");
  --role-roam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffb020' d='M2 9h8l2-3 2 1-3 4H2z'/%3E%3Ccircle cx='5' cy='12' r='2' fill='%23ffb020'/%3E%3Ccircle cx='11' cy='12' r='2' fill='%23ffb020'/%3E%3C/svg%3E");
  --role-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff6b6b' d='M9 1l2 2-4 4 2 2-4 4-2-2 4-4-2-2z'/%3E%3C/svg%3E");
  --role-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239ad0ff' d='M2 8h8l-2-2 5-3-3 5-2-2v6H2z'/%3E%3C/svg%3E");
  --role-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238d7bff' d='M8 1l6 3v4c0 4-2.6 6-6 7-3.4-1-6-3-6-7V4z'/%3E%3C/svg%3E");
}
/* Liquipedia lane marks (Mobile Legends wiki, CC BY-SA). The phone hides the word and shows this picture. */
html.rd body[data-game="mlbb"] {
  --role-gold: url("/roles/ml-gold.png");
  --role-exp: url("/roles/ml-exp.png");
  --role-mid: url("/roles/ml-mid.png");
  --role-jungle: url("/roles/ml-jungle.png");
  --role-roam: url("/roles/ml-roam.png");
}
html.rd body[data-game="lol"] {
  --role-top: url("/roles/lol-top.png");
  --role-jungle: url("/roles/lol-jungle.png");
  --role-mid: url("/roles/lol-mid.png");
  --role-bot: url("/roles/lol-bot.png");
  --role-support: url("/roles/lol-support.png");
}
html.rd body .roleMark[data-role="gold"] { --role-icon: var(--role-gold); }
html.rd body .roleMark[data-role="exp"] { --role-icon: var(--role-exp); }
html.rd body .roleMark[data-role="mid"] { --role-icon: var(--role-mid); }
html.rd body .roleMark[data-role="jungle"] { --role-icon: var(--role-jungle); }
html.rd body .roleMark[data-role="roam"] { --role-icon: var(--role-roam); }
html.rd body .roleMark[data-role="top"] { --role-icon: var(--role-top); }
html.rd body .roleMark[data-role="bot"] { --role-icon: var(--role-bot); }
html.rd body .roleMark[data-role="support"] { --role-icon: var(--role-support); }
@media (max-width: 700px) {
  html.rd body .roleMark {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background: var(--role-icon) center / 16px 16px no-repeat;
  }
  html.rd body .roleMarkWord {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  html.rd body select.roleSelect:has(option:checked:not([value=""])) {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    padding-left: 0;
    padding-right: 18px;
    color: transparent;
  }
  html.rd body select.roleSelect:has(option[value="gold"]:checked) { background-image: var(--role-gold); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="exp"]:checked) { background-image: var(--role-exp); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="mid"]:checked) { background-image: var(--role-mid); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="jungle"]:checked) { background-image: var(--role-jungle); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="roam"]:checked) { background-image: var(--role-roam); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="top"]:checked) { background-image: var(--role-top); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="bot"]:checked) { background-image: var(--role-bot); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
  html.rd body select.roleSelect:has(option[value="support"]:checked) { background-image: var(--role-support); background-repeat: no-repeat; background-position: 6px center; background-size: 16px 16px; }
}