#activity-box {
    --activity-bg: #030612;
    --activity-panel: #121317;
    --activity-line: #292b39;
    --activity-text: #f6f5f2;
    --activity-muted: #a7a7b0;
    --activity-gold: #edbf65;
    --activity-teal: #17bda5;
    box-sizing: border-box;
    width: 100%;
    margin: 2.2rem auto 0;
    background: var(--activity-bg);
    color: var(--activity-text);
    font-size: .875rem;
    line-height: 1.5;
}

html body.theme-dark #body {
    background: #030612 !important;
}

#activity-box *,
#activity-box *::before,
#activity-box *::after {
    box-sizing: border-box;
}

#activity-box h2,
#activity-box h3,
#activity-box p {
    margin: 0;
    font-weight: 500;
}

#activity-box button,
#activity-box a {
    font: inherit;
}

#activity-box a {
    color: inherit;
    text-decoration: none;
}

#activity-box .activity-hero {
    min-height: 20rem;
    padding: 3rem 0 2rem 0;
    background: #050608 url('/usr/themes/Mirages/images/Activity/bg.png') center right / cover no-repeat;
    background-position: right top;
    background-size: auto 19rem;
}

#activity-box .activity-stage,
#activity-box .activity-rules {
    width: min(100%, 71.25rem);
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1rem;
    
}

#activity-box .activity-hero-copy {
    max-width: 35rem;
    position: relative;
    top: -1rem;
}

#activity-box .activity-title-image {
    position: relative;
    left: -1rem;
    display: block;
    width: min(100%, 20rem);
    height: auto;
}

#activity-box .activity-hero-prize {
    margin-top: .75rem;
    color: #e8d5aa;
    font-size: .9375rem;
}

#activity-box .activity-hero-time {
    display: flex;
    align-items: center;
    gap: .4375rem;
    margin-top: .75rem;
    color: #dfdfe4;
    font-size: .75rem;
}

#activity-box .activity-hero-time img {
    width: 1rem;
    height: 1rem;
}

#activity-box .activity-hero-actions {
    display: flex;
    gap: .875rem;
    margin-top: 1.125rem;
}

#activity-box .activity-button {
    display: inline-flex;
    min-width: 5.75rem;
    min-height: 1.9rem;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .4rem 1rem;
    border: .0625rem solid #3a3b48;
    border-radius: .4375rem;
    background: rgba(20, 21, 29, .74);
    color: var(--activity-text);
    cursor: pointer;
    font-size: 0.7rem;
}

#activity-box .activity-button-primary {
    border-color: var(--activity-gold);
    background: var(--activity-gold);
    color: #19140d;
    font-weight: 500;
    min-width: 7rem;
    padding: .4rem;
    border-radius: .4rem 1rem 1rem .4rem;
}

#activity-box .activity-button-primary img {
    display: inline-grid;
    width: 1.125rem;
    height: 1.125rem;
    place-items: center;
    border-radius: 50%;
    background: #17140f;
    color: var(--activity-gold);
    font-size: .8125rem;
}

#activity-box .activity-voter-summary {
    display: flex;
    align-items: center;
    margin-top: .9375rem;
    color: #a9aab1;
    font-size: .6875rem;
}

#activity-box .activity-voter-summary strong {
    margin: 0 .1875rem;
    color: var(--activity-teal);
}

#activity-box .activity-avatars {
    display: inline-flex;
    width: 3rem;
    margin-right: .4375rem;
}

#activity-box .activity-avatars img {
    width: 1.125rem;
    height: 1.125rem;
    margin-right: -.25rem;
    border: .0625rem solid #121317;
    border-radius: 50%;
    object-fit: cover;
}

#activity-box .activity-stage {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(23rem, 1fr);
    gap: 0.8rem;
    margin-top: -.0625rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 0.6rem;
    border: .0625rem solid #292a2f;
    border-radius: .4375rem;
    background: #15161a;
}

#activity-box .activity-stage-intro h2,
#activity-box .activity-section-heading h2 {
    color: var(--activity-gold);
    font-size: 1.2rem;
}

#activity-box .activity-stage-intro h2 {
    color: #f4f4f5;
    font-size: 1rem;
}

