@import url(./first.css);
@import url(./fonts.css);
@import url(./homeboard.css);
@import url(./admin.css);

* {
    box-sizing: border-box;
    transition: 0.1s;
}

:root {
    --padding-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + 20px);
    --padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + 20px);
    --padding-left: calc(var(--tg-safe-area-inset-left, 0px) + var(--tg-content-safe-area-inset-left, 0px) + 20px);
    --padding-right: calc(var(--tg-safe-area-inset-right, 0px) + var(--tg-content-safe-area-inset-right, 0px) + 20px);
}

.root {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    display: flex;
    font-family: 'Nunito', 'Montserrat', sans-serif;
    color: white;
    background-color: black;
}
*:not(input):not(textarea) {
    -webkit-user-select: none;
    user-select: none;
}

@media screen and (min-width: 500px) {
    .root {
        width: 500px;
        left: calc(50% - 250px);
        padding-left: 20px;
        padding-right: 20px;
    }

    body {
        background: var(--color-background);

    }
}

.hidden {
    display: none !important;
}
.screen {
    background: black;
}



@keyframes back-top {

    0% {
        left: 0px;
        width: 100vw;
        z-index: 2;
        filter: blur(0px)
    }
    100% {
        left: 100vw;
        width: 100vw;
        z-index: 2;
        filter: blur(2px)
    }

}
@keyframes back-bottom {
    0% {
        transform: scale(0.9);
        z-index: 1;
        filter: blur(2px)
    }
    100% {
        transform: scale(1);
        z-index: 1;
        filter: blur(0px)
    }
}



@keyframes nap-top {
    0% {
        left: 100vw;
        width: 100vw;
        z-index: 2;
        filter: blur(2px)
    }
    100% {
        left: 0px;
        width: 100vw;
        z-index: 2;
        filter: blur(0px)
    }
}
@keyframes nap-bottom {
    0% {
        transform: scale(1);
        z-index: 1;
        filter: blur(0px)
    }
    100% {
        transform: scale(0.9);
        z-index: 1;
        filter: blur(2px)
    }
}






.glass-card {
  overflow: hidden; /* Чтобы шум не вылезал за скругления */ 
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right-color: rgba(255, 255, 255, 0.1); /* Тень на одном боку */
  border-bottom-color: rgba(255, 255, 255, 0.1);

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* 4. Слой зернистости (Noise) */
.glass-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1; /* Шум под текстом, но над основным фоном */
  
  /* Генерация шума через SVG (самый легкий и чистый способ) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://w3.org id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  
  opacity: 0.05; /* Едва заметно, чтобы не рябило */
  pointer-events: none;
}

/* 5. Внутренний блик (Inner Glow) */
.glass-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
  z-index: -1;
  pointer-events: none;
}






.icon[iid='plus'] {
    mask-image: url(./../imgs/plus.png);
    mask-repeat: no-repeat;
    mask-size: 100%;
}