/* Responsive */
.ch_gamebar {
  box-sizing: border-box;
}

.ch_user_menu {
  box-sizing: border-box;
}

.ch_infobar .ch_user_block ul.ch_user_menu li.link a.fullwidth {
  box-sizing: border-box;
}

.ch_blog-comments {
  box-sizing: border-box;
}

nav[role="navigation"] {
  box-sizing: border-box;
}

footer {
  box-sizing: border-box;
}

.users-clubs,
.users-property {
  margin: 0 0 20px 0;
}
.users-clubs ul,
.users-property ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.users-clubs ul li,
.users-property ul li {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  margin: 0 10px 0 0;
}
.users-clubs ul li a,
.users-property ul li a {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  text-decoration: none;
}
.users-clubs ul li a:link,
.users-property ul li a:link {
  border-color: #66bae2;
  color: #0c83bd;
}
.users-clubs ul li a:visited,
.users-property ul li a:visited {
  border-color: #94aab5;
  color: #3e728b;
}
.users-clubs ul li a:hover, .users-clubs ul li a:active,
.users-property ul li a:hover,
.users-property ul li a:active {
  border-color: #1785ba;
  color: #08577d;
}
.users-clubs ul li.repair a:link, .users-clubs ul li.repair a:visited,
.users-property ul li.repair a:link,
.users-property ul li.repair a:visited {
  border-color: #e8c485;
  color: #e0930e;
}
.users-clubs ul li.repair a:hover, .users-clubs ul li.repair a:active,
.users-property ul li.repair a:hover,
.users-property ul li.repair a:active {
  border-color: #e7a93d;
  color: #ca850d;
}
.users-clubs ul li.idle a:link, .users-clubs ul li.idle a:visited,
.users-property ul li.idle a:link,
.users-property ul li.idle a:visited {
  border-color: #e89284;
  color: #e02a0d;
}
.users-clubs ul li.idle a:hover, .users-clubs ul li.idle a:active,
.users-property ul li.idle a:hover,
.users-property ul li.idle a:active {
  border-color: #e8523b;
  color: #ca260c;
}
.users-clubs .clubs-invitations,
.users-property .clubs-invitations {
  background: #fdf6db;
  margin: 10px -10px;
  padding: 10px;
}
.users-clubs .clubs-invitations h3,
.users-property .clubs-invitations h3 {
  margin: 0;
}
.users-clubs .clubs-invitations ol,
.users-property .clubs-invitations ol {
  display: block;
  margin: 6px 0;
}
.users-clubs .clubs-invitations ol li,
.users-property .clubs-invitations ol li {
  *zoom: 1;
  font-size: 12px;
  line-height: 18px;
  margin: 0 0 6px 0;
  padding: 0 0 0 20px;
}
.users-clubs .clubs-invitations ol li:after,
.users-property .clubs-invitations ol li:after {
  content: "";
  display: table;
  clear: both;
}
.users-clubs .clubs-invitations ol li .date,
.users-property .clubs-invitations ol li .date {
  color: #5d5d5d;
  margin: 0 10px 0 -20px;
}
.users-clubs .clubs-invitations ol li a,
.users-property .clubs-invitations ol li a {
  border-style: solid;
  border-width: 0 0 1px 0;
  text-decoration: none;
}
.users-clubs .clubs-invitations ol li a:link,
.users-property .clubs-invitations ol li a:link {
  border-color: #66bae2;
  color: #0c83bd;
}
.users-clubs .clubs-invitations ol li a:visited,
.users-property .clubs-invitations ol li a:visited {
  border-color: #94aab5;
  color: #3e728b;
}
.users-clubs .clubs-invitations ol li a:hover, .users-clubs .clubs-invitations ol li a:active,
.users-property .clubs-invitations ol li a:hover,
.users-property .clubs-invitations ol li a:active {
  border-color: #1785ba;
  color: #08577d;
}
.users-clubs .clubs-invitations ol li ul,
.users-property .clubs-invitations ol li ul {
  clear: both;
  float: right;
  list-style: none;
}
.users-clubs .clubs-invitations ol li ul li,
.users-property .clubs-invitations ol li ul li {
  display: inline-block;
  font-size: 11px;
  line-height: 14px;
  margin: 0 0 0 6px;
  padding: 0;
}
.users-clubs .clubs-invitations ol li ul li a:link,
.users-property .clubs-invitations ol li ul li a:link {
  border-color: #66bae2;
  color: #0c83bd;
}
.users-clubs .clubs-invitations ol li ul li a:visited,
.users-property .clubs-invitations ol li ul li a:visited {
  border-color: #66bae2;
  color: #0c83bd;
}
.users-clubs .clubs-invitations ol li ul li a:hover, .users-clubs .clubs-invitations ol li ul li a:active,
.users-property .clubs-invitations ol li ul li a:hover,
.users-property .clubs-invitations ol li ul li a:active {
  border-color: #1785ba;
  color: #08577d;
}