#activity-box .activity-stage-intro > p {
    margin-top: .62rem;
    color: #b9bac1;
}

#activity-box .activity-stage-intro > div {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}

#activity-box .activity-status {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 6.1875rem;
    background: #118f7e;
    color: #e8fffa;
    font-size: 0.62rem;
}

#activity-box .activity-deadline {
    color: #a8a9b1;
    font-size: .65rem;
}

#activity-box .activity-stage-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

#activity-box .activity-stage-list li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .5rem;
    color: #bec0c8;
    text-align: center;
}

#activity-box .activity-stage-list button {
    display: grid;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    gap: .625rem;
    justify-items: center;
}

#activity-box .activity-stage-list li:not(:last-child)::after {
    position: absolute;
    top: 1rem;
    right: 0rem;
    width: 0.05rem;
    height: 1rem;
    background: #34353d;
    content: '';
}

#activity-box .activity-stage-list span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: .0625rem solid #333644;
    border-radius: 50%;
    background: #161720;
    font-size: .8rem;
}

#activity-box .activity-stage-list .is-current span {
    border-color: var(--activity-gold);
    background: #372c22;
    color: #ffe0a0;
}

#activity-box .activity-stage-list .is-selected:not(.is-current) span {
    border-color: #6f604a;
    background: #24221f;
    color: #dfc995;
}

#activity-box .activity-stage-list button:focus-visible {
    outline: 0;
}

#activity-box .activity-stage-list button:focus-visible span {
    box-shadow: 0 0 0 .125rem rgba(223, 201, 149, .4);
}

#activity-box .activity-stage-list small {
    max-width: 4.6875rem;
    color: #a3a5ad;
    font-size: .62rem;
}

#activity-box .activity-voting,
#activity-box .activity-prizes {
    padding-top: 2.625rem;
}

#activity-box .activity-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

#activity-box .activity-section-heading p {
    margin-top: .3125rem;
    color: #a4a5ad;
    font-size: .75rem;
}

#activity-box .activity-draw-state {
    flex: 0 0 auto;
    padding: .3125rem .8125rem;
    border: .0625rem solid #353644;
    border-radius: 6.1875rem;
    background: #191a25;
    color: #b4b5bd;
    cursor: pointer;
    font-size: 0.85rem;
}
.activity-voting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#activity-box .activity-group-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .625rem;
    max-width: 70%;
}

#activity-box .activity-group-tabs button {
    min-width: 2.5625rem;
    padding: .3125rem .625rem;
    border: .0625rem solid #343544;
    border-radius: .3125rem;
    background: #1b1c27;
    color: #c5c6cf;
    cursor: pointer;
}

#activity-box .activity-group-tabs button.is-active {
    border-color: #8e6c39;
    background: #3d3023;
    color: #ffe4aa;
}

#activity-box .activity-candidate-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .875rem;
    margin-top: 1.75rem;
}

#activity-box .activity-candidate {
    overflow: hidden;
    border: .0625rem solid #765421;
    border-radius: .4375rem;
    background: #151619;
}

#activity-box .activity-candidate-photo {
    position: relative;
    height: 12.2rem;
    overflow: hidden;
    background: #171621;
}
.is_promoted_icon{
    position: absolute;
    top: 0.8rem;
    right: 0.5rem;
    width: 4rem !important;
    height: auto !important;
    z-index: 2;
}
#activity-box .activity-candidate-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#activity-box .activity-candidate-swiper,
#activity-box .activity-candidate-swiper .swiper-wrapper,
#activity-box .activity-candidate-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

#activity-box .activity-candidate-swiper .swiper-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#activity-box .activity-candidate-swiper .swiper-pagination {
    bottom: .5rem;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    line-height: 0;
}

#activity-box .activity-candidate-swiper .swiper-pagination-bullet {
    width: .375rem;
    height: .375rem;
    margin: 0 .1875rem;
    background: rgba(255, 255, 255, .65);
    opacity: 1;
}

#activity-box .activity-candidate-swiper .swiper-pagination-bullet-active {
    background: #d6a84d;
}

