* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0e0f14; color: #e8e8ee;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Safe-area: учитываем и нотч устройства, и шапку Telegram (--ba-safe-* выставляет JS из tg.contentSafeAreaInset/safeAreaInset). */
body {
  padding-top: max(env(safe-area-inset-top), var(--ba-safe-top, 0px));
  padding-bottom: max(env(safe-area-inset-bottom), var(--ba-safe-bottom, 0px));
  padding-left: max(env(safe-area-inset-left), var(--ba-safe-left, 0px));
  padding-right: max(env(safe-area-inset-right), var(--ba-safe-right, 0px));
}

.hidden { display: none !important; }

/* ============ Общие экраны (меню, настройки, персонаж) ============ */
.screen {
  position: fixed; inset: 0;
  /* Сначала верх — содержимое скроллится вниз. Centering делаем margin'ом
     внутри .menu-inner, чтобы при коротком контенте оно было по центру,
     а при длинном — начиналось сверху и нормально скроллилось. */
  display: block;
  padding-top: max(env(safe-area-inset-top), var(--ba-safe-top, 0px), 20px);
  padding-bottom: max(env(safe-area-inset-bottom), var(--ba-safe-bottom, 0px), 20px);
  padding-left: 20px;
  padding-right: 20px;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(43,99,255,0.15), transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(207,71,71,0.12), transparent 50%),
    #0e0f14;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.menu-inner {
  width: 100%; max-width: 420px;
  margin: 0 auto;
  background: rgba(21,23,31,0.9);
  border: 1px solid #23252f;
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 50px rgba(0,0,0,0.5);
}
.menu-title {
  font-size: 32px; margin: 0 0 4px;
  background: linear-gradient(90deg, #2b63ff, #cf4747);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800; letter-spacing: 1px;
}
.menu-sub { font-size: 13px; opacity: 0.7; margin-bottom: 14px; }
.menu-user { font-size: 13px; margin-bottom: 18px; padding: 8px 10px; background: rgba(0,0,0,0.3); border-radius: 8px; }
.menu-user .sep { margin: 0 6px; opacity: 0.5; }

#menu-top1-badge {
  margin: -8px 0 14px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(255,203,59,0.32), rgba(255,170,0,0.18));
  border: 1px solid #ffcb3b;
  border-radius: 8px;
  color: #ffe88a;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.3px;
  box-shadow: 0 0 14px rgba(255,203,59,0.35);
  animation: top1Pulse 2.4s ease-in-out infinite;
}
@keyframes top1Pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,203,59,0.35); }
  50%      { box-shadow: 0 0 22px rgba(255,203,59,0.6); }
}
.menu-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.menu-status { margin-top: 14px; font-size: 12px; text-align: center; opacity: 0.7; }

.screen h2 { margin: 0 0 18px; font-size: 22px; }

.form-row { margin-bottom: 14px; font-size: 14px; }
.form-row label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-row input[type="text"] {
  flex: 1; min-width: 180px;
  background: #0c0e14; color: #e8e8ee;
  border: 1px solid #2c2f3c; border-radius: 6px;
  padding: 8px 10px; font-size: 14px;
}
.form-row input[type="range"] { flex: 1; min-width: 140px; }
.form-row select {
  background: #0c0e14; color: #e8e8ee;
  border: 1px solid #2c2f3c; border-radius: 6px;
  padding: 6px 10px; font-size: 14px;
}
.form-row textarea {
  width: 100%;
  background: #0c0e14; color: #e8e8ee;
  border: 1px solid #2c2f3c; border-radius: 8px;
  padding: 10px; font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}
