* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

:root {
  --red: #E80204;
  --red-dark: #C40003;
  --red-soft: #FDE7E8;
  --ink: #16191D;
  --ink-2: #353A40;
  --muted: #61676E;
  --line: #E3E6EA;
  --bg: #F1F2F4;
  --chip: #EEF0F2;
  --lime: #D9F23A;
  --live: #1C8A3B;
  --head: 'Fira Sans Extra Condensed', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}

body {
  margin: 0;
  background: linear-gradient(180deg, #FCE4E5 0, var(--bg) 240px) top/100% 240px no-repeat, var(--bg);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--red);
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 32px;
  width: calc(100% - 32px);
  max-width: 1284px;
  height: 58px;
  margin: 16px auto 0;
  padding: 0 12px 0 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(170, 20, 30, .08);
}

.logo {
  font: italic 900 30px/1 var(--head);
  letter-spacing: .01em;
  color: var(--red);
  text-transform: uppercase;
}

.logo:hover {
  color: var(--red-dark);
}

.nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.nav__sep {
  width: 1px;
  height: 22px;
  background: var(--line);
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.auth {
  display: flex;
  gap: 8px;
}

[data-out] {
  cursor: pointer;
}

body.is-locked {
  overflow: hidden;
}

.tabs {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs a {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.tabs a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.about {
  margin-top: 8px;
  padding: 28px 32px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.about__body {
  position: relative;
  max-height: 360px;
  overflow: hidden;
}

.about__body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.about.is-open .about__body {
  max-height: none;
}

.about.is-open .about__body::after {
  display: none;
}

.about__title {
  margin: 0 0 12px;
  font: 800 26px/1.1 var(--head);
  color: var(--ink);
  text-transform: uppercase;
}

.about__body h2:not(.about__title) {
  margin: 24px 0 8px;
  font: 800 19px/1.15 var(--head);
  color: var(--ink);
  text-transform: uppercase;
}

.about__body h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--red);
}

.about__body p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}

.about__body ul {
  margin: 0 0 12px;
  padding: 0;
}

.about__body li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.about__body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.about a {
  color: #2C3E6B;
  text-decoration: underline;
}

.about a:hover {
  color: var(--red);
}

.about__table {
  margin: 10px 0 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.about__table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.about__table th,
.about__table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.about__table th {
  background: var(--chip);
  font-weight: 700;
  color: var(--ink);
}

.about__table tr:last-child td {
  border-bottom: 0;
}

.about__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-top: 12px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  transition: border-color .2s, color .2s;
}

.about__more:hover {
  border-color: var(--red);
  color: var(--red);
}

.about__more .ico {
  width: 14px;
  height: 14px;
  transition: transform .25s;
}

.about.is-open .about__more .ico {
  transform: rotate(180deg);
}

.about .about__less,
.about.is-open .about__more-label {
  display: none;
}

.about.is-open .about__less {
  display: inline;
}

.to-top {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #D2D6DB;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transition: border-color .2s, color .2s;
}

.to-top:hover {
  border-color: var(--red);
  color: var(--red);
}

.to-top .ico {
  width: 16px;
  height: 16px;
}

.footer__legal p+p {
  margin-top: 6px;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff;
  border-top: 1px solid var(--line);
}

.tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 56px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}

.tabbar__item:hover {
  color: var(--red);
}

.tabbar__item .ico {
  width: 22px;
  height: 22px;
}

.tabbar__item .badge {
  position: absolute;
  top: 5px;
  left: calc(50% + 4px);
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 9px;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 12, 16, .5);
}

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(320px, 86vw);
  padding: 14px 16px 20px;
  background: #fff;
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}

.drawer.is-open {
  transform: none;
  visibility: visible;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer__head .logo {
  font-size: 26px;
}

.drawer__auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 18px;
}

.drawer__title {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
}

.drawer__nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.drawer__nav .ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 12px;
}

.drawer__foot a {
  color: var(--muted);
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: var(--ink);
}

