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

/* html/bodyは必ず100%とoverflow:hiddenを指定 */
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, #f093fb 0%, #f5576c 100%);
}

/* ========================================
   キャンバスの場合（推奨サイズ: 800x600）
   ======================================== */

#gameCanvas {
    /* 中央配置 */
    display: block;

    /* 固定サイズ（デスクトップ） */
    width: 800px;
    height: 600px;

    /* 背景色（池の色） */
    background-color: #89cff0;

    /* 枠線（金魚すくいの桶のイメージ） */
    border: 4px solid #8b4513;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    /* 画面からはみ出さないように最大サイズを制限 */
    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); /* 4:3のアスペクト比 */
    }
}

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

@media (max-width: 768px) and (orientation: landscape) {
    #gameCanvas {
        /* 横向きでは高さに合わせる */
        width: calc(95vh * 1.33); /* 4:3のアスペクト比 */
        height: 95vh;
    }
}