/* Новый экран ежедневного чекина поверх предоставленного 7-дневного макета. */
.overlay.overlay-hud-modal:has(#win-checkin:not(.hidden)),
.overlay:has(#win-checkin:not(.hidden)) {
    align-items: center;
    justify-content: center;
    padding: 4px;
}

#win-checkin {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: min(96vw, 118dvh, 980px);
    height: auto;
    max-width: 96vw;
    max-height: none;
    aspect-ratio: 1444 / 1089;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #e8f8ff;
}

/* Убираем унаследованную линию .window, которой нет в макете чекина. */
#win-checkin::before {
    content: none;
}

#win-checkin > .checkin-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

#win-checkin .checkin-sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#win-checkin > .checkin-status {
    position: absolute;
    top: 25.5%;
    left: 15%;
    z-index: 1;
    display: flex;
    width: 70%;
    height: 5.6%;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #a7ebff;
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: clamp(9px, 1.6cqw, 16px);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.1;
    text-align: center;
    transform: translateY(-1px);
    text-shadow: 0 1px 3px #00101d, 0 0 7px rgba(0, 204, 255, .38);
    white-space: nowrap;
}

#win-checkin .checkin-status strong {
    margin: 0 .28em;
    color: #fff0a4;
    font-weight: 900;
}

#win-checkin > .checkin-scroll {
    position: absolute;
    top: 35.25%;
    left: 5.55%;
    z-index: 1;
    width: 88.9%;
    height: 33.65%;
    overflow: visible;
    padding: 0;
}

#win-checkin .checkin-grid-7 {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1.1%;
    margin: 0;
}

#win-checkin .checkin-cell {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2%;
    overflow: hidden;
    padding: 1cqw .16cqw .5cqw;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e9faff;
    text-align: center;
}

#win-checkin .checkin-cell::before {
    position: absolute;
    inset: 2%;
    z-index: 0;
    border: 1px solid transparent;
    content: '';
    pointer-events: none;
    clip-path: polygon(8% 0, 92% 0, 100% 5%, 100% 93%, 92% 100%, 8% 100%, 0 93%, 0 5%);
}

#win-checkin .checkin-cell-day {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 15%;
    flex: 0 0 15%;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e8f8ff;
    font-size: clamp(7px, 1.2cqw, 12px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 3px #00101d, 0 0 5px rgba(32, 203, 255, .55);
}

#win-checkin .checkin-cell-reward {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 3% 4%;
    overflow: hidden;
    color: #effbff;
    font-size: clamp(12px, 2.05cqw, 20px);
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 1px 3px #00101d, 0 0 5px rgba(0, 12, 28, .95);
    overflow-wrap: anywhere;
}

#win-checkin .checkin-cell .checkin-cell-reward .checkin-reward-item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff0a4;
    font-size: clamp(14px, 2.05cqw, 20px);
    font-weight: 900;
    white-space: nowrap;
}

#win-checkin .checkin-cell-reward .res-gfx-inline,
#win-checkin .checkin-cell-reward .part-gfx-inline {
    width: clamp(16px, 2.65cqw, 26px);
    height: clamp(16px, 2.65cqw, 26px);
    flex: 0 0 auto;
    vertical-align: middle;
}

#win-checkin .checkin-cell-reward .res-gfx-inline svg,
#win-checkin .checkin-cell-reward .part-gfx-inline svg {
    width: 100%;
    height: 100%;
}

#win-checkin .checkin-cell.current {
    filter: brightness(1.16);
}

#win-checkin .checkin-cell.current::before {
    inset: 0;
    border: 2px solid rgba(105, 244, 255, .98);
    background: rgba(0, 190, 255, .18);
    box-shadow: 0 0 18px rgba(0, 217, 255, .62), inset 0 0 18px rgba(0, 217, 255, .22);
}

#win-checkin .checkin-cell.current .checkin-cell-day {
    color: #fff2a6;
    text-shadow: 0 0 9px rgba(0, 217, 255, .9), 0 0 4px #00101d;
}

#win-checkin .checkin-cell.done::after {
    position: absolute;
    top: 2%;
    right: 5%;
    z-index: 2;
    color: #8cffad;
    content: '✓';
    padding: .18em .28em;
    border: 1px solid rgba(140, 255, 173, .65);
    background: rgba(3, 20, 18, .9);
    font-size: clamp(8px, 1.35cqw, 13px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 7px rgba(48, 255, 113, .75);
    box-shadow: 0 0 7px rgba(48, 255, 113, .32);
}

