html, body { margin: 0; height: 100%; overflow: hidden; background: #6fb547; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
/* игра, а не страница: без выделения текста, меню по долгому тапу и «потяни — обновится» (и требование Яндекс Игр) */
html, body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent; }
img.cur { height: 1em; vertical-align: -0.15em; }   /* значок валюты площадки у цены */
input, textarea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
#c { display: block; width: 100vw; height: 100vh; touch-action: none; }
#menu { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(40, 70, 20, .35); }
#menu.hidden { display: none; }
.card { max-height: calc(100vh - 24px); overflow-y: auto; background: #fffbea; border: 4px solid #5b3a1e; border-radius: 22px; padding: 24px 28px; width: min(420px, calc(100vw - 32px)); box-sizing: border-box; text-align: center; box-shadow: 0 10px 0 #5b3a1e, 0 18px 40px rgba(0,0,0,.35); }
.logo { font-size: 64px; line-height: 1; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-6deg); } }
h1 { margin: 6px 0 4px; font-size: 40px; color: #e2561d; text-shadow: 3px 3px 0 #5b3a1e; letter-spacing: 1px; }
.sub { margin: 0 0 16px; color: #5b3a1e; }
.sub .line { display: block; }   /* подзаголовок: предложение — строка */
input { width: 100%; box-sizing: border-box; font-size: 20px; padding: 10px 14px; border: 3px solid #5b3a1e; border-radius: 12px; text-align: center; outline: none; background: #fff; }
button { margin-top: 12px; width: 100%; font-size: 24px; font-weight: bold; padding: 12px; border: 3px solid #5b3a1e; border-radius: 14px; background: #ffcf33; color: #5b3a1e; cursor: pointer; box-shadow: 0 5px 0 #5b3a1e; }
button:active { transform: translateY(4px); box-shadow: 0 1px 0 #5b3a1e; }
.online { color: #7a6a50; font-size: 14px; margin: 10px 0 6px; }
.skin { display: flex; gap: 10px; align-items: center; margin-top: 12px; text-align: left; }
#preview { flex: none; width: 120px; height: 120px; background: #7ec850; border: 3px solid #5b3a1e; border-radius: 16px; }
.pick { flex: 1; min-width: 0; }
.label { font-size: 12px; font-weight: bold; color: #7a6a50; margin: 2px 0; }
.row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.row button { width: auto; margin: 0; font-size: 13px; padding: 3px 7px; border-width: 2px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 #5b3a1e; }
.row button:active { transform: translateY(2px); box-shadow: none; }
.row button.on { background: #ffcf33; }
.row .sw { width: 26px; height: 26px; padding: 0; border-radius: 50%; }
.row .sw.on { outline: 3px solid #e2561d; outline-offset: 1px; background-image: none; }
.label.left { text-align: left; margin-top: 10px; }
/* выбор языка с флагами: кнопка «флаг Название ▾» (в настройках — во всю ширину) */
button.langpick { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px;
  font-size: 16px; padding: 6px 10px; border-width: 2px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #5b3a1e; }
button.langpick .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
button.langpick .arr { font-size: 12px; opacity: .7; }
/* язык на главном экране — рядом с «Настройками», такой же высоты */
button.langpick.lang-main { flex: none; width: auto; min-width: 0; margin-top: 12px; padding: 7px 10px; }
#mainBottom .langpick .nm { display: none; }   /* внизу главного экрана тесно: только флаг ▾ */
svg.flag { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(60,35,15,.35); }
/* раскрытый список языков — поверх меню */
.langpop { position: fixed; z-index: 20; overflow-y: auto; box-sizing: border-box; padding: 4px;
  background: #fffbea; border: 3px solid #5b3a1e; border-radius: 12px; box-shadow: 0 6px 0 #5b3a1e, 0 12px 28px rgba(0,0,0,.35); }
.langpop button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 6px 10px; text-align: left;
  font-size: 16px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; white-space: nowrap; }
.langpop button:hover { background: #fff1c4; }
.langpop button.on { background: #ffcf33; }
.langpop button:active { transform: none; box-shadow: none; }
.row.modes button { flex: 1; font-size: 14px; padding: 6px 4px; }
.party { display: flex; gap: 6px; margin-top: 6px; }
.party input { flex: 1; font-size: 16px; padding: 6px 10px; text-transform: uppercase; letter-spacing: 2px; }
.party button { width: auto; margin: 0; font-size: 14px; padding: 6px 10px; box-shadow: 0 3px 0 #5b3a1e; }
.ctrls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ctrls button { margin: 0; font-size: 14px; padding: 8px 6px; border-width: 2px; border-radius: 10px; background: #fff; box-shadow: 0 3px 0 #5b3a1e; text-align: left; line-height: 1.25; }
.ctrls button small { display: block; font-weight: normal; font-size: 11px; color: #7a6a50; }
.ctrls button.on { background: #ffcf33; }
.row.audio { justify-content: center; margin-top: 8px; }
.row.audio button.off { opacity: .45; text-decoration: line-through; }
.fs { position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left));
  width: 36px; height: 36px; margin: 0; padding: 0;
  font-size: 18px; border-radius: 50%; border: 3px solid #5b3a1e; background: rgba(255,251,234,.85); box-shadow: none; z-index: 5; }
.fs:active { transform: scale(.92); box-shadow: none; }
.hidden { display: none !important; }
h2 { margin: 0 0 2px; font-size: 30px; color: #e2561d; text-shadow: 2px 2px 0 #5b3a1e; }
button.alt { background: #fff; font-size: 20px; padding: 9px; }
button.ghost { background: transparent; box-shadow: none; border-color: transparent; font-size: 16px; padding: 6px; margin-top: 6px; color: #7a6a50; text-decoration: underline; }
button.ghost:active { transform: none; }
button:disabled { opacity: .5; cursor: default; }
.err { color: #c0392b; font-weight: bold; font-size: 14px; margin: 8px 0 0; min-height: 0; }
.err:empty { display: none; }
/* название игры: рубленый мультяшный шрифт с толстой обводкой и объёмной тенью */
h1.title { margin: 0 0 10px; font-family: "Rubik Mono One", "Arial Black", "Trebuchet MS", sans-serif; font-weight: 400;
  font-size: 62px; line-height: 1; letter-spacing: 2px; color: #ffcf33; transform: rotate(-3deg);
  -webkit-text-stroke: 3px #5b3a1e; paint-order: stroke fill;
  text-shadow: 0 4px 0 #e2561d, 0 9px 0 #5b3a1e, 0 14px 18px rgba(0,0,0,.28); }
h1.title span { display: block; }   /* «Бээтл» и «Рояль» — две крупные строки */
h1.title span + span { margin-top: 4px; font-size: 1.08em; }
/* «Настройки» — внизу главного экрана, скромная */
.opts-btn { margin-top: 12px; font-size: 16px; padding: 7px; border-width: 2px; border-radius: 12px; background: #fff; box-shadow: 0 3px 0 #5b3a1e; }
#code { text-transform: uppercase; letter-spacing: 6px; }
/* экран комнаты */
.cfg { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.cfg button { margin: 0; font-size: 15px; padding: 6px 10px; border-width: 2px; border-radius: 10px; box-shadow: 0 3px 0 #5b3a1e; }
.cfg .toggle { flex: 1; background: #fff; }
.cfg .toggle.on { background: #ffcf33; }
.stepper { flex: 1; display: flex; align-items: center; gap: 6px; border: 2px solid #5b3a1e; border-radius: 10px; padding: 0 6px; background: #fff; color: #5b3a1e; font-weight: bold; }
.stepper button { width: 30px; padding: 2px 0; font-size: 18px; box-shadow: none; border-radius: 8px; }
.stepper span { flex: 1; font-size: 15px; white-space: nowrap; }
.players { list-style: none; padding: 0; margin: 4px 0 0; text-align: left; max-height: 220px; overflow-y: auto; }
.players li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 9px; color: #5b3a1e; font-weight: bold; font-size: 15px; }
.players li:nth-child(odd) { background: rgba(91,58,30,.07); }
.players li.me { background: rgba(255,207,51,.5); }
.players .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #5b3a1e; background: #fff; }
.players .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .tag { font-weight: normal; font-size: 12px; color: #7a6a50; }
.players button { width: auto; margin: 0; padding: 0 8px; font-size: 14px; border-width: 2px; border-radius: 8px; background: #fff; box-shadow: none; }
/* состав по командам: люди и боты на местах, клик по команде — встать на место бота */
.roster { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.roster .tm { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border: 2px solid transparent; border-radius: 10px; background: rgba(91,58,30,.07); cursor: pointer; text-align: left; }
.roster .tm:hover { border-color: #e2a400; }
.roster .tm.mine { background: rgba(255,207,51,.5); cursor: default; }
.roster .tm.full { cursor: default; }
.roster .tm.full:hover, .roster .tm.mine:hover { border-color: transparent; }
.roster .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #5b3a1e; }
.roster .seat { flex: 1; min-width: 0; font-size: 13px; font-weight: bold; color: #5b3a1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster .seat.bot { color: #9a8c74; font-weight: normal; }
.roster .seat.me { color: #c0392b; }
.room-info { margin: 0 0 6px; font-size: 14px; font-weight: bold; color: #5b3a1e; }
.room-info:empty, .ready-st:empty { display: none; }
.ready-st { margin: 6px 0 0; font-size: 14px; color: #7a6a50; font-weight: bold; }
#readyBtn.on { background: #7ddc5a; }
.modepick button .cnt { display: block; font-size: 12px; font-weight: bold; color: #2e7d32; margin-top: 2px; }
/* выбор режима быстрой игры */
.modepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.modepick button { margin: 0; padding: 12px 6px; font-size: 22px; line-height: 1.15; background: #fff; }
.modepick button.on { background: #ffcf33; }
.modepick button small { display: block; font-size: 13px; font-weight: normal; color: #7a6a50; margin-top: 3px; }
.modepick button .ic { display: block; font-size: 22px; letter-spacing: -4px; }
/* профиль и магазин */
.row2 { display: flex; gap: 8px; }
#nickRow { margin: 4px 0 2px; }
#nickRow input { text-transform: none; letter-spacing: 0; }
.err.ok { color: #2e7d32; }
#name:disabled { background: #f3ecd8; color: #5b3a1e; }
.row2 .opts-btn { flex: 1; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 4px; }
.stat { background: rgba(91,58,30,.07); border-radius: 10px; padding: 6px 4px; color: #5b3a1e; }
.stat b { display: block; font-size: 20px; }
.stat small { font-size: 11px; color: #7a6a50; }
.stat.main { grid-column: 1 / -1; background: #ffcf33; }
.stat.main b { font-size: 26px; }
.logins button { font-size: 17px; padding: 9px; background: #fff; }
.logins button[data-provider="vk"]:not(:disabled) { background: #0077ff; color: #fff; }
.logins button[data-provider="yandex"]:not(:disabled) { background: #fc3f1d; color: #fff; }
.logins button:disabled { opacity: .45; }
.top { text-align: left; margin: 4px 0 0; padding-left: 26px; max-height: 210px; overflow-y: auto; color: #5b3a1e; font-size: 14px; }
.top li { padding: 2px 0; }
.top li.me { font-weight: bold; color: #c0392b; }
.top li span { float: right; color: #7a6a50; font-size: 12px; }
.top:empty::before { content: attr(data-empty); color: #7a6a50; font-size: 13px; margin-left: -26px; }
.top li .lv { float: none; display: inline-block; min-width: 26px; margin-right: 4px; color: #fff; background: #8a6a3a; border-radius: 6px; font-size: 11px; text-align: center; }
/* уровень: номер, полоска опыта, сколько до следующего */
.lvl { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; color: #5b3a1e; }
.lvl b { font-size: 15px; white-space: nowrap; }
.lvl .bar { flex: 1; height: 12px; background: rgba(91,58,30,.12); border-radius: 6px; overflow: hidden; }
.lvl .bar i { display: block; height: 100%; background: #7ddc5a; border-radius: 6px; }
.lvl small { font-size: 11px; color: #7a6a50; white-space: nowrap; }
.season { margin: 2px 0; font-size: 13px; color: #7a6a50; }
.seg { justify-content: center; margin: 4px 0 0; }
.awards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0; font-size: 13px; color: #5b3a1e; }
.awards span { background: rgba(91,58,30,.07); border-radius: 8px; padding: 2px 8px; }
.topnav { display: flex; align-items: center; gap: 6px; }
.topnav span { flex: 1; }
.topnav button { width: auto; margin: 0; padding: 0 8px; font-size: 12px; border-width: 2px; border-radius: 8px; background: #fff; }
.topnav button:disabled { opacity: .3; }
/* кнопка «Примерочная» — под шапками и шерстью на главном экране */
.fit-btn { margin: 4px 0 0; padding: 5px 8px; font-size: 15px; border-width: 2px; border-radius: 10px;
  background: #fff; box-shadow: 0 3px 0 #5b3a1e; }
button.boost { font-size: 15px; padding: 7px; background: #e9ffd9; }
/* примерочная: баран и что с примеренным делать */
.fit-top { display: flex; gap: 12px; align-items: center; text-align: left; margin: 6px 0 2px; }
#fitPreview { flex: none; width: 150px; height: 150px; background: #7ec850; border: 3px solid #5b3a1e; border-radius: 16px; }
.fit-info { flex: 1; min-width: 0; }
.fit-row { margin-bottom: 8px; color: #5b3a1e; }
.fit-row b { display: block; font-size: 16px; }
.fit-row small { font-size: 13px; color: #7a6a50; }
.fit-row small.ok { color: #2e7d32; font-weight: bold; }
.fit-row button.buy { width: auto; margin: 4px 6px 0 0; font-size: 14px; padding: 5px 10px; border-width: 2px; box-shadow: 0 3px 0 #5b3a1e; }
.fit-row button.buy.clover { background: #c8f2b0; }
.shopitem.on { outline: 3px solid #e2561d; outline-offset: -1px; }
#fitList { max-height: 40vh; overflow-y: auto; }
.packs { display: flex; gap: 6px; margin: 4px 0 6px; }
.packs button { flex: 1; margin: 0; padding: 6px 4px; font-size: 15px; border-width: 2px; background: #c8f2b0; box-shadow: 0 3px 0 #5b3a1e; }
.packs button small { display: block; font-size: 12px; color: #e2561d; }
/* магазин: карточки предметов */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin: 4px 0 6px; }
.shopitem { background: rgba(91,58,30,.07); border-radius: 10px; padding: 6px 4px; color: #5b3a1e; cursor: pointer; }
.shopitem canvas { display: block; margin: 0 auto 2px; border-radius: 8px; }
.shopitem b { display: block; font-size: 12px; }
.shopitem small { font-size: 12px; color: #e2561d; font-weight: bold; }
.shopitem.own small { color: #2e7d32; }
/* закрытые скины: уровнем или сезонной наградой */
.row button.locked { opacity: .55; background: #eee4cc; }
.row .sw.locked { opacity: .45; }
.row .sw.locked::after { content: '🔒'; font-size: 11px; }
.menu-btn { left: max(52px, calc(env(safe-area-inset-left) + 42px)); }
/* телефон / низкий экран: меню компактнее */
@media (max-height: 560px), (max-width: 560px) {
  .card { padding: 12px 16px; }
  .logo { font-size: 36px; }
  h1 { font-size: 28px; margin: 2px 0; }
  .sub, .help, .online { display: none; }
  #preview { width: 84px; height: 84px; }
  #fitPreview { width: 100px; height: 100px; }
  .fit-btn { font-size: 13px; padding: 4px 6px; margin-top: 2px; }
  input { font-size: 16px; padding: 6px 10px; }
  button { font-size: 20px; padding: 8px; margin-top: 8px; }
  .ctrls button { font-size: 13px; padding: 5px 6px; }
  .ctrls button small { display: none; }
  h2 { font-size: 24px; }
  h1.title { font-size: 46px; margin: 0 0 6px; -webkit-text-stroke-width: 2px; }
  #roomSub { display: block; font-size: 13px; margin-bottom: 6px; }
  button.alt { font-size: 17px; padding: 6px; }
  .opts-btn { margin-top: 8px; padding: 5px; }
  button.langpick.lang-main { margin-top: 8px; padding: 5px 6px; font-size: 14px; }
  .langpop button { font-size: 14px; padding: 4px 8px; }
  .players { max-height: 140px; }
  .modepick button { padding: 6px; font-size: 18px; }
  .modepick button .ic { font-size: 17px; }
  .players li { padding: 2px 8px; }
}
/* телефон горизонтально: две колонки, чтобы кнопки было видно без прокрутки */
@media (max-height: 560px) and (min-width: 600px) {
  .card { width: min(780px, calc(100vw - 24px)); }
  .logo { display: none; }
  #tabPlay, #tabOpts, #scrRoom { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; grid-auto-flow: row dense; align-items: start; }
  #name { grid-column: 1; }
  .skin { grid-column: 1; grid-row: 2 / span 3; }
  #tabPlay > button, #tabPlay .party, #menuErr { grid-column: 2; }
  #tabPlay > button:first-of-type { margin-top: 0; }
  .label.left, .ctrls, #lang { grid-column: 1; }
  .row.audio, .help, #optsBack { grid-column: 2; }
  .label.left { margin-top: 0; }
  #scrRoom > h2, #roomSub, #roomInfo { grid-column: 1 / -1; }
  .roster { max-height: 150px; }
  .modepick { grid-template-columns: repeat(4, 1fr); }
  h1.title { font-size: 38px; margin: 0 0 16px; }   /* телефон горизонтально: по высоте тесно — одной строкой */
  h1.title span { display: inline; }
  .room-l { grid-column: 1; }
  .room-r { grid-column: 2; }
  #start { margin-top: 0; }
  #roomErr { margin: 0 0 8px; }
}
.fs.hidden { display: none; }
.help { text-align: left; color: #5b3a1e; font-size: 14px; padding-left: 18px; margin: 8px 0 0; line-height: 1.6; }