/* =======================================================================================
   DESIGN TOKENS / THEMES
   ======================================================================================= */
:root{
  /* Базовые цвета (тёмная по умолчанию) */
  --clr-ivory        : #d9d4c1;         /* тёплый нюанс под диагональный фон */
  --clr-deep         : #002a48;         /* базовый тёмный фон */
  --clr-text         : #ffffff;         /* основной текст в тёмной */
  --clr-accent       : #39a0ff;
  --custom           : #242d39;

  /* Доп. токены для контрастов/линий/мутед-текста */
  --line             : rgba(255,255,255,.12);
  --muted            : #9aa;            /* подписи/лейблы */
  --text-soft        : #cfd6e6;         /* вторичный текст */
  --tooltip-bg       : #18212d;
  --tooltip-fg       : #ffffff;

  /* Стеклянные подложки */
  --glass            : rgba(44,82,120,0.21);
  --glass-hi         : rgba(44,82,120,0.32);
  --glass-lite       : rgba(44,82,120,0.15);

  /* Карточки/модалки */
  --bg-card          : rgba(27,32,41,.95);

  /* Размеры / скругления / размытие */
  --rad              : 14px;
  --radius-lg        : calc(var(--rad) * 2);
  --h-row            : 44px;
  --blur             : 22px;

  /* Тени */
  --shadow-sm        : 0 1px  6px rgba(0,0,0,.12);
  --shadow-md        : 0 2px 14px rgba(0,0,0,.35);
  --shadow-lg        : 0 4px 18px rgba(0,0,0,.45);

  /* Бренд/кнопки/табы */
  --brand-primary    : #2c5278;
  --brand-hover      : #3487ca;
  --danger-hover     : rgba(255,70,70,.23);

  /* Иконки/размеры сущностей */
  --size-skin        : 80px;
  --size-league-icon : 42px;
  --info-dot-bg      : #3487cae5;

  /* Скролл */
  --scroll-thumb     : rgba(44,82,120,0.15);

  /* Полоса коллекций */
  --btn-collection-bg: rgb(44 82 120);
  
  /* Единый скин горизонтальных скроллов */
  --scr-h: 6px;
  --scr-thumb: rgba(255,255,255,.22);
  --scr-thumb-hover: rgba(255,255,255,.35);
  --scr-track: transparent;

  /* Статы/чипы (по умолчанию под тёмную) */
  --stat-bg          : rgba(255,255,255,.07);
  --chip-bg          : rgba(255,255,255,.04);
  --chip-fg          : #fff;
}

/* Светлая тема — тёплая беж-палитра + корректные контрасты */
:root[data-theme="light"]{
  --clr-ivory   : #efe9d6;             /* тёплый беж */
  --clr-deep    : #f4f6fb;             /* светлый фон для диагонали/канваса */
  --clr-text    : #111;                /* основной текст */
  --bg-card     : #efe9d6;
  --glass       : rgba(0,0,0,.06);
  --glass-hi    : rgba(0,0,0,.10);
  --glass-lite  : rgba(0,0,0,.045);
  --tooltip-bg  : #f0f3f7;
  --tooltip-fg  : #0f1620;
  --scroll-thumb: rgba(0,0,0,.12);
  --line        : rgba(0,0,0,.12);
  --muted       : #5b6a76;
  --text-soft   : #475569;            /* slate-600 */
  --stat-bg     : rgba(0,0,0,.06);
  --chip-bg     : rgba(0,0,0,.06);
  --chip-fg     : #111;
}

/* ==============================
   RESET / БАЗА / УТИЛИТЫ
   ============================== */
*{ box-sizing:border-box; margin:0; padding:0; color:var(--clr-text); font-family:inherit; }
body,input,button,.select,.label,.room-list,.skin-list,.user-name{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-ligatures:none;
}
html,body{
  min-height: var(--app-h, var(--vh, 100vh));
  height:     var(--app-h, var(--vh, 100vh));
  width:100%; overflow-x:hidden; overflow-y:hidden;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 50px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 50px),
    linear-gradient(135deg,var(--clr-ivory) 50%,var(--clr-deep) 50%);
  background-size:50px 50px,50px 50px,100% 100%;
}
.hidden{ display:none; }

.icon{ display:inline-block; vertical-align:middle; object-fit:contain; }
.balance-pill .icon, .pill-btn .icon{ width:24px; height:24px; }
.logout-btn .icon{ width:20px; height:20px; display:block; }

.stock-left{
  margin-top:4px;
  font-size:.8em;
  opacity:.75;
  white-space:nowrap;
}

/* ==============================
   КАРТОЧКИ
   ============================== */
.card{
  width:92vw; max-width:520px; min-width:300px;
  margin:12px auto; padding:2.2rem;
  position:relative; text-align:center;
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  box-shadow:var(--shadow-md);
  z-index:50;
}
@media(min-width:600px){ .card{ padding:2.6rem; }}

/* ==============================
   БАЛАНС / ПИЛЛЫ
   ============================== */
.balance-bar{
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.7rem 1.2rem;
  background:var(--glass); border-radius:var(--rad); backdrop-filter:blur(var(--blur));
}
.balance-pill{ display:flex; align-items:center; gap:.45rem; font:600 .95rem/1 'Inter',sans-serif; }
.balance-pill .ticker{ opacity:.75; font-weight:500; letter-spacing:.3px; }
.pill-btn{
  width:var(--h-row); height:var(--h-row); border:none; border-radius:var(--rad);
  background:var(--glass); backdrop-filter:blur(var(--blur));
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;
}
.pill-btn:hover{ background:var(--glass-hi); }

/* ==============================
   ХЕДЕР ПОЛЬЗОВАТЕЛЯ / ЯЗЫК
   ============================== */
.user-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.5rem; }
.user-row-content{ display:flex; align-items:center; gap:.4rem; }
#user-name{ font-size:1.2rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.logout-btn{
  width:var(--h-row); height:var(--h-row); border:none; border-radius:50%;
  background:var(--glass); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .16s;
}
.logout-btn:hover{ background:var(--danger-hover); }

.lang-buttons{ display:flex; gap:8px; align-items:center; }
.lang-btn{
  width:74px; height:var(--h-row); border:none; border-radius:var(--rad);
  background:var(--glass); backdrop-filter:blur(var(--blur));
  font:600 1rem/1 'Inter',sans-serif; cursor:pointer; transition:background .15s,transform .12s;
  display:flex; align-items:center; justify-content:center;
}
.lang-btn:hover{ background:var(--glass-hi); }
.lang-btn:active{ transform:scale(.95); }
.lang-btn.selected{ background:rgba(57,160,255,.35); pointer-events:none; }

/* ==============================
   ВЫБОР СКИНОВ
   ============================== */
