/* =======================================================================================
   RE-ORDERED STRUCTURE (NON-DESTRUCTIVE)
   - Сначала переменные :root и вариации темы (в том порядке, как были в файле)
   - Ниже ИСХОДНЫЙ CSS БЕЗ ИЗМЕНЕНИЯ ПОРЯДКА
   Важно: ни одно правило не удалено и не изменено.
   ======================================================================================= */
/* ===== VARIABLES / THEMES (moved to top, content unchanged) ===== */
/* =======================================================================================
   1) DESIGN TOKENS — редактируйте ТОЛЬКО этот блок, чтобы перекрасить/подстроить тему
   ======================================================================================= */
:root{
  /* Базовые цвета */
  --clr-ivory        : #d9d4c1;   /* светлый тон фона/узора */
  --clr-deep         : #002a48;   /* глубокий тёмный фон */
  --clr-text         : #ffffff;   /* основной цвет текста */
  --clr-accent       : #39a0ff;   /* акцент (кнопки/индикаторы) */
  --custom       : #242d39; 

  /* Стеклянные подложки */
  --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;             /* сила blur для стеклянных подложек */

  /* Тени */
  --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;          /* активный таб, фон buy/get-кнопок */
  --brand-hover      : #3487ca;          /* hover-цвет для buy-кнопки */
  --danger-hover     : rgba(255,70,70,.23);

  /* Тултипы */
  --tooltip-bg       : #18212d;
  --tooltip-shadow   : 0 6px 32px #000a, 0 1.5px 0 #27384f;

  /* Иконки/размеры сущностей */
  --size-skin        : 80px;             /* превью скина (визуальный размер) */
  --size-league-icon : 42px;             /* диаметр иконки лиги */
  --info-dot-bg      : #3487cae5;        /* кружок с «!» на карточке способности */

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

/* ===== Полоса коллекций (без контуров/объёма) ===== */
:root {
  --btn-collection-bg: rgb(44 82 120);
}

/* По умолчанию используем текущую (тёмную) тему — меняется только при data-theme="light" */
:root[data-theme="light"]{
  --clr-deep   : #f4f6fb;
  --clr-text   : #111;
  --bg-card    : rgba(255,255,255,.94);
  --glass      : rgba(0,0,0,.06);
  --glass-hi   : rgba(0,0,0,.10);
  --glass-lite : rgba(0,0,0,.045);
  --tooltip-bg : #f0f3f7;
  --scroll-thumb: rgba(0,0,0,.12);
}

/* ===== ORIGINAL ORDER (без перемещения) ===== */


/* ==============================
   2) 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:100vh; width:100vw; overflow-x:hidden; overflow-y:auto;
  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;
}

/* ==============================
   3) КАРТОЧКИ / ОБЩИЕ КОНТЕЙНЕРЫ
   ============================== */
.card{
  width:92vw; max-width:520px; min-width:300px;
  margin:6vh 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; }}

/* ==============================
   4) БАЛАНС / КНОПКИ-ТАБЛЕТКИ
   ============================== */
.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); }

/* ==============================
   5) ХЕДЕР ПОЛЬЗОВАТЕЛЯ / ЯЗЫК
   ============================== */
.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; }

/* ==============================
   6) ВЫБОР СКИНОВ
   ============================== */
.skin-list{
  display:flex; gap:1.6rem; align-items:center; overflow-x:auto;
  padding: 6px 4px 12px 4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.3) transparent;
}
.skin-list::-webkit-scrollbar{ height:6px; }
.skin-list::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.3); border-radius:3px; }

.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;

  /* критично: даём контуру выйти наружу на 50% толщины */
  overflow: visible;

  /* параметры кольца */
  --ring-w: 3px;                     /* толщина кольца */
  --ring-c: var(--custom);         /* цвет для всех и на hover */
}

/* ЕДИНОЕ кольцо (половина внутрь, половина наружу) */
.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%;
  /* опционально сбрить фринж на исходниках: число подбери 99–99.3% */
  /* -webkit-mask-image: radial-gradient(circle, #000 99%, transparent 100%);
          mask-image: radial-gradient(circle, #000 99%, transparent 100%); */
}

/* выбранный — просто меняем цвет единого кольца */
.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;
}




/* ==============================
   7) PLAY BUTTON
   ============================== */
