.l2-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.l2-logo span {
  display: inline;
}

.l2-cat-icon {
  display: block;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  background-image: url('/assets/home/sv6886-cat-sprite-v2.webp');
  background-size: 400% 400%;
  background-repeat: no-repeat;
  filter: none !important;
}

.l2-cat-icon.c0 { background-position: 0 0; }
.l2-cat-icon.c1 { background-position: 33.333% 0; }
.l2-cat-icon.c2 { background-position: 66.666% 0; }
.l2-cat-icon.c3 { background-position: 100% 0; }
.l2-cat-icon.c4 { background-position: 0 33.333%; }
.l2-cat-icon.c5 { background-position: 33.333% 33.333%; }
.l2-cat-icon.c6 { background-position: 66.666% 33.333%; }
.l2-cat-icon.c7 { background-position: 100% 33.333%; }
.l2-cat-icon.c8 { background-position: 0 66.666%; }
.l2-cat-icon.c9 { background-position: 33.333% 66.666%; }
.l2-cat-icon.c10 { background-position: 66.666% 66.666%; }

.l2-auth-modal { display: none; }

@media (min-width: 761px) {
  body.l2-modal-open { overflow: hidden; }
  .l2-auth-modal.is-open { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 24px; }
  .l2-auth-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2, 9, 15, .78); backdrop-filter: blur(4px); cursor: pointer; }
  .l2-auth-dialog { position: relative; width: min(420px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px 34px 25px; border: 1px solid rgba(226, 191, 85, .48); border-radius: 18px; background: linear-gradient(155deg, #142b3d, #07131e 68%); box-shadow: 0 28px 80px rgba(0, 0, 0, .58); color: #fff; }
  .l2-auth-close { position: absolute; top: 11px; right: 13px; width: 32px; height: 32px; border: 0; background: transparent; color: #9eabb5; font-size: 28px; line-height: 1; cursor: pointer; }
  .l2-auth-logo { display: block; margin: 0 auto 18px; color: #ff742f; font: italic 900 28px Manrope, sans-serif; letter-spacing: -1.5px; text-align: center; }
  .l2-auth-logo span { color: #ff9e2f; }
  .l2-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .l2-auth-tabs button { padding: 11px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8f9ba7; font-weight: 700; cursor: pointer; }
  .l2-auth-tabs button.active { border-bottom-color: #e2bf55; color: #f0d06b; }
  .l2-auth-panel { display: none; }
  .l2-auth-panel.active { display: block; }
  .l2-auth-panel h2 { margin: 0 0 18px; font-size: 20px; text-align: center; }
  .l2-auth-panel form { display: flex; flex-direction: column; gap: 12px; }
  .l2-auth-panel label { height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.055); }
  .l2-auth-panel label:focus-within { border-color: #d9b54e; box-shadow: 0 0 0 2px rgba(217,181,78,.12); }
  .l2-auth-panel label span { width: 20px; color: #d5b553; font-size: 18px; text-align: center; }
  .l2-auth-panel input, .l2-auth-panel select { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font: 500 13px "Be Vietnam Pro", sans-serif; }
  .l2-auth-panel input::placeholder { color: #71808d; }
  .l2-auth-panel select option { background: #102536; color: #fff; }
  .l2-auth-panel form > button { height: 48px; margin-top: 3px; border: 0; border-radius: 24px; background: linear-gradient(105deg, #cda441, #f2d36d); color: #182432; font-weight: 800; cursor: pointer; }
  .l2-auth-panel p { margin: 17px 0 0; color: #82909b; font-size: 12px; text-align: center; }
  .l2-auth-panel p button { padding: 0; border: 0; background: transparent; color: #eccb65; font-weight: 700; cursor: pointer; }
}

@media (min-width: 761px) {
  .l2-top {
    width: min(calc(100% - 32px), 1030px);
    height: 38px;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 0 0 100vmax #071019;
    clip-path: inset(0 -100vmax);
  }

  .l2-top select {
    width: 106px;
    padding: 6px 10px;
    font-size: 9px;
  }

  .l2-top-actions {
    gap: 7px;
  }

  .l2-top-actions > a,
  .l2-top-actions button {
    min-width: 56px;
    padding: 6px 11px;
    font-size: 10px;
  }

  .l2-top-actions i {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .l2-nav {
    width: min(100%, 1030px);
    height: 68px;
    margin: 0 auto;
    grid-template-columns: 160px minmax(0, 1fr) 148px;
    box-shadow: 0 0 0 100vmax #102a3e;
    clip-path: inset(0 -100vmax);
  }

  .l2-logo {
    font-size: 23px;
    letter-spacing: -1.5px;
  }

  .l2-cats a {
    min-width: 62px;
    flex: 1 0 62px;
    gap: 1px;
    font-size: 9px;
  }

  .l2-cats a.active::before {
    top: 13px;
    right: 7px;
    width: 5px;
    height: 13px;
  }

  .l2-cat-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .l2-nav-auth {
    gap: 7px;
  }

  .l2-nav-auth a {
    min-width: 64px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .l2-main {
    width: min(calc(100% - 32px), 1030px);
  }

  .l2-hero {
    margin-top: 14px;
    padding: 58px 64px;
  }

  .l2-hero small {
    font-size: 9px;
  }

  .l2-hero h1 {
    margin: 12px 0;
    font-size: 58px;
    letter-spacing: -3px;
  }

  .l2-hero p {
    padding: 8px 24px;
    font-size: 14px;
  }

  .l2-notice {
    height: 32px;
    margin-top: 10px;
  }

  .l2-notice b {
    padding: 0 14px;
    font-size: 9px;
  }

  .l2-notice span {
    padding: 0 18px;
    font-size: 9px;
  }

  .l2-games {
    padding: 10px 0 14px;
  }

  .l2-games > header {
    height: 36px;
  }

  .l2-games h2 {
    padding-left: 8px;
    border-left-width: 4px;
    font-size: 14px;
  }

  .l2-games h2 small {
    font-size: 9px;
  }

  .l2-games > header > a {
    padding: 5px 12px;
    font-size: 9px;
  }

  .l2-grid {
    grid-template-columns: repeat(4, 160px);
    gap: 13px;
  }

  .l2-grid-six {
    grid-template-columns: repeat(6, 160px);
  }

  .l2-cover {
    border-radius: 6px;
  }

  .l2-cover > span {
    top: 7px;
    left: 7px;
    padding: 3px 5px;
    font-size: 7px;
  }

  .l2-grid article > div {
    padding: 7px 2px;
  }

  .l2-grid h3 {
    font-size: 11px;
  }

  .l2-grid small {
    font-size: 7px;
  }

  .l2-live {
    padding-top: 4px;
  }

  .l2-providers {
    height: 55px;
    font-size: 15px;
  }

  .l2-tools {
    top: 44%;
    right: max(12px, calc((100vw - 1700px) / 2));
    width: 64px;
    padding: 6px 0;
    border-radius: 13px;
  }

  .l2-tools a {
    min-height: 73px;
    padding: 6px;
    gap: 3px;
    font-size: 8px;
  }

  .l2-tools b {
    font-size: 19px;
  }
}

@media (max-width: 760px) {
  .l2-logo {
    display: none;
  }

  .l2-cat-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}