/* =========== © 2025 Centroarts.com - https://5play.org =========== */

.appview-hero {
    --block-rd: 12px;
    position: relative;
    z-index: 1;
    padding-bottom: var(--wrp-p);
}

@media (min-width: 768px) {
    .appview-hero {
        --block-rd: 20px;
        padding-bottom: var(--group-gap);
    }
}

.appview-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: hsl(var(--c-body-tone));
    pointer-events: none;
    user-select: none;
}

.appview-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: linear-gradient(0deg, hsla(var(--c-body), 0) 30%, hsla(var(--c-body), 1) 100%);
}

.appview-bg .cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(closest-side, hsla(var(--c-body-tone), .7) 30%, hsla(var(--c-body-tone), 1) 100%);
}

.appview-bg .cover {
    position: absolute;
    left: calc(50% - 300px);
    top: 0;
    width: 1200px;
    height: 1200px;
    filter: blur(12px);
    border-radius: 50%;
}

.appview-intro {
    --title-fs: var(--fs-title-view);
    --appicon-size: 200px;
}

.appview-intro-cont .title {
    text-wrap: balance;
}

@media (min-width: 576px) {
    .appview-intro {
        --appicon-size: 220px;
    }
}

@media (min-width: 992px) {
    .appview-intro {
        --title-lh: 60px;
    }

    .appview-intro-cont {
        position: relative;
        padding-right: 268px;
        min-height: var(--appicon-size);
    }

    .appview-intro-cont .appicon {
        position: absolute;
        right: 0;
        top: 0;
    }
}

@media (max-width: 991px) {
    .appview-intro {
        --title-lh: 32px;
        --title-mb: 20px;
    }

    .appview-breadcrumbs {
        justify-content: center;
        padding-top: 4px;
        margin-bottom: 8px;
    }

    .appview-intro-cont .title {
        text-align: center;
    }

    .appview-intro-cont .appicon {
        margin-left: auto;
        margin-right: auto;
    }
}