.play-btn{
  margin: 1.8rem 0 .0rem; 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{
  display:inline-block; width:28px; height:28px; object-fit:contain; margin-right:0; vertical-align:middle;
}

/* ==============================
   8) INPUTS / LABELS
   ============================== */
.label{ display:block; margin:1.2rem 0 .45rem; font:.9rem/1 'Inter',sans-serif; color:#bbb; }
.select{
  width:100%; height:var(--h-row); padding:0 1rem; margin-bottom:.65rem; 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; }

/* ==============================
   9) GENERIC BUTTONS
   ============================== */
.btn{
  display:inline-block; 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; }

/* ==============================
   10) КНОПКА "НАЗАД" КРУГЛАЯ
   ============================== */
.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:after{ content:'🡸'; font-size:1.7rem; font-weight:600; line-height:1; }
.back-round:hover{ background:var(--glass-hi); transform:scale(1.08); }

/* ==============================
   11) 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); }

/* ==============================
   12) CANVAS & OVERLAYS
   ============================== */
.food-canvas{ position:fixed; inset:0; pointer-events:none; z-index:1; }
#game-canvas{ position:fixed; inset:0; width:100vw; height: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; }
#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; }

/* ==============================
   13) 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;
  border-radius:var(--rad); font-size:.85rem; background:var(--glass); backdrop-filter:blur(var(--blur)); z-index:40;
}
#players-list li{ margin:2px 0; white-space:nowrap; }

#players-list { list-style: none; margin: 0; padding: 0; }
#players-list li::marker { content: none; }

/* ==============================
   14) МАГАЗИН — ТАБЫ / ГРИДЫ / КАРТОЧКИ
   ============================== */
.shop-tabs{ display:flex; gap:6px; margin-bottom:1rem; }
.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; display:inline-block; vertical-align:middle;
}

/* ГРИДЫ */
.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(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:#fff; 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:2.2rem;
  box-sizing:border-box; background:var(--bg-card);
}
@media (min-width:600px){ .shop-card{ padding:2.6rem; }}

/* скроллбар (WebKit) */
.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; }

/* тело карточки магазина */
.shop-card-body{
  flex:1 1 auto; padding:0; overflow-y:auto; max-height:60vh; overscroll-behavior:contain;
  scrollbar-width:none !important; -ms-overflow-style:none !important;
  display:flex; flex-direction:column;
}
.shop-card-body::-webkit-scrollbar{ width:0 !important; height:0 !important; background:transparent !important; }

/* крестик закрытия */
.modal-close{ color:#888; transition:.1s; }
.modal-close:hover{ color:#ff5555; background:rgba(0,0,0,0.04); }
.modal-close.shop-close{
  position:absolute; top:.1em; right:.1em; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; background:transparent; border:none; color:#888; cursor:pointer; z-index:10;
  transition:color .1s, background .1s;
}
.modal-close.shop-close:hover{ color:#ff5555; background:rgba(0,0,0,.04); }

/* превью способности внутри магазина */
.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:#fff;
}

/* ==============================
   15) СПРАВОЧНЫЕ БЛОКИ / СТАТИСТИКА
   ============================== */
.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:16px 8px;
  border-radius:var(--rad); background:rgba(255,255,255,.07); backdrop-filter:blur(10px);
  font:600 1.05rem/1 'Inter',sans-serif;
}
.stat-ic{ width:22px; height:22px; object-fit:contain; }

/* ==============================
   16) РЕФ. ТАБЛИЦА
   ============================== */
.ref-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:.95rem;
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.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:0 4px 14px rgba(0,0,0,.5); }
  .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); }
}

/* ==============================
   17) ЛИГИ (иконки/прогресс/тултипы)
   ============================== */
.league-bar{
  margin:8px 0 20px; 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:#fff;
  padding:10px 18px; border-radius:12px; box-shadow:var(--tooltip-shadow);
  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; }

/* ==============================
   18) МОБИЛЬНЫЕ ПРАВКИ
   ============================== */
@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: 0px !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:1.09rem; 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;
  }
}

/* ==============================
   19) КНОПКА КОШЕЛЬКА
   ============================== */
.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 1.05rem/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: 14px;}
.wallet-btn .icon{ width:22px; height:22px; display:inline-block; margin-right:8px; }





/* ==== VIP ROOMS (complete block) ==== */

/* базовая раскладка строки комнаты */
.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; }

/* --- VIP карточка: золотой «металл» + глянец и ховер --- */
.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;
}

/* пробегающий блик на hover */
.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:0px;
  box-shadow:0 0 0 1px rgba(255,210,70,.35);
}

/* VIP-чип (badge) */
.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; }