.icon-btn:hover {
  background: #E2E5E9;
}

.icon-btn--plain {
  width: 30px;
  height: 30px;
  background: none;
  color: var(--ink-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.btn:hover {
  background: #E2E5E9;
  color: var(--ink);
}

.btn--red {
  background: var(--red);
  color: #fff;
}

.btn--red:hover {
  background: var(--red-dark);
  color: #fff;
}

.layout {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  width: calc(100% - 32px);
  max-width: 1284px;
  margin: 22px auto 0;
  padding-bottom: 48px;
}

.sidebar__title {
  margin: 0 0 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.sidebar a:hover {
  background: #fff;
  color: var(--ink);
}

.sidebar .ico {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 21px/1 var(--head);
  text-transform: uppercase;
}

.section-title .ico {
  color: var(--red);
}

.link {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}

.link:hover {
  color: var(--red-dark);
}

.slider {
  position: relative;
}

.slider__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__track>* {
  scroll-snap-align: start;
}

.slider__next {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  color: var(--ink);
}

.slider__next .ico {
  width: 16px;
  height: 16px;
}

.pager {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: 12px;
}

.pager__dots {
  display: flex;
  gap: 6px;
}

.pager__dot {
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #CDD1D6;
}

.pager__dot.is-active {
  background: var(--red);
}

.pager__arrows {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  gap: 4px;
}

.pager__arrows button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.pager__arrows button {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  transition: background .2s, color .2s, box-shadow .2s;
}

.pager__arrows button:hover:not(:disabled) {
  color: var(--red);
}

.pager__arrows button:disabled,
.slider__next:disabled {
  background: transparent;
  color: #B6BCC3;
  box-shadow: none;
  cursor: default;
}

.pager__arrows .ico {
  width: 14px;
  height: 14px;
}

.shortcuts {
  gap: 4px;
  padding-top: 8px;
}

.shortcut {
  position: relative;
  flex: 0 0 74px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}

.shortcut:hover {
  color: var(--red);
}

.shortcut__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FF5A5F, var(--red) 55%, #9E0B12);
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(160, 10, 20, .3);
}

.shortcut__icon--dark {
  background: radial-gradient(circle at 35% 30%, #3B3B42, #141416 70%);
  color: #FFD43B;
}

.shortcut__free {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--lime);
  color: #111;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chip {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-2);
}

.chip .ico {
  width: 17px;
  height: 17px;
}

.chip.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.cards {
  gap: 12px;
}

.live-empty {
  padding: 32px 16px;
  border: 1px dashed #D2D6DB;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.cards > * {
  flex: 0 0 calc((100% - 12px) / 2);
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.match {
  display: flex;
  flex-direction: column;
  padding: 12px 10px 10px;
}

.meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

.meta .ico {
  width: 14px;
  height: 14px;
  color: var(--live);
}

.scoreboard {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 12px;
  padding: 26px 8px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
}

.scoreboard__status {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px;
  border-radius: 0 0 8px 8px;
  background: var(--live);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.scoreboard__status .ico {
  width: 12px;
  height: 12px;
}

.scoreboard__status--soon {
  background: var(--ink-2);
}

.picks small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.flag {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  clip-path: circle(50%);
}

.team__badge {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chip);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink-2);
}

.score {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .06em;
}

.market {
  margin-top: 14px;
}

.market__name {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
}

.market__name b {
  font: italic 900 12px/1 var(--head);
  color: var(--red);
}

.odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.odd {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
}

.odd span {
  font-size: 11px;
  color: var(--muted);
}

.odd b {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 6px;
  background: var(--chip);
  font-size: 13px;
  color: var(--ink);
}

.odd:hover b {
  background: #E2E5E9;
}

.odd.is-selected b {
  background: var(--red);
  color: #fff;
}

.match__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 8px 30px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.pill {
  height: 26px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.match__more .pill {
  display: inline-grid;
  place-items: center;
}

.match__chat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #EAF0FA;
  font-size: 11px;
  color: var(--ink-2);
}

.match__chat .pill {
  margin-left: auto;
  background: #fff;
}

.avatars {
  display: flex;
  padding-right: 6px;
}

.avatars i {
  width: 18px;
  height: 18px;
  margin-right: -6px;
  border-radius: 50%;
  border: 2px solid #EAF0FA;
  background: #F4B400;
}

.avatars i:nth-child(2) {
  background: #8E5CF6;
}

.avatars i:nth-child(3) {
  background: #2D9CDB;
}

.boosted {
  position: relative;
  padding: 18px 8px 8px;
  border-radius: 12px;
  background: linear-gradient(160deg, #BDEB2E 0%, #E3F85A 55%, #F2FB8A 100%);
}

.boosted__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 4px 12px 8px;
}

.boosted__title {
  font: italic 900 32px/1 var(--head);
  text-transform: uppercase;
  color: #111;
}

.boosted__sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #1E2408;
}

.boosted__all {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #1E2408;
}

.boosted__all:hover {
  color: #000;
}

.boosted__all .ico {
  width: 14px;
  height: 14px;
}

.boosted__art {
  position: absolute;
  right: 26px;
  top: -26px;
  width: 52px;
  height: 68px;
}

.boost-card {
  flex: 0 0 calc((100% - 8px) / 2);
  min-width: 300px;
  padding: 12px 8px 8px;
  text-align: center;
}

.event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}