.skin-list{
  display:flex; gap:.6rem; align-items:center; overflow-x:auto;
  padding: 6px 4px 12px 4px;
  -webkit-overflow-scrolling:touch;

  /* ЕДИНЫЙ стиль скролла */
  scrollbar-width: thin;                                    /* Firefox */
  scrollbar-color: var(--scr-thumb) var(--scr-track);
}
/* WebKit */
.skin-list::-webkit-scrollbar{
  height: var(--scr-h);
  background: var(--scr-track);
}
.skin-list::-webkit-scrollbar-track{
  background: var(--scr-track);
}
.skin-list::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scr-thumb), rgba(255,255,255,.12));
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.skin-list::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scr-thumb-hover), rgba(255,255,255,.18));
}

.skin{
  position:relative; flex:0 0 auto;
  width:var(--size-skin) !important;
  height:var(--size-skin) !important;
  border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transform-origin:center;
  transition:transform .15s;
  overflow: visible;
  --ring-w: 3px;
  --ring-c: var(--custom);
}
.skin::before{
  content:"";
  position:absolute;
  inset: calc(var(--ring-w) * -0.5);
  border-radius:50%;
  border: var(--ring-w) solid var(--ring-c);
  pointer-events:none;
  z-index:1;
}
.skin:hover{ transform:scale(1.1); }
.skin img{
  width:100% !important; height:100% !important;
  object-fit:cover; display:block; border-radius:50%;
}
.skin.selected{ --ring-c: var(--brand-hover); }
.skin.selected::after{
  content:'✓'; position:absolute; inset:0; margin:auto;
  width:38px; height:38px; border-radius:50%;
  background:var(--clr-accent);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
  color:#fff; font-size:2rem; font-weight:700; line-height:1;
  box-shadow:0 2px 8px #0004; border:2px solid #fff2; opacity:.94;
  z-index:2;
}

/* ==============================
   PLAY BUTTON
   ============================== */
.play-btn{
  margin: 1.2rem 0 0; font-size:1.2rem;
  background:rgba(57,160,255,.28); border-radius:var(--rad);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; transition:background .15s;
}
.play-btn:hover{ background:rgba(57,160,255,.38); }
.play-btn-icon{ width:28px; height:28px; object-fit:contain; }

/* ==============================
   INPUTS / LABELS
   ============================== */
.label{ display:block; margin:1.2rem 0 .45rem; font:.9rem/1 'Inter',sans-serif; color:var(--muted); }
.select{
  width:100%; height:var(--h-row); padding:0 1rem; border:none; border-radius:var(--rad);
  background:var(--glass); backdrop-filter:blur(var(--blur)); transition:background .15s;
}
.select:hover{ background:var(--glass-hi); }
.select option{ color:#000; }

/* ==============================
   GENERIC BUTTONS
   ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:.9rem 1.9rem;
  border:none; border-radius:var(--rad);
  font:600 1rem/1 'Inter',sans-serif;
  letter-spacing:.2px; cursor:pointer;
  background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--glass), var(--shadow-md);
  transition:background .15s, transform .15s;
}
.btn:hover{ background:var(--glass-hi); transform:translateY(-2px); }
.btn:active{ transform:scale(.965); }
.btn.wide{ width:100%; font-size:1.03rem; }
.btn.disabled, .btn:disabled{ opacity:.42; cursor:default; pointer-events:none; }
.btn img, .btn .icon{ display:block; }

/* ==============================
   КНОПКА "НАЗАД" КРУГЛАЯ
   ============================== */
.back-round{
  position:absolute; top:22px; left:22px; width:44px; height:44px; border-radius:50%; border:none;
  background:var(--glass); display:flex; align-items:center; justify-content:center;
  font-size:2rem; box-shadow:0 2px 10px rgba(0,0,0,.18); cursor:pointer; transition:background .17s, transform .15s;
}
.back-round:hover{ background:var(--glass-hi); transform:scale(1.08); }

/* ==============================
   ROOM LIST
   ============================== */
.room-list{ list-style:none; margin-top:1rem; text-align:left; }
.room-list li{
  display:flex; justify-content:space-between; margin:.42rem 0; padding:.75rem 1.15rem;
  border-radius:var(--rad); background:var(--glass); cursor:pointer; transition:background .15s;
}
.room-list li:hover{ background:var(--glass-hi); }
.room-code{ font-weight:600; }
.room-free{ color:var(--clr-accent); }

/* ==============================
   CANVAS & OVERLAYS
   ============================== */
.food-canvas{ position:fixed; inset:0; pointer-events:none; z-index:1; }
#game-canvas{ position:fixed; inset:0; width:100vw; height:var(--app-h, 100vh); background:var(--clr-deep); z-index:1; }
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:90; }
.overlay{
  padding-bottom: var(--tma-overlay, 0px);
  box-sizing: border-box;
}
#death-overlay.overlay{ background:rgba(0,0,0,.70); z-index:120; }
#death-overlay:not(.hidden){ display:flex!important; }
#dead-record{ color:#ffd759; font-size:1.5rem; margin-bottom:1rem; }
#death-overlay .btn{ margin-top:1.1rem; font-size:1.15rem; padding:1.2rem 2.2rem; }

/* ==============================
   GAME OVERLAY / PLAYERS
   ============================== */
.game-overlay{ position:fixed; inset:0; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:30; }
#players-list{
  position:absolute;
  top:12px; right:16px;
  max-height:60vh;
  overflow:auto;
  padding:8px 12px;
  margin:0;
  list-style:none;
  border-radius:var(--rad);
  font-size:.8rem;
  background:var(--glass);
  backdrop-filter:blur(var(--blur));
  z-index:40;
}

#players-list li{
  margin:2px 0;
  padding:3px 8px;       /* отступ вокруг текста строки */
  white-space:nowrap;
  border-radius:8px;     /* для аккуратной подсветки */
}

#players-list li.me{
  background:rgba(57,160,255,.12);
  font-weight:700;
}

#players-list{
  position:absolute; top:12px; right:16px; z-index:40;
  max-height:60vh; overflow:auto; margin:0; list-style:none;
  padding:8px 12px; border-radius:var(--rad);
  background:var(--glass); backdrop-filter:blur(var(--blur));
  font-size:.8rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;

  /* ---- ЖЁСТКИЕ ШИРИНЫ ---- */
  --lb-w-desktop: 360px;   /* ПК: имя + масса + время */
  --lb-w-mobile:  240px;   /* мобилки: имя + масса */

  width: var(--lb-w-desktop);
  min-width: var(--lb-w-desktop);
  box-sizing: border-box;
}

/* строка */
#players-list li{
  margin:2px 0; padding:4px 8px; border-radius:8px;
  white-space:nowrap; overflow:hidden; box-sizing:border-box;

  display:grid;
  grid-template-columns: 1fr 7ch 12ch;  /* ПК: имя(резиновая) | масса | время */
  align-items:center; gap:8px;
}
#players-list li.me{ background:rgba(57,160,255,.12); font-weight:700; }

#players-list li .col{ min-width:0; }
#players-list li .col-name{ overflow:hidden; text-overflow:ellipsis; }
#players-list li .col-mass,
#players-list li .col-time{
  text-align:right; overflow:hidden; text-overflow:clip;
  /* чтобы ширина цифр была предсказуемой во всех браузерах */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* строка троеточия */
