/* ==========================================================
   🗺️ 地図のマーカー（顔アイコン）・ネームタグ・表示項目の共通スタイル
   拠点マップ（minecraft_map.html）と地図の比較画面（map_compare.html）で共通。
   色は「地図の表示項目」の設定（color-customizer.js）が CSS 変数で上書きする
   ========================================================== */
:root {
    --custom-void-bg: #141417;
    --custom-grid-color: #ffffff;
    --custom-x-axis-color: #ef4444;
    --custom-z-axis-color: #3b82f6;
    --custom-panel-bg: #1a1a1f;
    --custom-icon-border: #4caf50;
    --custom-icon-bg: #26262b;
    --custom-text-color: #ffffff;
    --custom-text-bg: rgba(26, 26, 31, 0.85);
}
/* 🗺️ 背景の地図画像（マイクラの地図のドット絵）は拡大・縮小してもぼかさずに表示する */
.leaflet-image-layer {
    image-rendering: pixelated;
}
/* 💡 マップ上に「常に表示されるメンバー名ネームタグ」のカスタムスタイル */
.permanent-name-label {
    background: var(--custom-text-bg) !important;
    border: 1px solid #4caf50 !important;
    color: var(--custom-text-color) !important;
    font-weight: bold !important;
    font-size: 10px !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    white-space: nowrap;
    text-align: center;
    line-height: 1.3;
}
.permanent-name-label .coord-line {
    font-weight: normal;
    font-size: 10px;
    color: var(--custom-text-color);
    margin-top: 1px;
}
/* 🔍 スマホ幅ではズームアウト時にアイコン同士が密集して見にくくなるため、座標を非表示にする */
/* PC幅では常に座標を表示する（このメディアクエリの外なので対象外）。low-zoom は map-grid.js が付ける */
@media (max-width: 768px) {
    .leaflet-container.low-zoom .permanent-name-label .coord-line {
        display: none;
    }
}
/* 💡 未登録状態のネームタグを少し目立たなくするスタイル */
.permanent-name-label.unregistered {
    border: 1px solid #55555d !important;
    color: #88888f !important;
    opacity: 0.6;
}
.permanent-name-label.unregistered .coord-line {
    color: #88888f;
}
/* 🗺️ 地図の表示項目：区画の枠線・顔アイコン・名前・座標の表示切り替え（名前・座標が両方OFFならネームタグごと隠す）
   .map-display-target は「地図の表示項目」の設定（拠点マップ）、.compare-display は地図の比較画面の地図1枚ごとの設定 */
.map-display-target.hide-plots .plot-frame,
.map-display-target.hide-faces .leaflet-marker-pane,
.map-display-target.hide-names .permanent-name-label .name-line,
.map-display-target.hide-coords .permanent-name-label .coord-line,
.map-display-target.hide-names.hide-coords .leaflet-tooltip-pane,
.compare-display.hide-plots .plot-frame,
.compare-display.hide-faces .leaflet-marker-pane,
.compare-display.hide-names .permanent-name-label .name-line,
.compare-display.hide-coords .permanent-name-label .coord-line,
.compare-display.hide-names.hide-coords .leaflet-tooltip-pane {
    display: none !important;
}
/* 📋 配置図を表示している時は、配置図に名前が書いてあるので区画の枠線・顔アイコン・ネームタグを隠す */
.layout-mode .plot-frame,
.layout-mode .leaflet-marker-pane,
.layout-mode .leaflet-tooltip-pane {
    display: none !important;
}
/* 吹き出しの小さな矢印を非表示にする */
.permanent-name-label::before {
    display: none !important;
}
/* 👤 顔アイコン（メンバーの顔画像）マーカーのスタイル */
.avatar-marker {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-marker img {
    width: 100%;
    image-rendering: pixelated; /* 顔アイコンのドット絵をくっきり表示 */
    height: 100%;
    object-fit: cover;
    border: 2px solid var(--custom-icon-border);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    background-color: var(--custom-icon-bg);
}
/* 📍 メンバーではない「場所」の目印は、区別しやすいよう青系の枠線にする */
.avatar-marker.location-marker img {
    border-color: #3b82f6;
}
/* 未登録（名前が空白）の場合は少し目立たなく */
.avatar-marker.unregistered img {
    border: 2px solid #55555d;
    box-shadow: none;
    opacity: 0.55;
    filter: grayscale(1);
}

/* 🟩 メンバーの顔アイコンは区画の枠いっぱいに表示（大きさ --face-px はズームに合わせて member-list.js が更新） */
.plot-fill {
    position: absolute;
    transform: translate(-50%, -50%);
}
.avatar-marker.plot-fill {
    width: var(--face-px, 32px);
    height: var(--face-px, 32px);
}
.avatar-marker-group.plot-fill {
    width: var(--face-px, 32px);
}
.avatar-marker-group.plot-fill .avatar-marker {
    flex: 1;
    width: auto;
    height: auto;
    aspect-ratio: 1;
}

/* 👥 1拠点に2人いる場合、顔アイコンを2つ並べて表示 */
.avatar-marker-group {
    display: flex;
    align-items: center;
    gap: 3px;
}
.avatar-marker-group .avatar-marker {
    width: 32px;
    height: 32px;
}

/* 📷 スクリーンショット（js/map/screenshot.js）の知らせと、スマホで撮った画像を表示して共有メニューへ進む画面。拠点マップ・地図の比較画面で共通 */
.screenshot-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 3000;
    background: rgba(26, 26, 31, 0.95);
    border: 1px solid #4caf50;
    color: #ffffff;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    max-width: calc(100vw - 32px);
}
.screenshot-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.screenshot-sheet {
    background: #1a1a1f;
    border: 1px solid #333339;
    border-radius: 12px;
    padding: 12px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.screenshot-sheet img {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 6px;
    -webkit-touch-callout: default; /* 長押しで保存できるようにする */
}
.screenshot-hint {
    margin: 0;
    font-size: 12px;
    color: #9ca39a;
    text-align: center;
}
.screenshot-actions {
    display: flex;
    gap: 8px;
}
.screenshot-actions button {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
}
.screenshot-share { background: #4caf50; color: #ffffff; }
.screenshot-close { background: #2a2a30; color: #e5ece3; border: 1px solid #44444b; }