body {
    font-family: sans-serif;
    font-size:18px;
    margin: 10px; /* マージンを小さく */
    background-color: #f4f4f9;
    color: #333;
}
input,textarea{
    font-size:18px;
}
/* ユーザー情報バーのスタイル */
#user-info-bar {
    margin-bottom: 20px;
}
#username-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
#username-input {
    flex-grow: 1;
    max-width: 300px;
}

/* グリッドコンテナの基本設定 */
#container {
    display: grid;
    /* デスクトップ表示: マップを左、フォームを右に、コレクションを下に広く配置 */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.pane {
    background: #fff;
    padding: 15px; /* パディングを少し減らす */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#map-pane {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: center;
}

#input-pane {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#collection-pane {
    grid-column: 1 / 3; /* コレクションは常にフル幅 */
    grid-row: 2 / 3;
}
/* マップ上のツールチップ */
#map-tooltip {
    position: fixed; /* 画面上の絶対位置 */
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    pointer-events: none; /* マウスイベントを邪魔しない */
    display: none; /* 初期状態は非表示 */
    z-index: 1000;
    white-space: pre-line; /* 改行を有効化 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border: 1px solid #555;
}

/* マップのキャンバスをレスポンシブに調整 */
#hilbert-map {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    display: block; /* センタリングのため */
    margin: 0 auto;
}

/* フォームのスタイル (変更なし) */
#add-ip-form label, #add-ip-form input, #add-ip-form select, #add-ip-form textarea {
    display: block;
    width: 90%;
    margin-bottom: 10px;
}
/* ... その他のフォームスタイル省略 ... */

/* コレクションカードのスタイル */
#collection-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.ip-card {
    /* スマートフォンでも見やすいように幅を調整 */
    width: 200px; 
    flex-grow: 1; /* スペースに応じて拡張 */
    border: 3px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.ip-card:hover {
    transform: translateY(-3px);
}

.ip-card h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.2em;
}
/* =========================================== */
/* 📱 モバイル対応: 画面幅が狭い場合のレイアウト変更 */
/* =========================================== */
@media (max-width: 768px) {
    #container {
        /* 1カラムの縦積みレイアウトに変更 */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    #map-pane, #input-pane, #collection-pane {
        grid-column: 1 / 2; /* すべてのペインを1列目に配置 */
        grid-row: auto;
    }

    #username-form {
        flex-direction: column;
        align-items: stretch;
    }
    #username-input, #load-data-btn {
        max-width: none;
    }

    /* マップとフォームを続けて配置 */
    #map-pane { order: 1; }
    #input-pane { order: 2; }
    #collection-pane { order: 3; }

    .ip-card {
        width: 100%; /* カードをフル幅表示 */
    }
}

/* レアリティごとの色分け */

.rarity-Common { border-color: #4caf50; background-color: #e8f5e9; } /* Green */

.rarity-Rare { border-color: #ff9800; background-color: #fff3e0; }    /* Orange */

.rarity-Super { border-color: #f44336; background-color: #ffebee; }   /* Red */

.rarity-Legendary { border-color: #9c27b0; background-color: #f3e5f5; } /* Purple */