#players-list li.ellipsis{ display:block; text-align:center; opacity:.8; }

/* ---- МОБИЛКИ: скрываем время и ужимаем ширину блока ---- */
#players-list.mobile{
  width: var(--lb-w-mobile);
  min-width: var(--lb-w-mobile);
}
#players-list.mobile li{
  grid-template-columns: 1fr 7ch;  /* имя | масса */
}
#players-list.mobile li .col-time{ display:none; }

/* Fallback, если .mobile по какой-то причине не поставился */
@media (max-width:640px), (hover:none) and (pointer:coarse){
  #players-list{
    width: var(--lb-w-mobile) !important;
    min-width: var(--lb-w-mobile) !important;
  }
  #players-list li{
    grid-template-columns: 1fr 7ch !important;
  }
  #players-list li .col-time{ display:none !important; }
}





/* ==============================
   МАГАЗИН — ТАБЫ / ГРИДЫ / КАРТОЧКИ
   ============================== */
.shop-tabs{ display:flex; gap:6px; margin:6px 0 8px; }
.shop-tabs .tab{
  flex:1; height:var(--h-row); padding:.7rem 0; border:none; border-radius:var(--rad);
  background:var(--glass-lite); font-weight:600; font-size:1.03rem; cursor:pointer; transition:background .12s;
  display:flex; align-items:center; justify-content:center; gap:.5em;
}
.shop-tabs .tab.active{ background:var(--brand-primary); }
.tab-ic{ width:1.35em; height:1.35em; object-fit:contain; margin-right:.18em; }

