/* Марми Мафия — оформление в духе slither.io */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #161c22; color: #fff;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Segoe UI', Arial, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas#game { position: fixed; inset: 0; display: block; }
.hide { display: none !important; }
button { font-family: inherit; }

/* ===== Меню ===== */
.menu { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  overflow-y: auto; padding: max(40px, env(safe-area-inset-top)) 16px 150px; background: rgba(22, 28, 34, 0.94); touch-action: pan-y; }

/* Название: круглые буквы, зелёный и фиолетовый перелив, тень снизу — как логотип оригинала. Буквы мягко плавают. */
.title { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.28em;
  font-family: 'Comfortaa', 'Arial Rounded MT Bold', Arial, sans-serif; font-weight: 700; line-height: 1.05;
  font-size: clamp(54px, 13vw, 128px); letter-spacing: -0.02em; margin: 0 0 34px; text-align: center; }
.title span { display: inline-flex; }
.title i { font-style: normal; display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.55));
  animation: float 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.22s); }
.title .t1 i { background-image: linear-gradient(180deg, #8dffaa 0%, #4fe08a 45%, #1fa65a 100%); }
.title .t2 i { background-image: linear-gradient(180deg, #b78cff 0%, #8a4dff 45%, #5a28c8 100%); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .title i { animation: none; } }

#result { color: #a9b0b8; font-size: 18px; text-align: center; margin: 0 0 26px; line-height: 1.5; }
#result b { color: #fff; }
#result .sub { font-size: 14px; color: #7d858e; }
#result .sub b { color: #c9b8ff; }

#nick { width: min(300px, 100%); height: 54px; padding: 0 18px; border-radius: 27px; outline: none;
  background: #4c447c; border: 2px solid #120f22; color: #e8e4ff; font-size: 20px; font-family: inherit;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45); margin-bottom: 26px; }
#nick::placeholder { color: #8b84c0; }
#nick:focus { background: #554c8a; }

.btn-green { height: 58px; padding: 0 30px; min-width: 180px; border-radius: 29px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #5fb48a 0%, #3e8a63 100%); color: #fff; font-size: 24px; font-weight: bold;
  font-family: Arial, 'Helvetica Neue', sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.btn-green:hover { background: linear-gradient(180deg, #6cc497 0%, #46996e 100%); }
.btn-green:active { transform: scale(0.97); }
.btn-green:disabled { opacity: 0.45; cursor: default; }

#status { font-size: 13px; color: #59616b; margin: 16px 0 6px; min-height: 16px; }
.help { font-size: 13px; color: #59616b; text-align: center; max-width: 360px; line-height: 1.5; }

#skinBtn { position: fixed; left: max(6px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom));
  width: 110px; height: 118px; display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; padding: 0; }
#skinBtn canvas { width: 92px; height: 92px; transition: transform .15s; }
#skinBtn span { color: #5fd17a; font: bold 15px Arial, sans-serif; text-shadow: 0 2px 3px rgba(0,0,0,0.6); margin-top: -6px; white-space: nowrap; }
#skinBtn:hover canvas { transform: scale(1.08); }
#qualityBox { position: fixed; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); text-align: center; }
.ql { color: #8a6cd0; font: bold 13px Arial, sans-serif; text-shadow: 0 2px 3px rgba(0,0,0,0.6); }
#qualityBtn { background: none; border: none;
  cursor: pointer; color: #8a6cd0; font-weight: bold; font-style: italic; font-size: 16px; font-family: Arial, sans-serif;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); }
#qualityBtn:hover { color: #a98aff; }

/* ===== Выбор скина ===== */
#skinScreen { justify-content: center; padding-bottom: 40px; z-index: 35; background-color: #0b1018; background-repeat: repeat; }
#saveSkin { height: 50px; min-width: 130px; font-size: 21px; }
.skin-stage { display: flex; align-items: center; gap: 10px; max-width: 100%; }
#skinCanvas { display: block; }
/* Стрелки-указатели как в оригинале: зелёные, объёмные */
.arrow { flex: 0 0 auto; width: 92px; height: 86px; border: none; cursor: pointer; padding: 0; font-size: 0;
  background: linear-gradient(180deg, #8fe39a 0%, #4fb860 48%, #2f8a40 100%);
  clip-path: polygon(0 50%, 48% 0, 48% 28%, 100% 28%, 100% 72%, 48% 72%, 48% 100%);
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.5)); transition: transform .1s; }
#nextSkin { transform: scaleX(-1); }
.arrow:hover { background: linear-gradient(180deg, #a2efab 0%, #5cc86d 48%, #379a49 100%); }
#prevSkin:active { transform: scale(0.92); }
#nextSkin:active { transform: scaleX(-1) scale(0.92); }
#skinName { font-family: 'Comfortaa', Arial, sans-serif; font-size: 26px; color: #fff; margin-top: 18px; text-shadow: 0 3px 6px rgba(0,0,0,0.5); }
#skinNum { font-size: 13px; color: #7d858e; margin: 4px 0 20px; }
#customizer { display: flex; justify-content: center; gap: 24px; margin-bottom: 22px; }
.color-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.color-group label { font-size: 12px; color: #a9b0b8; }
.color-group input[type="color"] { width: 52px; height: 52px; border: none; border-radius: 50%; cursor: pointer; background: none; padding: 0; }
.color-group input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-group input[type="color"]::-webkit-color-swatch { border: 3px solid #2a3038; border-radius: 50%; }
.color-group input[type="color"]::-moz-color-swatch { border: 3px solid #2a3038; border-radius: 50%; }

/* ===== Во время игры ===== */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#scorebox { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom));
  font-size: 15px; color: #8d959e; line-height: 1.5; text-shadow: 0 1px 3px #000; }
#scorebox b { color: #fff; font-size: 17px; }

#lb { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); min-width: 200px;
  text-shadow: 0 1px 3px #000; opacity: 0.92; }
.lb-title { font-size: 21px; font-weight: bold; text-align: center; color: #fff; margin-bottom: 4px; font-family: Arial, sans-serif; }
.row { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; opacity: 0.75; }
.row .p { width: 30px; text-align: right; }
.row .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.row .s { font-variant-numeric: tabular-nums; }
.row.me { opacity: 1; font-weight: bold; }
.row.sep { color: #fff; margin-top: 4px; }

#minimap { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom));
  width: 130px; height: 130px; border-radius: 50%; opacity: 0.9; }
#boostBtn { position: absolute; pointer-events: all; left: max(18px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 58px);
  width: 82px; height: 82px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px;
  background: rgba(95, 180, 138, 0.22); border: 2px solid rgba(95, 180, 138, 0.6); touch-action: none; }
#boostBtn.on { background: rgba(95, 180, 138, 0.55); transform: scale(0.95); }
#toast { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); font-size: 20px; font-weight: bold; color: #fff;
  text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .3s; white-space: nowrap; }
#toast.show { opacity: 1; }
#ping { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(4px, env(safe-area-inset-bottom)); font-size: 10px; color: #3e454e; }

#soundBtn { position: fixed; z-index: 40; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
  width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.25); font-size: 19px; cursor: pointer; padding: 0; line-height: 42px; }

@media (max-width: 600px) {
  #lb { min-width: 150px; }
  .lb-title { font-size: 16px; }
  .row { font-size: 11px; gap: 5px; }
  .row .p { width: 22px; }
  .row .n { max-width: 80px; }
  #minimap { width: 96px; height: 96px; }
  #scorebox { font-size: 13px; }
  .arrow { width: 56px; height: 52px; }
  #skinBtn canvas { width: 76px; height: 76px; }
  #skinBtn span { font-size: 13px; }
}

/* ===== Конструктор «Собрать змейку» ===== */
#buildBtn { position: fixed; left: calc(max(6px, env(safe-area-inset-left)) + 118px); bottom: max(6px, env(safe-area-inset-bottom));
  width: 130px; height: 118px; display: flex; flex-direction: column; align-items: center; background: none; border: none; cursor: pointer; padding: 0; }
#buildBtn canvas { width: 92px; height: 92px; transition: transform .15s; }
#buildBtn:hover canvas { transform: scale(1.08); }
#buildBtn span { color: #5fd17a; font: bold 15px Arial, sans-serif; text-shadow: 0 2px 3px rgba(0,0,0,0.6); margin-top: -6px; white-space: nowrap; }
#buildScreen { justify-content: center; z-index: 36; background-color: #0b1018; background-repeat: repeat; padding-top: 24px; }
#palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin-bottom: 26px; }
.pball { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.45); transition: transform .08s; }
.pball:active { transform: scale(0.9); }
#buildCanvas { display: block; margin-bottom: 8px; }
#buildHint { font-size: 13px; color: #7d858e; margin-bottom: 18px; text-align: center; }
.build-btns { display: flex; gap: 60px; }
.build-btns .btn-green { height: 50px; min-width: 130px; font-size: 21px; }
#customizer .btn-green { height: 46px; font-size: 18px; }
@media (max-width: 600px) {
  .pball { width: 34px; height: 34px; }
  #palette { gap: 6px; }
  .build-btns { gap: 24px; }
  #buildBtn { left: calc(max(6px, env(safe-area-inset-left)) + 90px); width: 104px; }
  #buildBtn canvas { width: 76px; height: 76px; }
  #buildBtn span { font-size: 13px; }
}

/* Экраны скинов и конструктора: по центру, но без обрезания сверху, если не помещаются */
#skinScreen, #buildScreen { justify-content: flex-start; }
#skinScreen > :first-child, #buildScreen > :first-child { margin-top: auto; }
#skinScreen > :last-child, #buildScreen > :last-child { margin-bottom: auto; }

/* ===== Телефон ===== */
@media (max-width: 600px) {
  .menu { padding-top: max(78px, env(safe-area-inset-top)); }
  #qualityBox { top: max(10px, env(safe-area-inset-top)); }
  .ql { font-size: 11px; }
  #qualityBtn { font-size: 14px; }
  #skinBtn, #buildBtn { width: 108px; height: 104px; }
  #skinBtn { left: max(4px, env(safe-area-inset-left)); }
  #buildBtn { left: calc(max(4px, env(safe-area-inset-left)) + 116px); }
  #skinBtn canvas, #buildBtn canvas { width: 72px; height: 72px; }
  #skinBtn span, #buildBtn span { font-size: 12px; margin-top: -4px; }
  #skinScreen .skin-stage { gap: 4px; }
}

/* Рейтинг на телефоне — компактнее, чтобы не закрывал поле */
@media (max-width: 600px) {
  #lb { min-width: 0; width: 150px; opacity: 0.85; }
  .lb-title { font-size: 13px; margin-bottom: 2px; }
  .row { font-size: 10px; line-height: 1.3; gap: 4px; }
  .row .p { width: 20px; }
  .row .n { max-width: 74px; }
}

/* Палитра как в оригинале: шарики полупрозрачные, последний нажатый — яркий */
.pball { opacity: 0.6; }
.pball.sel { opacity: 1; box-shadow: 0 0 14px rgba(255,255,255,0.45), 0 4px 8px rgba(0,0,0,0.45); }

/* ===== Телефон: джойстик слева, ускорение справа ===== */
#joy { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.25); }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.35); border: 2px solid rgba(255,255,255,0.6); }
body.ctrl-joy #boostBtn { left: auto; right: max(18px, env(safe-area-inset-right)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 118px); pointer-events: none; }
#ctrlBtn { margin-top: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #c9cfd8;
  border-radius: 20px; padding: 9px 18px; font-size: 14px; cursor: pointer; }
@media (pointer: coarse) {
  body.ctrl-joy #scorebox { bottom: auto; top: max(58px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
}

/* Цифра внизу: живые люди в игре; видна и в меню, и в игре */
#ping { position: fixed; z-index: 45; pointer-events: auto; cursor: default; font-size: 11px; color: #5a6270; text-shadow: none; padding: 6px 12px; }
#pnList { position: fixed; z-index: 46; left: 50%; transform: translateX(-50%); bottom: calc(max(4px, env(safe-area-inset-bottom)) + 26px);
  background: rgba(10, 12, 22, 0.8); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: #c9cfd8; pointer-events: none; max-height: 40vh; overflow: hidden; }
#pnList span { color: #6a7385; }

/* Телефон: рейтинг узкий — имя сразу рядом с очками; миникарта маленькая и прозрачная в левом нижнем углу */
@media (pointer: coarse) {
  #lb { width: auto; min-width: 0; }
  #lb .row { justify-content: flex-end; }
  #lb .row .n { flex: 0 1 auto; max-width: 84px; }
  #lb .row .s { min-width: 30px; text-align: right; }
  /* левый верхний угол: там нет джойстика; длина и место — сразу под миникартой */
  /* Длина и место — на самом верху, справа от кнопки звука; миникарта — под ними */
  body.ctrl-joy #minimap { right: auto; bottom: auto; left: max(10px, env(safe-area-inset-left)); top: max(58px, env(safe-area-inset-top));
    width: 84px; height: 84px; opacity: 0.55; }
  body.ctrl-joy #scorebox { top: max(8px, env(safe-area-inset-top)); left: calc(max(8px, env(safe-area-inset-left)) + 52px); font-size: 12px; line-height: 1.35; }
  body.ctrl-joy #scorebox b { font-size: 14px; }
  body:not(.ctrl-joy) #minimap { width: 84px; height: 84px; opacity: 0.55; }
}
/* Телефон: в рейтинге только топ-10 (своё место уже есть слева сверху), мельче и прозрачнее — не мешает играть */
@media (pointer: coarse) {
  #lb { opacity: 0.6; }
  #lb .lb-title { font-size: 12px; }
  #lb .row { font-size: 10px; line-height: 1.25; gap: 6px; }
  #lb .row.sep { display: none; }
}

/* Телефон лёжа (низкий экран): конструктор и скины помещаются целиком */
@media (max-height: 500px) {
  #buildScreen, #skinScreen { padding-top: 10px; padding-bottom: 10px; }
  #palette { gap: 5px; margin-bottom: 8px; max-width: 640px; }
  .pball { width: 30px; height: 30px; }
  #buildHint { font-size: 11px; margin-bottom: 8px; }
  .build-btns .btn-green, #saveSkin { height: 38px; min-width: 110px; font-size: 16px; }
  #skinName { font-size: 18px; margin-top: 6px; }
  #skinNum { margin: 2px 0 8px; }
  .arrow { width: 52px; height: 48px; }
}

/* ===== Общий голосовой чат (как в CS) ===== */
#vcBar { position: fixed; z-index: 44; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center;
  background: rgba(10, 12, 22, 0.55); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 4px 6px 4px 10px; font-size: 13px; color: #c9cfd8; }
#vcBar button { border: none; border-radius: 14px; background: rgba(255,255,255,0.08); color: #e8ecf1; font-size: 13px; padding: 5px 10px; cursor: pointer; touch-action: none; }
#vcMicBtn.on { background: rgba(95, 209, 122, 0.45); color: #fff; }
#vcHint { position: fixed; z-index: 46; top: calc(max(8px, env(safe-area-inset-top)) + 40px); left: 50%; transform: translateX(-50%); background: rgba(10,12,22,0.85);
  color: #ff9a9a; border-radius: 10px; padding: 6px 12px; font-size: 13px; }
@media (pointer: coarse) {
  /* владелец 07.10: на телефоне микрофон — наверху по центру (как на компьютере), кнопки крупнее */
  #vcBar button { padding: 8px 12px; font-size: 14px; }
}

/* Меню на телефоне лёжа (низкий экран): всё помещается, крупная кнопка, без лишней подсказки */
@media (max-height: 500px) {
  #menu { justify-content: center; padding: 6px 16px 70px; }
  #menu .title { font-size: min(15vh, 11vw); margin: 0 0 6px; }
  #result { font-size: 15px; margin: 0 0 8px; line-height: 1.35; }
  #result .sub { font-size: 12px; }
  #nick { height: 42px; font-size: 17px; margin-bottom: 10px; }
  #play { height: 46px; font-size: 20px; }
  #status { margin: 6px 0 2px; font-size: 11px; }
  #menu .help { display: none; }
  #ctrlBtn { margin-top: 4px; padding: 6px 14px; font-size: 12px; }
}
/* В меню голосовая полоска — справа внизу, чтобы не налезать на название */
body.in-menu #vcBar, body.in-menu.ctrl-joy #vcBar { left: auto; top: auto; transform: none;
  right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }

#status:empty { display: none; }
#menu .help { display: none; }

/* Кнопка «Установить на телефон» и подсказка для iPhone */
#installBtn { margin-top: 8px; background: rgba(95, 209, 122, 0.15); border: 1px solid rgba(95, 209, 122, 0.5); color: #c9ffd6;
  border-radius: 20px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
#iosTip { position: fixed; z-index: 61; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: #1f2730; color: #e8ecf1; border-radius: 12px; padding: 10px 14px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); white-space: nowrap; }

/* ===== Поздравление с новой ролью ===== */
#promo { position: fixed; z-index: 50; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none;
  text-align: center; padding: 14px 28px; border-radius: 18px; background: rgba(10, 12, 22, 0.82); border: 2px solid var(--rc, #fff);
  box-shadow: 0 0 24px var(--rc, #fff); transition: transform .35s cubic-bezier(.2,1.6,.4,1), opacity .3s; white-space: nowrap; }
#promo.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#promo .pt { font-size: 13px; color: #c9cfd8; letter-spacing: 2px; }
#promo .pn { font-family: 'Comfortaa', Arial, sans-serif; font-weight: 700; font-size: 30px; color: var(--rc, #fff); text-shadow: 0 0 14px var(--rc, #fff); margin: 4px 0; }
#promo .ps { font-size: 13px; color: #c9cfd8; }
#promo.don { padding: 18px 36px; background: radial-gradient(ellipse at center, rgba(80, 60, 0, 0.92), rgba(10, 12, 22, 0.92)); border-width: 3px; }
#promo.don .pi { font-size: 46px; line-height: 1; animation: donCrown 1.2s ease-in-out infinite; }
#promo.don .pn { font-size: 40px; color: #ffd52e; text-shadow: 0 0 20px #ffb300, 0 0 40px #ff8a00; }
@keyframes donCrown { 50% { transform: translateY(-6px) scale(1.1); } }
@media (max-height: 500px) { #promo { top: 32%; } #promo .pn { font-size: 24px; } #promo.don .pn { font-size: 30px; } #promo.don .pi { font-size: 34px; } }

/* Поздравление с ролью — компактнее (владелец 06.10) */
#promo { top: 24%; padding: 8px 18px; border-radius: 14px; }
#promo .pt { font-size: 11px; letter-spacing: 1px; }
#promo .pn { font-size: 21px; margin: 2px 0; }
#promo .ps { font-size: 11px; }
#promo.don { padding: 10px 22px; }
#promo.don .pi { font-size: 28px; }
#promo.don .pn { font-size: 26px; }
@media (max-height: 500px) { #promo { top: 26%; } #promo .pn { font-size: 18px; } #promo.don .pn { font-size: 22px; } #promo.don .pi { font-size: 24px; } }

/* Оповещение о новой роли — справа сбоку, под рейтингом (владелец 06.10) */
#promo { left: auto; right: max(12px, env(safe-area-inset-right)); top: 300px; transform: translateX(30px) scale(0.85); transform-origin: right center; }
#promo.show { transform: translateX(0) scale(1); }
@media (max-width: 900px), (max-height: 500px) { #promo { top: 44%; } }

/* ===== События на карте ===== */
#evPill { position: fixed; z-index: 43; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin-top: 40px;
  padding: 5px 14px; border-radius: 16px; font-size: 14px; font-weight: bold; pointer-events: none; white-space: nowrap; }
#evPill.night { background: rgba(20, 24, 60, 0.85); color: #c9d4ff; border: 1px solid #5b6bd6; }
#evPill.gold { background: rgba(60, 45, 0, 0.85); color: #ffd52e; border: 1px solid #ffd52e; box-shadow: 0 0 12px rgba(255, 213, 46, 0.5); }
#evArrow { display: inline-block; margin-left: 4px; color: #fff; }
body.in-menu #evPill { display: none !important; } /* в меню не закрываем кнопки — плашка нужна только в игре */
/* ===== Рекорды в меню ===== */
#records { margin-top: 14px; background: rgba(10, 12, 22, 0.55); border: 1px solid rgba(255, 213, 46, 0.25); border-radius: 12px; padding: 8px 12px; min-width: 300px; }
#records .rh { text-align: center; color: #ffd52e; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
#records .rcols { display: flex; gap: 18px; }
#records .rc { flex: 1; min-width: 0; }
#records .rt { font-size: 11px; color: #8a93a8; text-transform: uppercase; margin-bottom: 2px; }
#records .rr { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #d4dae3; line-height: 1.45; }
#records .rr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#records .rr b { color: #ffd52e; }
#records .rr.empty { color: #5a6270; }
@media (max-height: 500px) {
  #records { position: fixed; right: max(10px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); margin: 0; min-width: 0; width: 210px; }
  #records .rcols { flex-direction: column; gap: 4px; }
  #records .rr { font-size: 11px; line-height: 1.3; }
}

/* ===== Фото владельца ===== */
#menuPhotos { position: fixed; inset: 0; z-index: 29; pointer-events: none; overflow: hidden; background: #0b1018; } /* игра под меню не просвечивает — только фото */
#menuPhotos img { position: absolute; left: 50%; top: 50%; height: 100%; max-width: none; transform: translate(-50%, -50%) scale(1.04);
  opacity: 0; transition: opacity 1.4s ease, transform 7s linear; }
#menuPhotos img.on { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
body:not(.in-menu) #menuPhotos { display: none; }
#menu { background: rgba(11, 16, 24, 0.45); }
#promo .pimg { display: block; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  margin: 0 auto 4px; border: 3px solid #ffd52e; box-shadow: 0 0 16px rgba(255, 213, 46, 0.7); }
@media (max-height: 500px) { #promo .pimg { width: 54px; height: 54px; } }

/* Рекорды — внизу экрана по центру (владелец 07.10); на узком телефоне стоя остаются под кнопками */
@media (min-width: 700px) {
  #records { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); top: auto; right: auto; transform: translateX(-50%); margin: 0; min-width: 300px; width: auto; }
  #records .rcols { flex-direction: row; gap: 18px; }
}

@media (pointer: coarse) { #menuPhotos img, #menuPhotos img.on { transform: translate(-50%, -50%); transition: opacity 1.2s ease; } } /* телефон: без медленного приближения — легче */

/* Меню: два фото по бокам вместо слайд-шоу (владелец 07.10); к середине плавно уходят в темноту */
#menuPhotos img { position: absolute; top: 0; height: 100%; width: 34vw; object-fit: cover; opacity: 0.95 !important;
  transform: none !important; transition: none !important; left: auto; }
#mpL { left: 0 !important; object-position: 25% center; -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }
#mpR { right: 0 !important; object-position: 20% center; -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
@media (max-width: 700px) { /* телефон стоя: фото на всю половину, приглушены, чтобы кнопки читались */
  #menuPhotos img { width: 50vw; opacity: 0.45 !important; -webkit-mask-image: none; mask-image: none; }
}

/* Плашка событий — чёрная, плотная (владелец 07.10) */
#evPill.night, #evPill.gold { background: #0a0a0c; color: #f2f2f2; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
#evPill #evArrow { color: #f2f2f2; }

/* ===== Командный режим (владелец 07.10) ===== */
#teamPick { display: flex; gap: 8px; justify-content: center; margin: 2px 0 10px; }
#teamPick .tp { border: 2px solid rgba(255,255,255,0.25); background: rgba(20,24,32,0.75); color: #fff; font: bold 15px Arial, sans-serif; padding: 9px 14px; border-radius: 12px; cursor: pointer; }
#teamPick .tp0.sel { background: #f2f2f2; border-color: #ffffff; color: #1a1d24; }
#teamPick .tp1.sel { background: #1c1c1e; border-color: #ff8a1f; color: #ff8a1f; }
#teamPick .tpa.sel { background: #3a4252; border-color: #fff; }
#modeRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
#modeBtn, #inviteBtn { border: 0; border-radius: 12px; padding: 9px 14px; font: bold 14px Arial, sans-serif; cursor: pointer; color: #fff; background: linear-gradient(90deg, #8a8f99, #1c1c1e 55%, #ff8a1f); }
#inviteBtn { background: rgba(40,46,58,0.9); }
#teamBar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-radius: 14px; background: rgba(10,12,18,0.72); color: #fff; font: bold 15px Arial, sans-serif; pointer-events: none; white-space: nowrap; z-index: 5; }
#teamBar .t0 { color: #ffffff; } #teamBar .t1 { color: #ff8a1f; } #teamBar .me { text-decoration: underline; }
#teamBar .clk { color: #fff; opacity: 0.9; font-size: 14px; padding: 0 4px; }
#roundBanner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 30; background: rgba(10,12,18,0.88); color: #fff; border-radius: 18px; padding: 18px 26px; text-align: center; font: bold 16px Arial, sans-serif; min-width: 260px; box-shadow: 0 6px 30px rgba(0,0,0,0.5); }
#roundBanner .big { font-size: 26px; margin-bottom: 8px; }
#roundBanner .sc { font-size: 18px; margin: 4px 0; }
#roundBanner .sub { opacity: 0.8; font-size: 14px; margin-top: 8px; }
@media (max-width: 600px) { #teamBar { font-size: 13px; top: 4px; } #teamPick .tp { padding: 8px 10px; font-size: 14px; } }

/* Владелец 07.10: на телефоне плашку «Золотая еда / Ночь» не показываем — наверху теперь микрофон; о событии скажет всплывающая надпись, золотая еда видна на миникарте */
@media (pointer: coarse) { #evPill { display: none !important; } }
/* Командный режим: счёт команд — под полоской микрофона */
/* владелец 07.10: счёт команд — на самом верху, полоска микрофона — под ним */
body.team-mode #teamBar { top: max(2px, env(safe-area-inset-top)); }
body.team-mode:not(.in-menu) #vcBar { top: calc(max(2px, env(safe-area-inset-top)) + 38px); }
/* Владелец 07.10: в командной игре кнопка «Играть» тёмная полупрозрачная */
body.team-mode #play { background: rgba(10, 12, 18, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }
/* Командные новости и итоги раунда (владелец 07.10) */
#bigToast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%) scale(0.9); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  background: rgba(10, 12, 18, 0.82); color: #fff; font: bold 19px Arial, sans-serif; padding: 9px 18px; border-radius: 14px; text-align: center; max-width: 86vw; z-index: 6; }
#bigToast.show { opacity: 1; transform: translateX(-50%) scale(1); }
#teamBar .clk.fin { color: #ff4040; animation: finPulse 1s infinite; }
@keyframes finPulse { 50% { opacity: 0.45; } }
#roundBanner .aw { margin-top: 10px; text-align: left; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px), (max-height: 500px) { #bigToast { font-size: 15px; top: 26%; } }
/* Базука: кнопка выстрела справа по центру (владелец 07.10) */
#fireBtn { position: fixed; z-index: 41; right: max(16px, env(safe-area-inset-right)); top: 42%; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff6a4a, #b3180c); border: 3px solid #ffd52e; box-shadow: 0 0 18px rgba(255, 80, 30, 0.7);
  font-size: 32px; display: flex; align-items: center; justify-content: center; pointer-events: all; cursor: pointer; user-select: none; touch-action: none;
  animation: firePulse 1s infinite; }
#fireBtn span { position: absolute; right: -4px; top: -4px; background: #ffd52e; color: #111; font: bold 14px Arial, sans-serif; border-radius: 10px; padding: 1px 6px; }
@keyframes firePulse { 50% { transform: scale(1.08); } }
/* Командное меню выше обычного: на низком экране (телефон лёжа) прячем «Установить» (есть в обычном меню), чтобы не налезать на рекорды */
@media (max-height: 500px) {
  body.team-mode #installBtn { display: none !important; } body.team-mode #teamPick { margin: 0 0 6px; } body.team-mode #modeRow { margin-top: 6px; }
  body.team-mode #records { left: auto; right: max(10px, env(safe-area-inset-right)); top: 50%; bottom: auto; transform: translateY(-50%); min-width: 0; width: 190px; }
  body.team-mode #records .rcols { flex-direction: column; gap: 4px; }
  body.team-mode #records .rr { font-size: 11px; line-height: 1.3; }
}
/* ===== Меню командной игры (владелец 07.10: «слишком аляписто») — всё одной ширины, в одном тёмном стиле ===== */
body.team-mode #nick { margin-bottom: 14px; }
body.team-mode #teamPick { width: min(300px, 100%); gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 27px;
  background: rgba(10, 12, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); }
body.team-mode #teamPick .tp { flex: 1; min-width: 0; border: 0; border-radius: 22px; padding: 10px 4px; background: transparent; color: #c9cfd8;
  font: bold 15px Arial, sans-serif; white-space: nowrap; transition: background .15s, color .15s; }
body.team-mode #teamPick .tp0.sel { background: #f2f2f2; color: #15171c; }
body.team-mode #teamPick .tp1.sel { background: #ff8a1f; color: #15171c; }
body.team-mode #teamPick .tpa.sel { background: rgba(255, 255, 255, 0.2); color: #fff; }
body.team-mode #play { width: min(300px, 100%); height: 54px; border-radius: 27px; font-size: 22px; letter-spacing: 0.5px; }
body.team-mode #modeRow { width: min(300px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
body.team-mode #modeBtn, body.team-mode #inviteBtn { background: rgba(10, 12, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px;
  padding: 11px 6px; font: bold 14px Arial, sans-serif; color: #e8ecf1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.team-mode #ctrlBtn { width: min(300px, 100%); margin-top: 8px; background: transparent; border-color: rgba(255, 255, 255, 0.12); color: #8a93a8; }
body.team-mode #status { margin: 8px 0 0; }
body.team-mode #records:not(.hide) { width: min(300px, 100%); min-width: 0; box-sizing: border-box; }
@media (max-height: 500px) { body.team-mode #records:not(.hide) { width: 190px; } body.team-mode #play { height: 46px; } }
body.team-mode #installBtn { width: min(300px, 100%); margin-top: 8px; background: rgba(10, 12, 18, 0.6); border: 1px solid rgba(95, 209, 122, 0.35); border-radius: 20px; color: #9fe8b4; font-size: 14px; padding: 10px 6px; }
/* Замер во время игры (владелец 07.10): пинг, кадры от сервера, рывки, кадры экрана — внизу по центру над цифрой игроков */
#netInfo { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(4px, env(safe-area-inset-bottom)) + 24px); z-index: 5; pointer-events: none;
  font: 12px Arial, sans-serif; color: #aeb6c2; background: rgba(10, 12, 18, 0.55); border-radius: 10px; padding: 3px 10px; white-space: nowrap; }
#netInfo:empty { display: none; }
/* Владелец 07.10: отдельная кнопка 👥 справа от цифры внизу — посетители за день/неделю/месяц; подсказки выше строки замеров */
#visBtn { position: fixed; z-index: 45; left: calc(50% + 18px); bottom: max(2px, env(safe-area-inset-bottom)); font-size: 13px; padding: 4px 8px; cursor: pointer; opacity: 0.55; user-select: none; }
#visList { position: fixed; z-index: 46; left: 50%; transform: translateX(-50%); bottom: calc(max(4px, env(safe-area-inset-bottom)) + 52px);
  background: rgba(10, 12, 22, 0.85); border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #c9cfd8; pointer-events: none; white-space: nowrap; line-height: 1.5; }
#visList .vh { color: #8a93a8; font-size: 11px; text-transform: uppercase; }
#visList b { color: #ffd52e; }
#pnList { bottom: calc(max(4px, env(safe-area-inset-bottom)) + 52px); }
/* Владелец 07.10: на телефоне таблица рекордов меньше — мельче шрифт, уже рамка, меньше отступы */
@media (pointer: coarse) {
  body:not(.team-mode) #records { min-width: 0; width: auto; padding: 4px 10px; border-radius: 10px; }
  body:not(.team-mode) #records .rh { font-size: 11px; margin-bottom: 1px; }
  body:not(.team-mode) #records .rcols { gap: 12px; }
  body:not(.team-mode) #records .rt { font-size: 9px; margin-bottom: 0; white-space: nowrap; }
  body:not(.team-mode) #records .rr { font-size: 10px; line-height: 1.3; gap: 6px; }
  body:not(.team-mode) #records .rr span { max-width: 90px; }
}
/* Владелец 07.10: на телефоне вся игра ярче — как будто прибавили яркость экрана */
@media (pointer: coarse) { #game { filter: brightness(1.15) saturate(1.05); } }
/* Владелец 07.10: сообщение о золотой еде — мельче, округлым шрифтом (как название), золотом на полупрозрачном фоне, чтобы не отвлекало */
#toast.ev { font-family: 'Comfortaa', Arial, sans-serif; font-size: 13px; font-weight: 700; color: #ffd52e; letter-spacing: 0.3px;
  background: rgba(10, 12, 18, 0.55); border: 1px solid rgba(255, 213, 46, 0.35); border-radius: 14px; padding: 5px 14px; text-shadow: none; top: 16%; }