/* Блок «Ежедневно»: вход за неделю и задания. Цвета — из палитры игры (жёлтый #f0bc00, синий #0c83bd). */
.daily-block {
  margin: 20px 0;
}
.daily-block:after {
  content: "";
  display: table;
  clear: both;
}
.daily-block .tabs .daily-tab.active {
  font-weight: bold;
}
/* Рамка фокуса — для клавиатуры, не после клика мышью. */
.daily-block .tabs .daily-tab:focus:not(:focus-visible) {
  outline: none;
}
.daily-block .inner {
  padding: 10px;
}
.daily-message {
  clear: both;
  background: #fdf6db;
  border: 1px solid #f2cb3f;
  border-radius: 4px;
  margin: 0;
  padding: 8px 10px;
  font-size: 13px;
}
.daily-streak {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.daily-streak > div {
  flex: 1 1 0;
  min-width: 60px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  padding: 6px 2px;
  font-size: 11px;
  color: #646464;
}
.daily-streak > div img {
  display: block;
  margin: 2px auto;
  max-width: 44px;
  max-height: 44px;
}
.daily-streak > div b {
  display: block;
  color: #292929;
  font-size: 11px;
  font-weight: normal;
  line-height: 13px;
}
.daily-streak .daily-day {
  display: block;
}
.daily-streak .daily-mark {
  display: block;
  font-size: 22px;
  line-height: 44px;
  color: #bbb;
}
.daily-streak > div.done {
  background: #e8f3f9;
  border-color: #0c83bd;
}
.daily-streak > div.missed {
  background: #f9f9f9;
}
.daily-streak > div.today {
  border: 2px solid #f0bc00;
  background: #fdf6db;
}
.daily-streak > div.big {
  background: #fdf6db;
  border-color: #efc500;
}
.daily-note {
  font-size: 12px;
  color: #646464;
  margin: 8px 0;
}
.daily-quest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #ededed;
  font-size: 13px;
}
.daily-quest:first-child {
  border-top: 0;
}
.daily-quest form {
  margin: 0;
}
.daily-bar {
  height: 6px;
  width: 140px;
  background: #ededed;
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}
.daily-bar i {
  display: block;
  height: 100%;
  background: #f0bc00;
}
.daily-done {
  color: #0c83bd;
  white-space: nowrap;
}

/* Юбилей «Кетхоуму 20 лет»: «С возвращением», подарки, «Подтвердите почту». Палитра игры. */
.anniversary {
  margin: 0 0 10px 0;
}
.ch_announcement.festive {
  background: #fdf6db;
  border: 1px solid #f2cb3f;
  border-radius: 4px;
  margin: 20px 0;
  padding: 12px 20px;
}
.ch_announcement.festive h2 {
  color: #d9a300;
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
  margin: 0 0 6px 0;
}
.ch_announcement.festive p,
.ch_announcement.festive li {
  color: #292929;
  font-size: 14px;
  line-height: 19px;
}
.ch_announcement.festive p {
  margin: 6px 0;
}
.ch_announcement.festive ul {
  list-style: disc;
  margin: 6px 0;
  padding-left: 20px;
}
.ch_announcement.festive form {
  margin: 0;
}
.ch_announcement.festive .anniversary-gifts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.anniversary-gifts li {
  background: #fff;
  border: 1px solid #efc500;
  border-radius: 4px;
  padding: 6px 10px;
  text-align: center;
  width: 110px;
}
.anniversary-gifts img {
  display: block;
  margin: 0 auto 4px;
  max-width: 60px;
  max-height: 60px;
}
.anniversary-gifts span {
  display: block;
  font-size: 12px;
  line-height: 15px;
}

/*
 * Главная по макету home-layout: профиль, «Работа» под ним, «Ежедневно» первым в сайдбаре (на телефоне — под работой),
 * «Кот» с вкладками на телефоне, «Позовите друзей» внизу сайдбара. Свои классы home-*, общие блоки не трогаем.
 */
div.profile.home-profile .home-profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 10px 10px 10px;
}
div.profile.home-profile .home-profile-head h1 {
  margin: 0;
}
.home-profile-cat .cat-type {
  color: #5c5c5c;
}
.home-profile-cat .cat-name {
  color: #05364d;
  font-weight: bold;
}
.home-profile-cat .hw-badge {
  vertical-align: middle;
}
div.player-parameters.home-parameters {
  border-bottom-width: 0;
}
.profile .info p.home-premium {
  color: #555;
  margin: 0 10px 10px;
}

/* Основная колонка на широком экране: блоки не упираются в линию сайдбара. */
@media (min-width: 481px) {
  .content.home-main > :not(.inner) {
    margin-right: 20px;
  }
}

/* Работа: строка в духе «Сейчас в Кетхоуме». */
.home-work {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  padding: 10px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  font-size: 13px;
  line-height: 18px;
}
.home-work-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fdf6db;
  color: #c99a00;
}
.home-work-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-work-text b {
  font-size: 14px;
}
.home-work-text > span {
  color: #666;
  font-size: 12px;
}
.home-work-text #time-left {
  color: #292929;
  font-weight: bold;
}
.home-work-text .home-work-bar {
  display: block;
  height: 5px;
  max-width: 240px;
  margin-top: 3px;
  border-radius: 3px;
  background: #eee;
  overflow: hidden;
}
.home-work-bar i {
  display: block;
  height: 100%;
  background: #f0bc00;
}
.home-work .home-work-button {
  flex: none;
  white-space: nowrap;
}

