/* Бутылочка - приложение huEVO во фрейме. Сцена - как у старой «Бутылочки» ВКонтакте: деревянный пол (или стол на
   сукне), фотокарточки игроков по кругу, бутылка в центре. Интерфейс вокруг (вкладки, кнопки, окна, чат, музыка,
   вход, админка) - в стиле самого huEVO: цвета, шрифт, кнопки и прямые углы сайта, светлая и темная тема
   (переменные --hu-* - huevo-tokens.css, тема - класс hu-dark по параметру запуска hu_scheme).
   Текстуры дерева и сукна - CSS-градиенты (свои), картинок со стороны нет. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #FFFFFF; }
html.hu-dark-page, html.hu-dark-page body { background: #1E1F22; color-scheme: dark; }
.btg { --line: var(--hu-line); --text: var(--hu-text); --muted: var(--hu-muted); --link: var(--hu-link); --red: var(--hu-accent);
      height: 100%; display: flex; flex-direction: column; font: 13px/1.45 var(--hu-font); color: var(--text); background: var(--hu-card);
      -webkit-font-smoothing: antialiased; }
.btg *, .btg *::before, .btg *::after { box-sizing: border-box; }
.btg [hidden] { display: none !important; }
.btg button { font: inherit; cursor: pointer; }
.btg-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- вкладки - как вкладки разделов huEVO (mg-tabs): серый текст, у текущей - красная черта снизу ---------- */
.btg-top { flex: 0 0 auto; display: flex; align-items: stretch; height: 40px; background: var(--hu-card); color: var(--hu-text);
      border-bottom: 1px solid var(--hu-line); }
.btg-tabs { display: flex; min-width: 0; overflow: hidden; padding-left: 6px; }
.btg-tab { display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: none;
      color: var(--hu-muted); white-space: nowrap; font-size: 13.5px; }