#activity-box .activity-candidate-number {
    position: absolute;
    z-index: 2;
    top: .625rem;
    left: .625rem;
    padding: .1875rem .5625rem;
    border: .0625rem solid #6c5537;
    border-radius: 6.1875rem;
    background: rgba(42, 31, 25, .9);
    color: #f3d8a4;
    font-size: .625rem;
}

#activity-box .activity-candidate-gallery {
    position: absolute;
    z-index: 2;
    bottom: .5rem;
    left: .5625rem;
    display: flex;
    align-items: center;
    gap: .1875rem;
    color: #e1e2e8;
    font-size: .6875rem;
}

#activity-box .activity-candidate-gallery img {
    width: .75rem;
    height: .75rem;
}

#activity-box .activity-vote-success {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    min-width: 8rem;
    min-height: 6rem;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.0625rem;
    opacity: 0;
    border-radius: 0.4rem;
    pointer-events: none;
}

#activity-box .activity-vote-success.is-visible {
    opacity: 1;
}

#activity-box .activity-vote-success img {
    width: 2.625rem;
    height: 2.625rem;
}

#activity-box .activity-candidate-body {
    padding: .5rem .6rem .6rem;
}

#activity-box .activity-candidate-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .3rem;
    min-height: 3rem;
}

#activity-box .activity-candidate h3 {
    font-size: .8rem;
    font-weight: 500;
}

#activity-box .activity-candidate-work {
    margin-top: .125rem !important;
    color: #a4a5ad;
    font-size: .6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis
}

#activity-box .activity-vote-button {
    flex: 0 0 auto;
    min-width: 4rem;
    padding: .3rem .3rem;
    border: .0625rem solid #876832;
    border-radius: .3125rem;
    background: #3d3224;
    color: #fff0cf;
    font-size: .6875rem;
    cursor: pointer;
}

#activity-box .activity-vote-button.is-voted {
    border-color: var(--activity-gold);
    background: var(--activity-gold);
    color: #2d210e;
}

#activity-box .activity-vote-button:disabled {
    border-color: #464646;
    background: #464646;
    color: #bbb;
    cursor: not-allowed;
}

#activity-box .activity-candidate-footer {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    padding-top: .625rem;
    border-top: .0625rem solid #303035;
    color: #e5ca8e;
    font-size: .6rem;
}
#activity-box .activity-candidate-footer .pm-icon{
    width: 0.6rem;
    height: auto;
    margin-right: 0.2rem;
}

#activity-box .activity-candidate-footer span:last-child {
    color: #ff3e1c;
}

#activity-box .activity-countdown-label {
    display: flex;
    align-items: center;
    gap: .5625rem;
    margin-top: .6875rem !important;
    color: #e2e3e6 !important;
    font-size: .8125rem !important;
}

#activity-box .activity-countdown {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
}

#activity-box .activity-countdown b {
    min-width: 1.6875rem;
    padding: .125rem .25rem;
    border: .0625rem solid #1f2835;
    border-radius: .25rem;
    background: #080e15;
    color: #0bd4bd;
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: center;
}

#activity-box .activity-countdown i {
    color: #aeb0b9;
    font-size: .625rem;
    font-style: normal;
}

#activity-box .activity-prize-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .875rem;
    margin-top: 1.25rem;
}

#activity-box .activity-prize {
    position: relative;
    display: grid;
    min-height: 10.3125rem;
    place-items: center;
    padding: 1.4375rem .625rem .75rem;
    border-radius: .5rem;
    background: #151619;
    text-align: center;
}

#activity-box .activity-prize > span {
    position: absolute;
    top: 0;
    left: 0;
    padding: .25rem .6875rem;
    border-radius: .7rem 0 .7rem 0;
    background: var(--activity-teal);
    color: #eafffa;
    font-size: .6875rem;
}

#activity-box .activity-prize img {
    width: 5.125rem;
    height: 5.125rem;
    object-fit: contain;
    border-radius: .2rem;
}

#activity-box .activity-prize p {
    color: #e5e5e7;
    font-size: .75rem;
}