.appicon-label {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 1;
    font-size: var(--fs-2);
    font-weight: var(--fw-bold);
    line-height: 16px;
    height: 32px;
    padding: 8px 12px;
    border-radius: 16px;
    transform: translate(-50%, -50%);
    background-color: hsla(var(--c-body), 0.5);
    box-shadow: inset 0 0 0 1px hsla(var(--c-text), 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.appview-intro-cont .appicon::after {
    content: "";
    border-radius: 50%;
    position: absolute;
    inset: -8%;
    transform: translateY(15%);
    z-index: -1;
    background-image: radial-gradient(50% 50% at 50% 50%, hsla(0, 0%, 0%, .2) 0%, hsla(0, 0%, 0%, 0) 100%);
    pointer-events: none;
}

.appview-spec {
    display: flex;
    font-size: var(--fs-2);
    padding: 24px 0;
}

.specs-item {
    padding: 0 12px;
}

.specs-item:first-child {
    padding-left: 0;
}

.spec-label {
    opacity: .7;
    margin-bottom: 4px;
}

.spec-label,
.spec-cont {
    display: block;
}

.av-tool-list,
.appview-likes {
    display: grid;
    grid-auto-flow: column;
}

.av-tool-list {
    flex: 1 1 auto;
    grid-auto-columns: minmax(78px, 1fr);
}

@media (min-width: 1200px) {
    .specs-item {
        position: relative;
        padding: 0 20px;
    }

    .specs-item:not(:first-child)::before {
        content: "";
        width: 0;
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 0;
        right: auto;
        border-left: 1px solid;
        opacity: .1;
    }
}

@media (min-width: 992px) {
    .appview-spec {
        font-size: var(--fs-1);
        padding: 0;
    }
}

@media (max-width: 991px) {
    .appview-spec {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(var(--wrp-p)/-1);
        margin-right: calc(var(--wrp-p)/-1);
        padding-left: var(--wrp-p);
        padding-right: var(--wrp-p);
        white-space: nowrap;
    }

    .appview-spec::-webkit-scrollbar {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .specs-item {
        flex: 1;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .av-tool-list {
        padding-top: var(--wrp-p);
        padding-bottom: var(--wrp-p);
    }
}

.av-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--fs-4);
    white-space: nowrap;
}

.av-tool>a,
.av-tool>button,
.av-tool>a>*,
.av-tool>button>* {
    display: block;
}

.av-tool .im {
    width: 24px;
    height: 24px;
    margin: 0 auto;
    margin-bottom: 4px;
}

.av-tool>a,
.av-tool>button {
    opacity: .7;
    width: 100%;
    transition: opacity .2s ease;
}

.av-tool>a:hover,
.av-tool>button:hover {
    opacity: 1;
}

@media (max-width: 1199px) {
    .appview-tools {
        margin-top: 8px;
    }
}

@media (max-width: 767px) {

    .av-tool>a,
    .av-tool>button {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

@media (min-width: 768px) {
    .appview-tools {
        order: -1;
        display: flex;
        box-shadow: inset 0 0 0 1px var(--c-border);
        border-radius: var(--block-rd);
        padding: 14px;
        gap: 14px;
    }
}

@media (min-width: 992px) {
    .appview-foot {
        margin-top: 32px;
    }
}

@media (min-width: 1200px) {
    .appview-foot {
        display: flex;
    }

    .appview-likes {
        margin-left: 16px;
    }
}

.appview-likes {
    grid-auto-columns: minmax(136px, 1fr);
    gap: 8px;
    font-size: var(--fs-2);
    line-height: 20px;
}

.appview-likes a,
.appview-likes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-shadow: inset 0 0 0 1px var(--c-border);
    border-radius: var(--block-rd);
    transition: background-color .2s ease, transform .2s ease;
}

.appview-likes a:hover,
.appview-likes button:hover {
    background-color: hsla(var(--c-text), 0.03);
    transform: scale(1.02);
}

.appview-likes a:active,
.appview-likes button:active {
    background-color: hsla(var(--c-text), 0.05);
    transform: scale(0.98);
}

.appview-likes a .im,
.appview-likes button .im {
    margin-bottom: 4px;
}

/* Screenshots */
.screenshots {
    --screens-w: 296px;
}

.screenshots.portrait {
    --screens-w: 220px;
}

.screenshots .hcarousel {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.screenshots .hcarousel::-webkit-scrollbar {
    display: none;
}

.screenshots .hcarousel.glist {
    grid-auto-columns: minmax(var(--screens-w), 1fr);
    padding: 0;
    margin: 0;
}

.screenshots .hcarousel.glist:has(> p),
.screenshots .hcarousel.glist:has(> div) {
    display: block !important;
}

.screenshots .hcarousel.glist>p,
.screenshots .hcarousel.glist>div {
    display: grid;
    gap: var(--g-gap);
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--screens-w), 1fr);
    margin: 0;
}

.screenshots .hcarousel.glist br {
    display: none !important;
}

@media (min-width: 768px) {
    .appview-screens {
        margin-top: var(--group-gap);
    }

    .screenshots {
        --screens-w: 526px;
    }

    .screenshots.portrait {
        --screens-w: 260px;
    }

    .screenshots .hcarousel.glist {
        border-radius: var(--block-rd);
    }

    .screenshots .glist a {
        scroll-margin-left: 0;
        scroll-margin-right: 0;
    }
}

@media (max-width: 767px) {
    .appview-screens {
        border-top: 1px solid hsl(var(--c-body));
        padding-top: var(--wrp-p);
        padding-left: 0;
        padding-right: 0;
    }

    .screenshots .hcarousel.glist {
        padding-left: var(--wrp-p);
        padding-right: var(--wrp-p);
    }

    .screenshots .hcarousel:has(> p),
    .screenshots .hcarousel:has(> div) {
        overflow-x: hidden;
        scroll-snap-type: none;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .screenshots .hcarousel>p,
    .screenshots .hcarousel>div {
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-left: var(--wrp-p);
        padding-right: var(--wrp-p);
    }

    .screenshots .glist a {
        scroll-margin-left: var(--wrp-p);
        scroll-margin-right: var(--wrp-p);
    }
}

.screenshots .glist a {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    z-index: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
    border-radius: var(--block-rd);
    background-color: hsla(var(--c-text), 0.1);
    aspect-ratio: 16 / 9;
}

.screenshots.portrait .glist a {
    aspect-ratio: 9 / 16;
}

.screenshots .glist a img {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    pointer-events: none;
    user-select: none;
    min-width: 100%;
    width: auto;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
    object-position: center center;
    -o-object-position: center center;
    -o-object-fit: cover;
}

.video-highslide {
    --im-img: url(../img/aright.svg);
}

.video-highslide::after,
.video-highslide::before {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.video-highslide::before {
    top: calc(50% - 28px);
    left: calc(50% - 28px);
    background-color: hsl(0, 0%, 0%);
    opacity: .3;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    transition: transform .2s ease, opacity .2s ease;
}

.video-highslide:hover::before {
    transform: scale(1.04);
    opacity: .5;
}

.video-highslide::after {
    content: "";
    top: calc(50% - 11px);
    left: calc(50% - 11px);
    background-color: hsl(var(--c-text-white));
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    mask-size: auto 100%;
    -webkit-mask-size: auto 100%;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: var(--im-img);
    -webkit-mask-image: var(--im-img);
}

/* FullView Information */
.appview-info {
    padding-top: var(--group-gap);
    padding-bottom: var(--group-gap);
}

/* Rating Status */
.appview-info-rate {
    margin-top: var(--sect-gap);
}

.rstatus-num {
    display: flex;
    align-items: center;
    color: hsl(var(--c-primary));
    margin: 12px 0;
}

.rstatus-value {
    font-size: 64px;
    letter-spacing: -0.05em;
    line-height: 1;
    flex: 1 1 auto;
}

.rstatus-line {
    --rateline: url(../img/popularity.svg);
    --rateline-w: 100%;
    --rateline-c: 50px;
    --rateline-calc: calc((var(--rating-width) - var(--rateline-c)) * (var(--rating-value) / 100));
    display: block;
    width: var(--rateline-w);
    height: 28px;
    background-color: hsl(var(--c-primary));
    background-image: linear-gradient(90deg, hsl(var(--c-red)) 0%, hsl(var(--c-yellow)) 50%, hsl(var(--c-primary)) 100%);

    mask-size: auto 100%;
    -webkit-mask-size: auto 100%;
    mask-position: var(--rateline-calc) 0;
    -webkit-mask-position: var(--rateline-calc) 0;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
    mask-image: var(--rateline);
    -webkit-mask-image: var(--rateline);
}

.rating-status-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-2);
    margin-top: 16px;
}

.rstatus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    position: relative;
}

.rstatus-icon svg {
    width: 64px;
    height: 64px;
    color: hsl(var(--c-primary));
    fill: currentColor;
    transition: transform .2s ease, color .2s ease;
}

.rstatus-num.negative {
    color: hsl(var(--c-red));
}

.rstatus-num.negative .rstatus-icon svg {
    color: hsl(var(--c-red));
    transform: rotate(180deg);
}

.rstatus-num.negative .rstatus-icon .mask {
    --mask-bg: hsla(var(--c-red), 0.2);
}

@media (min-width: 576px) and (max-width: 991px) {
    .appview-info-rate {
        border-radius: var(--block-rd);
        padding: var(--sect-gap);
        box-shadow: inset 0 0 0 1px var(--c-border);
    }
}

@media (min-width: 992px) {
    .rstatus-value {
        font-size: 92px;
    }

    .rstatus-icon {
        width: 92px;
        height: 92px;
    }

    .rstatus-icon .mask {
        --mask-size: 92px;
        --mask-bg: hsla(var(--c-primary), 0.2);
        --mask-img: url(../img/icons/star-mask2.svg);

        position: absolute;
        inset: 0;
        transition: background-color .2s ease;
    }
}

/* Tabs */
.tab-toggle-head {
    display: flex;
    margin-bottom: var(--tabs-mb, 32px);
}

@media (max-width: 991px) {
    .tab-toggle-head {
        justify-content: center;
    }
}

.tab-toggle {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 48px;
    background-color: hsla(var(--c-text), 0.05);
    border: none;
    border-radius: 24px;
    padding: 4px;
    cursor: pointer;
    font-size: var(--fs-2);
    line-height: 20px;
    box-shadow: inset 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
}

.tab-toggle::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    height: 40px;
    width: calc(50% - 4px);
    background-color: hsl(var(--c-body));
    border-radius: inherit;
    box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
    transition: transform .2s ease;
}