/* ГРИДЫ */
.skin-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.2rem;
  margin-bottom:1.2rem;
  width:100%;
  box-sizing:border-box;
}
@media(max-width:700px){ .skin-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media(max-width:360px){ .skin-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.ability-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* карточка скина */
.skin-card{
  background:var(--glass); backdrop-filter:blur(var(--blur)); border-radius:var(--rad);
  padding:1rem 1rem .7rem; text-align:center; display:flex; flex-direction:column; align-items:center;
  width:100%; box-sizing:border-box;
}
.skin-card canvas{ display:block; margin:0 auto .5rem; }
/* канвас превью скина (внешний размер) */
.skin-card > .skin-canvas{ width:var(--size-skin); height:var(--size-skin); display:block; }

/* цена */
.price-box{
  display:flex; align-items:center; justify-content:center; gap:.33em;
  margin:.6rem 0 .4rem; font-weight:600; min-height:1.5em; width:100%; text-align:center;
  color:var(--clr-text); font-size:1rem; letter-spacing:.1px;
}
.price-box .price-ic{
  width:1.38em; height:1.38em; object-fit:contain; display:inline-block; vertical-align:middle;
  margin-right:.18em; filter:drop-shadow(0 1px 1px #0002);
}

/* кнопки в карточках */
.btn.buy-btn, .btn.get-btn, .btn.wide.back-btn{
  width:100%; height:var(--h-row); margin-top:.1rem; font-size:1.03rem; padding:0; border-radius:var(--rad);
  font-weight:600; transition:background .14s, box-shadow .12s; border:none; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.11);
}
.get-btn{ background:var(--brand-primary); }
.buy-btn{ background:var(--brand-primary); }
.buy-btn:hover{ background:var(--brand-hover); }
.btn.wide.back-btn{ background:var(--glass-lite); }
.btn.wide.back-btn:hover{ background:var(--brand-primary); }
.get-btn:disabled, .buy-btn:disabled, .btn.wide.back-btn:disabled{ background:#444e; opacity:.7; cursor:not-allowed; }

/* карточка магазина */
.shop-card{
  position:relative; display:flex; flex-direction:column; max-height:86vh;
  overflow:visible;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;
  border-radius:var(--radius-lg);
  padding:1.6rem;
  box-sizing:border-box; background:var(--bg-card);
}
@media (min-width:600px){ .shop-card{ padding:1.6rem; }}

/* старая шапка магазина */
.shop-card-header{
  display:flex; align-items:center; justify-content:center;
  margin:0 0 12px; border-bottom:1px solid var(--line);
  position:relative;
}
.shop-card-header .title{
  margin:0; font-size:18px; font-weight:800; line-height:1; text-align:center;
}

/* ===== УНИФИЦИРОВАННЫЙ HEADER/Body ДЛЯ ВСЕХ МОДАЛОК (+ фикс «табы в шапке») ===== */
.modal-header{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  height:auto; min-height:48px;
  margin:0 0 12px;
  padding-top:4px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.modal-title{ margin:0; font-size:18px; font-weight:800; line-height:1; text-align:center; }
.modal-header .shop-tabs{ width:100%; margin-top:6px; }
.shop-note{ font-size:12px; color:var(--muted); text-align:center; margin-top:2px; }

.modal-body{
  flex:1 1 auto; padding:0; overflow-y:auto; max-height:70vh; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.modal-body::-webkit-scrollbar{ width:0; height:0; background:transparent; }

/* скроллбар (WebKit) у .shop-card */
.shop-card::-webkit-scrollbar{ width:6px; background:transparent; border-radius:12px; }
.shop-card::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg, rgba(44,82,120,0.09), rgba(44,82,120,0.19));
  border-radius:7px; min-height:28px; border:2px solid transparent; background-clip:padding-box;
}
.shop-card::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg, rgba(44,82,120,0.17), rgba(44,82,120,0.31));
}
.shop-card::-webkit-scrollbar-corner{ background:transparent; }

/* крестик закрытия — единообразно */
.modal-close{ color:#888; transition:.1s; }
.modal-close.shop-close{
  position:absolute; top:0px; right:0px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; background:transparent; border:none; color:#98a2ad; cursor:pointer; z-index:10;
  border-radius:10px;
  transition:background .12s, color .12s, transform .08s;
  padding-bottom: 3px;
}
.modal-close.shop-close:hover{ color:#ff6b6b; background:rgba(255,255,255,.06); }
.modal-close.shop-close:active{ transform:scale(.96); }

/* превью способности */
.ability-prev{ position:relative; width:100%; aspect-ratio:1 / 1; border-radius:16px; overflow:hidden; }
.ability-prev .ability-img{ width:100%; height:100%; object-fit:cover; display:block; }
.ability-prev .ability-ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#789;
  font:600 18px/1 "Inter", Arial, sans-serif;
}
.ability-info-btn{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
  background:var(--info-dot-bg);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:28px; line-height:1; color:#fff;
  cursor:pointer; user-select:none;
}
.ability-title{ margin-top:8px; font-weight:600; font-size:14px; line-height:1.2; color:var(--clr-text); }
.ability-desc{
  color: var(--text-soft);
  font-size:13px; line-height:1.35; margin-top:4px; white-space:pre-line;
}

/* ==============================
   СПРАВОЧНЫЕ БЛОКИ / СТАТИСТИКА
   ============================== */
.stat-row{ display:flex; gap:10px; margin:20px 0 10px; }
.stat-cell{
  flex:1; display:flex; justify-content:center; align-items:center; gap:10px; padding:12px 8px;
  border-radius:var(--rad); background:var(--stat-bg); backdrop-filter:blur(10px);
  font:600 1.05rem/1 'Inter',sans-serif;
}
.stat-ic{ width:22px; height:22px; object-fit:contain; }
.stat-ic-right{ margin-left:6px; margin-right:0; }

/* ==============================
   РЕФ. ТАБЛИЦА (базовая)
   ============================== */
.ref-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem;
  background:#fff; border-radius:12px; overflow:hidden; box-shadow: none;
}
.ref-table thead{
  background:linear-gradient(135deg, #1d2a3a, #1d2a3a);
  color:#fff; text-transform:uppercase; letter-spacing:.03em;
}
.ref-table th, .ref-table td{ padding:10px 12px; text-align:left; }
.ref-table tbody tr{ transition:background .2s; }
.ref-table tbody tr:nth-child(odd){ background:#fafafa; }
.ref-table tbody tr:hover{ background:rgba(0,188,212,.12); }
.ref-table td img.icon{ vertical-align:middle; margin-left:4px; width:16px; height:16px; }

@media (prefers-color-scheme: dark){
  .ref-table{ background:#222; box-shadow: none; }
  .ref-table thead{ background:linear-gradient(135deg, #1d2a3a, #1d2a3a); }
  .ref-table tbody tr:nth-child(odd){ background:#2a2a2a; }
  .ref-table tbody tr:hover{ background:rgba(0,188,212,.2); }
}

/* ==============================
   ЛИГИ (иконки/прогресс/тултипы)
   ============================== */
.league-bar{
  margin:8px 0 10px; padding:15px 12px; border-radius:12px; background:var(--glass-lite);
  display:flex; flex-direction:column; align-items:center; width:100%;
}
.league-icons{
  display:flex; width:95%; justify-content:space-between; margin-bottom:10px;
}
.league-icon{
  flex:1 1 0; max-width:var(--size-league-icon); min-width:0;
  width:100%; height:var(--size-league-icon); border-radius:50%;
  opacity:.8; transition:transform .3s, opacity .3s; cursor:default; object-fit:contain; margin:0;
}
.league-icon.active{
  transform:scale(1.28); opacity:1; z-index:2;
  box-shadow:0 0 6px 4px #20d0ff14, 0 0 12px 8px #2eeaff14;
}
.league-icon:hover{ opacity:1; }

.league-tooltip{
  position:absolute; z-index:99999; background:var(--tooltip-bg); color:var(--tooltip-fg);
  padding:10px 18px; border-radius:12px; box-shadow:0 6px 32px #000a, 0 1.5px 0 #27384f;
  font-size:13px; font-family:inherit; pointer-events:none; opacity:0; transition:opacity .18s; user-select:none; white-space:nowrap;
}

.league-progress-bar{
  width:100%; height:12px; border-radius:10px; background:#1d2632; overflow:hidden; box-shadow:0 2px 8px #0004; display:flex;
}
.league-progress-segment{
  height:100%; background:#2b5278; flex:1 1 0; border-right:2px solid #6fd7ef3d; position:relative;
}
.league-progress-segment:last-child{ border-right:none; }
.league-progress-fill{ height:100%; background:var(--clr-accent); transition:width .4s; position:absolute; left:0; top:0; }

/* ==============================
   МОБИЛЬНЫЕ ПРАВКИ
   ============================== */
@media(max-width:600px){
  .card{ padding:16px!important; min-width:0; }
  .balance-bar{ flex-wrap:wrap; gap:8px; padding:8px 6px 0; background:none; box-shadow:none; }
  .balance-pill{ flex:1 1 0; font-size:1rem; padding:0 2px; }
  .pill-btn{ width:100%; height:44px; margin-top:10px; background:var(--glass); box-shadow:var(--shadow-sm); }
  .user-row{ flex-direction:column; gap:0; margin-bottom:.7rem; }
  .user-row-content{ width:100%; margin-bottom:6px; padding: 0 !important; }
  .logout-btn{ width:34px; height:34px; }
  #user-name{ font-size:1.2rem; text-align:center; margin:0; }
  .lang-buttons{ width:100%; justify-content:center; margin:8px 0 12px; gap:8px; }
  .lang-btn{ width:44vw; min-width:80px; max-width:160px; font-size:1.09rem; height:42px; }
  .skin-list{ gap:1rem; padding:.6rem .1rem .5rem; }
  .play-btn{ margin:1rem 0 1.4rem; font-size:1.02rem; padding:.65em 0; }
  .label, .select, .btn, .room-list li{ font-size:.97rem; }
  .btn, .select{ padding-left:.7rem; padding-right:.7rem; }

  .user-row-content{
    flex-direction:row; width:100%; justify-content:center; align-items:center; padding:0 10px;
  }
  .wallet-btn{
    width:50%; min-width:0; max-width:160px; margin:6px 0 0 0; font-size:.7rem; height:38px;
    justify-content:flex-end; flex-shrink:0; flex-grow:0;
  }
  #user-name{
    flex:1 1 0; min-width:0; font-size:1.09rem; max-width:100vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    margin:0 6px 0 0; text-align:left;
  }
}

/* ==============================
   КНОПКА КОШЕЛЬКА
   ============================== */
.wallet-btn{
  display:flex; margin-left:0 !important; align-items:center; justify-content:center;
  height:var(--h-row); border:none; border-radius:var(--rad);
  background:var(--glass); backdrop-filter:blur(var(--blur));
  font:600 .7rem/1 'Inter',sans-serif; width:90px; padding:0 20px; cursor:pointer;
  transition:background .15s, box-shadow .12s; margin-left:12px; box-sizing:border-box;
}
.wallet-btn:disabled, .wallet-btn[disabled]{ opacity:.83; cursor:default; pointer-events:none; background:var(--glass-hi); font-size: 12px;}
.wallet-btn .icon{ width:22px; height:22px; display:inline-block; margin-right:8px; }

/* ==== VIP ROOMS ==== */
.room-list li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 14px; border-radius:12px;
  background: var(--glass, rgba(255,255,255,.04));
}
.room-list li .left{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; white-space:nowrap; }
.room-list li .right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.room-list .room-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.room-list .room-free { opacity:.85; font-weight:600; }
.room-list li .room-lock{ font-size:1.1rem; opacity:.9; }

.room-list li.vip{
  position:relative; overflow:hidden;
  border-radius:12px;
  background:
    linear-gradient(135deg,#3e2c11 0%, #7a5b23 18%, #c9a64d 50%, #7a5b23 82%, #3e2c11 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.00) 2px 4px),
    var(--glass, rgba(255,255,255,.04));
  border:1px solid rgba(255,210,70,.38);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.18);
  transition: box-shadow .25s ease, transform .15s ease, border-color .25s ease, filter .25s ease;
}
.room-list li.vip.locked{ opacity:.75; }
.room-list li.vip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255,245,200,.25), transparent 50%),
    radial-gradient(140% 120% at 100% 100%, rgba(255,210,90,.18), transparent 55%);
  mix-blend-mode:soft-light; opacity:.85;
}
.room-list li.vip::after{
  content:""; position:absolute; inset:-25% -10%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%) rotate(6deg);
  transition: transform .75s ease; pointer-events:none;
}
.room-list li.vip:hover{
  border-color: rgba(255,220,120,.60);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.24);
  filter: saturate(1.08);
}
.room-list li.vip:hover::after{ transform: translateX(120%) rotate(6deg); }
.room-list li.vip .vip-brand{
  width:45px; height:45px; flex:0 0 32px; border-radius:50%; object-fit:contain;
  background:#fff; padding:0; box-shadow:0 0 0 1px rgba(255,210,70,.35);
}
.vip-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; height:22px; line-height:1; white-space:nowrap;
  border-radius:999px;
  background: linear-gradient(90deg, #3b2c10, #70541b);
  color:#ffe08a; border:1px solid rgba(255,220,120,.32);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 2px 8px rgba(0,0,0,.20);
  font-weight:700; font-size:12px;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.vip-badge:hover{
  transform: translateY(-1px);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset, 0 4px 12px rgba(0,0,0,.25), 0 0 18px rgba(255,215,80,.25);
  filter: saturate(1.06);
}
.vip-badge .vip-star{ color:#ffd76a; filter: drop-shadow(0 0 4px rgba(255,215,0,.55)); }
.vip-badge .vip-text{ letter-spacing:.3px; opacity:.95; }
.vip-badge .vip-mul { color:#ffd76a; }
.room-list li.vip .room-free{ color:#fff; opacity:1; text-shadow:0 1px 1px rgba(0,0,0,.35); }

/* VIP overlay */
#vip-overlay .vip-card{
  position: relative;
  display:flex; flex-direction:column;
  width:92vw; max-width:520px; min-width:300px;
  margin:auto;
  padding:1.6rem;
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  box-shadow:var(--shadow-md);
  max-height:86vh;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;
}
@media (min-width:600px){ #vip-overlay .vip-card{ padding:1.6rem; } }

#vip-overlay .vip-list { display:grid; grid-template-columns:1fr; gap:12px; }

.vip-card-section{
  border:1px solid rgba(51,51,51,.36);
  border-radius:16px;
  padding:12px;
  background:rgba(14,15,18,.90);
}
.vip-empty{ padding:18px; text-align:center; color:#9aa; }

.vip-quest{ display:flex; gap:10px; align-items:center; }
.vip-quest__cover{ width:94px; height:94px; border-radius:10px; object-fit:cover; flex:0 0 94px; }
.vip-quest__body{ flex:1 1 auto; min-width:0; }
.vip-quest__head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.vip-quest__title{ font-weight:600; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vip-quest__mult{ font-size:12px; opacity:.9; }
.vip-quest__progress{ margin-top:6px; display:flex; align-items:center; gap:8px; }
.vip-quest__progress-bar{ height:6px; border-radius:4px; background:#26282e; flex:1; overflow:hidden; }
.vip-quest__progress-fill{ height:100%; background:#4aa8ff; width:0; }
.vip-quest__progress-num{ font-size:12px; color:#8b8f98; }
.vip-quest__actions{ margin-top:10px; }
.vip-received{ color:#7cff7c; font-weight:600; }

.vip-detail-head{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.vip-detail-left{ min-width:120px; }
.vip-detail-cover{ width:120px; aspect-ratio:1/1; border-radius:12px; object-fit:cover; display:block; }
.vip-detail-right{ flex:2 1 0; min-width:180px; }
.vip-detail-title-row{ display:flex; align-items:center; gap:8px; justify-content:flex-start; }
.vip-detail-title{ font-weight:700; font-size:16px; line-height:18px; overflow-wrap:anywhere; }
.vip-detail-mult{ font-size:12px; opacity:.9; }
.vip-detail-desc{ color:var(--text-soft); font-size:13px; line-height:18px; margin-top:8px; }

.vip-steps-title{ font-weight:600; margin-bottom:6px; text-align:left; }
.vip-step{ padding:12px; border-radius:12px; background: var(--stat-bg); margin: 10px 0px 10px 0px;}
.vip-step-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vip-step-title{ font-weight:600; line-height:18px; }
.vip-step-right{ display:flex; align-items:center; gap:8px; }
.vip-step-done{ font-size:12px; color:#66ff99; font-weight:700; }
.vip-step-type{ font-size:11px; color:#7f8591; }
.vip-step-actions{ display:flex; gap:8px; margin-top:10px; }
.vip-step-actions .btn{ flex:1; }
.vip-check-block{ display:flex; gap:8px; }

/* ==============================
   ПОЛОСА КОЛЛЕКЦИЙ
   ============================== */
.collection-host { margin: 0 0 12px 0; }
.collection-strip{
  display:flex; gap:8px; overflow-x:auto; padding:3px 3px 10px 3px;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;

  /* ЕДИНЫЙ стиль скролла */
  scrollbar-width: thin;                                    /* Firefox */
  scrollbar-color: var(--scr-thumb) var(--scr-track);
}
/* WebKit */
.collection-strip::-webkit-scrollbar{
  height: var(--scr-h);
  background: var(--scr-track);
}
.collection-strip::-webkit-scrollbar-track{
  background: var(--scr-track);
}
.collection-strip::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--scr-thumb), rgba(255,255,255,.12));
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.collection-strip::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--scr-thumb-hover), rgba(255,255,255,.18));
}

.coll-btn{
  flex:0 0 auto; height:41px; width:41px; border:none; outline:none; border-radius:999px;
  background:var(--btn-collection-bg);
  display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  --s:1; transform:scale(var(--s)); will-change:transform;
  transition:transform 120ms ease, background-color 120ms ease;
  scroll-snap-align:start;
}
.coll-btn img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.coll-btn span{ font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; opacity:.9; padding:0 10px; }
@media (hover:hover) and (pointer:fine){ .coll-btn:hover{ --s:1.04; } }
.coll-btn.active{ --s:1.12; z-index:1; }
.coll-btn:active{ --s:0.98; }
.coll-btn:focus, .coll-btn:focus-visible{ outline:none; --s:1.04; }
@media (prefers-reduced-motion: reduce){ .coll-btn{ transition:none; } }

/* ==============================
   DAILY (Ежедневные награды)
   ============================== */
#daily-overlay .daily-card{ width:92vw; max-width:520px; min-width:300px; padding:1.6rem; }
@media (min-width:600px){ #daily-overlay .daily-card{ padding:1.6rem; } }

.daily-plan{
  display:grid; grid-template-columns: repeat(10, 1fr);
  gap:6px; margin-bottom:10px;
  padding: 1px;
}
.plan-cell{
  min-height:34px; border-radius:8px; background: rgba(255,255,255,.10);
  outline:1px solid rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:#cfd6e6; font-weight:700; font-size:12px; letter-spacing:.2px; opacity:.65; padding:5px;
}
.plan-cell .nmk-ic{ width:18px; height:18px; display:block; opacity:.9; }
.plan-cell.done{
  background: var(--clr-accent, #39a0ff); color:#06121d; opacity:1;
  box-shadow: 0 0 12px rgba(57,160,255,.40), inset 0 0 0 1px rgba(255,255,255,.06);
}
.plan-cell.active{
  outline:1px solid var(--clr-accent, #39a0ff);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 10px rgba(57,160,255,.35);
}

.daily-top-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:start; margin-bottom:10px; }
.daily-sec-title{ display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:14px; color:#cfd6e6; margin:2px 0 6px; }
@media (max-width: 440px){ .daily-top-grid{ grid-template-columns: 1fr; } }

#daily-skin.daily-skin-reward{
  border-radius:999px; overflow:hidden; padding:0;
  background: rgba(255,255,255,0.04);
  outline: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
#daily-skin img{
  display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
  transition: filter .2s ease, opacity .2s ease;
  filter: grayscale(1) brightness(.75); opacity:.9;
}
#daily-skin:not(.is-locked) img{ filter:none; opacity:1; }

.daily-puzzle{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; width:100%; }
.daily-puzzle .frag{
  position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  background: radial-gradient(120% 120% at 15% 15%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.32) 70%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.28));
  outline:1px solid rgba(0,0,0,0.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.daily-puzzle .frag > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) brightness(.70); opacity:.55; transition: filter .15s, opacity .15s;
  border-radius:10px;
}
.daily-puzzle .frag.got > img{ filter:none; opacity:1; }
.daily-puzzle .frag.got{ box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(57,160,255,.45); }

.daily-claimed-chip{
  display:inline-block; padding:6px 10px; margin:6px 0 8px 0;
  border-radius:999px; background: rgba(74,201,110,.18);
  color:#b7ffc8; font-weight:600; font-size:.95em;
}
.daily-bottom-row{ display:flex; gap:10px; align-items:center; }
.timer-pill{
  flex:1 1 50%;
  display:flex; align-items:center; justify-content:center;
  gap:8px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.06); outline:1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-weight:700;
}
:root[data-theme="light"] .timer-pill{ background: rgba(0,0,0,.06); }
.timer-pill img{ width:20px; height:20px; display:block; }
.daily-bottom-row .btn.half{ flex:1 1 50%; min-height:44px; font-weight:800; }
.sub-actions-row{ display:flex; gap:8px; margin-top:10px; }
.sub-actions-row .btn.half{ flex:1 1 50%; }
.btn.is-collected{ background: rgba(74,201,110,.22) !important; color: #b7ffc8 !important; cursor: default !important; filter: none !important; }
.btn.is-collected:disabled{ opacity: 1; }

/* ====== Тёмная цветовая схема для модалок с таблицами ====== */
#refs-overlay, #lb-overlay { color-scheme: dark; }

/* Таблицы в модалках (v2) */
#lb-overlay .ref-table,
#refs-overlay .ref-table{
  --bg0: rgba(20,28,38,.92);
  --bg1: rgba(255,255,255,.04);
  --bg2: rgba(255,255,255,.06);
  --head-grad: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  --line: rgba(255,255,255,.12);

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--clr-text);
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
  position: relative;
}
#lb-overlay .ref-table::before,
#refs-overlay .ref-table::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, rgba(57,160,255,0), rgba(57,160,255,.8), rgba(57,160,255,0));
}
#lb-overlay .ref-table thead th,
#refs-overlay .ref-table thead th{
  background: var(--head-grad);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 14px;
}
#lb-overlay .ref-table tbody tr,
#refs-overlay .ref-table tbody tr{ background: var(--bg1); }
#lb-overlay .ref-table tbody tr:nth-child(even),
#refs-overlay .ref-table tbody tr:nth-child(even){ background: var(--bg2); }
#lb-overlay .ref-table td,
#refs-overlay .ref-table td{ padding: 12px 14px; border-top: 1px solid var(--line); }
#lb-overlay .ref-table tr:hover td,
#refs-overlay .ref-table tr:hover td{ background: rgba(57,160,255,.10); }

.lb-you-row td{
  background: rgba(57,160,255,.12) !important;
  border-top-color: transparent; /* чтобы не было двойной линии с базовым бордером */
  box-shadow:
    inset 0 1px 0 rgba(57,160,255,.35),   /* верхняя линия подсветки */
    inset 0 -1px 0 rgba(57,160,255,.35);  /* нижняя линия подсветки */
}
.lb-ellipsis{ text-align:center; color:#9aa; font-style:italic; }

/* Скролл для длинных списков + липкая шапка */
#lb-overlay .card, #refs-overlay .card{
  width:92vw; max-width:520px; min-width:300px; padding:1.6rem;
  max-height: 80vh; display: flex; flex-direction: column;
  border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:var(--shadow-md);
}
@media (min-width:600px){ #lb-overlay .card, #refs-overlay .card{ padding:1.6rem; } }
#lb-body, #refs-body{ overflow: auto; }
#lb-body .ref-table thead th, #refs-body .ref-table thead th{
  position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

/* ===== КАСТОМНАЯ ВЫПАДАШКА ЯЗЫКОВ ===== */
.lang-dropdown{ position:relative; display:flex; align-items:center; }
.lang-toggle{ display:flex; align-items:center; gap:6px; padding:0 10px; min-width:72px; font-size:16px;}
.lang-toggle .caret{ margin-left:2px; opacity:.85; }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:155px; padding:6px;
  border-radius:12px; background:var(--glass); backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow-md); display:none; z-index:2000;
}
.lang-dropdown.open .lang-menu{ display:block; }
.lang-dropdown .lang-menu .lang-btn{
  width:100%; height:32px; border-radius:10px; background:transparent; justify-content:flex-start;
  padding:0 10px; font:600 .95rem/1 'Inter',sans-serif; margin:3px;
}
.lang-dropdown .lang-menu .lang-btn:hover{ background:var(--glass-hi); }
.lang-dropdown .lang-menu .lang-btn.selected{ background:rgba(57,160,255,.35); }
@media(max-width:600px){
  .lang-dropdown .lang-menu{ min-width:180px; }
  .lang-dropdown .lang-menu .lang-btn{ height: 28px;
    font-size: .9rem; }
}

/* ---------- FAQ ---------- */
#faq-body{ text-align:left; padding-top:12px; }
#faq-body .faq-h{ margin:6px 0 0; font-weight:600; font-size:16px; line-height:1.2; text-align:left; }
.faq-row{
  display:flex; align-items:flex-start; gap:12px;
  padding:12px; border-radius:14px;
  background: var(--glass, rgba(255,255,255,0.04));
}
.faq-col{ flex:1; min-width:0; text-align:left; }
.faq-ic{
  width:52px; height:52px; flex:0 0 32px; object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.faq-list{ margin:0; padding-left:18px; list-style:disc; }
@media (max-width:520px){
  .faq-row{ padding:10px; gap:10px; }
  .faq-ic{ width:28px; height:28px; flex-basis:28px; }
}

/* ==============================
   ДОП. МОБИЛЬНЫЕ ФИКСЫ ДЛЯ SETTINGS
   ============================== */
@media(max-width:600px){
  #settings-card .user-row{
    display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important;
    gap:8px !important; flex-wrap:nowrap !important; padding:0 4px !important; margin-bottom: .1rem !important;
  }
  #settings-card .user-row-content{
    display:flex !important; align-items:center !important; gap:6px !important;
    flex:1 1 auto !important; min-width:0 !important; width:auto !important; margin:0 !important;
  }
  #settings-card #user-name{
    flex:1 1 auto !important; min-width:0 !important; white-space:nowrap !important; overflow:hidden !important;
    text-overflow:ellipsis !important; margin:0 !important; font-size:1rem !important; text-align:left !important;
  }
  #settings-card .logout-btn{ width:36px !important; height:36px !important; border-radius:10px !important; flex:0 0 auto !important; }
  #settings-card .lang-buttons{
    display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important;
    gap:6px !important; flex:0 0 auto !important; width:auto !important; margin:0 !important;
  }
  #settings-card .user-row .pill-btn:not(.wallet-btn){
    width:36px !important; height:36px !important; border-radius:10px !important; margin:0 !important; flex:0 0 auto !important;
  }
  #settings-card .wallet-btn{
    height:36px !important; padding:0 10px !important; flex:0 1 40% !important; max-width:40% !important; min-width:92px !important;
    white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; width:auto !important; margin:0 !important;
  }

  /* сброс ширины для таблеток */
  #settings-card .user-row .pill-btn,
  .balance-bar .pill-btn{ width:auto !important; }

  .balance-bar{
    display:flex !important; flex-wrap:wrap !important; gap:8px !important;
    padding:8px 6px 0 !important; background:none !important; box-shadow:none !important;
  }
  .balance-bar .balance-pill{
    display:flex !important; align-items:center !important; gap:.45rem !important;
    flex:1 1 0 !important; font-size:.9rem !important; padding:0 2px !important; min-width:0 !important;
  }
  .balance-bar .pill-btn{
    width:36px !important; height:36px !important; border-radius:10px !important;
    margin:0 !important; padding:0 !important; flex:0 0 auto !important; line-height:1 !important;
  }
  #ton-topup-btn{
    width:36px !important; height:36px !important; margin-left:auto !important; padding:0 !important; font-size:1.4rem !important; line-height:1 !important;
    flex:0 0 36px !important;
  }

  .skin-list{ gap:.8rem !important; padding:.5rem .1rem .5rem !important; }
  .skin{ width:60px !important; height:60px !important; }
  .skin.selected::after{ width:24px !important; height:24px !important; font-size:1.45rem !important; }

  .btn{ font-size:.95rem !important; padding:.7rem .7rem !important; }
  .btn.wide{ font-size:1rem !important; }
  .play-btn{ font-size:1rem !important; padding: 15px 0 !important; margin:5px 0 0 !important; }
  .play-btn .icon, .play-btn-icon{ width:22px !important; height:22px !important; }

  .league-bar { margin: 10px 0; }

  .balance-bar #open-shop{
    order: 99; flex: 0 0 100%; width: 100% !important; height: 44px; margin-top: 8px;
  }

  .daily-top-grid{ grid-template-columns: 1fr 1fr !important; }
  .daily-plan{ gap: 4px; }
  .plan-cell{
    min-height: 0; padding: 4px 3px; white-space: nowrap;
    font-size: clamp(8px, 2.2vw, 12px);
  }
  .plan-cell .nmk-ic{ width: 1.25em; height: 1.25em; margin-left: 0; }

  #ref-copy{ margin-top: 0 !important; width: 44px !important; }
  #ref-share{ margin-top: 0 !important; width: 44px !important; }
  #ref-url{ font-size:14px; }
}

