.sea { background-color: #7ec0ff; }
        .port { background-color: #2b80bf; color: #fff; }
        .oilRig { background: linear-gradient(#7ec0ff, #0056a3); color: #fff; }
        .plain { background-color: #e6ffcc; }
        .waste { background-color: #cfcfcf; }
        .forest { background-color: #2ea82e; color: #fff; }
        .mountain { background: linear-gradient(#876541, #5c432a); color: #fff; }
        .farm { background-color: #c4f08a; }
        .house { background-color: #ffe89e; }
        .factory { background-color: #d1d1ff; }
        .gun { background-color: #555555; color: #fff; }
        .defenseFacility { background-color: #ff99bb; }
        .Monument { background-color: #e3cf8a; }
        .warship { background: linear-gradient(#7ec0ff, #5092c4); color: #fff; }
        .warship-dispatched { background-color: #0c437a; color: #fff; }
        .warship-wreckage { background-color: #444; color: #ccc; }
        .monster { background-color: #ff9999; box-shadow: inset 0 0 5px red; }

        /* グリッドコンテナとセルのホバー設定 */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(16, minmax(0, 1fr));
            aspect-ratio: 1 / 1;
        }
        .map-cell {
            aspect-ratio: 1 / 1;
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }
        .map-cell:hover {
            filter: brightness(1.1);
            transform: scale(1.05);
            z-index: 20;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
        }

        /* 建築・爆発時などのピカッと光り弾けるアニメーション */
        @keyframes tile-pop {
            0% { transform: scale(1); filter: brightness(1); }
            45% { transform: scale(1.25); filter: brightness(1.6) saturate(1.3); box-shadow: 0 0 10px #fbbf24; }
            100% { transform: scale(1); filter: brightness(1); }
        }
        .animate-build {
            animation: tile-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            z-index: 30;
        }
        @keyframes tile-explode {
            0% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.4); filter: brightness(2) contrast(2); background-color: #ff3333; box-shadow: 0 0 20px #ff0000; }
            100% { transform: scale(1); filter: brightness(1); }
        }
        .animate-explode {
            animation: tile-explode 0.6s ease-out forwards;
            z-index: 30;
        }

        /* 文字送りアニメーション用のカーソル */
        @keyframes blink {
            50% { border-color: transparent }
        }
        .typing-cursor::after {
            content: '';
            border-right: 3px solid #3b82f6;
            animation: blink 0.7s step-end infinite;
            margin-left: 2px;
        }

        /* どこでもタップエリアの波紋アニメーション */
        @keyframes tap-pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }
        .tap-pulse-text {
            animation: tap-pulse 1.5s infinite;
        }