.event__teams {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}

.picks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 10px;
  padding: 0 0 0 16px;
  text-align: left;
  font-size: 11.5px;
  color: var(--ink-2);
}

.picks::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: #D5D9DE;
}

.pick {
  position: relative;
}

.pick::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B6BCC3;
}

.boost-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: var(--chip);
  font-weight: 800;
  font-size: 13px;
}

.boost-btn s {
  font-weight: 600;
  color: var(--muted);
}

.boost-btn .ico {
  width: 14px;
  height: 14px;
  color: #8FB10E;
}

.boost-btn.is-selected {
  background: var(--red-soft);
  color: var(--red);
  box-shadow: inset 0 0 0 2px var(--red);
}

.boost-btn.is-selected::before,
.btn-outline.is-selected::before,
.ticket__copy.is-selected::before {
  content: "✓";
  font-weight: 800;
}

.ticket__copy-on,
.ticket__copy.is-selected .ico,
.ticket__copy.is-selected .ticket__copy-off {
  display: none;
}

.ticket__copy.is-selected .ticket__copy-on {
  display: inline;
}

.boost-btn.is-selected s {
  color: #E6A3A5;
}

.boost-btn.is-selected .ico {
  color: var(--red);
}

.combo {
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.time {
  font-size: 11px;
  color: var(--muted);
}

.combo__match {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
}

.combo .picks {
  margin: 10px 0 14px 4px;
  font-size: 11px;
  color: var(--muted);
}

.combo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-size: 11px;
  color: var(--muted);
}