#lb-overlay .nmk-ic{
  width:16px !important;
  height:16px !important;
  display:inline-block;
  object-fit:contain;
  vertical-align:-3px;
  margin-left:6px;
}

.select:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(57,160,255,.55);
}

/* ===== Прочее (abilities): компактные тексты ===== */
.ability-card .ability-name{
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 6px;
  opacity: .95;
}
.ability-card .ability-desc{
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-soft);
  margin-top: 4px;
  white-space: pre-line;
}
.ability-card .ability-rest{
  font-size: 12px;
  line-height: 1.25;
  color: #f9b6aa;;
  margin-top: 4px;
}

@media (max-width: 450px){
  .league-bar{ --league-pad: 10px; }
  .league-progress{ padding-inline: var(--league-pad); box-sizing: border-box; }
  .league-icons{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding-inline: 2px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 5px;
    
  }

  .league-icons .league-icon{
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 !important;
    transform: none !important;
  }
}

/* ====== Состав (рамка + сетка) ====== */
.dead-box{
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px;
  margin:8px 0 10px;
}
.dead-pills{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 10px;
}

/* Элементы состава: иконка + "+NMK" */
.dead-pill{
  display:flex; align-items:center; justify-content:space-between;
  min-height:42px; padding:8px 10px; border-radius:10px;
  background:var(--chip-bg);
  color:var(--chip-fg);
}
.dead-pill .left{ display:flex; align-items:center; gap:10px; }
.dead-pill .ic{ width:30px; height:30px; display:block; }
.dead-pill .val{ display:flex; align-items:center; gap:6px; font-weight:600; }
.dead-pill .coin{ width:16px; height:16px; display:block; }