#activity-box .activity-rules {
    margin-top: 2.625rem;
    margin-bottom: 2.375rem;
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
    padding-left: 2.5rem;
    border: .0625rem solid #292a2f;
    border-radius: .4375rem;
    background: #151619;
}

#activity-box .activity-rules h2 {
    font-size: 1.1rem;
}

#activity-box .activity-rules ol {
    display: grid;
    gap: .625rem;
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
}

#activity-box .activity-rules li {
    display: flex;
    align-items: center;
    gap: .625rem;
    color: #b9bac1;
}

#activity-box .activity-rules b {
    display: grid;
    padding: 0.2rem 0.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .25rem;
    background: var(--activity-gold);
    color: #1c1710;
    font-weight: 500;
}

#activity-box .activity-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    overflow-y: auto;
    place-items: start center;
    padding: 1rem 1rem 5.5rem;
}

#activity-box .activity-modal[hidden] {
    display: none;
}

#activity-box .activity-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(1, 3, 12, .78);
}

#activity-box .activity-modal-dialog {
    position: relative;
    margin: auto 0;
    border: .125rem solid #5754a5;
    border-radius: .875rem;
    background: linear-gradient(135deg, #171331, #12131f);
    box-shadow: 0 .9375rem 3.125rem rgba(0, 0, 0, .5);
}

#activity-box .activity-ranking-dialog {
    width: 36rem;
    padding: 1rem 1.2rem 1.5rem 1.2rem;
}

#activity-box .activity-modal-close {
    position: absolute;
    z-index: 1;
    bottom: -4rem;
    left: 50%;
    width: 2.2rem;
    height: auto;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
}

#activity-box .activity-modal-close img {
    display: block;
    width: 100%;
    height: 100%;
}

#activity-box .activity-ranking-dialog h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem;
    color: #e5d6ff;
    font-size: 1rem;
    font-weight: 500;
}

#activity-box .activity-ranking-dialog h2 > img {
    width: 2.2rem;
    height: auto;
    object-fit: contain;
}

#activity-box .activity-ranking-dialog h2 small {
    padding: .25rem .75rem;
    border-radius: 1rem;
    /* background: #322960; */
    border: 1px solid #322960;
    color: rgba(159, 121, 225, 1);
    font-size: .65rem;
    font-weight: 400;
}

#activity-box .activity-ranking-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 1.125rem;
    margin-top: 3.2rem;
}

#activity-box .activity-ranking-list > div {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: end;
    padding: 1.5rem 0.5rem 1.5rem;
    border: .125rem solid #37305e;
    border-radius: .875rem;
    /* background: rgba(29, 25, 59, .72); */
    background: linear-gradient( to bottom, rgba(48, 42, 93, 1),rgba(24, 25, 46, 1));
}

#activity-box .activity-ranking-list .is-first {
    height: 108%;
    border-color: #dcaa5c;
    align-content: normal;
    /* background: rgba(69, 46, 67, .72); */
    background: linear-gradient( to bottom, rgba(65, 49, 71, 1),rgba(37, 31, 63, 1));
}

#activity-box .is-first .activity-rank-badge{
    top: -1.5rem;
    width: 3rem;
}
#activity-box .activity-rank-badge {
    position: absolute;
    top: -1.25rem;
    width: 2rem;
    height: auto;
    object-fit: contain;
}

#activity-box .activity-rank-avatar {
    width: 7rem;
    height: 7rem;
    border: .125rem solid #f2ca65;
    border-radius: 50%;
    object-fit: cover;
}

#activity-box .activity-ranking-list .is-first .activity-rank-avatar {
    width: 7rem;
    height: 7rem;
}

#activity-box .activity-rank-name {
    width: 4rem;
    height: auto;
    margin-top: .75rem;
    object-fit: contain;
}

#activity-box .activity-ranking-list h3 {
    margin-top: .5rem;
    font-size: 1.2rem;
    font-weight: 500;
}

#activity-box .activity-ranking-list p {
    margin-top: .5rem;
    color: #ece7fa;
    font-size: 0.8rem;
}

#activity-box .activity-winners-dialog {
    width: 35rem;
    padding: 1rem;
}

#activity-box .activity-winners-dialog h2 {
    text-align: center;
}