.combo__foot b {
  color: var(--ink);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.btn-outline .ico {
  width: 15px;
  height: 15px;
}

.comp {
  flex: 0 0 132px;
  border-radius: 8px;
  overflow: hidden;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 10px;
  color: #fff;
}

.comp:hover {
  color: #fff;
  filter: brightness(1.08);
}

.comp__top {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
}

.comp__top .ico {
  width: 12px;
  height: 12px;
}

.tag {
  flex: none;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.comp__name {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}

.comp__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comp--navy {
  background: linear-gradient(135deg, #2E3F73, #1C2850);
}

.comp--steel {
  background: linear-gradient(135deg, #2F6E9C, #1E4C72);
}

.comp--teal {
  background: linear-gradient(135deg, #17A398, #0D7C73);
}

.comp--blue {
  background: linear-gradient(135deg, #2A7BE4, #1652B0);
}

.comp--crimson {
  background: linear-gradient(135deg, #D62236, #A10E1F);
}

.special {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}

.special__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--muted);
}

.special__top span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 6px 0 8px;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
}

.bb-pill .ico {
  width: 10px;
  height: 10px;
}

.special__teams {
  font-weight: 400;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 4px;
  align-items: center;
  font-size: 13px;
}

.special__teams small {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.special__teams .ico {
  width: 14px;
  height: 14px;
  color: var(--muted);
  justify-self: end;
}

.sodds {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.sodd {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: var(--chip);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.sodd span {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.sodd.is-selected {
  background: var(--red);
  color: #fff;
}

.sodd.is-selected span {
  color: #fff;
}

.sodd:disabled {
  opacity: .45;
  cursor: default;
}

.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 18px 20px;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 88% 30%, rgba(255, 255, 255, .14) 0 9%, transparent 10%), radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .1) 0 7%, transparent 8%), linear-gradient(110deg, #E80204 0%, #B00003 60%, #7E0002 100%);
}

.promo:hover {
  color: #fff;
}

.promo__title {
  font: italic 900 22px/1 var(--head);
  text-transform: uppercase;
}

.promo__text {
  font-size: 12px;
  opacity: .92;
}

.promo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
}

.promo__foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.promo__foot .ico {
  width: 16px;
  height: 16px;
}

.promo__cta {
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--red);
  font-weight: 800;
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.ticket__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.ticket__head small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.ticket__head time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.ticket__avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #D9C2A7;
  color: #3A2A18;
  font-size: 12px;
  font-weight: 800;
}

.ticket__avatar--blue {
  background: #B7C9E2;
  color: #1E3557;
}

.ticket__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--chip);
  font-size: 12px;
  color: var(--ink-2);
}

.ticket__sum span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ticket__sum b {
  font-size: 14px;
  color: var(--ink);
}

.ticket__sum .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.ticket__match {
  font-size: 12px;
  font-weight: 700;
}

.ticket .picks {
  margin: 6px 0 0 4px;
  font-size: 11px;
  color: var(--muted);
}

.ticket__more {
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.ticket__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  font-size: 12px;
  font-weight: 700;
}

.ticket__copy .ico {
  width: 15px;
  height: 15px;
}

.ticket__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
}

.ticket__foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ticket__foot span:last-child {
  margin-left: auto;
}

.ticket__foot .ico {
  width: 15px;
  height: 15px;
}

.footer {
  margin-top: 24px;
  padding: 40px 0 28px;
  background: #E7E9EC;
  font-size: 12px;
  color: var(--ink-2);
}

.footer__inner {
  width: calc(100% - 32px);
  max-width: 1284px;
  margin: 0 auto;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
}

.footer__wide {
  grid-column: 1 / -1;
}

.footer__title {
  margin-bottom: 14px;
  font: 800 16px/1 var(--head);
  color: var(--ink);
  text-transform: uppercase;
}

.footer__note {
  margin-top: 4px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer a {
  color: var(--ink-2);
}

.footer a:hover {
  color: var(--red);
}

.stores {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--ink);
  font-size: 10px;
  line-height: 1.1;
}

.footer .store {
  color: #fff;
}

.footer .store:hover {
  color: #fff;
  background: #000;
}

.store b {
  display: block;
  font-size: 13px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.badges span {
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #C3C9D0;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-2);
}

.pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 78px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
}

.pay img {
  display: block;
  width: auto;
}

.footer__bottom {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #D2D6DB;
}

.footer__legal {
  flex: 1;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

.socials {
  display: flex;
  gap: 8px;
}

.socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}

.socials .ico {
  width: 17px;
  height: 17px;
}

.footer .logo {
  font-size: 32px;
  color: var(--red);
}

.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-title {
  grid-column: 1 / -1;
  margin: 4px 0 6px;
  font: italic 900 52px/1 var(--head);
  color: var(--red);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.offer,
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 186px;
  padding: 20px 22px;
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
}