.char-counter { text-align: right; font-size: 11px; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Админ-панель */
.admin-tabs { display: flex; gap: 4px; margin: 12px 0; border-bottom: 1px solid #23252f; }
.admin-tab {
  flex: 1;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: #e8e8ee; font-size: 14px; font-weight: 600;
  padding: 10px 8px; cursor: pointer; border-radius: 6px 6px 0 0;
}
.admin-tab:hover { background: rgba(255,255,255,0.04); }
.admin-tab.active { border-bottom-color: #2b63ff; color: #9bc6ff; }

.admin-filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.admin-filter {
  background: rgba(0,0,0,0.3); border: 1px solid #23252f; border-radius: 999px;
  color: #e8e8ee; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.admin-filter.active { background: #2b63ff; border-color: #2b63ff; }

.admin-list { max-height: 58vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.fb-item {
  background: rgba(0,0,0,0.3);
  border: 1px solid #23252f;
  border-left: 3px solid #5a5e68;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.fb-item.status-new { border-left-color: #2b63ff; }
.fb-item.status-resolved { opacity: 0.65; border-left-color: #1fb761; }
.fb-head { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; align-items: center; flex-wrap: wrap; }
.fb-category { font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #ffcb3b; }
.fb-date { font-size: 11px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.fb-user { font-size: 12px; opacity: 0.9; margin-bottom: 4px; color: #9bc6ff; }
.fb-message { line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.fb-context { font-size: 11px; opacity: 0.65; margin-top: 6px; font-family: "SF Mono", Menlo, monospace; }
.fb-actions { display: flex; gap: 6px; margin-top: 8px; }
.fb-actions button {
  font-size: 11px; padding: 5px 10px; border-radius: 6px;
  background: #3a3d4a; color: #fff; border: none; cursor: pointer;
}
.fb-actions button:hover { filter: brightness(1.15); }
.fb-actions button.done { background: #1fb761; }

.admin-stats-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid #23252f;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.admin-stats-card h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; color: #9be39b; font-weight: 700; }
.admin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.admin-stats-grid div { display: flex; justify-content: space-between; }
.admin-stats-grid b { color: #ffcb3b; font-variant-numeric: tabular-nums; }
.sens-val { min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.85; }
.form-hint {
  margin-top: 8px; padding: 10px; border-radius: 8px;
  background: rgba(0,0,0,0.3); font-size: 12px; opacity: 0.85; line-height: 1.5;
}

.char-preview {
  display: flex; justify-content: center; margin-bottom: 14px;
  padding: 12px; background: #0c0e14; border-radius: 10px;
  border: 1px solid #23252f;
}
.char-preview canvas { width: 140px; height: 140px; image-rendering: pixelated; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; flex: 1; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.swatch.active { border-color: #e8e8ee; transform: scale(1.15); }

/* Превью персонажа — кнопки поворота по бокам */
.char-preview {
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rot-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.3); border: 1px solid #2c2f3c;
  color: #e8e8ee; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
}
.rot-btn:hover { background: rgba(43,99,255,0.25); border-color: #2b63ff; }

/* Скины в выборе персонажа */
#skin-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.skin-card {
  position: relative;
  background: #0c0e14;
  border: 2px solid #23252f;
  border-radius: 10px;
  padding: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
}
.skin-card canvas { width: 64px; height: 64px; }
.skin-card .skin-label { font-size: 11px; opacity: 0.85; text-align: center; }
.skin-card.active { border-color: #2b63ff; box-shadow: 0 0 10px rgba(43,99,255,0.35); }
.skin-card.locked { opacity: 0.4; cursor: not-allowed; }
.skin-card.locked::after {
  content: '🔒'; position: absolute; top: 4px; right: 6px; font-size: 14px; opacity: 0.9;
}
.more-link {
  display: inline-block; margin-top: 10px;
  color: #57c7ff; font-size: 13px; text-decoration: none; cursor: pointer;
}
.more-link:hover { text-decoration: underline; }

/* Превью скинов в магазине */
.skin-pack { padding: 14px !important; }
.skin-preview { flex: 0 0 72px; display: flex; align-items: center; justify-content: center; }
.skin-preview canvas { width: 64px; height: 64px; }
.skin-name { font-size: 15px; font-weight: 700; color: #e8e8ee; }
.shop-section { margin: 18px 0 6px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; color: #9be39b; }
.shop-section.vip-section { color: #ffcb3b; text-shadow: 0 0 14px rgba(255,203,59,0.4); }

.shop-pack.skin-pack.vip {
  border-color: #ffcb3b;
  background: linear-gradient(135deg, rgba(201,139,234,0.18), rgba(255,203,59,0.12), rgba(0,0,0,0.4));
  box-shadow: 0 0 18px rgba(255,203,59,0.25);
}
.shop-pack.skin-pack.vip::before {
  content: 'VIP';
  position: absolute; top: -10px; left: 12px;
  background: linear-gradient(135deg, #c98bea, #ffcb3b);
  color: #2a1a00; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 3px 8px; border-radius: 999px;
}

/* ============ Игра ============ */
#app { display: flex; flex-direction: column; min-height: 100%; }

#top-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  background: #15171f;
  border-bottom: 1px solid #23252f;
  flex-wrap: wrap; gap: 8px;
  position: sticky; top: 0; z-index: 5;
}
#top-bar .user { font-size: 14px; display: flex; align-items: center; gap: 8px; }
#top-bar .user .sep { margin: 0 6px; opacity: 0.5; }
#top-bar .status { font-size: 13px; opacity: 0.85; color: #9be39b; }
.iconbtn {
  background: transparent; border: 1px solid #2c2f3c; border-radius: 6px;
  width: 36px; height: 32px; color: #e8e8ee; cursor: pointer;
  font-size: 16px; padding: 0;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 12px;
  padding: 12px;
  flex: 1;
}
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; padding: 6px; gap: 6px; }
  #side-panel { order: 2; }
  #game-area {
    order: 1;
    /* Mobile portrait: top-bar ~50px + main padding 12px = 62px */
    max-height: calc(100vh - var(--ba-safe-top, 0px) - var(--ba-safe-bottom, 0px) - 62px);
    width: min(100%, calc((100vh - var(--ba-safe-top, 0px) - var(--ba-safe-bottom, 0px) - 62px) * 4 / 3));
  }
}

/* #top-bar-join скрыт по умолчанию, появляется только в ландшафте на телефоне */
#top-bar-join { display: none; }

/* Ландшафт на телефоне (высота ≤ 500px):
   - кнопки лобби едут в top-bar вместо «В сети»
   - side-panel скрыт
   - canvas абсолютно позиционирован, прижат к низу main
   Десктоп и портрет не затронуты. */
@media (orientation: landscape) and (max-height: 500px) {
  /* top-bar: одна строка, фиксированная высота 44px для точного расчёта */
  #top-bar { flex-wrap: nowrap; height: 44px; padding: 0 10px; }
  #top-bar .status { display: none; }
  #top-bar-join { display: flex; align-items: center; }
  #top-bar-join .controls { flex-direction: row; gap: 6px; }
  #top-bar-join button { padding: 5px 10px; font-size: 12px; border-radius: 6px; white-space: nowrap; }

  #side-panel { display: none; }

  /* main становится relative-контейнером для абсолютного canvas */
  main { display: block; position: relative; padding: 0; overflow: hidden; }

  /* canvas: абсолютно, прижат к низу, центрирован без transform —
     transform на родителе ломает position:fixed у дочерних joy-base/joy-thumb */
  #game-area {
    position: absolute;
    bottom: 0;
    left: 0; right: 0; margin: 0 auto;
    height: 100%;      /* 100% main = viewport - safe - 44px */
    width: auto;
    max-height: none;  /* сбрасываем правило десктопа */
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    justify-self: auto;
  }
}

#game-area {
  position: relative;
  background: #1a1c24;
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  /* Desktop: top-bar ~50px + main padding 24px = 74px.
     width = min(column width, available-height × 4/3) — keeps 4:3 ratio
     while never exceeding viewport height. When height-constrained the
     canvas is narrower (horizontal letterbox), not cut off at the bottom. */
  max-height: calc(100vh - var(--ba-safe-top, 0px) - var(--ba-safe-bottom, 0px) - 74px);
  width: min(100%, calc((100vh - var(--ba-safe-top, 0px) - var(--ba-safe-bottom, 0px) - 74px) * 4 / 3));
  justify-self: center;
}
canvas#arena {
  display: block; width: 100%; height: 100%;
  background: #0c1018;
  image-rendering: auto;
}

/* Однострочный тикер лога боя */
#battle-ticker {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
#battle-ticker.visible { opacity: 1; }
#battle-ticker.kill { color: #ff7070; }
#battle-ticker.you { color: #57c7ff; }
#battle-ticker.info { color: #9be39b; }
#battle-ticker.warn { color: #f0c96b; }

/* Плавающие кнопки на игровом поле */
.game-btn {
  position: absolute;
  z-index: 7;
  pointer-events: auto;
  background: rgba(0,0,0,0.6);
  border: 1px solid #2c2f3c;
  color: #e8e8ee;
  font-size: 16px;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.game-btn.game-btn-off { opacity: 0.5; }
#btn-scoreboard { top: 44px; right: 8px; }
@media (max-width: 900px) { #btn-scoreboard { top: 40px; } }

/* Модалка покупки скина (стартует поверх всех экранов) */
#buy-modal { z-index: 250; }
#buy-modal .menu-inner { margin-top: 8vh; }

/* Финальный экран с рейтингом — на весь экран, внутри скролл */
#end-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  z-index: 200;
  overflow-y: auto;
  padding: max(env(safe-area-inset-top), var(--ba-safe-top, 14px)) 14px 14px;
}
.end-box {
  background: #1a1c24;
  border: 1px solid #2c2f3c;
  border-radius: 14px;
  padding: 20px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 12px 60px rgba(0,0,0,0.6);
  margin: auto;
}
.end-title { font-size: 24px; font-weight: 800; margin-bottom: 4px; text-align: center; }
.end-winner { font-size: 14px; opacity: 0.95; text-align: center; margin-bottom: 14px; color: #ffcb3b; white-space: pre-line; line-height: 1.5; }
.end-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.end-table th, .end-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #23252f; }
.end-table th { color: #9be39b; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.end-table td:nth-child(3), .end-table td:nth-child(4),
.end-table th:nth-child(3), .end-table th:nth-child(4) { text-align: right; }
.end-table tr.me { background: rgba(43,99,255,0.15); }
.end-table tr.dead td { opacity: 0.55; }
.end-table .color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.end-buttons { display: flex; gap: 8px; flex-direction: column; }

#overlay { position: absolute; inset: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
#countdown-box {
  background: rgba(20, 22, 30, 0.85);
  border: 1px solid #2c2f3c;
  border-radius: 12px;
  padding: 18px 24px;
  text-align: center;
  color: #fff;
  backdrop-filter: blur(4px);
}
#countdown-box .label { font-size: 12px; opacity: 0.6; letter-spacing: 1px; text-transform: uppercase; }
#countdown-box #countdown { font-size: 56px; font-weight: 800; line-height: 1; margin: 6px 0; }
#countdown-box .hint { font-size: 12px; opacity: 0.7; }

.joystick-area { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; }
#joy-left { left: 0; }
#joy-right { right: 0; }

/* Визуальная подсказка «где трогать» для сенсорных устройств */
.joy-hint {
  position: absolute;
  bottom: 24px;
  width: 110px; height: 110px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0.45;
  transition: opacity 0.2s;
  pointer-events: none;
}
.joy-hint-left  { left: 20px; }
.joy-hint-right { right: 20px; }
.joy-hint.hidden-hint { opacity: 0; }
.joy-hint-ring {
  position: absolute; inset: 0;
  border: 2px dashed rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
}
.joy-hint-icon  { font-size: 28px; line-height: 1; position: relative; }
.joy-hint-label { font-size: 10px; opacity: 0.9; margin-top: 4px; letter-spacing: 0.5px; position: relative; }

.joy-base, .joy-thumb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  display: none;
}
.joy-base {
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 24px rgba(0,0,0,0.4);
}
.joy-thumb {
  width: 48px; height: 48px;
  background: rgba(43,99,255,0.5);
  border: 2px solid rgba(205,228,255,0.9);
  box-shadow: 0 0 12px rgba(43,99,255,0.6);
}

/* Оверлей смерти/поражения */
#death-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  z-index: 8;
}
.death-box {
  background: #1a1c24;
  border: 1px solid #cf4747;
  border-radius: 12px;
  padding: 24px 30px;
  text-align: center;
  box-shadow: 0 0 40px rgba(207,71,71,0.4);
  max-width: 320px;
}
.death-title { font-size: 26px; font-weight: 800; color: #ff7070; margin-bottom: 8px; }
.death-sub { font-size: 13px; opacity: 0.85; margin-bottom: 16px; }
.death-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.death-buttons button { padding: 10px 16px; min-width: 120px; }

#side-panel {
  background: #15171f;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
#side-panel h3 { margin: 0; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }

#battle-log {
  background: #0c0e14;
  border-radius: 8px;
  padding: 10px;
  height: 240px;
  overflow-y: auto;
  font-size: 13px;
  font-family: "SF Mono", Menlo, monospace;
  line-height: 1.4;
}
@media (max-width: 900px) { #battle-log { height: 140px; } }
#battle-log .evt { margin-bottom: 4px; }
#battle-log .evt.kill { color: #ff6565; }
#battle-log .evt.you { color: #57c7ff; }
#battle-log .evt.info { color: #9be39b; }
#battle-log .evt.warn { color: #f0c96b; }

.controls { display: flex; flex-direction: column; gap: 8px; }
button {
  background: #2b63ff; color: white; border: none;
  border-radius: 8px; padding: 12px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.big { padding: 14px 18px; font-size: 15px; }
button.secondary { background: #3a3d4a; }
button.primary { background: #1fb761; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.small-stats { font-size: 12px; opacity: 0.85; display: flex; flex-direction: column; gap: 4px; }

.menu-stats {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; opacity: 0.85;
  padding: 8px 10px; margin-top: 10px;
  background: rgba(0,0,0,0.3); border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* Подсказки управления в игре — на месте бывших stat'ов */
.controls-hint {
  font-size: 12px;
  opacity: 0.85;
  line-height: 1.55;
  padding: 10px 12px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  border: 1px solid #23252f;
}
.controls-hint b { color: #9be39b; }

/* Справочник предметов в настройках */
.items-title { margin: 18px 0 8px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; color: #9be39b; }
.items-info { display: flex; flex-direction: column; gap: 8px; }
.item-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; background: rgba(0,0,0,0.3);
  border: 1px solid #23252f; border-radius: 8px;
}
.item-ico {
  flex: 0 0 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #fff;
}
.item-ico.medkit { background: #1fb761; border: 2px solid #0c6a3a; }
.item-ico.medkit span { color: #fff; font-size: 22px; line-height: 1; }
.item-ico.ammo {
  background: #e0a93b; border: 2px solid #7a5510;
  font-size: 10px; font-family: "SF Mono", Menlo, monospace; color: #2a1a00;
}
.item-ico.mine {
  background: #2a2a33; border: 2px solid #0d0d11;
  border-radius: 50%; position: relative;
}
.item-ico.mine .mine-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff3030;
  box-shadow: 0 0 6px #ff3030;
}
.item-ico.barrel {
  background: radial-gradient(circle at 30% 30%, #c04040, #8a2424 60%, #4a1010);
  border: 2px solid #2a0a0a; border-radius: 50%;
}
.item-ico.bush {
  background: radial-gradient(circle, rgba(80,150,70,0.95), rgba(40,90,40,0.95));
  border: 2px solid #143818;
  font-size: 22px;
}
.item-txt { font-size: 13px; line-height: 1.45; }
.item-txt b { color: #e8e8ee; display: block; margin-bottom: 2px; }
.item-txt span { opacity: 0.85; }

/* Магазин */
.shop-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.shop-pack {
  display: flex; gap: 12px; align-items: center;
  padding: 14px; background: rgba(0,0,0,0.35);
  border: 1px solid #23252f; border-radius: 12px;
  position: relative;
}
.shop-pack.popular { border-color: #2b63ff; box-shadow: 0 0 18px rgba(43,99,255,0.25); }
.shop-pack.best    { border-color: #ffcb3b; box-shadow: 0 0 18px rgba(255,203,59,0.3); background: linear-gradient(135deg, rgba(255,203,59,0.12), rgba(0,0,0,0.35)); }
.pack-badge {
  position: absolute; top: -10px; left: 12px;
  background: #2b63ff; color: white;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.shop-pack.best .pack-badge { background: #ffcb3b; color: #3a2a00; }
.pack-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pack-amount { font-size: 22px; font-weight: 800; color: #ffcb3b; }
.pack-bonus  { font-size: 11px; color: #1fb761; font-weight: 700; }
.pack-stars  { font-size: 14px; opacity: 0.85; }
.pack-tickets { color: #1fb761; font-weight: 600; }
.buy-btn { padding: 12px 18px !important; min-width: 110px; }

/* Скорборд матча под картой (HTML, не canvas) */
#scoreboard-panel {
  background: #0c0e14;
  border: 1px solid #23252f;
  border-radius: 10px;
  padding: 8px 10px 10px;
  margin-top: -4px;
}
#scoreboard-panel.collapsed .sb-table { display: none; }
.sb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.sb-head h3 { margin: 0; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; }
.sb-head .iconbtn { width: 32px; height: 28px; font-size: 14px; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sb-table th, .sb-table td { padding: 3px 6px; border-bottom: 1px solid #1a1c24; text-align: left; }
.sb-table th { font-size: 10px; opacity: 0.6; font-weight: 700; text-transform: uppercase; }
.sb-table td:nth-child(3), .sb-table td:nth-child(4),
.sb-table th:nth-child(3), .sb-table th:nth-child(4) { text-align: right; }
.sb-table tr.me { background: rgba(43,99,255,0.15); }
.sb-table tr.dead td { opacity: 0.4; }
.sb-table .color-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* Блок бонуса в главном меню */
.bonus-box {
  margin: 10px 0 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(31,183,97,0.15), rgba(224,169,59,0.15));
  border: 1px solid rgba(31,183,97,0.45);
  border-radius: 10px;
}
.bonus-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.bonus-sub   { font-size: 12px; opacity: 0.85; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.bonus-sub strong { color: #ffcb3b; font-size: 14px; }

/* Экран рейтинга */
.rating-wrap { max-height: 55vh; overflow-y: auto; margin-bottom: 12px; border-radius: 8px; background: #0c0e14; padding: 6px; }
.rating-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rating-table th, .rating-table td { padding: 6px 8px; border-bottom: 1px solid #1a1c24; text-align: left; }
.rating-table th { font-size: 11px; opacity: 0.7; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #9be39b; }
.rating-table td:nth-child(3), .rating-table td:nth-child(4),
.rating-table th:nth-child(3), .rating-table th:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }
.rating-table tr.me td { box-shadow: inset 3px 0 0 #2b63ff; font-weight: 700; }
.rating-table td.rk { font-size: 15px; width: 34px; text-align: center; }

/* Золотой фон чемпиону */
.rating-table tr.place-1 td {
  background: linear-gradient(90deg, rgba(255,203,59,0.35), rgba(255,203,59,0.12));
  color: #ffcb3b;
  font-weight: 700;
  border-bottom-color: rgba(255,203,59,0.35);
}
.rating-table tr.place-2 td { background: linear-gradient(90deg, rgba(208,212,220,0.22), rgba(208,212,220,0.08)); }
.rating-table tr.place-3 td { background: linear-gradient(90deg, rgba(200,138,61,0.22), rgba(200,138,61,0.08)); }

/* Описание правил рейтинга */
.rating-rules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.rule-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #23252f;
  border-radius: 8px;
  font-size: 13px;
}
.rule-ico { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.rule-row b { color: #ffcb3b; }

/* ── More Games screen ── */
#more-games-grid {
  display: grid;
  gap: 14px;
  padding: 16px;
}
@media (orientation: landscape) {
  #more-games-grid { grid-template-columns: 1fr 1fr; }
}
@media (orientation: portrait) {
  #more-games-grid { grid-template-columns: 1fr; }
}
.game-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,203,59,0.15);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
  text-decoration: none;
  display: block;
}
.game-card:active { transform: scale(0.97); border-color: rgba(255,203,59,0.5); }
.game-card-img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; display: block;
  background: rgba(0,0,0,0.3);
}
.game-card-img-placeholder {
  width: 100%; aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; background: rgba(0,0,0,0.3);
}
.game-card-title {
  padding: 10px 14px 12px;
  font-size: 15px; font-weight: 700;
  color: #e8e8ee;
}