/* /static_v2/styles.css */
/* ===== TOKENS ===== */
:root{
  --color-primary:#0076FF; --color-accent:#8E58FF;
  --color-success:#32D583; --color-warning:#FFC107; --color-danger:#FF4D4F;

  --bg-canvas:#0B0E1A; --bg-surface:#12131A; --bg-elevated:#0F111A; --bg-card:#1A1C25;

  --text-primary:#fff; --text-secondary:#C7CBD1; --text-muted:#9AA0A6;

  --stroke:#3B3B3B; --divider:#2A2D36;

  --radius-lg:16px; --radius-md:12px; --radius-sm:8px; --radius-pill:100px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.24); --shadow-md:0 8px 24px rgba(0,0,0,.32);

  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-weight-bold:700; --font-weight-extra:800;

  --app-width:390px; --hero-w:343px; --hero-h:191px; --card-w:106px; --card-h:146px; --grid-gap:12px;

  --topbar-h:64px;
  /* Уменьшенный таббар по вашей прошлой правке */
  --tabbar-h:57px;
}

/* ===== BASE ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg-canvas);color:var(--text-primary);
  font-family:var(--font-sans);-webkit-user-select:none;user-select:none;overflow-x:hidden
}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }

/* ===== TOPBAR ===== */
.c-topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);padding:0 var(--space-16);box-shadow:var(--shadow-sm);z-index:10;
  --balance-h:42px;
}
.c-topbar__logo .logo{height:24px;display:block}
.c-topbar__actions{display:flex;align-items:center;gap:10px}
.main-page{padding-top:var(--topbar-h)}

/* Кнопки */
.c-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);border-radius:9px;border:0;cursor:pointer;transition:.18s ease;line-height:1}
.c-btn--primary{height:35px;min-width:116px;padding:0 14px;background:var(--color-primary);color:#fff;font-size:16px}
.c-btn--primary:hover{filter:brightness(1.05)}
.c-btn--primary:active{transform:translateY(1px)}

/* NEW: синяя квадратная кнопка пополнения */
.c-btn--plus{
  width:var(--balance-h);height:var(--balance-h);border-radius:12px;background:var(--color-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.c-btn--plus svg{display:block}
.c-btn--plus:active{transform:translateY(1px)}

/* Баланс */
.c-balance{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.6);
  border-radius:10px;padding:6px 10px;height:var(--balance-h);
}
.c-balance .bal-icon{width:22px;height:22px}
.c-balance__value{min-width:48px;text-align:right;font-size:16px;font-weight:var(--font-weight-bold)}

/* ===== HERO ===== */
/* Мобильный/планшет: ширина отступов = 16px с каждой стороны */
.c-hero{
  width:calc(100% - 2*var(--space-16));
  margin:var(--space-16) auto var(--space-12);
  position:relative;
}
.c-hero__link{
  display:block;width:100%;aspect-ratio:343/191;
  background-image:var(--hero-img, url('/static_v2/1.jpg'));
  background-size:cover;background-position:center;border-radius:var(--radius-lg);border:0.5px solid var(--stroke);box-shadow:var(--shadow-md)
}
.c-hero__link:hover{transform:translateY(-1px)}
.c-hero__dots{position:absolute;left:18px;bottom:12px;display:flex;gap:6px;padding:2px 10px;border-radius:var(--radius-pill);border:0.5px solid var(--stroke);background:linear-gradient(90deg,#000 0%,rgba(0,0,0,0) 100%)}
.c-hero__dots .dot{width:4px;height:4px;border-radius:50%;background:#3B3B3B;cursor:pointer}
.c-hero__dots .dot.is-active{background:#fff}

/* ===== SECTION BAR ===== */
.section-bar{
  width:calc(100% - 2*var(--space-16));
  margin:0 auto var(--space-12);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)
}
.section-title{font-weight:var(--font-weight-bold);font-size:16px;line-height:14px}

/* ===== GRID CARDS ===== */
.l-content{padding-bottom:calc(var(--tabbar-h) + 16px)}
.games-container.games-grid{
  width:calc(100% - 2*var(--space-16));

  margin:0 auto var(--space-24);
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--grid-gap);
}
@media (max-width: 360px){
  .games-container.games-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
/* Карточка */
.game-banner.c-card.c-game{
  width:100%;
  aspect-ratio:106/146;
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  background-image:var(--card-img);
  background-size:cover;background-position:center;
  cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform .18s ease, box-shadow .18s ease;
}
.game-banner.c-card.c-game:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.game-banner.c-card.c-game:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ===== LEGAL ===== */
.c-legal{
  width:calc(100% - 2*var(--space-16));
  margin:0 auto var(--tabbar-h);
  padding:10px 12px;background:#333;color:#fff;text-align:center;font-size:14px
}
.c-legal a{color:#fff;text-decoration:underline}

/* ===== TABBAR ===== */
.c-tabbar{
  position:fixed;left:0;right:0;bottom:0;width:100%;
  height:var(--tabbar-h);background:#020410;border-top:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-around;z-index:9
}
/* Тоньше шрифт таббара */
.c-tabbar__item{
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:10px;
  font-weight:300;              /* было 700 — делаем тоньше */
  opacity:.95;                  /* чуть читаемее на тонком весе */
}
.c-tabbar__item svg{
  width:22px;                   /* было крупнее — делаем меньше */
  height:22px;
  transform: translateY(1px);   /* оптическое выравнивание с подписью */
}

.c-tabbar__item.is-active{opacity:1}
.c-tabbar__item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:8px}
.c-tabbar__item svg{display:block}
/* Более тонкие линии иконок в таббаре */
.c-tabbar__item svg path,
.c-tabbar__item svg line,
.c-tabbar__item svg circle,
.c-tabbar__item svg rect{
  stroke-width:2 !important; /* визуально легче, без нового шрифта */
}

@media (min-width: 400px){
  .c-tabbar__item svg{ width:24px; height:24px; }
}

.c-tabbar__item svg *{
  stroke-width:2 !important;          /* было 3 в исходных svg — делаем тоньше */
  vector-effect: non-scaling-stroke;  /* сохраняет чёткость при изменении размера */
}

/* ===== LEGACY SAFETY ===== */
.top-panel .login-btn{} .games-title{}