/*
  Layout shell (1win.ng reference)
  --------------------------------
  Mobile  < 768px : header 60 · content pad 16 · banners "a a / b c" · tabbar 60
  Tablet  768–1023: same chrome · wider hero/cards · equal side banners
  Desktop ≥ 1024  : sidebar 280 (compact 64) · header 68 · banners "a b / a c" · no tabbar
*/

.app-skeleton {
    --sk-sidebar: var(--sidebar-width-expanded, 280px);
    --sk-header-m: var(--header-layout-height-mobile, 60px);
    --sk-header-d: var(--header-layout-height-desktop, 68px);
    --sk-tabbar: var(--tabbar-new-size-height, 60px);
    --sk-pad: 16px;
    --sk-gap: 12px;
    --sk-radius: var(--rounding-container-l, 16px);
    --sk-radius-xl: var(--rounding-container-xl, 24px);

    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--layout-color-bg, #0e1218);
    color: transparent;
    pointer-events: none;
    opacity: 1;
    transition: opacity 280ms ease, visibility 280ms ease;
}

html:not(.is-boot) .app-skeleton,
.app-skeleton.is-done {
    opacity: 0;
    visibility: hidden;
}

html.is-boot .template-1_root-RiCeW {
    visibility: hidden !important;
}

.app-skeleton__frame {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
}

.app-skeleton__sidebar {
    display: none;
    flex: 0 0 var(--sk-sidebar);
    width: var(--sk-sidebar);
    padding: 16px 12px;
    flex-direction: column;
    gap: 12px;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
    background: var(--sidebar-color-bg, #151b24);
}

.app-skeleton__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-skeleton__header {
    height: var(--sk-header-m);
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--sk-pad);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(14, 18, 24, 0.92);
}

.app-skeleton__header-nav {
    display: none;
    align-items: center;
    gap: 8px;
    margin-inline-start: 8px;
}

.app-skeleton__header-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-skeleton__content {
    flex: 1 1 auto;
    overflow: hidden;
    padding: 12px var(--sk-pad) calc(var(--sk-tabbar) + 20px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.app-skeleton__banners {
    display: grid;
    gap: 24px 8px;
    grid-template-columns: 69% auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "a a"
        "b c";
}

.app-skeleton__bone--hero {
    grid-area: a;
    aspect-ratio: 2.078;
    width: 100%;
    border-radius: var(--sk-radius);
}

.app-skeleton__bone--side {
    min-height: 96px;
    border-radius: var(--sk-radius);
}

.app-skeleton__bone--side:nth-of-type(2) {
    grid-area: b;
}

.app-skeleton__bone--side:nth-of-type(3) {
    grid-area: c;
}

.app-skeleton__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-skeleton__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-skeleton__cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 30%);
    gap: 12px;
    overflow: hidden;
}

.app-skeleton__tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--sk-tabbar) + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    background: rgba(14, 18, 24, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.app-skeleton__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Bones — reuse site shimmer token */
.app-skeleton__bone {
    background: var(--skeleton-content);
    background-size: 200% 100%;
    animation: 1.8s linear infinite skeleton_shine-ADZg6;
    border-radius: 10px;
}

.app-skeleton__bone--logo {
    height: 28px;
    width: 72%;
    margin: 4px auto 8px;
}

.app-skeleton__bone--avatar {
    height: 48px;
    width: 100%;
    border-radius: 12px;
}

.app-skeleton__bone--banner-sm {
    height: 64px;
    width: 100%;
    border-radius: 12px;
}

.app-skeleton__nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.app-skeleton__bone--nav {
    height: 40px;
    width: 100%;
    border-radius: 12px;
}

.app-skeleton__sidebar-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.app-skeleton__bone--square {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.app-skeleton__bone--pill {
    width: 72%;
    height: 32px;
    border-radius: 999px;
}

.app-skeleton__bone--brand {
    width: 88px;
    height: 28px;
}

.app-skeleton__bone--tab {
    width: 72px;
    height: 32px;
    border-radius: 999px;
}

.app-skeleton__bone--icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.app-skeleton__bone--btn {
    width: 72px;
    height: 36px;
    border-radius: 10px;
}

.app-skeleton__bone--btn-strong {
    width: 84px;
}

.app-skeleton__bone--title {
    width: 140px;
    height: 22px;
}

.app-skeleton__bone--chip {
    width: 72px;
    height: 28px;
    border-radius: 999px;
}

.app-skeleton__bone--card {
    aspect-ratio: 3 / 4.2;
    width: 100%;
    border-radius: 14px;
}

.app-skeleton__bone--tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
}

.app-skeleton__bone--tab-label {
    width: 36px;
    height: 8px;
    border-radius: 999px;
}

/* —— Page variants —— */
.app-skeleton__page-head {
    display: flex;
    align-items: center;
    min-height: 36px;
}

.app-skeleton__bone--page-title {
    width: min(220px, 55%);
    height: 28px;
    border-radius: 10px;
}

.app-skeleton__bone--subtitle {
    width: min(320px, 80%);
    height: 16px;
    margin-top: -8px;
}

.app-skeleton__bone--line {
    width: 100%;
    height: 14px;
    border-radius: 999px;
}

.app-skeleton__bone--line-short {
    width: 62%;
}

.app-skeleton__bone--cta {
    width: 148px;
    height: 44px;
    border-radius: 12px;
    margin-top: 8px;
}

.app-skeleton__bone--cta-ghost {
    width: 120px;
    opacity: 0.7;
}

/* Grid pages: rooms / casino */
.app-skeleton__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.app-skeleton__grid .app-skeleton__bone--card {
    width: 100%;
}

/* Tournament list */
.app-skeleton__filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-skeleton__bone--filter {
    width: 96px;
    height: 36px;
    border-radius: 999px;
}

.app-skeleton__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.app-skeleton__bone--list-card {
    width: 100%;
    aspect-ratio: 2.2 / 1;
    border-radius: 16px;
}

/* Promotions */
.app-skeleton__promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.app-skeleton__promo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-skeleton__bone--promo-img {
    width: 100%;
    aspect-ratio: 2.37 / 1;
    border-radius: 16px;
}

/* Bonuses */
.app-skeleton__bonus-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.app-skeleton__bone--bonus-card {
    width: 100%;
    min-height: 180px;
    border-radius: 18px;
}

/* Hero pages: freemoney / vip */
.app-skeleton__hero-block {
    display: grid;
    gap: 16px;
}

.app-skeleton__hero-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-skeleton__hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.app-skeleton__bone--hero-art {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--sk-radius);
}