.offer--sport {
  background: radial-gradient(circle at 78% 70%, #F0262D, #B0080F 72%);
}

.offer--casino {
  background: radial-gradient(circle at 80% 70%, #3A0A0D, #121214 70%);
}

.offer--light,
.app {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}

.offer--light .offer__text,
.app .offer__text {
  color: var(--muted);
}

.offer__title {
  position: relative;
  z-index: 1;
  max-width: 56%;
  font: italic 900 29px/1 var(--head);
  text-transform: uppercase;
  display: block;
}

.offer__text {
  position: relative;
  z-index: 1;
  max-width: 52%;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  display: block;
}

.offer:hover {
  color: #fff;
}

.offer--light:hover {
  color: var(--ink);
}

.offer__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-top: auto;
  padding: 0 22px;
  border-radius: 999px;
  background: #D7EC2A;
  color: #141416;
  font-weight: 700;
  font-size: 13px;
}

.offer:hover .offer__btn {
  background: #E6F65C;
  color: #141416;
}

.offer__btn--red {
  background: #C8141B;
  color: #fff;
}

.offer:hover .offer__btn--red {
  background: var(--red);
  color: #fff;
}

.offer--sport,
.offer--casino {
  overflow: visible;
  transition: box-shadow .3s ease, transform .3s ease;
}

.offer--sport:hover,
.offer--casino:hover {
  z-index: 2;
  transform: translateY(-2px);
}

.offer--sport:hover {
  box-shadow: 0 0 0 2px rgba(255, 110, 110, .65), 0 14px 34px rgba(232, 2, 4, .45);
}

.offer--casino:hover {
  box-shadow: 0 0 0 2px rgba(255, 80, 180, .6), 0 14px 34px rgba(214, 40, 140, .45);
}

.offer__img {
  position: absolute;
  bottom: 0;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
}

.offer:hover .offer__img {
  transform: translateY(-8px) scale(1.14);
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .45));
}

.offer__img--dealer {
  right: 18px;
  width: 172px;
}

.offer__img--player {
  right: 10px;
  width: 196px;
}

.offer--light .offer__title {
  max-width: 52%;
}

.offer--light .offer__text {
  max-width: 46%;
}

.offer__img--wheel {
  right: 0;
  width: 285px;
}

.offer__img--pin {
  right: 40px;
  bottom: -44px;
  width: 205px;
  transform: rotate(-14deg);
}

.offer:hover .offer__img--pin {
  transform: rotate(-14deg) translateY(-8px) scale(1.06);
}

.offer--light .offer__img--wheel {
  filter: none;
}

.offer:hover .offer__img--wheel {
  transform: none;
  filter: none;
}

.app {
  grid-column: 1 / -1;
}

.app__img {
  position: absolute;
  right: 40px;
  top: 10px;
  width: 270px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(20, 20, 30, .25));
}

.app__stores {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  line-height: 1.15;
}

.store-btn:hover {
  background: #000;
  color: #fff;
}

.store-btn b {
  display: block;
  font-size: 14px;
}

.store-btn .ico {
  width: 22px;
  height: 22px;
}

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 232px);
  align-items: center;
  gap: 24px;
  padding-right: 312px;
}

.app__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.app .offer__title {
  max-width: none;
}

.app__features {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}

.app__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.app__feature b {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--ink);
}

.app__icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
}

.app__icon .ico {
  width: 19px;
  height: 19px;
}

.store-btn .ico {
  width: 22px;
  height: 22px;
}

.app .store-btn {
  padding: 0 14px 0 10px;
  gap: 7px;
}

.app .store-btn b {
  font-size: 13px;
}

.features {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--ink);
  transition: background .2s;
}

.feature + .feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
}

.feature:hover {
  background: #F7F8F9;
  color: var(--ink);
}

.feature:hover::before,
.feature:hover + .feature::before {
  opacity: 0;
}

.feature__icon {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  transition: transform .2s;
}

.feature__icon .ico {
  width: 20px;
  height: 20px;
}