/* Итоговая плашка */
.dead-total{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; margin-top:8px; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#d2a23a,#a86a1a);
  color:#201202; box-shadow:0 10px 26px rgba(231,169,59,.35);
}

.dead-total .left{ display:flex; align-items:center; gap:10px; }
.dead-total .left .ic{ width:30px; height:30px; }
.dead-total .val{ display:flex; align-items:center; gap:6px; font-weight:700; }
.dead-total .val .coin{ width:20px; height:20px; }

/* ====== Чипы способностей: только картинки, один ряд ====== */
#dead-abilities{
  display:flex; flex-wrap:nowrap;
  justify-content:center; align-items:center;
  gap:8px; overflow:hidden; padding:0; margin:18px 0 0 !important;
  background:transparent; border:0;
  padding-top:5px;
}
#dead-abilities img{
  flex:1 1 45px;
  max-width:45px; min-width:22px;
  aspect-ratio:1/1; height:auto; object-fit:cover; display:block;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  margin:0;
}



/* ========= SHOP: NFT tab (полный блок) ========= */
.shop-card-body .shop-note{
  margin:6px 0 10px;
  font-size:13px;
  text-align:center;
  opacity:.85;
}

.shop-card-body .nft-grid{
  display:grid;
  grid-template-columns:1fr; /* одна колонка */
  gap:12px;
}