.app-skeleton__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-skeleton__step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.app-skeleton__bone--step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
}

.app-skeleton__step-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

/* Detail */
.app-skeleton__detail {
    display: grid;
    gap: 16px;
    max-width: 520px;
}

.app-skeleton__bone--detail-media {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 3 / 4.2;
    border-radius: 16px;
}

.app-skeleton__detail-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Legal / article */
.app-skeleton__article {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 720px;
}

/* Tablet */
@media (min-width: 768px) {
    .app-skeleton {
        --sk-pad: 20px;
        --sk-gap: 16px;
    }

    .app-skeleton__banners {
        grid-template-columns: 1fr 1fr;
    }

    .app-skeleton__bone--side {
        min-height: 140px;
    }

    .app-skeleton__cards {
        grid-auto-columns: minmax(140px, 22%);
        gap: 16px;
    }

    .app-skeleton__content {
        gap: 24px;
        padding-top: 16px;
    }

    .app-skeleton__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .app-skeleton__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

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

    .app-skeleton__bonus-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .app-skeleton__hero-block {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        gap: 24px;
    }

    .app-skeleton__bone--hero-art {
        aspect-ratio: 4 / 3;
    }

    .app-skeleton__steps {
        flex-direction: row;
        gap: 20px;
    }

    .app-skeleton__step {
        flex: 1;
        flex-direction: column;
    }

    .app-skeleton__detail {
        grid-template-columns: 240px 1fr;
        max-width: 720px;
        align-items: start;
    }

    .app-skeleton__bone--detail-media {
        max-width: none;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .app-skeleton__sidebar {
        display: flex;
    }

    .app-skeleton__header {
        height: var(--sk-header-d);
        padding-inline: 24px;
    }

    .app-skeleton__header-nav {
        display: flex;
    }

    .app-skeleton__tabbar {
        display: none;
    }

    .app-skeleton__content {
        padding: 16px 24px 32px;
    }

    .app-skeleton__banners {
        gap: 16px;
        grid-template-columns: 67% auto;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "a b"
            "a c";
        min-height: 272px;
    }

    .app-skeleton__bone--hero {
        aspect-ratio: auto;
        border-radius: var(--sk-radius-xl);
        height: 100%;
        min-height: 272px;
    }

    .app-skeleton__bone--side {
        min-height: 0;
        height: 100%;
        border-radius: var(--sk-radius-xl);
    }

    .app-skeleton__cards {
        grid-auto-columns: minmax(160px, 16%);
    }

    .app-skeleton__grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .app-skeleton__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .app-skeleton__promo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .app-skeleton__bonus-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .app-skeleton__bone--bonus-card {
        min-height: 200px;
    }

    .app-skeleton__hero-block {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        min-height: 280px;
    }

    .app-skeleton__bone--hero-art {
        aspect-ratio: 16 / 11;
        border-radius: var(--sk-radius-xl);
    }

    .app-skeleton__detail {
        grid-template-columns: 280px 1fr;
        max-width: 880px;
        gap: 28px;
    }
}

@media (min-width: 1440px) {
    .app-skeleton__content {
        padding-inline: 28px;
    }

    .app-skeleton__cards {
        grid-auto-columns: minmax(168px, 14%);
    }

    .app-skeleton__grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}