/* ========================================
   基本設定（必須）
   ======================================== */

html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #1a1a2e;
}

/* ========================================
   ゲームコンテナ
   ======================================== */

.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 100%);
}

/* ========================================
   キャンバス（800x600固定）
   ======================================== */

#gameCanvas {
    display: block;
    width: 800px;
    height: 600px;
    background-color: #87CEEB;
    border: 2px solid #333;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ========================================
   レスポンシブ対応（タブレット）
   ======================================== */

@media (max-width: 1024px) {
    #gameCanvas {
        width: 700px;
        height: 525px;
    }
}

/* ========================================
   レスポンシブ対応（スマホ縦向き）
   ======================================== */

@media (max-width: 768px) {
    #gameCanvas {
        width: 95vw;
        height: calc(95vw * 0.75);
    }
}

/* ========================================
   レスポンシブ対応（スマホ横向き）
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    #gameCanvas {
        width: calc(95vh * 1.33);
        height: 95vh;
    }
}