/* На золотых (VIP) карточках — счётчик белым */
.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;
  max-width: 440px;
  width: 92vw;
  margin: auto;
  padding: 14px 14px 16px;
  border: 1px solid rgba(51,51,51,.36);
  border-radius: 16px;
  background: rgb(26, 30, 40);
}

#ton-topup-modal .modal-close{
  position:absolute;
  top:12px;
  right:22px;
}
#vip-overlay .modal-close{
  position:absolute;
  top:0px;
  right:0px;
}

/* центрируем заголовок, добавляем отступ снизу */
#vip-overlay .vip-title {
  text-align: center;
  margin: 0 40px 12px;
}

/* сетка списка квестов (узкое окно) */
#vip-overlay .vip-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ===== VIP overlay: секции и список ===== */
#vip-overlay .vip-card {
  position: relative;
  max-width: 440px;
  width: 92vw;
  margin: auto;
  padding: 14px 14px 16px;
  border: 1px solid rgba(51,51,51,.36);
  border-radius: 16px;
  background: var(--bg-card);
}
#vip-overlay .modal-close { position:absolute; top:12px; right:22px; }

#vip-overlay .vip-title { text-align:center; margin:0 40px 12px; }
#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; }

/* — деталка: шапка в 2 колонки — */
.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:#a0a6b4; 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:#12141a; }
.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;
  scrollbar-width: thin;
  scroll-snap-type: x proximity; /* мягкая привязка */
}
.collection-strip::-webkit-scrollbar { height: 6px; }
.collection-strip::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}

/* Кнопка коллекции — только заливка, никакого бордера/тени */
.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; }

/* Фокус — без outline; используем тот же рост, что hover */
.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{
  min-width: 320px;
  max-width: 520px;
  padding: 18px 18px 16px;
}
#daily-overlay .title{ margin-bottom: 12px; }

/* План на 30 дней (10×3) */
.daily-plan{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:6px;
  margin-bottom:10px;
}
.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;                 /* чтобы 90k влезало в 10 колонок */
  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.done .nmk-ic{ opacity:1; }
.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;
}
/* когда будет получен — снимешь класс is-locked */
#daily-skin:not(.is-locked) img{
  filter:none; opacity:1;
}

/* Пазл 2×2 */
.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);
}

/* Чип «Собрано +XX NMK» */
.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;
}

/* Низ: таймер (с иконкой) + кнопка 50/50 */
.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;
}
.timer-pill img{ width:20px; height:20px; display:block; }
.daily-bottom-row .btn.half{
  flex:1 1 50%; min-height:44px; font-weight:800;
}

/* Кнопки под Play (VIP + Ежедневка в один ряд) */
.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; }


/* Лидерборд */
.lb-ellipsis{
  text-align:center; color:#9aa; font-style:italic;
}
.lb-you-row{
  outline:2px solid rgba(57,160,255,.55); outline-offset:-2px;
}
.stat-ic{ width: 28px;
  height: 28px; vertical-align:-3px; }
.stat-ic-right{ margin-left:6px; margin-right:0; }


/* ====== Фикс темы для модалок (не зависеть от темы браузера) ====== */
#refs-overlay, #lb-overlay { color-scheme: dark; }

/* ====== Унифицированный скин таблиц (рефералы и лидерборд) ====== */
.ref-table{
  --tbl-text: var(--clr-text);
  --tbl-bg:   rgba(255,255,255,0.02);
  --tbl-bg-2: rgba(255,255,255,0.05);
  --tbl-head: rgba(255,255,255,0.08);
  --tbl-bor:  rgba(255,255,255,0.08);

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--tbl-text);
  background: var(--custom);              /* фон под таблицей в стиле игры */
  border: 1px solid var(--tbl-bor);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
}

.ref-table thead th{
  background: var(--tbl-head);
  color: var(--tbl-text);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--tbl-bor);
}

.ref-table tbody tr{ background: var(--tbl-bg); }
.ref-table tbody tr:nth-child(even){ background: var(--tbl-bg-2); }

.ref-table td{
  padding: 10px 12px;
  border-top: 1px solid var(--tbl-bor);
}

.ref-table tr:hover td{
  background: rgba(57,160,255,0.08);      /* лёгкий ховер в цвет акцента */
}

/* Подсветка вашей строки в лидерборде */
.lb-you-row { outline: 2px solid rgba(57,160,255,.55); outline-offset: -2px; }

/* Мелочь для иконки справа от суммы */
.stat-ic-right{ margin-right:0; }