.feature--live .feature__icon {
  background: var(--red);
  color: #fff;
}

.feature--live .feature__icon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0;
  animation: live-pulse 2s ease-out infinite;
}

.feature__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.feature__text b {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .2s;
}

.feature__text span {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feature:hover .feature__text b {
  color: var(--red);
}

.feature:hover .feature__icon {
  transform: scale(1.06);
}

@keyframes live-pulse {
  0% {
    opacity: .7;
    transform: scale(.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.segment {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip);
}

.segment[hidden] {
  display: none;
}

.segment__btn {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  transition: background .2s, color .2s;
}

.segment__btn:hover {
  color: var(--ink);
}

.segment__btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 20, 30, .12);
}

.games {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px;
}

.game {
  min-width: 0;
}

.game__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #E3E6EA;
}

.game__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.game:hover .game__media img {
  transform: scale(1.06);
}

.game__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(14, 14, 18, .62);
  opacity: 0;
  transition: opacity .25s ease;
}

.game:hover .game__overlay,
.game:focus-within .game__overlay {
  opacity: 1;
}

.game__play {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--red);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.game__play:hover {
  background: var(--red-dark);
  color: #fff;
}

.game__demo {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.game__demo:hover {
  color: var(--lime);
}

.game__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--lime);
  font-size: 10px;
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
}

.game__title {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.game__provider {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

@media (hover: none) {
  .game__overlay {
    background: none;
    opacity: 1;
  }

  .game__demo {
    display: none;
  }

  .game__play {
    position: absolute;
    inset: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0;
  }

  .game__play:active {
    background: rgba(14, 14, 18, .2);
  }
}

.btn-outline.is-selected,
.ticket__copy.is-selected {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.slip-bar {
  position: fixed;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  left: 50%;
  bottom: 24px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 14px 34px rgba(10, 12, 16, .35);
  transform: translateX(-50%);
  animation: slip-in .25s ease-out;
}

.slip-bar__count {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  font-size: 15px;
  font-weight: 800;
}

.slip-bar__info {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.3;
  color: #C9CED4;
  white-space: nowrap;
}

.slip-bar__info > b {
  font-size: 13px;
  color: #fff;
}

.slip-bar__info b b,
.slip-bar__info span b {
  color: var(--lime);
}

.slip-bar:hover {
  background: #000;
}

.is-slip-open .slip-bar,
.is-slip-open .toast {
  display: none;
}

.slip-bar__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px 0 18px;
  border-radius: 999px;
  background: var(--red);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.slip-bar__open .ico {
  width: 14px;
  height: 14px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 36;
  max-width: calc(100% - 24px);
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(10, 12, 16, .22);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateX(-50%);
  animation: slip-in .2s ease-out;
}

.slip {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: min(390px, 100vw);
  background: #fff;
  box-shadow: -10px 0 40px rgba(10, 12, 16, .2);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}

.slip.is-open {
  transform: none;
  visibility: visible;
}

.slip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.slip__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 24px/1 var(--head);
  text-transform: uppercase;
}

.slip__type {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 12px 16px 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--red-soft);
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-2);
}

.slip__type b {
  font-size: 13px;
  color: var(--red);
}

.slip__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px;
}

.slip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.slip-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.slip-item__pick {
  font-size: 13px;
  font-weight: 700;
}

.slip-item__match {
  overflow: hidden;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.slip-item__odd {
  font-size: 14px;
  font-weight: 800;
}

.slip-item__remove {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: var(--muted);
  cursor: pointer;
}

.slip-item__remove:hover {
  color: var(--red);
}

.slip-item__remove .ico {
  width: 12px;
  height: 12px;
}

.slip__empty {
  display: none;
  flex: 1;
  padding: 40px 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}

.slip.is-empty .slip__empty {
  display: block;
}

.slip.is-empty .slip__list,
.slip.is-empty .slip__type {
  display: none;
}

.slip__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  background: #FAFAFB;
}