/* Вкладки «Ежедневно» и «Кот»: открытая вкладка белая и без нижней линии, остальные серые. */
ul.tabs.home-tabs li a:link,
ul.tabs.home-tabs li a:visited {
  background: #f3f3f3;
}
ul.tabs.home-tabs li.active {
  border-bottom-color: #fff;
}
ul.tabs.home-tabs li.active a:link,
ul.tabs.home-tabs li.active a:visited {
  background: #fff;
  color: #292929;
}

/* «Ежедневно» в сайдбаре и на телефоне: неделя одной строкой с прокруткой, сегодняшний день прокручивается в вид (home.js). */
.daily-block .daily-streak {
  position: relative;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.daily-block .daily-streak > div {
  flex: 0 0 64px;
}
/* В сайдбаре видно четыре с половиной дня: край пятого показывает, что неделя листается. */
.sidebar .daily-block .daily-streak > div {
  flex-basis: 57px;
  min-width: 0;
}
.sidebar .daily-block {
  margin: 0 10px 20px;
}
.sidebar .daily-block h2 {
  font-size: 17px;
}
.sidebar .daily-block .inner {
  padding: 10px 0;
}

/* «Кот»: на широком экране три колонки, как были; вкладки только на телефоне. */
.home-cat .home-cat-head {
  display: none;
}

/* Позовите друзей. */
.home-invite {
  background: #fef0bf;
  margin: 20px 10px;
  padding: 14px;
  font-size: 12px;
  line-height: 16px;
}
.home-invite-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
}
.home-invite-head b {
  font-size: 14px;
}
.home-invite-head span {
  color: #555;
}
.home-invite-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #f3dc8a;
}
.home-invite-row:last-child {
  padding-bottom: 0;
}
.home-invite-row > div {
  flex: 1;
  min-width: 0;
}
.home-invite-row b,
.home-invite-row span {
  display: block;
}
.home-invite-row span {
  color: #555;
}
a.home-invite-copy:link,
a.home-invite-copy:visited {
  flex: none;
  background: #fff;
  border: 1px solid #e9b82c;
  border-radius: 3px;
  color: #333;
  padding: 5px 9px;
  text-decoration: none;
}
a.home-invite-copy:hover {
  background: #fdf6db;
  color: #333;
  text-decoration: none;
}
a.home-invite-copy.done {
  border-color: #2f6b45;
  color: #2f6b45;
}
input.home-invite-url {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 0 8px;
  padding: 4px 6px;
  border: 1px solid #e9b82c;
  background: #ffe3a1;
  font-size: 12px;
}

@media (max-width: 480px) {
  /* Профиль: аватар 96 px слева от имени, статус и счётчики под ними. */
  div.profile.home-profile {
    min-height: 0;
  }
  div.profile.home-profile div.avatar {
    float: left;
    width: 96px;
    margin: 10px 12px 0 0;
  }
  div.profile.home-profile div.avatar > img.avatar {
    width: 96px;
    height: 96px;
    margin: 0;
  }
  div.profile.home-profile div.avatar .hw-framed {
    width: 96px;
    height: 96px;
    margin: 0;
  }
  div.profile.home-profile .home-profile-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 96px;
    margin: 10px 0 0;
  }
  div.profile.home-profile .status {
    clear: left;
    margin-top: 12px;
  }
  .profile .info p.home-premium {
    clear: left;
  }

  .home-work {
    flex-wrap: wrap;
    padding: 10px;
  }
  .home-work .home-work-button {
    padding: 9px 14px;
  }

  /* «Кот»: одна колонка за раз, строки — таблицей во всю ширину. */
  .home-cat .home-cat-head {
    display: block;
    border: 0;
    margin: 10px 0 0;
  }
  .home-cat .column > h2,
  .home-cat .home-cat-off {
    display: none;
  }
  div.cat-info.home-cat ul.parameters li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 0 6px;
    border-bottom: 1px solid #ededed;
  }
  div.cat-info.home-cat ul.parameters li .title {
    margin: 0 auto 0 0;
  }
  /* Уровень, потом опыт в скобках, потом плашка «сколько до следующего уровня» — как на широком экране. */
  div.cat-info.home-cat ul.parameters li .level,
  div.cat-info.home-cat ul.parameters li .value {
    order: 1;
    min-width: 24px;
    text-align: right;
  }
  div.cat-info.home-cat ul.parameters li .experience {
    order: 2;
    color: #767676;
  }
  div.cat-info.home-cat ul.parameters li .badge {
    order: 3;
    box-sizing: border-box;
    min-width: 44px;
    text-align: center;
  }
  .home-cat .footnote {
    padding: 10px 6px 0;
    text-align: right;
  }

  .home-invite {
    margin: 20px 0;
  }
  .home-invite-row {
    padding: 10px 0;
  }
  a.home-invite-copy:link,
  a.home-invite-copy:visited {
    padding: 10px 12px;
    font-size: 13px;
  }
}