#activity-box .activity-winners-dialog h2 img {
    display: block;
    width: min(100%, 11rem);
    height: auto;
    margin: 0 auto 1rem;
}

#activity-box .activity-winners-table-wrap {
    overflow: hidden;
    border-radius: .625rem;
}

#activity-box .activity-winners-table {
    width: 100%;
    border-spacing: 0;
    table-layout: fixed;
    color: #f5f2ff;
    text-align: center;
}

#activity-box .activity-winners-col-rank {
    width: 15%;
}

#activity-box .activity-winners-col-name {
    width: 31%;
}

#activity-box .activity-winners-col-award {
    width: 27%;
}

#activity-box .activity-winners-col-prize {
    width: 27%;
}

#activity-box .activity-winners-table th,
#activity-box .activity-winners-table td {
    padding: .5rem .4rem;
    overflow-wrap: anywhere;
    border-right: .0625rem solid rgba(103, 94, 149, .2);
    font-size: 0.8rem;
    font-weight: 500;
}

#activity-box .activity-winners-table th {
    background: #352874;
}

#activity-box .activity-winners-table th:last-child,
#activity-box .activity-winners-table td:last-child {
    border-right: 0;
}

#activity-box .activity-winners-table tbody tr:nth-child(odd) {
    background: #16192e;
}

#activity-box .activity-winners-table tbody tr:nth-child(even) {
    background: #1d2035;
}

#activity-box .activity-winners-table td:first-child {
    padding: .6rem .4rem;
}

#activity-box .activity-winners-table td:first-child img {
    display: block;
    width: 1.5rem;
    height: auto;
    margin: auto;
    object-fit: contain;
}

#activity-box .activity-winners-table .is-first td:nth-child(3) {
    color: #f3ce78;
}

#activity-box .activity-winners-table .is-second td:nth-child(3) {
    color: #99aaff;
}

#activity-box .activity-winners-table .is-third td:nth-child(3) {
    color: #e99c72;
}

#activity-box .activity-winner-number {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    background: #4b4c80;
    color: #d9daea;
    font-size: 0.8rem;
}

#activity-box .activity-winners-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.375rem;
    padding: .625rem 1.1rem;
    border-radius: .625rem;
    background: #181b31;
    color: #d9d7e2;
    font-size: 0.8rem;
    text-align: center;
}

#activity-box .activity-winners-result[hidden] {
    display: none;
}

#activity-box .activity-winners-result.is-winner {
    justify-content: space-between;
    text-align: left;
}

#activity-box .activity-winners-result strong {
    color: #f1d28d;
    font-weight: 500;
}

#activity-box .activity-winner-confetti {
    width: 2rem;
    height: auto;
    display: inline-block;
    margin-right: .7rem;
    font-size: 2rem;
    vertical-align: middle;
}

#activity-box .activity-winners-service {
    padding: .5rem 1rem;
    border: .0625rem solid #d6a84d;
    border-radius: .625rem;
    background: linear-gradient(135deg, #4b3426, #2a2328);
    color: #ead8bf;
}


#activity-box .activity-prize-box {
    width: 100%;
}