.nmk-ic{ width:16px; height:16px; vertical-align:-3px; margin-left:6px; }






/* ====== Fix: всегда дарк ====== */
#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:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(0,0,0,.55);
  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;
  box-shadow: inset 0 0 0 1px rgba(57,160,255,.35);
}

/* Пилюли в шапке ЛБ (Ваше место / сумма) — сделать сочнее */
#lb-overlay .stat-row .stat-cell{
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 20px rgba(0,0,0,.45);
}

/* NMK иконки — лёгкое свечение как в меню */
.nmk-ic,
#refs-overlay .icon.nmk{
  width:16px; height:16px;
  vertical-align:-3px;
  margin-left:6px;
  filter: saturate(1.15) drop-shadow(0 0 4px rgba(255,204,0,.45));
}

/* Мелочь из прошлых правок */
.stat-ic{ width:18px; height:18px; vertical-align:-3px; margin-right:6px; }
.stat-ic-right{ margin-left:6px; margin-right:0; }

/* Три точки между Top100 и вашей строкой */
.lb-ellipsis{ text-align:center; color:#9aa; font-style:italic; }

/* ==== ЛБ: подсветка вашей строки без внутренних перегородок ==== */
#lb-overlay .ref-table .lb-you-row td{
  background: rgba(57,160,255,.10) !important;
  box-shadow: none !important;                 /* убрать внутренние линии */
  border-top:    1px solid rgba(57,160,255,.35) !important;
  border-bottom: 1px solid rgba(57,160,255,.35) !important;
}
#lb-overlay .ref-table .lb-you-row td:first-child{
  border-left: 1px solid rgba(57,160,255,.35) !important;
  border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
#lb-overlay .ref-table .lb-you-row td:last-child{
  border-right: 1px solid rgba(57,160,255,.35) !important;
  border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}

/* ==== Скролл при 100+ строках + липкая шапка таблиц ==== */
#lb-overlay .card, #refs-overlay .card{
  max-height: 80vh;                 /* окно не растёт бесконечно */
  display: flex; flex-direction: column;
}
#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;
}
.lang-toggle .caret{ margin-left:2px; opacity:.85; }

.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:140px; 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-btn, но компактнее */
.lang-dropdown .lang-menu .lang-btn{
  width:100%; height:36px; border-radius:10px;
  background:transparent; justify-content:flex-start;
  padding:0 10px; font:600 .95rem/1 'Inter',sans-serif;
}
.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:40px; font-size:1rem; }
}

/* ===== БАЗОВОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ ЧЕРЕЗ CSS-ПЕРЕМЕННЫЕ ===== */


/* Кнопки сверху теперь могут стоять рядом с выпадашкой */
.lang-buttons{ display:flex; gap:8px; align-items:center; }





/* ---------- 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; }
}



/* ==============================
   18) МОБИЛЬНЫЕ ПРАВКИ (жёсткий фикс)
   ============================== */
@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:.7rem !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;
  }
  /* справа: FAQ/тема/язык — в ряд */
  #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;
  }

  /* --- СБРОС ЛОМАЮЩЕГО ПРАВИЛА .pill-btn{width:100%} --- */
  #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:6px !important;
    padding:0 !important; font-size:1.4rem !important; line-height:1 !important;
  }

  /* --- РЯД СКИНОВ: высота 60px --- */
  .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:.74rem 1rem !important; }
  .btn.wide{ font-size:1rem !important; }
  .play-btn{ font-size:1rem !important; padding: 15px 0px !important; margin: 5px 0px 0px 0px !important; }
  .play-btn .icon, .play-btn-icon{ width:22px !important; height:22px !important; }
  .sub-actions-row .btn{ padding:.72rem .9rem !important; }

  /* Общие мелочи */
  .card{ padding:16px!important; min-width:0; }
  
  .league-bar {margin: 10px 0px 10px 0px; }
  
  .balance-bar #open-shop{
    order: 99;
    flex: 0 0 100%;
    width: 100% !important;
    height: 44px;
    margin-top: 8px;
  }

  /* 2) Кнопка пополнения TON — прижать к правому краю ряда балансов */
  #ton-topup-btn{
    margin-left: auto !important;  /* уедет вправо */
    flex: 0 0 36px !important;     /* фикс-ширина как сейчас */
    width: 36px !important;
    height: 36px !important;
  }
  
  .daily-top-grid{
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Ежедневка — чтобы 30 «дней» всегда вмещались по ширине */
  .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: 0px;
  }

  
  
}