.tab-toggle span {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 10px 12px;
    min-width: 128px;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity .2s ease;
}

.tab-container.opentab .tab-toggle span:first-child,
.tab-container:not(.opentab) .tab-toggle span:last-child {
    opacity: .6;
}

.tab-container.opentab .tab-toggle::after {
    transform: translateX(100%);
}

/* Download Block */
.download-box {
    --dbox-p: var(--sect-gap);
    --tabs-mb: var(--sect-gap);

    position: relative;
    z-index: 1;
    padding: var(--dbox-p);
    background-color: hsla(var(--c-primary), 0.07);
    transition: background-color .2s ease;
}

@media (min-width: 576px) {
    .download-box {
        border-radius: var(--block-rd);
        padding: var(--dbox-p);
    }
}

@media (min-width: 768px) {
    .download-box {
        --dbox-p: 40px;
        --tabs-mb: 40px;
    }
}

@media (max-width: 575px) {
    .appview-download.wrp {
        padding-left: 0;
        padding-right: 0;
    }

    .download-box {
        padding-left: var(--wrp-p);
        padding-right: var(--wrp-p);
    }
}

.download-box-files>.title {
    --title-mb: 16px;
}

.opentab.download-box {
    background-color: hsla(var(--c-yellow), 0.1);
}

