/* 03.11 (Сергей): чат в меню ПК (js/chat.js) — на месте наклейки «Новые тракторы», под карточкой рейтинга, той же ширины (330, отступ справа 40) */
.m3-chat { display: none; }
body.pcm.chat-on .m3-new { display: none !important; }
body.pcm.chat-on .m3-chat { position: absolute; z-index: 3; right: 40px; top: var(--ch-t, 440px); bottom: 128px; width: 330px; min-height: 96px; display: flex; flex-direction: column;
  padding: 12px 10px 8px; border-radius: 18px; background: #fffdf6; color: #23271f; pointer-events: auto;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 10px 24px rgba(0, 0, 0, .35); font: 600 13px/1.25 Rubik, Arial, sans-serif; }
/* 03.11 (Сергей, Дизайн): чат больше не вытягивается вверх при наведении — места хватает (круглые кнопки ушли влево, чат до низа) */
/* «Чат» — ярлык на верхнем крае (как «Новинка!» у прежней наклейки): строка переписки не тратится на заголовок */
.m3-chat .ch-h { position: absolute; top: -11px; left: 14px; padding: 2px 10px 3px; border-radius: 9px; background: linear-gradient(#8ee05a, #3fae2a); border: 2px solid #1f5a10; line-height: 1; }
.m3-chat .ch-h b { font-size: 13px; font-weight: 900; color: #fff; text-shadow: 0 1px 0 #1f5a10; }
.m3-chat .ch-list { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #c9bfa8 transparent; overscroll-behavior: contain; }
.m3-chat .ch-list > :first-child { margin-top: auto; }
.m3-chat .ch-list { -webkit-mask-image: linear-gradient(transparent, #000 9px); mask-image: linear-gradient(transparent, #000 9px); }   /* верхняя строка тает под ярлыком «Чат», а не обрезается */   /* сообщения прижаты к низу, у поля ввода */
.m3-chat .ch-m { position: relative; padding: 1px 20px 1px 0; overflow-wrap: anywhere; }
.m3-chat .ch-m .cf { display: inline-block; vertical-align: -2px; margin-right: 4px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.m3-chat .ch-m b { font-weight: 800; cursor: pointer; }
.m3-chat .ch-m.me b { color: #2f8a1c; cursor: default; }
.m3-chat .ch-m span { font-weight: 500; }
.m3-chat .ch-m.sys { padding-right: 0; color: #7a5a1c; font-style: italic; }
.m3-chat .ch-m.sys svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.m3-chat .ch-m.sys b { cursor: default; font-style: normal; }
.m3-chat .ch-rep { position: absolute; right: 0; top: 1px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; opacity: 0; }
.m3-chat .ch-rep svg { width: 13px; height: 13px; fill: none; stroke: #9a8a70; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.m3-chat .ch-m:hover .ch-rep, .m3-chat .ch-rep:focus-visible { opacity: 1; }
.m3-chat .ch-rep:hover { background: #fde2dc; }
.m3-chat .ch-rep:hover svg { stroke: #d0301c; }
.m3-chat .ch-rep.done { opacity: 1; cursor: default; }
.m3-chat .ch-rep.done svg { stroke: #d0301c; fill: #f6b4a8; }
.m3-chat .ch-empty { padding: 18px 4px; text-align: center; color: #8a7a60; font-weight: 700; }
.m3-chat .ch-note { display: none; margin-top: 3px; padding: 3px 6px; border-radius: 8px; background: #fff1d6; color: #7a4a10; font-size: 12px; font-weight: 700; text-align: center; }
.m3-chat .ch-note.show { display: block; }
.m3-chat .ch-in { display: flex; gap: 6px; margin-top: 5px; }
.m3-chat.ro .ch-in { display: none; }
.m3-chat .ch-in input { flex: 1; min-width: 0; height: 28px; padding: 0 9px; border: 2px solid #d9cfb8; border-radius: 10px; background: #fff; color: #23271f; font: 600 13px Rubik, Arial, sans-serif; outline: none; }
.m3-chat .ch-in input:focus { border-color: #57b33a; }
.m3-chat .ch-in button { flex: none; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 10px; background: linear-gradient(#8ee05a, #3fae2a); box-shadow: 0 2px 0 #23701a; cursor: pointer; }
.m3-chat .ch-in button svg { width: 17px; height: 17px; fill: #fff; stroke: #1f5a10; stroke-width: 1.6; stroke-linejoin: round; vertical-align: middle; }
.m3-chat .ch-in button:active { transform: translateY(2px); box-shadow: 0 0 0 #23701a; }
/* 03.11 (Сергей): «Позвать в бой» — карточка над ником (js/chat.js chatCard) */
.m3-chat .ch-m:not(.me):not(.sys) b:hover { text-decoration: underline; }
.m3-chat .ch-card { position: absolute; z-index: 6; display: none; min-width: 170px; max-width: 250px; padding: 8px 10px 9px; border-radius: 14px; background: #fff; color: #23271f;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35); border: 2px solid #3a1d0a; text-align: center; }
.m3-chat .ch-card.show { display: block; }
.m3-chat .ch-card .cc-n { margin-bottom: 6px; font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-chat .ch-card .cc-n .cf { display: inline-block; vertical-align: -3px; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.m3-chat .ch-card .cc-go { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 11px; background: linear-gradient(#ffb347, #f07a12);
  box-shadow: 0 3px 0 #a14a06; color: #fff; font: 900 14px Rubik, Arial, sans-serif; text-shadow: 0 1px 0 #a14a06; cursor: pointer; white-space: nowrap; }
.m3-chat .ch-card .cc-go svg { width: 18px; height: 18px; }
.m3-chat .ch-card .cc-go:hover { filter: brightness(1.06); }
.m3-chat .ch-card .cc-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #a14a06; }
.m3-chat .ch-card .cc-go:disabled { background: #d9d2c2; box-shadow: 0 3px 0 #a99f8a; text-shadow: none; color: #8a7f6a; cursor: default; filter: none; transform: none; }
.m3-chat .ch-card .cc-why { display: none; margin-top: 6px; font-size: 12px; font-weight: 700; color: #8a5a10; line-height: 1.2; }
.m3-chat .ch-card.off .cc-why { display: block; }
/* позванный: плашка над чатом — «… зовёт тебя в бой!»; лежит в слое окон, поверх них (место — js/chat.js chatInvPlace) */
.ch-inv { position: absolute; z-index: 70; left: 0; top: 0; width: 338px; box-sizing: border-box; display: none; padding: 10px 12px 12px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(#fff6d6, #ffe08a); border: 3px solid #3a1d0a; box-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 12px 28px rgba(0, 0, 0, .45); text-align: center; color: #23271f; font: 600 13px/1.25 Rubik, Arial, sans-serif; }
.ch-inv.show { display: block; animation: ci-in .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ci-in { from { transform: translateY(14px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.ch-inv .ci-t { font-size: 15px; font-weight: 800; line-height: 1.25; }
.ch-inv .ci-t b { font-weight: 900; }
.ch-inv .ci-t .cf { display: inline-block; vertical-align: -3px; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.ch-inv .ci-b { display: flex; justify-content: center; gap: 10px; margin-top: 9px; }
.ch-inv button { height: 34px; padding: 0 18px; border: 0; border-radius: 12px; font: 900 15px Rubik, Arial, sans-serif; cursor: pointer; }
.ch-inv .ci-yes { min-width: 120px; background: linear-gradient(#8ee05a, #3fae2a); box-shadow: 0 3px 0 #23701a; color: #fff; text-shadow: 0 1px 0 #1f5a10; }
.ch-inv .ci-no { background: #fff; box-shadow: 0 3px 0 #a99f8a; color: #5a4a30; }
.ch-inv button:active { transform: translateY(2px); }
.ch-inv button:disabled { opacity: .6; cursor: default; }
.ch-inv .ci-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(58, 29, 10, .15); }
.ch-inv .ci-bar i { display: block; height: 100%; background: #f07a12; transform-origin: 0 50%; }
@keyframes ci-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* позвавший: строка в лобби «Игры с друзьями» — «Ждём …», «… в комнате», «… отказался» */
.fr-inv { display: none; margin: 8px auto 0; padding: 6px 12px; border-radius: 10px; background: #fff1d6; color: #7a4a10; font-weight: 800; font-size: 14px; text-align: center; }
.fr-inv.show { display: block; }
.fr-inv.yes, .fr-inv.in { background: #e3f9d3; color: #23701a; }
.fr-inv.no, .fr-inv.late, .fr-inv.err { background: #f3ece0; color: #6a5a48; }