/* Карточка */
.shop-card-body .nft-card{
  display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  text-align:left;
}

/* Заголовок и описание */
.shop-card-body .nft-title{
  font-weight:600; font-size:16px; line-height:1.2;
}
.shop-card-body .nft-desc{
  font-size:13.5px; line-height:1.45; opacity:.9;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:-2px;
}

/* Картинка: без скруглений, не «раздувается» */
.shop-card-body .nft-img{
  width:100%; display:block;
  border-radius:0;
  object-fit:contain;
  max-height:220px;   /* ограничение высоты */
  background:transparent;
}

/* Ссылки-ЧИПЫ по центру (база rgb(44,82,120)) */
.shop-card-body .nft-links{
  display:flex; justify-content:center; align-items:center;
  gap:10px; flex-wrap:wrap; margin:6px 0 2px;
}
.shop-card-body .nft-link{
  --chip-base: 44,82,120; /* rgb(44,82,120) */
  color: rgba(190,220,255,.95);
  background: linear-gradient(180deg,
              rgba(var(--chip-base), .18),
              rgba(var(--chip-base), .08));
  border: 1px solid rgba(var(--chip-base), .45);
  box-shadow: 0 4px 14px rgba(var(--chip-base), .15) inset,
              0 6px 18px rgba(0,0,0,.15);
  padding:6px 12px; border-radius:999px;
  font-weight:600; font-size:13px; text-decoration:none;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
}
.shop-card-body .nft-link:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  border-color: rgba(var(--chip-base), .65);
}