.slip__stake {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.slip__input {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.slip__input:focus-within {
  border-color: var(--red);
}

.slip__input input {
  width: 80px;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  text-align: right;
}

.slip__quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.slip__quick button {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.slip__quick button:hover {
  border-color: var(--red);
  color: var(--red);
}

.slip__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-2);
}

.slip__row b {
  color: var(--ink);
}

.slip__row--win b {
  font-size: 17px;
  color: var(--live);
}

.slip__cta {
  height: 46px;
  font-size: 15px;
}

.slip.is-empty .slip__cta {
  pointer-events: none;
  opacity: .45;
}

.slip__clear {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.slip.is-empty .slip__clear {
  display: none;
}

.tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 0 12px 30px rgba(10, 12, 16, .25);
  font-size: 12.5px;
  line-height: 1.45;
  color: #E4E7EB;
}

.tip b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #fff;
}

.ticket__copy {
  cursor: pointer;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.crumbs a {
  color: var(--ink-2);
}

.crumbs a:hover {
  color: var(--red);
}

.crumbs .ico {
  width: 12px;
  height: 12px;
}

.login-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 24px;
  min-height: 300px;
  padding: 36px 24px 36px 44px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 82% 50%, rgba(255, 112, 80, .55), rgba(255, 112, 80, 0) 70%),
    linear-gradient(100deg, #3A0001 0%, #8C0102 32%, #D50204 62%, #F2241A 100%);
  color: #fff;
}

.login-hero__text {
  position: relative;
  z-index: 1;
}

.login-hero__title {
  max-width: 600px;
  margin: 0 0 26px;
  font: 800 40px/1.08 var(--head);
  letter-spacing: .005em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(40, 0, 0, .35);
}

.login-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 54px;
  padding: 0 32px;
  border-radius: 12px;
  background: #D7EC2A;
  box-shadow: 0 10px 24px rgba(40, 0, 0, .35);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #141416;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.login-hero__btn:hover {
  color: #141416;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(40, 0, 0, .4);
}

.login-hero__img {
  width: 300px;
  height: auto;
  margin: -20px 0;
}

.article {
  margin-top: 16px;
  padding: 32px 40px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.article h2 {
  margin: 30px 0 10px;
  font: 800 22px/1.15 var(--head);
  color: var(--ink);
  text-transform: uppercase;
}

.article h3 {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--red);
}

.article p,
.article li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

.article p {
  margin: 0 0 12px;
}

.article .article__lead {
  font-size: 15.5px;
  color: var(--ink);
}

.article ul,
.article ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.article li {
  margin-bottom: 6px;
}

.article li::marker {
  color: var(--red);
  font-weight: 700;
}

.article__table {
  margin: 12px 0 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.article__table table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}

.article__table th,
.article__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.article__table th {
  background: var(--chip);
  font-weight: 700;
  color: var(--ink);
}

.article__table tr:last-child td {
  border-bottom: 0;
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: 10px;
}

.faq__item[open] {
  border-color: var(--red);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  transition: transform .2s ease;
}

.faq__item[open] .faq__q .ico {
  color: var(--red);
  transform: rotate(180deg);
}

.article .faq__a {
  margin: 0;
  padding: 0 16px 14px;
}

