.m-counter { display:inline-flex; align-items:center; justify-content:center; padding:0 6px; height:20px; border-radius:12px; background: var(--color-7); color: var(--color-4); box-shadow: var(--shadow-s); }
.m-counter--secondary { background: var(--color-6); }

.m-badge { position:relative; display:inline-flex; align-items:center; border-radius: var(--radius-s); padding:4px 8px; background: var(--color-6); box-shadow: var(--shadow-s); }
.m-badge--secondary { background: var(--color-6); }
.m-badge--info { background: #e8f0ff; }
.m-badge--success { background: #e3f9ed; }
.m-badge-text { font-weight:700; font-size:12px; color: var(--color-4); }

.m-segment-control-item { padding:8px 12px; border-radius: var(--radius-s); color: var(--color-4); }

.view-all .m-button, .lobby-show-all { background: var(--color-6); color: var(--color-4); box-shadow: var(--shadow-s); }
.view-all .m-button .m-button-content { display:flex; align-items:center; gap:8px; }
.site, body { background: var(--color-2); }

.m-gradient-border { position: relative; }
.m-gradient-border::before { content:""; position:absolute; inset:0; padding:1px; border-radius: var(--radius-m); background: var(--color-1); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; }

.m-slider.withScrollSnap .m-slider__scroll-box { scroll-snap-type:x mandatory; }
.m-slider .m-slider__slide { scroll-snap-align:start; }

.games-section, .recent-big-wins-section, .providers-section { margin: 24px 0 32px; }
.m-category-slider__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.m-game-list-header h2, .recent-big-wins-header__title, .providers-section-header { font-weight:800; font-size:24px; color:#1c1f24; display:flex; gap:10px; align-items:center; }
.view-all .m-button, .lobby-show-all.m-button { border-radius:14px; }

.m-button { transition: transform .2s ease, box-shadow .2s ease, opacity .3s ease; }
.m-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

.m-category-slider__item { padding:4px; }
.m-game-card { background: var(--color-6); border-radius: var(--radius-l); box-shadow: var(--shadow-s); padding:10px; transition:box-shadow .25s ease, transform .2s ease; }
.m-game-card:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }

.m-card-thumb { position:relative; overflow:hidden; border-radius: var(--radius-m); }
.m-card-thumb-image { opacity:0; transform:scale(1.04); transition: opacity .35s ease, transform .6s ease; }
.m-card-thumb-image.fadeIn { opacity:1; transform:scale(1); }

.m-game-card .m-game-overlay { opacity:0; pointer-events:none; transition: opacity .25s ease; }
.m-game-card:hover .m-game-overlay { opacity:1; pointer-events:auto; }

.m-game-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.m-game-heart { opacity:.7; transition: transform .2s ease, opacity .2s ease; }
.m-game-heart:hover { opacity:1; transform: scale(1.08); }

.recent-big-wins-slider__cards { display:grid; gap:14px; }
.recent-big-wins-slider__card { background: var(--color-6); border-radius: var(--radius-m); padding:10px; box-shadow: var(--shadow-s); transition: transform .2s ease, box-shadow .25s ease; }
.recent-big-wins-slider__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }

.providers-section .provider-card { display:flex; align-items:center; justify-content:center; height:72px; border-radius: var(--radius-m); background: var(--color-6); box-shadow: var(--shadow-s); transition: transform .2s ease, box-shadow .25s ease; }
.providers-section .provider-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }

.bets-table-row { transition: background .25s ease; }
.bets-table-row:hover { background: rgba(0,0,0,.03); }

.lobby-banners .m-slider__slide { position:relative; }
.lobby-banner__image img { transform: scale(1.02); transition: transform .8s cubic-bezier(.2, .6, .2, 1); }
.lobby-banners .m-slider__slide:hover .lobby-banner__image img { transform: scale(1.06); }

@keyframes fadeUp { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: translateY(0) } }
.games-section, .recent-big-wins-section, .providers-section { animation: fadeUp .5s ease both; }

/* arrows */
.m-prev-next-arrows .m-button { border-radius: var(--radius-m); background: var(--color-6); box-shadow: var(--shadow-s); }
.m-prev-next-arrows .m-button:hover { box-shadow: var(--shadow-m); }