.btg-tab:hover { color: var(--hu-text); }
.btg-tab.is-on { color: var(--hu-text); border-bottom-color: var(--hu-accent); font-weight: 500; }
.btg-top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.btg-hearts { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.btg-heart-ico { font-style: normal; color: var(--hu-accent-text); font-size: 15px; }
.btg-gear { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; background: none; color: var(--hu-muted); }
.btg-gear:hover { background: var(--hu-hover); color: var(--hu-text); }
.btg-ico { width: 16px; height: 16px; }

/* ---------- игра и чат ---------- */
.btg-main { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); }
.btg-game { position: relative; overflow: hidden; min-height: 0; display: flex; flex-direction: column; background: var(--floor); }
.btg-table { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; --cw: 60px; --ch: 72px; }
.btg-bg { position: absolute; inset: 0; background: var(--floor); }
/* волокна дерева - шум feTurbulence (свой SVG), вытянутый вдоль досок */
.btg-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain, .55); mix-blend-mode: multiply;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.004' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0 0.08 0 0 0 1.1 -0.35'/%3E%3C/filter%3E%3Crect width='184' height='400' filter='url(%23g)'/%3E%3C/svg%3E"); }
.btg.theme-romance .btg-bg::after, .btg.theme-winter .btg-bg::after, .btg.theme-space .btg-bg::after { --grain: .25; }
/* доски пола: стыки досок, волокна и разный тон - тремя слоями градиентов с разным шагом */
.btg, .btg-theme-pick.theme-classic { --floor:
      repeating-linear-gradient(90deg, rgba(40, 18, 4, .55) 0 2px, transparent 2px 92px),
      repeating-linear-gradient(90deg, rgba(255, 220, 170, .05) 0 30px, rgba(0, 0, 0, .06) 30px 61px, transparent 61px 92px),
      repeating-linear-gradient(0deg, rgba(60, 28, 8, .10) 0 1px, transparent 1px 6px, rgba(255, 220, 170, .05) 6px 7px, transparent 7px 13px),
      repeating-linear-gradient(90deg, #9C6B3E 0 46px, #A8774A 46px 92px, #92633A 92px 184px, #AD7C4D 184px 276px);
      --name: #FFFFFF; }
.btg.theme-club, .btg-theme-pick.theme-club { --floor:
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .6) 0 2px, transparent 2px 92px),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(90deg, #4A2C18 0 46px, #553420 46px 92px, #3E2414 92px 184px, #5A3822 184px 276px); }
.btg.theme-summer, .btg-theme-pick.theme-summer { --floor:
      repeating-linear-gradient(90deg, rgba(110, 70, 30, .5) 0 2px, transparent 2px 92px),
      repeating-linear-gradient(0deg, rgba(120, 80, 30, .10) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(90deg, #C99A62 0 46px, #D2A56E 46px 92px, #BF8F58 92px 184px, #D6AC78 184px 276px); --name: #2B1A0C; }
.btg.theme-space, .btg-theme-pick.theme-space { --floor:
      repeating-linear-gradient(45deg, rgba(40, 18, 4, .45) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(40, 18, 4, .45) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(45deg, #8A5630 0 20px, #7A4824 20px 40px); }
/* стол на сукне: сукно - мелкий шум точками, стол - овал с ободком */
.btg.theme-romance, .btg-theme-pick.theme-romance, .btg.theme-winter, .btg-theme-pick.theme-winter { --felt: #5A7F3C; --floor:
      radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .08) 1px, transparent 1.5px) 0 0 / 5px 5px, var(--felt); }
.btg.theme-winter, .btg-theme-pick.theme-winter { --felt: #3E6A8E; }
/* овал стола: размер и место ставит game.js (layout) - внутри кольца карточек, ни одна его не задевает */
.btg-oval { display: none; position: absolute; z-index: 1; border-radius: 50%; border: 8px solid #6A3D1C;
      background: repeating-linear-gradient(90deg, rgba(60, 28, 8, .12) 0 1px, transparent 1px 9px), radial-gradient(ellipse, #C08A55, #A8713F 70%, #93602F);
      box-shadow: 0 5px 12px rgba(0, 0, 0, .45); }
.btg.theme-romance .btg-oval, .btg.theme-winter .btg-oval { display: block; }
.btg-theme-pick.theme-romance .btg-theme-sw::before, .btg-theme-pick.theme-winter .btg-theme-sw::before {
      content: ""; position: absolute; inset: 14% 10%; border-radius: 50%; border: 3px solid #6A3D1C; background: #B47C47; }

.btg { -webkit-tap-highlight-color: transparent; }
/* углы стола: слева - пригласить, музыка вкл/выкл, громкость; справа - номер стола, сменить стол, встать */
.btg-tl { position: absolute; left: 6px; top: 6px; z-index: 7; display: flex; align-items: center; gap: 4px; }
.btg-invite { display: flex; align-items: center; padding: 0; border: 0; background: none; }
.btg-plus { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: #4CAF50; color: #FFFFFF; font-style: normal; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.btg-plus .btg-ico { width: 15px; height: 15px; stroke-width: 3; }
.btg-tableinfo { position: absolute; right: 6px; top: 6px; z-index: 4; display: flex; align-items: center; gap: 4px; color: #FFFFFF;
      font-size: 11px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.btg-tablenum { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; max-width: 64px; }
.btg-tablenum > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btg-age { font-size: 10px; opacity: .85; }
.btg-ibtn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .5);
      background: rgba(0, 0, 0, .28); color: #FFFFFF; padding: 0; }
.btg-ibtn[aria-pressed="false"], .btg-ibtn.is-muted { opacity: .5; }
@media (hover: hover) { .btg-ibtn:hover { background: rgba(0, 0, 0, .42); } }
.btg-test { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 4; padding: 1px 6px; background: #F0B429; color: #3A2A00; font-size: 10px; border-radius: 2px; }

/* бутылка лежит в центре */
.btg-bottle { position: absolute; left: 50%; top: 50%; width: 26px; height: 78px; transform: translate(-50%, -50%) rotate(0deg); z-index: 2;
      filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, .45)); }
.btg-svg-bottle { display: block; width: 100%; height: 100%; }
.btg-bottle.is-mine { cursor: pointer; }

/* фотокарточки игроков: место (left/top - центр карточки) ставит game.js; значки - по углам фото, подпись под ним */
.btg-seats { position: absolute; inset: 0; z-index: 3; }
.btg-card { position: absolute; width: calc(var(--cw) + 28px); transform: translate(-50%, calc(-1 * var(--ch) / 2 - 2px)); display: flex; flex-direction: column;
      align-items: center; cursor: pointer; outline: none; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
.btg-photo { position: relative; width: var(--cw); height: var(--ch); background: #FFFFFF; padding: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      transform: rotate(var(--tilt, 0deg)); flex: 0 0 auto; }
.btg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; background: #DDDDDD; }
.btg-card:focus-visible .btg-photo { outline: 2px solid #FFFFFF; }
.btg-card.is-spinner .btg-photo { box-shadow: 0 0 0 3px #FFD54F, 0 2px 4px rgba(0, 0, 0, .5); }
.btg-card.is-target .btg-photo { box-shadow: 0 0 0 3px #FF5A5F, 0 2px 4px rgba(0, 0, 0, .5); }
.btg-name { margin-top: 4px; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow-wrap: anywhere; text-align: center; font-size: 11px; line-height: 12px; color: var(--name, #FFFFFF); text-shadow: 0 1px 2px rgba(0, 0, 0, .85); }
.btg.theme-summer .btg-name { text-shadow: none; }
.btg-card.is-me .btg-name { font-weight: bold; }
.btg.is-narrow .btg-name { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: none; line-height: 13px; }
/* пустое место: пунктирная рамка «Сесть» */
.btg-free { display: flex; align-items: center; justify-content: center; padding: 4px; background: rgba(255, 255, 255, .12); border: 2px dashed rgba(255, 255, 255, .75);
      box-shadow: none; transform: none; color: #FFFFFF; font-size: 11px; line-height: 1.2; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.btg-card.is-empty:focus-visible .btg-free { background: rgba(255, 255, 255, .28); border-style: solid; }
@media (hover: hover) { .btg-card.is-empty:hover .btg-free { background: rgba(255, 255, 255, .28); border-style: solid; } }
.btg-card.is-empty { -webkit-tap-highlight-color: transparent; }
.btg-card.is-off { cursor: default; opacity: .5; }
.btg-kc { position: absolute; right: -9px; top: -9px; z-index: 2; width: 22px; height: 20px; display: flex; align-items: center; justify-content: center; padding-bottom: 2px;
      color: #FFFFFF; font-size: 10px; font-weight: bold; font-style: normal;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 7-11 14-11 14z' fill='%23E53935' stroke='%23FFFFFF' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.btg-crown { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 16px; font-style: normal; line-height: 1; z-index: 2; }
.btg-sticker { position: absolute; left: -9px; top: -9px; z-index: 2; font-size: 17px; font-style: normal; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.btg-dec { position: absolute; right: -6px; bottom: -6px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: #4CAF50; color: #FFFFFF; font-size: 10px; line-height: 16px; text-align: center; font-style: normal; }

/* подпись «Крутит бутылочку» у крутящего и таймер */
.btg-label { position: absolute; z-index: 4; transform: translate(-50%, -50%); color: var(--name, #FFFFFF); font-size: 12px; text-align: center;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .8); white-space: nowrap; pointer-events: none; line-height: 1.3; }
.btg-label b { display: block; font-size: 13px; }
/* в середине стола под овалом: состояние на плашке и кнопки (место и ширину ставит game.js - внутри круга мест) */
.btg-center { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
      pointer-events: none; text-align: center; }
.btg-center > * { pointer-events: auto; max-width: 100%; }
/* плашка - всегда одна строка: текст с многоточием, таймер справа не сжимается (кнопки ниже не наезжают) */
.btg-status { display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 4px 12px; background: rgba(20, 12, 4, .62); color: #FFFFFF;
      font-size: 13px; line-height: 1.3; white-space: nowrap; }
.btg-status #bt-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btg-status #bt-wait { flex: 0 0 auto; }
.btg-status #bt-wait:empty { display: none; }
.btg-status:has(#bt-status:empty) { display: none; }
.btg.is-narrow .btg-status { font-size: 12.5px; padding: 3px 10px; }
.btg-act, .btg-watch { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.btg-center .btg-b { min-height: 44px; padding: 0 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.btg.is-tight .btg-center .btg-b { padding: 0 10px; font-size: 12px; }
.btg-watch > span { display: none; }
.btg-center .btg-err { padding: 3px 10px; background: rgba(160, 20, 30, .9); color: #FFFFFF; text-shadow: none; font-size: 12px; }
.btg-vol { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: 200px; padding: 8px 12px; background: var(--hu-card); color: var(--hu-text);
      box-shadow: var(--hu-shadow); text-shadow: none; }
.btg-vol input { accent-color: var(--hu-accent); }
.btg-vol-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.btg-vol-row input[type="range"] { flex: 1; min-width: 0; }
.btg-err { color: #FFD2D2; font-size: 11px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.btg-err:empty { display: none; }
.btg-side .btg-err, .btg-box .btg-err { color: var(--hu-error); text-shadow: none; padding: 2px 0; font-size: 12.5px; }

/* кнопки - как кнопки huEVO (vk-btn): серая, основная - темная, главное действие игры - красная */
.btg-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 14px; border: 0;
      background: var(--hu-btn); color: var(--hu-btn-text); font: 600 12.5px/1.2 var(--hu-font); white-space: nowrap; text-shadow: none; }
.btg-b:hover { background: var(--hu-btn-hover); }
.btg-b:disabled { opacity: .55; cursor: default; }
.btg-b-blue { background: var(--hu-head-2); color: #FFFFFF; }
.btg-b-blue:hover { background: #4D4D4D; }
.btg-b-red { background: var(--hu-accent); color: #FFFFFF; }
.btg-b-red:hover { background: #C42626; }
.btg-b-line { background: var(--hu-btn); color: var(--hu-btn-text); }
.btg-b-big { min-height: 40px; padding: 0 30px; font-size: 14px; }

/* эффекты: губы летят к выбранному, сердце; отказ - разбитое сердце */
.btg-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.btg-fly { position: absolute; font-size: 26px; transform: translate(-50%, -50%); transition: left .9s ease-in-out, top .9s ease-in-out; }
.btg-pop { position: absolute; font-size: 30px; transform: translate(-50%, -50%); animation: btg-pop 1.3s ease-out forwards; }
@keyframes btg-pop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      100% { transform: translate(-50%, -120%) scale(1); opacity: 0; } }
.btg-banner { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); z-index: 6; padding: 3px 10px; background: rgba(0, 0, 0, .55);
      color: #FFFFFF; border-radius: 3px; font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.btg-banner.is-on { opacity: 1; }
/* брошенный помидор (game.js giftFx: дуга и вращение - из JS) и клякса на фото получателя */
.btg-fly img { display: block; width: 28px; height: 28px; object-fit: contain; }
.btg-throw { transition: none; font-size: 28px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.btg-splat { position: absolute; transform: translate(-50%, -50%); animation: btg-splat 2.5s ease-out forwards; }
.btg-splat::before { content: ''; position: absolute; inset: 14%; border-radius: 46% 54% 40% 60% / 56% 44% 58% 42%;
      background: radial-gradient(circle at 36% 34%, rgba(255, 255, 255, .45) 0 5%, transparent 6%),
                  radial-gradient(circle at 58% 40%, #F4D35E 0 3%, transparent 4%), radial-gradient(circle at 44% 62%, #F4D35E 0 3%, transparent 4%),
                  radial-gradient(circle at 66% 60%, #F4D35E 0 2.5%, transparent 3.5%), radial-gradient(circle at 50% 48%, #E8361F 0 52%, #C21D0E 72%);
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.btg-splat b { position: absolute; border-radius: 50%; background: #D52A16; }
.btg-splat b:nth-child(1) { width: 17%; height: 17%; right: 4%; top: 10%; }
.btg-splat b:nth-child(2) { width: 12%; height: 12%; left: 3%; bottom: 20%; }
.btg-splat b:nth-child(3) { width: 9%; height: 22%; left: 52%; top: 76%; border-radius: 40% 40% 50% 50%; transform-origin: top; animation: btg-drip 2.5s ease-in forwards; }
@keyframes btg-splat { 0% { transform: translate(-50%, -50%) scale(.25); opacity: 1; } 10% { transform: translate(-50%, -50%) scale(1.12, .95); }
      18% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: .95; transform: translate(-50%, -48%); } 100% { opacity: 0; transform: translate(-50%, -42%); } }
@keyframes btg-drip { 0%, 20% { transform: scaleY(.2); } 100% { transform: scaleY(1.4); } }
@media (prefers-reduced-motion: reduce) {
    .btg-fly { transition: none; } .btg-pop { animation-duration: .01s; }
    /* без движения: клякса просто видна пару секунд и исчезает */
    .btg-splat { animation: btg-splat-still 2.5s steps(1, end) forwards; } .btg-splat b:nth-child(3) { animation: none; }
}
@keyframes btg-splat-still { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- правая колонка: музыка и чат ---------- */
.btg-side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--hu-line); background: var(--hu-card); }
.btg-music { flex: 0 0 auto; padding: 8px; border-bottom: 1px solid var(--hu-line); }
.btg-player { position: relative; display: flex; align-items: center; gap: 8px; height: 60px; padding: 6px 10px 10px; background: var(--hu-head); color: #FFFFFF; cursor: pointer; }
.btg-eq { display: flex; align-items: flex-end; gap: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.btg-eq i { flex: 1; height: 30%; background: #D23A3A; }
.btg-player.is-playing .btg-eq i { animation: btg-eq .7s ease-in-out infinite alternate; }
.btg-player.is-playing .btg-eq i:nth-child(2) { animation-delay: -.3s; }
.btg-player.is-playing .btg-eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes btg-eq { from { height: 20%; } to { height: 100%; } }
.btg-player-text { min-width: 0; display: flex; flex-direction: column; }
.btg-player-text b, .btg-player-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btg-player-text small { color: #A9ADB3; font-size: 11px; }
.btg-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #4A4B50; font-style: normal; }
.btg-prog i { display: block; height: 100%; width: 0; background: var(--hu-accent); }
.btg-music-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.btg-queue-n { color: var(--hu-muted); font-size: 12px; white-space: nowrap; }
.btg-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 8px 10px; overflow-wrap: anywhere; }
.btg-chat-list li { padding: 2px 0; }
.btg-welcome { background: var(--hu-raise-2); padding: 7px 9px !important; margin-bottom: 6px; color: var(--hu-text); }
.btg-chat-list .btg-sys { color: var(--hu-muted); }
.btg-chat-list .btg-sys b { color: var(--hu-link); font-weight: 600; }
.btg-chat-list .btg-k-kiss b, .btg-chat-list .btg-k-like b, .btg-chat-list .btg-k-gift b { color: var(--hu-accent-text); }
.btg-nm { font-weight: 600; text-decoration: none; }
.btg-t { color: var(--hu-muted); font-size: 11px; margin-right: 4px; }
.btg-rep, .btg-del { border: 0; background: none; color: var(--hu-muted); padding: 0 3px; font-size: 12px; }
.btg-rep:hover, .btg-del:hover { color: var(--hu-accent-text); }
.btg-chat-form { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--hu-line); }
.btg-input { flex: 1; min-width: 0; min-height: 32px; padding: 6px 9px; border: 1px solid var(--hu-field-line); font: 13px/1.4 var(--hu-font);
      color: var(--hu-text); background: var(--hu-field); outline: none; }
.btg-input:focus { border-color: var(--hu-field-focus); box-shadow: 0 0 0 2px rgba(58, 58, 58, .08); }
.btg select, .btg textarea { color: var(--hu-text); background: var(--hu-field); border: 1px solid var(--hu-field-line); }
.btg input[type="checkbox"], .btg input[type="radio"], .btg input[type="range"] { accent-color: var(--hu-accent); }
.btg-side .btg-err { padding: 0 6px 4px; }

/* ---------- окна и списки ---------- */
.btg-over { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-start; justify-content: center; padding: 14px; overflow-y: auto; background: rgba(0, 0, 0, .25); }
.btg-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(0, 0, 0, .5); }
.btg-box { width: 360px; max-width: 100%; min-width: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--hu-card); color: var(--hu-text);
      box-shadow: var(--hu-shadow); }
.btg-over .btg-box { width: 420px; margin: auto 0; }
.btg-lobby { z-index: 9; background: var(--hu-bg); }
.btg-lobby .btg-box { width: 440px; }
.btg-text { white-space: pre-line; overflow-wrap: anywhere; }
.btg-lobby-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btg-lobby-btns .btg-b-big { min-width: 200px; }
.btg-topl-small img { width: 24px; height: 29px; }
.btg-topl-small li { padding: 2px 0; }
.btg-topl a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.btg-atext { grid-column: 1 / -1; }
.btg-admin-grid .btg-atext textarea { min-height: 70px; padding: 6px 9px; font: 13px/1.4 var(--hu-font); resize: vertical; }
.btg-atext .btg-b { align-self: flex-start; margin-top: 3px; }
.btg-box-wide { width: 440px; }
/* шапка окна - как заголовок карточки huEVO (vk-card-title) */
.btg-box-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px;
      padding: 0 6px 0 16px; background: var(--hu-raise); color: var(--hu-text); border-bottom: 1px solid var(--hu-line); font-weight: 500; font-size: 15px; }
.btg-box-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btg-box-body { padding: 14px 16px; }
.btg-box-body p { margin: 0 0 10px; }
.btg-x { flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: none; color: var(--hu-muted); font-size: 22px; line-height: 1; }
.btg-x:hover { color: var(--hu-text); background: var(--hu-hover); }
.btg-center-text { text-align: center; }
.btg-lobby-bottle { width: 18px; height: 54px; margin: 2px auto 8px; transform: rotate(60deg); }
.btg-mystats { color: var(--muted); text-align: center; }
.btg-h { margin: 12px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--hu-line); color: var(--hu-text); font-weight: 600; font-size: 13.5px; }
.btg-h small { color: var(--muted); font-weight: normal; }
.btg-rooms, .btg-topl, .btg-tracks, .btg-admin-list { list-style: none; margin: 0; padding: 0; }
.btg-room { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--hu-line); }
.btg-room-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.btg-room-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btg-room .btg-b { flex: 0 0 auto; padding: 0 12px; }
.btg-room-name small { color: var(--muted); }
.btg-faces { display: flex; gap: 2px; overflow: hidden; }
.btg-faces img { flex: 0 0 auto; width: 18px; height: 22px; object-fit: cover; }
.btg-empty { color: var(--muted); padding: 4px 0; }
.btg-here, .btg-full { color: var(--muted); white-space: nowrap; }
.btg-create { display: flex; gap: 4px; margin-top: 8px; }
.btg-admin-gifts { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.btg-admin-gifts > b { color: var(--hu-text); font-weight: 600; }
.btg-admin-grid label.btg-agift { flex-direction: row; align-items: center; gap: 6px; color: var(--text); }
.btg-agift > span:first-child { width: 110px; }
.btg-agift input[type="number"] { width: 90px; }
.btg-topl { counter-reset: n; }
.btg-topl li { display: flex; align-items: center; gap: 7px; padding: 4px 0; border-bottom: 1px solid var(--hu-line); counter-increment: n; }
.btg-topl li::before { content: counter(n); width: 16px; color: var(--muted); text-align: right; }
.btg-topl li.btg-empty::before { content: none; }
.btg-topl a { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; color: var(--link); text-decoration: none; }
.btg-topl img { width: 28px; height: 34px; object-fit: cover; }
.btg-topl b { color: var(--hu-accent-text); white-space: nowrap; }
.btg-subtabs { display: flex; gap: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--hu-line); }
.btg-subtab { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--hu-muted); }
.btg-subtab:hover { color: var(--hu-text); }
.btg-subtab.is-on { border-bottom-color: var(--hu-accent); color: var(--hu-text); font-weight: 500; }
.btg-pc { display: flex; gap: 10px; margin-bottom: 8px; }
.btg-pc-photo { flex: 0 0 auto; width: 90px; height: 110px; background: var(--hu-raise); }
.btg-pc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btg-pc-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.btg-gifts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.btg-gift { display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; border: 0; background: var(--hu-raise-2); color: var(--hu-text); }
.btg-gift:hover { background: var(--hu-btn-hover); }
.btg-gift span { font-size: 22px; line-height: 1.1; }
.btg-gift small { font-size: 10px; color: var(--muted); }
#bt-pc-mod .btg-b, #bt-pc-acts > .btg-b { margin: 0 4px 4px 0; }
#bt-pc-mod { display: flex; flex-wrap: wrap; align-items: center; }
#bt-pc-mod .btg-h { flex: 0 0 100%; }
.btg-pc-info { min-width: 0; }
.btg-modal .btg-b { white-space: normal; text-align: center; }
.btg-now { padding: 8px 10px; background: var(--hu-raise-2); margin-bottom: 8px; }
.btg-now span { display: block; color: var(--muted); font-size: 11px; }
.btg-queue { margin: 0 0 8px; padding-left: 18px; color: var(--hu-text); }
.btg-queue:empty { display: none; }
.btg-mu-search { display: flex; gap: 4px; margin-bottom: 4px; }
.btg-small { color: var(--muted); font-size: 11px; }
.btg-share { margin: 8px 0 0; }
.btg-tracks li { display: flex; align-items: center; gap: 5px; padding: 5px 0; border-bottom: 1px solid var(--hu-line); }
.btg-tracks li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btg-tracks small { color: var(--muted); }
.btg-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.btg-theme-pick { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--hu-line-2); background: var(--hu-card); color: var(--hu-link); }
.btg-theme-pick.is-cur { border-color: var(--hu-accent); box-shadow: 0 0 0 1px var(--hu-accent); }
.btg-theme-sw { position: relative; display: block; height: 48px; background: var(--floor); }
.btg-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 10px; }
.btg-admin-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--hu-muted); }
.btg-admin-grid input:not([type="checkbox"]), .btg-admin-grid select { min-height: 32px; padding: 4px 8px; font: 13px var(--hu-font);
      color: var(--hu-text); background: var(--hu-field); border: 1px solid var(--hu-field-line); outline: none; }
.btg-admin-grid input:not([type="checkbox"]):focus, .btg-admin-grid select:focus, .btg-admin-grid textarea:focus { border-color: var(--hu-field-focus); }
.btg-admin-list li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--hu-line); }
.btg-admin-list li > span { flex: 1; min-width: 0; }
.btg-admin-list li.btg-adm-room { display: block; }
.btg-adm-room-head, .btg-adm-person { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.btg-adm-room-head > span, .btg-adm-person > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btg-adm-room-head small { color: var(--hu-muted); }
.btg-adm-person { padding-left: 12px; }
.btg-adm-room .btg-b, .btg-admin-list .btg-b { padding: 0 10px; flex: 0 0 auto; }
.btg-snd { flex-wrap: nowrap !important; }
.btg-snd-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.btg-snd-name small { color: var(--hu-muted); font-size: 11.5px; }
.btg-snd input[type="range"] { width: 70px; flex: 0 0 auto; }
.btg-snd .btg-b { padding: 0 10px; flex: 0 0 auto; }
@media (max-width: 500px) { .btg-snd { flex-wrap: wrap !important; } .btg-snd-name { flex-basis: 100%; } }
.btg-sticker img { display: block; width: 20px; height: 20px; object-fit: contain; }
.btg-gift span img { display: block; width: 26px; height: 26px; object-fit: contain; }
.btg-theme-pick small { color: var(--hu-muted); font-size: 11.5px; }
/* админка: вкладки и разделы настроек */
.btg-adm-tabs { position: sticky; top: 0; z-index: 2; background: var(--hu-card); margin: -14px -16px 10px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.btg-adm-tabs .btg-subtab { flex: 0 0 auto; }
.btg-adm-sec { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--hu-line); }
.btg-adm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.btg-adm-sec-head b { font-size: 14px; font-weight: 600; }
.btg-admin-grid label small { color: var(--hu-muted); font-size: 11px; }
.btg-adm-save { margin: 4px 0 0; }
.btg-adm-rows { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.btg-adm-row { display: flex; align-items: center; gap: 8px; }
.btg-adm-row > span { flex: 1 1 auto; min-width: 0; }
.btg-adm-row .btg-theme-sw { flex: 0 0 auto; width: 44px; height: 26px; padding: 0; border: 0; }
.btg-adm-row input[type="number"] { width: 100px; }
.btg-chk { flex-direction: row !important; align-items: center; gap: 6px; color: var(--hu-text) !important; white-space: nowrap; }
#bt-admin .btg-box { width: 680px; }
/* подарки в продаже: каждая строка - карточка */
.btg-gift-adm li.btg-gift-card { display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--hu-line); border-radius: 10px; background: var(--hu-card, transparent); }
.btg-gift-top { display: flex; align-items: flex-end; gap: 10px; }
.btg-gift-top .btg-gift-pic { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.btg-gift-top .btg-gift-pic img { width: 36px; height: 36px; }
.btg-gift-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.btg-gf { display: flex !important; flex-direction: column; gap: 3px; min-width: 0; margin: 0; }
.btg-gf > span { color: var(--hu-muted); font-size: 11.5px; line-height: 1.2; white-space: nowrap; }
.btg-gf-title { flex: 1 1 auto; }
.btg-gf-emoji { flex: 0 0 110px; }
.btg-gf-price { flex: 0 0 120px; }
.btg-gf-sort { flex: 0 0 84px; }
.btg-gift-adm input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; min-height: 34px; padding: 4px 8px; font: 14px var(--hu-font); color: var(--hu-text); background: var(--hu-field); border: 1px solid var(--hu-field-line); border-radius: 8px; min-width: 0; }
.btg-gift-adm .btg-gift-on { min-height: 34px; display: inline-flex !important; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; }
.btg-gift-adm .btg-gift-on input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.btg-gift-adm .btg-gift-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btg-gift-adm .btg-gift-btns .btg-b { flex: 0 0 auto; }
.btg-gift-adm .btg-gift-btns label.btg-b { font-weight: 400; }
.btg-gift-pic { font-size: 24px; text-align: center; }
.btg-gift-pic img { width: 30px; height: 30px; object-fit: contain; display: block; margin: 0 auto; }
.btg-gift-new { margin-top: 10px; }
.btg-gift-new input:not([type="checkbox"]) { min-height: 32px; padding: 4px 8px; font: 13px var(--hu-font); color: var(--hu-text); background: var(--hu-field); border: 1px solid var(--hu-field-line); }
.btg-log li { display: block !important; }
.btg-log small { color: var(--hu-muted); }
.btg-log-ch { color: var(--hu-text); font-size: 12.5px; padding-left: 10px; overflow-wrap: anywhere; }
@media (max-width: 500px) {
    .btg-gf-emoji { flex: 1 1 100%; }
    .btg-gf-price { flex: 1 1 120px; }
    .btg-gf-sort { flex: 0 0 90px; }
    .btg-gift-adm .btg-gift-btns .btg-b { flex: 1 1 auto; text-align: center; }
}
}
.btg-box h4 { margin: 14px 0 6px; color: var(--hu-text); font-weight: 600; font-size: 14px; }

/* ---------- узкое окно, но не высокое (планшет, окно игры 4:3): чат справа поуже ---------- */
@media (max-width: 900px) {
    .btg-main { grid-template-columns: minmax(0, 1fr) clamp(220px, 32%, 300px); }
    .btg-tab { padding: 0 8px; }
}
/* небольшое окно (планшет, 4:3 рядом с меню сайта): чат поуже, столу - больше места */
@media (max-width: 640px) and (min-aspect-ratio: 9/10) {
    .btg-main { grid-template-columns: minmax(0, 1fr) clamp(190px, 34%, 220px); }
}
/* ---------- телефон (узкое и высокое окно): стол сверху (высота - от ширины), чат снизу ---------- */
@media (max-width: 500px), (max-width: 640px) and (max-aspect-ratio: 9/10) {
    .btg { font-size: 12px; }
    /* без overscroll-behavior: contain - иначе пролистывание пальцем по игре не уходило странице huEVO (застревало) */
    .btg-main { display: flex; flex-direction: column; overflow-y: auto; }
    /* --bt-vh - высота окна игры без клавиатуры (game.js): клавиатура не меняет ни стол, ни карточки */
    /* стол - почти квадрат по ширине (не тянется в высоту на длинных телефонах), остальное - чату */
    .btg-game { flex: 0 0 auto; height: min(calc(100vw + 44px), max(280px, calc(var(--bt-vh, 100vh) - 230px))); }
    .btg-side { flex: 1 1 auto; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
    .btg-tab { padding: 0 8px; }
    .btg-tab span { display: none; }
    .btg-tab.is-on span { display: inline; }
    .btg-player { height: 40px; padding: 4px 6px 7px; }
    .btg-music { padding: 4px; }
    .btg-music-btns { margin-top: 4px; }
    .btg-name { font-size: 10px; line-height: 11px; }
    .btg-kc { width: 19px; height: 17px; font-size: 9px; right: -8px; top: -8px; }
    .btg-sticker { font-size: 15px; left: -8px; top: -8px; }
    .btg-crown { font-size: 14px; top: -13px; }
    .btg-admin-grid { grid-template-columns: minmax(0, 1fr); }
    .btg-gifts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .btg-b { min-height: 32px; }
}

/* ---------- тестовые боты: пометка «бот» на карточке, в чате и в карточке игрока; вкладка «Боты» в админке ---------- */
.btg-botb { display: inline-block; padding: 0 5px; border-radius: 6px; background: #5A6478; color: #FFFFFF; font: 600 10px/16px var(--hu-font);
    font-style: normal; letter-spacing: .02em; text-transform: lowercase; vertical-align: 1px; text-shadow: none; }
.btg-photo .btg-botb { position: absolute; left: -7px; top: -7px; z-index: 2; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.btg.is-narrow .btg-photo .btg-botb { font-size: 8.5px; line-height: 13px; padding: 0 4px; left: -6px; top: -6px; }
.btg-bot-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.btg-bots-list li > span { line-height: 1.4; }
#bt-bot-msg { min-height: 1.2em; margin: 2px 0 6px; }
@media (max-width: 500px) { .btg-bot-acts .btg-b { flex: 1 1 auto; } }