/* ===== 40th 页面专用样式 ===== */

/* 覆盖深色模式背景变量 */
:root {
    --bg-image: url('./img/bg1.png');
}

/* 马里奥棋盘格背景 */
.mario-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.chess-grid {
    display: flex;
    flex-direction: column;
    animation: goDiagonal 15s linear infinite;
    will-change: transform;
}

.chess-row {
    display: flex;
    height: 200px;
    width: max-content;
}

.chess-unit {
    width: 200px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mario-unit {
    width: 120px;
    height: 120px;
    image-rendering: pixelated;
    animation: walk 0.8s steps(1) infinite;
}

.badge-unit {
    width: 140px;
    height: 140px;
    background: url('img/40th.png') center/contain no-repeat;
}

@keyframes goDiagonal {
    from { transform: translate(0, 0); }
    to { transform: translate(-400px, -400px); }
}

@keyframes walk {
    0% { background-image: url('img/mw0.png'); }
    25% { background-image: url('img/mw1.png'); }
    50% { background-image: url('img/mw2.png'); }
    75% { background-image: url('img/mw3.png'); }
    100% { background-image: url('img/mw0.png'); }
}

/* 移动端隐藏侧边装饰 */
@media (max-width: 992px) {
    .side-left,
    .side-right {
        display: none;
    }
}

@media (max-width: 1200px) {
    .side-graphic {
        display: none;
    }
}

/* 社交链接 moon 图标 */
.social-moon {
    width: 30px;
    height: 30px;
    display: block;
    background-image: var(--moon-img);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transition: background-image 0.3s;
}

@media (max-width: 992px) {
    .deco-left,
    .deco-right {
        display: none;
    }
}