スーパーマリオ風 ゲームウォッチローディングアニメーション

<div class="gamewatch">
    <!-- 左サイド (十字キー) -->
    <div class="left-side">
        <div class="d-pad">
            <div class="dpad-part dpad-right dpad-shadow"></div>
            <div class="dpad-part dpad-down dpad-shadow"></div>
            <div class="dpad-part dpad-up"></div>
            <div class="dpad-part dpad-right"></div>
            <div class="dpad-part dpad-down"></div>
            <div class="dpad-part dpad-left"></div>
            <div class="dpad-part dpad-center"></div>
        </div>
    </div>

    <!-- 中央エリア (画面・ロゴ) -->
    <div class="center-area">
        <div class="screen-container">
            <div class="screen-display">
                <div class="scene">
                    <div class="block" id="block"></div>
                    <div class="loading-popup" id="popup">LOADING</div>
                    <div class="mario jump"></div>
                </div>
                <div class="ground"></div>
            </div>
        </div>
    </div>
    
    <!-- 左上ロゴプレート -->
    <div class="gw-logo-plate">
        <div class="gw-text">LOAD<br>&<br>WATCH</div>
    </div>

    <!-- 右サイド (ボタン) -->
    <div class="right-side">
        <div class="mode-buttons">
            <div class="mode-btn-group">
                <div class="mode-btn"></div>
                <div class="mode-label">GAME</div>
            </div>
            <div class="mode-btn-group">
                <div class="mode-btn"></div>
                <div class="mode-label">TIME</div>
            </div>
            <div class="mode-btn-group">
                <div class="mode-btn"></div>
                <div class="mode-label">PAUSE/RESET</div>
            </div>
        </div>

        <div class="action-btn-container">
            <div class="action-btn"></div>
            <div class="action-label">JUMP</div>
        </div>
    </div>
</div>

:root {
    --pixel-size: 3px;
    --bg-color: #5c94fc;
    --ground-height: 48px;
    --block-size: 24px;
    --question-block-size: calc(var(--pixel-size) * 16);
    --question-block-bottom: 95px;
    --gw-face-gradient-start: #e8e8e8;
    --gw-face-gradient-end: #bfbfbf;
    --gw-accent-border: #b0192b;
}

/* Game & Watch 本体 */
.gamewatch {
    width: 800px;
    height: 480px;
    background: linear-gradient(135deg, var(--gw-face-gradient-start) 0%, var(--gw-face-gradient-end) 100%);
    border-radius: 40px;
    border: 10px solid var(--gw-accent-border);
    box-shadow: 
        inset 3px 3px 6px rgba(255,255,255,0.4),
        inset -3px -3px 6px rgba(0,0,0,0.3),
        0 20px 50px rgba(0,0,0,0.6);
    /* ... */
}

/* マリオのピクセルアート（box-shadowで描画） */
.mario {
    width: var(--pixel-size);
    height: var(--pixel-size);
    background-color: transparent;
    position: absolute;
    bottom: calc(var(--pixel-size) * -1);
    left: 58%;
    margin-left: calc(var(--pixel-size) * -6);
    z-index: 10;
    transform: scaleX(-1);
    
    /* 通常時のスプライト */
    --mario-sprite-run:
        /* 帽子（赤） */
        calc(var(--pixel-size) * 3) calc(var(--pixel-size) * -11) 0 0 #d9001b,
        calc(var(--pixel-size) * 4) calc(var(--pixel-size) * -11) 0 0 #d9001b,
        /* 顔（肌色） */
        calc(var(--pixel-size) * 2) calc(var(--pixel-size) * -9) 0 0 #fca044,
        /* ... その他のピクセル ... */;
    
    /* ジャンプ時のスプライト */
    --mario-sprite-jump:
        /* 手の位置が変わる */
        calc(var(--pixel-size) * 1) calc(var(--pixel-size) * -8) 0 0 #fca044,
        /* ... その他のピクセル ... */;

    box-shadow: var(--mario-sprite-run);
    transform-origin: center bottom;
}

.mario.jump {
    animation: marioJump 1.2s cubic-bezier(0.35, 0, 0.45, 1) infinite;
}

@keyframes marioJump {
    0% { transform: translateY(0) scaleX(-1); box-shadow: var(--mario-sprite-run); }
    45% { transform: translateY(-60px) scaleX(-1); box-shadow: var(--mario-sprite-jump); }
    55% { transform: translateY(-60px) scaleX(-1); box-shadow: var(--mario-sprite-jump); }
    100% { transform: translateY(0) scaleX(-1); box-shadow: var(--mario-sprite-run); }
}

const block = document.getElementById('block');
const popup = document.getElementById('popup');

setInterval(() => {
    setTimeout(() => {
        hitBlock();
    }, 540);
}, 1200);

function hitBlock() {
    block.classList.remove('hit');
    void block.offsetWidth;
    block.classList.add('hit');

    popup.classList.remove('active');
    void popup.offsetWidth;
    popup.classList.add('active');
}

setTimeout(() => hitBlock(), 540);