#win-checkin .checkin-cell.done::before {
    border-color: rgba(140, 255, 173, .32);
    background: rgba(2, 10, 22, .38);
}

#win-checkin .checkin-cell.done .checkin-cell-day,
#win-checkin .checkin-cell.done .checkin-cell-reward {
    opacity: .62;
    filter: grayscale(.35);
}

#win-checkin .checkin-cell.locked .checkin-cell-day,
#win-checkin .checkin-cell.locked .checkin-cell-reward {
    opacity: .68;
}

#win-checkin .checkin-cell.next {
    filter: brightness(1.06);
}

#win-checkin .checkin-cell.next::before {
    inset: 0;
    border: 2px solid rgba(255, 221, 105, .88);
    background: rgba(255, 193, 46, .1);
    box-shadow: 0 0 14px rgba(255, 196, 55, .42), inset 0 0 14px rgba(255, 196, 55, .12);
}

#win-checkin .checkin-cell.next .checkin-cell-day {
    color: #ffe37c;
    opacity: 1;
    text-shadow: 0 0 8px rgba(255, 196, 55, .72), 0 1px 3px #00101d;
}

#win-checkin .checkin-cell.next .checkin-cell-reward {
    opacity: .9;
    filter: none;
}

#win-checkin .checkin-cell.milestone .checkin-cell-day::after {
    color: #ffe37c;
    content: ' ★';
    font-size: .8em;
}

#win-checkin > .checkin-today {
    position: absolute;
    top: 70.5%;
    left: 6.2%;
    z-index: 1;
    display: flex;
    width: 87.6%;
    height: 12%;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 2% 1em;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e4faff;
    font-size: clamp(7px, 1.12cqw, 12px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 3px #00101d, 0 0 6px rgba(0, 8, 24, .95);
}

#win-checkin .checkin-today strong {
    color: #fff0a4;
}

#win-checkin .checkin-today .checkin-reward-item {
    font-size: inherit;
}

#win-checkin .checkin-today .res-gfx-inline,
#win-checkin .checkin-today .part-gfx-inline {
    width: clamp(9px, 1.55cqw, 16px);
    height: clamp(9px, 1.55cqw, 16px);
    flex: 0 0 auto;
    vertical-align: middle;
}

#win-checkin .checkin-today .btn-streak-claim {
    appearance: none;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    clip-path: none;
    color: #f1fcff;
    font-family: 'Press Start 2P', 'Orbitron', monospace;
    font-size: clamp(12px, 2.25cqw, 22px);
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    text-shadow: 0 0 9px rgba(95, 232, 255, .72);
    touch-action: manipulation;
    cursor: pointer;
}

#win-checkin .checkin-today .btn-streak-claim:hover:not(:disabled) {
    color: #fff0a4;
    text-shadow: 0 0 10px rgba(255, 225, 117, .85), 0 0 18px rgba(0, 211, 255, .58);
}

#win-checkin .checkin-today .btn-streak-claim:focus-visible:not(:disabled) {
    outline: 2px solid #fff2a6;
    outline-offset: -5px;
}

#win-checkin .checkin-today .btn-streak-claim:active:not(:disabled) {
    filter: brightness(1.18);
    transform: translateY(1px);
}

#win-checkin .checkin-today .checkin-claimed {
    color: #8cffad;
    font-family: 'Press Start 2P', 'Orbitron', monospace;
    font-size: clamp(10px, 1.8cqw, 18px);
    font-weight: 700;
    text-shadow: 0 0 9px rgba(48, 255, 113, .55);
}

@media (max-width: 420px) {
    #win-checkin .checkin-cell-reward {
        font-size: clamp(10px, 3.4cqw, 12px);
    }

    #win-checkin .checkin-cell-reward .res-gfx-inline,
    #win-checkin .checkin-cell-reward .part-gfx-inline {
        width: clamp(13px, 4.2cqw, 16px);
        height: clamp(13px, 4.2cqw, 16px);
    }

    #win-checkin .checkin-cell .checkin-cell-reward .checkin-reward-item {
        font-size: clamp(11px, 3.4cqw, 13px);
    }

    #win-checkin .checkin-today {
        font-size: clamp(7px, 1.55cqw, 9px);
    }
}

/* Override the legacy desktop sizing so the artwork keeps its intended aspect ratio. */
html.layout-pc #win-checkin {
    width: min(96vw, 118dvh, 980px);
    max-width: 96vw;
    max-height: none;
    padding: 0;
}

html.layout-pc #win-checkin .checkin-cell-reward {
    font-size: clamp(12px, 2.05cqw, 20px);
}