/* src/main/resources/static/css/spider.css */

/*
 * 전체 게임 컨테이너 (Canvas를 담는 역할)
 * - 기존 블로그 레이아웃을 해치지 않도록 최소한의 스타일만 적용
 */
#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #008000;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

/*
 * 캔버스 스타일
 * - 배경을 초록색으로 설정하고, 테두리를 추가
 * - 화면 크기에 맞춰 비율을 유지하며 최대 크기 제한
 */
#gameCanvas {
    background-color: #008000;
    border: 2px solid #fff;
    max-width: 90vw;
    max-height: 90vh;
    box-sizing: border-box;
}

/*
 * 카드 이동 애니메이션 (Canvas 로직에서는 사용하지 않지만, 향후 재사용을 위해 남겨둠)
 */
@keyframes moveCard {
    from {
        transform: translate(var(--fromX), var(--fromY));
    }
    to {
        transform: translate(var(--toX), var(--toY));
    }
}