@keyframes slip-in {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .games {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 30%;
  }

  .hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1199px) {
  .features {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .feature {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 270px;
  }

  .app__features {
    display: none;
  }

  .app__img {
    right: 16px;
    width: 230px;
  }

  .offer__img--player {
    width: 170px;
  }

  .offer__img--dealer {
    width: 146px;
  }

  .offer__img--wheel {
    width: 230px;
  }

  .offer__img--pin {
    right: 14px;
    width: 180px;
  }

  .layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .login-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 0;
    padding: 26px 20px 0;
    text-align: center;
  }

  .login-hero__title {
    margin-bottom: 18px;
    font-size: 28px;
  }

  .login-hero__btn {
    width: 100%;
    height: 50px;
  }

  .login-hero__img {
    width: 240px;
    margin: 0 auto -36px;
  }

  .article {
    padding: 22px 16px 18px;
  }

  .article h2 {
    font-size: 19px;
  }

  .slip {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 86vh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 12, 16, .2);
    transform: translateY(100%);
  }

  .slip__foot {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .toast {
    bottom: 136px;
  }

  .slip-bar {
    left: 12px;
    right: 12px;
    bottom: 66px;
    transform: none;
    animation: none;
  }

  .slip-bar__info {
    flex: 1;
    min-width: 0;
  }

  .slip-bar__info > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .slip-bar__open {
    flex: none;
    padding: 0 12px 0 14px;
  }

  .games {
    grid-auto-columns: 44%;
    gap: 14px 10px;
    margin: 0 -12px;
    padding: 0 12px;
    scroll-padding-left: 12px;
  }

  .features {
    margin: 0 -12px;
    padding: 4px 12px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    scroll-padding-left: 12px;
  }

  .feature {
    flex-basis: 74%;
    padding: 10px 12px;
  }

  .app {
    padding-right: 16px;
  }

  .app__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .app__feature {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .app__feature b {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.25;
  }

  .app__feature-text {
    display: none;
  }

  .app__stores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding-top: 16px;
  }

  .app .store-btn {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 66px;
    padding: 8px 4px;
    border-radius: 14px;
    text-align: center;
  }

  .app .store-btn b {
    font-size: 11.5px;
  }

  .store-btn__hint {
    display: none;
  }

  body {
    background: #F4F5F7;
    padding-bottom: 64px;
  }

  .header {
    top: 0;
    width: auto;
    height: 52px;
    margin: 0;
    padding: 0 12px;
    gap: 10px;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--line);
  }

  .header .logo {
    font-size: 24px;
  }

  .header__user {
    display: none;
  }

  .header .icon-btn {
    width: 34px;
    height: 34px;
  }

  .auth .btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .about {
    padding: 20px 16px 16px;
  }

  .about__title {
    font-size: 22px;
  }

  .layout {
    display: block;
    width: auto;
    margin: 0;
    padding: 16px 12px 28px;
  }

  .slider__next,
  .pager__arrows,
  .pager--desk,
  .match__more .pill,
  .match__chat {
    display: none;
  }

  .main {
    gap: 30px;
  }

  .chip {
    width: 36px;
    height: 36px;
  }

  .cards {
    display: flex;
    gap: 8px;
    margin: 0 -12px;
    padding: 0 12px;
    overflow-x: auto;
  }

  .cards>* {
    flex: 0 0 86%;
  }

  .match__more {
    padding: 24px 8px 14px;
  }

  .odd b {
    height: 44px;
  }

  .boosted {
    margin: 0 -12px;
    padding: 22px 12px 12px;
    border-radius: 0;
  }

  .boost-card {
    flex-basis: 88%;
    min-width: 0;
  }

  .pager__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
  }

  .promo {
    border-radius: 10px;
    padding: 16px;
  }

  .promo__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer {
    padding: 28px 0 24px;
  }

  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-title {
    font-size: 38px;
  }

  .offer,
  .app {
    min-height: 168px;
    padding: 16px;
  }

  .offer__title {
    max-width: 64%;
    font-size: 23px;
  }

  .offer__text {
    max-width: 58%;
    font-size: 12px;
  }

  .app .offer__title,
  .app .offer__text {
    max-width: 100%;
  }

  .app__img {
    display: none;
  }

  .offer__img--dealer {
    right: 4px;
    width: 130px;
  }

  .offer__img--player {
    right: 4px;
    width: 148px;
  }

  .offer__img--wheel {
    width: 220px;
  }

  .offer__img--pin {
    right: 6px;
    bottom: -26px;
    width: 150px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .slip-bar {
    animation: none;
  }

  .feature--live .feature__icon::after {
    animation: none;
  }

  .offer,
  .offer__img {
    transition: none;
  }
}