.download-box-foot {
    --title-fs: var(--fs-2);
    --title-lh: 20px;
    --title-mb: 0;

    --desc-fs: var(--fs-2);
    --desc-lh: 20px;

    margin-top: var(--dbox-p);
}

@media (min-width: 576px) {
    .download-box-foot {
        --title-fs: var(--fs);
        --title-lh: var(--lh);

        --desc-fs: var(--fs);
        --desc-lh: var(--lh);
    }

    .download-box-foot .title,
    .download-box-foot .desc {
        max-width: 990px;
    }
}

.download-shield {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: var(--block-rd);
    display: flex;
    align-items: end;
    justify-content: end;
    pointer-events: none;
    overflow: hidden;
}

.download-shield .mask {
    --mask-bg: transparent;
    --mask-w: 240px;
    --mask-h: 240px;
    --mask-size: auto 100%;
    --mask-img: url(../img/icons/mask-shied.svg);
    transform: translate(19%, 19%);

    background-image: linear-gradient(207deg, hsla(var(--c-primary), 0.0) 0%, hsla(var(--c-primary), 0.2) 100%);
}

/* Download Buttons */
.download-line {
    --btn-h: 48px;
    --btn-fs: var(--fs-1);
    margin-top: 8px;
}

.download-line>a::after {
    content: "";
    position: absolute;
    inset: 0;
}

@media (max-width: 767px) {
    .download-line-link {
        margin-right: var(--btn-h);
    }

    .download-line .dropdown {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
    }

    .download-line .dropdown-box {
        --dropdown-p: 8px 16px;
        padding: var(--dropdown-p);
        color: hsl(var(--c-text));
        font-size: var(--fs-2);
        line-height: 20px;
        left: auto;
        top: auto;
        right: 12px;
        bottom: calc(100% - 4px);
        margin-top: 0;
        border-bottom-right-radius: 2px;
        width: 260px;
        text-align: left;
        word-break: break-all;
        white-space: normal;
    }

    .download-line .dropdown-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: var(--btn-h);
        width: var(--btn-h);
    }

    .download-line .dropdown-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        right: auto;
        border-left: 1px solid var(--btn-fill-text);
        opacity: .1;
    }
}

@media (min-width: 768px) {
    .download-line {
        --btn-h: 56px;
        --btn-fs: var(--fs);
    }

    .download-line .dropdown {
        min-width: 0;
        flex: 1 1 auto;
        text-align: left;
        pointer-events: none;
        padding: 0 4px;
    }

    .download-line-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .download-line-link {
        padding: 0 4px;
    }

    .download-line-title {
        font-weight: var(--fw);
        position: static;
        display: block !important;
        opacity: 1;
        padding: 0;
        margin: 0;
        visibility: visible;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        transform: none;
    }
}
.appview .specs-item.is-focused-update {
    border-radius: 16px;
    box-shadow: 0 0 0 2px hsla(var(--c-primary), 0.28);
    transition: box-shadow .2s ease;
}

.appview-tools .dialog-btn.is-active,
.appview-likes .dialog-btn.is-active {
    color: hsl(var(--c-primary));
}