/* Флаг страны у имени игрока и окно «Выбери флаг» (чат «Механики», js/cflags.js; картинка img/cflags.png — все флаги одной сеткой) */
.cf { display: inline-block; flex: none; vertical-align: middle; background: url(../img/cflags.png?v=2) no-repeat; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(42, 18, 6, .8); }   /* ровно 1 пиксель: 1.5 на дробном масштабе (ПК) округлялось по-разному слева и справа */
.cf.none { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(42, 18, 6, .45); }
.cf.none::after { content: '+'; display: flex; align-items: center; justify-content: center; height: 100%; font: 900 15px/1 Rubik, sans-serif; color: rgba(42, 18, 6, .6); }
.cf-btn { cursor: pointer; pointer-events: auto; transition: transform .12s; }
.cf-btn:hover { transform: scale(1.08); }
.cf-btn:active { transform: scale(.94); }
/* меню ПК: флаг слева от имени */
.m3-who-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* «Аккаунт и аватары» */
.ac-name .cf, .ac-guest .cf { margin-right: 4px; }
.ac-guest { display: flex; align-items: center; gap: 4px; }
/* 30.10 (Сергей): в рейтинге — без аватарок, только место, флаг, имя и очки; в «Аккаунте» нет галочки «Отображать фото профиля в рейтинге» */
.lb-row .lb-avatar { display: none !important; }
#ac-photo-box, #ac-photo-note { display: none !important; }
/* рейтинг: флаг перед именем */
.lb-name.has-cf { display: flex; align-items: center; gap: 6px; overflow: visible; padding-left: 1px; }   /* 30.10 (Сергей: «слева нет рамки»): .lb-name обрезал (overflow: hidden) левый край рамки флага; имя сокращается в .lb-nm */
.lb-name.has-cf .lb-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* окно выбора */
#ov-cc .panel { width: 360px; }
.cc-now { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; font-size: 18px; font-weight: 900; color: var(--ink); }
.cc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 330px; padding: 8px; border-radius: 18px;
  background: rgba(120, 72, 30, .14); box-shadow: inset 0 2px 0 rgba(42, 18, 6, .18); overscroll-behavior: contain; touch-action: pan-y; }
.cc-cell { display: flex; align-items: center; justify-content: center; padding: 6px 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.cc-cell:hover { background: rgba(255, 255, 255, .45); }
.cc-cell.on { background: #fff; box-shadow: 0 0 0 3px #ffd23f, 0 0 0 5px var(--ink); }
.cc-cell .cf { width: 44px; height: 33px; }