#activity-box #activity-prize-title {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 720px) {
    html body.card .container{
        padding: 0;
    }
    #activity-box {
        margin-top: 0rem;
        font-size: .9375rem;
    }

    #activity-box .activity-hero {
        min-height: 17rem;
        padding: 2.5rem 0rem 0rem 0rem;
        background-position: 116% top;
        background-size: auto 10.5rem;
    }
    #activity-box .activity-hero-copy{
        padding-left: 1rem;
    }

    #activity-box .activity-stage,
    #activity-box .activity-voting,
    #activity-box .activity-prizes,
    #activity-box .activity-rules {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #activity-box .activity-title-image {
        width: min(67vw, 14rem);
    }

    #activity-box .activity-hero-prize {
        margin-top: .6875rem;
        font-size: .75rem;
    }

    #activity-box .activity-hero-time {
        margin-top: .875rem;
        font-size: .65rem;
    }

    #activity-box .activity-hero-actions {
        gap: .5625rem;
        margin-top: 1.375rem;
        width: 92%;
    }

    #activity-box .activity-button {
        min-width: 0;
        min-height: 2rem;
        padding: .4rem 1rem;
    }

    #activity-box .activity-voter-summary {
        margin-top: 1.3125rem;
        font-size: .625rem;
        white-space: nowrap;
    }

    #activity-box .activity-stage {
        display: block;
        margin: 0;
        padding-top: 2.0625rem;
        padding-bottom: 1.9375rem;
        border-width: 0 .0625rem .0625rem;
        border-radius: 0;
    }

    #activity-box .activity-stage-intro h2 {
        line-height: 1.45;
    }

    #activity-box .activity-stage-intro > p {
        margin-top: .625rem;
        font-size: 1rem;
    }

    #activity-box .activity-stage-intro > div {
        gap: .6875rem;
        margin-top: .6875rem;
    }

    #activity-box .activity-deadline {
        font-size: .6875rem;
    }

    #activity-box .activity-stage-list {
        margin-top: 2.3125rem;
        align-items: start;
    }

    #activity-box .activity-stage-list button {
        gap: .5625rem;
    }


    #activity-box .activity-stage-list span {
        width: 3.1875rem;
        height: 3.1875rem;
        font-size: .75rem;
    }

    #activity-box .activity-stage-list small {
        max-width: 3.5625rem;
        font-size: .6875rem;
    }

    #activity-box .activity-voting,
    #activity-box .activity-prizes {
        padding-top: 2.125rem;
    }

    #activity-box .activity-section-heading p {
        margin-top: .3125rem;
        font-size: 0.8rem;
        line-height: 1.55;
    }

    #activity-box .activity-draw-state {
        padding: .375rem .8125rem;
        font-size: .75rem;
    }
    #activity-box .activity-voting-header{
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    #activity-box .activity-group-tabs {
        justify-content: flex-start;
        gap: .6rem 0.8rem;
        margin-top: 1.0625rem;
        max-width: 100%;
    }

    #activity-box .activity-group-tabs button {
        min-width: 2.8rem;
        padding: .2rem .3rem;
        font-size: .8rem;
    }

    #activity-box .activity-candidate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
        margin-top: 1.5625rem;
    }


    #activity-box .activity-candidate h3 {
        font-size: .85rem;
    }

    #activity-box .activity-vote-button {
        min-width: 4.75rem;
    }

    #activity-box .activity-prizes {
        padding-bottom: 0;
    }

    #activity-box .activity-countdown-label {
        margin-top: .9375rem !important;
        font-size: 1rem !important;
    }

    #activity-box .activity-prize-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.125rem;
        margin-top: 1.25rem;
    }

    #activity-box .activity-prize {
        min-height: 9.75rem;
        padding: 1.8rem .375rem .625rem;
    }

    #activity-box .activity-prize-first {
        grid-column: 1 / -1;
        min-height: 11rem;
    }

    #activity-box .activity-prize img {
        width: 4rem;
        height: 5.4375rem;
    }

    #activity-box .activity-prize-first img {
        width: 6.5625rem;
        height: 7.4375rem;
    }

    #activity-box .activity-prize p {
        font-size: .6875rem;
        line-height: 1.35;
    }

    #activity-box .activity-rules {
        margin-top: 2.875rem;
        margin-bottom: 2rem;
        padding-top: 2.0625rem;
        padding-bottom: 2.1875rem;
        border-width: .0625rem .0625rem 0;
        border-radius: 0;
    }

    #activity-box .activity-rules ol {
        gap: 1.375rem;
        margin-top: 1.5625rem;
    }

    #activity-box .activity-rules li {
        align-items: center;
        gap: .75rem;
        color: #c5c5ca;
        font-size: 0.8rem;
        line-height: 1.45;
    }

    #activity-box .activity-rules b {
        font-size: 0.9rem;
    }

    #activity-box .activity-modal {
        align-items: start;
        padding: .5rem .5rem 4.75rem;
    }

    #activity-box .activity-ranking-dialog {
        width: calc(100vw - 1rem);
        padding: .5rem .5rem 1.5rem;
        border-radius: .625rem;
    }

    #activity-box .activity-ranking-dialog h2 {
        gap: .375rem;
        font-size: 0.9rem;
    }

    #activity-box .activity-ranking-dialog h2 > img {
        width: 2rem;
        height: auto;
    }

    #activity-box .activity-ranking-dialog h2 small {
        padding: .125rem .375rem;
        font-size: .625rem;
    }

    #activity-box .activity-ranking-list {
        gap: .375rem;
        margin-top: 3rem;
    }

    #activity-box .activity-ranking-list > div {
        min-height: 11.75rem;
        padding: 1.2rem .25rem .75rem;
        border-width: .0625rem;
        border-radius: .5rem;
    }

    #activity-box .activity-ranking-list .is-first {
        min-height: 13.5rem;
    }
    #activity-box .is-first .activity-rank-badge{
        top: -1.5rem;
        width: 2.8rem;
    }
    #activity-box .activity-rank-badge {
        top: -1rem;
        width: 1.8rem;
        height: auto;
    }

    #activity-box .activity-rank-avatar,
    #activity-box .activity-ranking-list .is-first .activity-rank-avatar {
        width: clamp(4.5rem, 21vw, 6rem);
        height: clamp(4.5rem, 21vw, 6rem);
        border-width: .0625rem;
    }

    #activity-box .activity-rank-name {
        width: 4.25rem;
        height: 1.375rem;
        margin-top: .375rem;
    }

    #activity-box .activity-ranking-list h3 {
        margin-top: .125rem;
        font-size: 1rem;
    }

    #activity-box .activity-ranking-list p {
        margin-top: .25rem;
        font-size: .75rem;
    }

    #activity-box .activity-winners-dialog {
        width: calc(100vw - 1rem);
        padding: 1rem .75rem 1rem;
        border-radius: .625rem;
    }

    #activity-box .activity-winners-dialog h2 img {
        width: min(70vw, 11rem);
        margin-bottom: 1.2rem;
    }

    #activity-box .activity-winners-table-wrap {
        border-radius: .5rem;
    }

    #activity-box .activity-winners-table th,
    #activity-box .activity-winners-table td {
        padding: .65rem .25rem;
        font-size: .75rem;
        line-height: 1.35;
    }


    #activity-box .activity-winners-table td:first-child {
        padding: .25rem;
    }

    #activity-box .activity-winners-table td:first-child img {
        width: 1.5rem;
        height: auto;
    }

    #activity-box .activity-winner-number {
        width: 1.5rem;
        height: 1.5rem;
        font-size: .8rem;
    }

    #activity-box .activity-winners-result {
        gap: .5rem;
        margin-top: 1rem;
        padding: .5rem .7rem;
        border-radius: .5rem;
        font-size: .75rem;
    }

    #activity-box .activity-winner-confetti {
        margin-right: .375rem;
        font-size: 1.375rem;
    }

    #activity-box .activity-winners-service {
        min-width: 5rem;
        min-height: 2.1rem;
        padding: .375rem .5rem;
        border-radius: .5rem;
        font-size: .75rem;
    }
}

@media (max-width: 360px) {
    #activity-box .activity-stage,
    #activity-box .activity-voting,
    #activity-box .activity-prizes,
    #activity-box .activity-rules {
        padding-right: .875rem;
        padding-left: .875rem;
    }

    #activity-box .activity-stage-intro h2 {
        font-size: 1rem;
    }

    #activity-box .activity-stage-list span {
        width: 2.8125rem;
        height: 2.8125rem;
        font-size: .6875rem;
    }

    #activity-box .activity-group-tabs {
        gap: .5rem;
    }

    #activity-box .activity-group-tabs button {
        min-width: 3rem;
    }

    #activity-box .activity-candidate-grid {
        gap: .625rem;
    }

    #activity-box .activity-vote-button {
        min-width: 3.9375rem;
        font-size: .625rem;
    }


    #activity-box .activity-ranking-dialog {
        padding-right: .375rem;
        padding-left: .375rem;
    }

    #activity-box .activity-ranking-list {
        gap: .25rem;
    }

    #activity-box .activity-ranking-list > div {
        padding-right: .125rem;
        padding-left: .125rem;
    }
}