/* Низ карточки: 50% цена, 50% кнопка */
.shop-card-body .nft-bottom{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:12px;
}

/* Цена — по центру своей половины, не переносится */
.shop-card-body .nft-price{
  justify-self:center;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:16px;
  white-space:nowrap; text-align:center;
}
.shop-card-body .nft-price .price-ic{
  width:22px; height:22px; vertical-align:middle;
}

/* Кнопка — занимает всю свою половину */
.shop-card-body .nft-card .btn{
  justify-self:center; width:100%;
}

/* Очень узкие экраны — если вдруг понадобится сложить в столбец */

@media (max-width:420px){
  .shop-card-body .nft-bottom{ grid-template-columns:1fr; gap:8px; }
  .shop-card-body .nft-card .btn{ width:100%; }
}

.vip-step-link{
    font-size: 12px;
}

@media (max-width:450px){
    .price-box {
    	font-size: .8rem;
    }
    .skin-card {
    	padding: .3rem .3rem .3rem .3rem;
    }
    .shop-tabs .tab {
      font-size: .9rem;
      gap: .1em;
    }
}

/* только VIP-иконка: 1px внутрь + 1px наружу */
.dead-pill.vip .ic{
  display:block;
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:50%;
  box-sizing:border-box;           /* чтобы border ушёл внутрь */
  border: 2px solid #D6AF37DB;
  outline-offset:0;                /* без зазора */
}




/* изоляция анимаций иконок внутри кнопок */
.btn .ic-tilt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.btn .ic-tilt > img{ display:block; }

#ref-url{ font-size:16px; }

/* Центрирование карточек на экране, пока не в игре */
body:not(.game-lock){
  display:grid;
  place-items:center;
}


/* Death screen: скролл внутри, но без видимой полосы */
#death-overlay .card{
  max-height: 86vh;               /* можно 90vh, если удобнее */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* прячем системный скроллбар */
  scrollbar-width: none;          /* Firefox */
  scrollbar-gutter: stable;       /* не дёргает ширину содержимого */
}
#death-overlay .card::-webkit-scrollbar{
  width: 0;
  height: 0;
}


/* === FIX: стабильный центр SETTINGS — без скачков при отвязке кошелька === */
#settings-card{
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;                /* убираем исходный margin, чтобы центр был точным */
  z-index: 10;              /* ниже модальных оверлеев (они с большим z-index) */
}

/* На очень низких экранах возвращаем обычный поток, чтобы всё поместилось */
@media (max-height: 560px){
  #settings-card{
    position: static;
    transform: none;
    margin: 12px auto;
  }
  
}


/* TMA: по умолчанию скрываем */
body.tma #logout{ display:none !important; }

/* Отдельная кнопка полноэкранного режима для TMA-десктопа */
#tma-fs-toggle{ display:none; }
body.tma.tma-desktop #tma-fs-toggle{ display:flex; } /* видна только в TMA на ПК */

/* ИКОНКА: РАЗВЕРНУТЬ — рисуем 4 внешних угла (без эмодзи, работает в Safari/macOS) */
#tma-fs-toggle::before{
  content:"";
  display:block;
  width:22px; height:22px;

  --th: 2px;   /* толщина линий */
  --len: 8px;  /* длина усика угла */
  --off: 2px;  /* отступ от краёв */

  background:
    linear-gradient(currentColor, currentColor) left  var(--off) top    var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) top    var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) top    var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) top    var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) bottom var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) bottom var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) bottom var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) bottom var(--off) / var(--th)  var(--len) no-repeat;
}

/* ИКОНКА: СВЕРНУТЬ — те же углы, но смещаем внутрь */
#tma-fs-toggle.fs-on::before{
  content:"";
  display:block;
  width:22px; height:22px;

  --th: 2px;
  --len: 8px;
  --off: 6px; /* внутрь — визуально «свернуть» */

  background:
    linear-gradient(currentColor, currentColor) left  var(--off) top    var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) top    var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) top    var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) top    var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) bottom var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) left  var(--off) bottom var(--off) / var(--th)  var(--len) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) bottom var(--off) / var(--len) var(--th) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--off) bottom var(--off) / var(--th)  var(--len) no-repeat;
}


/* ===== NMK tip ===== */
.nmk-tip-card .modal-body { padding: 14px 16px 18px; }

.nmk-tip-grid{
  display:flex; gap:16px; align-items:stretch;
}

.nmk-tip-left{ flex:0 0 25%; min-width:120px; }
.nmk-tip-right{ flex:1 1 auto; display:flex; align-items:center; }

.nmk-tip-icon-card{
  width:100%; min-height:120px;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px;
  background: var(--custom);
  border:1px solid var(--line);
  box-shadow: 0 6px 22px rgba(0,0,0,.35) inset, 0 8px 24px rgba(0,0,0,.25);
}
.nmk-tip-icon-card img{
  width:92px; height:92px; object-fit:contain; display:block;
}

.nmk-tip-text{
  line-height:1.5; font-size:14px; color: var(--clr-text);
  opacity:.95;
}

/* адаптив */
@media (max-width: 520px){
  .nmk-tip-left{ flex-basis:30%; min-width:96px; }
  .nmk-tip-icon-card{ min-height:100px; }
  .nmk-tip-icon-card img{ width:84px; height:84px; }
  .nmk-tip-text{
  font-size:12px; }
  .vip-detail-left {min-width: 60px; }
  .vip-detail-cover {width: 60px; }
}