/* === squaremap custom theme — KanjiMC / Mojinomori design === */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Kosugi+Maru&display=swap');

:root {
    --km-bg: #E8F4EC;
    --km-bg-card: #FFFFFF;
    --km-ink: #1F3A2A;
    --km-ink-soft: #4A6B58;
    --km-ink-mute: #88A595;
    --km-green-900: #1B4A2E;
    --km-green-700: #2D7A4F;
    --km-green-600: #3F9560;
    --km-green-500: #4FAE73;
    --km-green-400: #7BC79A;
    --km-green-300: #A6DCBC;
    --km-green-200: #CDEAD8;
    --km-green-100: #E1F2E7;
    --km-green-50: #EFF8F2;
    --km-radius: 14px;
    --km-radius-pill: 999px;
    --km-shadow: 0 2px 6px rgba(31,58,42,.05), 0 8px 24px rgba(31,58,42,.06);
    --km-shadow-lg: 0 8px 24px rgba(31,58,42,.08), 0 24px 60px rgba(31,58,42,.1);
    --km-border: 1px solid rgba(45,122,79,0.08);
}

/* --- body & map background --- */
body, #map, .leaflet-container {
    background: var(--km-bg);
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--km-ink);
}

/* --- zoom controls --- */
.leaflet-bar {
    box-shadow: var(--km-shadow);
    border-radius: var(--km-radius) !important;
    overflow: hidden;
    border: var(--km-border);
}
.leaflet-bar a {
    background-color: var(--km-bg-card);
    border-bottom: 1px solid var(--km-green-200);
    color: var(--km-ink);
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.leaflet-bar a:first-child { border-radius: var(--km-radius) var(--km-radius) 0 0; }
.leaflet-bar a:last-child { border-radius: 0 0 var(--km-radius) var(--km-radius); }
.leaflet-bar a:hover { background-color: var(--km-green-100); }
.leaflet-bar a.leaflet-disabled { background-color: var(--km-green-50); color: var(--km-ink-mute); }

/* --- layer control --- */
.leaflet-control-layers {
    box-shadow: var(--km-shadow);
    border-radius: var(--km-radius);
    border: var(--km-border);
    background: var(--km-bg-card);
}
.leaflet-control-layers-expanded {
    background: var(--km-bg-card);
    color: var(--km-ink);
    border-radius: var(--km-radius);
}
.leaflet-control-layers label {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 12px;
}
.leaflet-control-layers-separator {
    border-top-color: var(--km-green-200);
    margin: 5px -10px 5px -6px;
}

/* --- attribution --- */
.leaflet-control-attribution {
    background: var(--km-bg-card) !important;
    color: var(--km-ink-soft);
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 10px;
    border-radius: 8px;
    margin: 0 8px 8px 0 !important;
    padding: 3px 8px !important;
    box-shadow: var(--km-shadow);
}
.leaflet-control-attribution a { color: var(--km-green-700); }

/* --- coordinates & link controls --- */
div.leaflet-control-layers.coordinates {
    background: var(--km-bg-card) !important;
    color: var(--km-ink-soft);
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 11px;
    border-radius: var(--km-radius);
    padding: 4px 8px;
    height: auto;
    line-height: 1.4;
    box-shadow: var(--km-shadow);
}
div.leaflet-control-layers.link img {
    width: 28px;
    height: 28px;
}
.leaflet-bottom.leaflet-left .link {
    margin-left: 4px;
}

/* --- scale line --- */
.leaflet-control-scale-line {
    background: var(--km-bg-card);
    color: var(--km-ink-soft);
    border-color: var(--km-green-400);
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 10px;
    text-shadow: none;
    border-radius: 4px;
}

/* --- popups (claim tooltips) — Mojinomori Variant B (Banded) --- */
.leaflet-popup-content-wrapper {
    background: var(--km-bg-card);
    color: var(--km-ink);
    border-radius: 18px;
    border: 1px solid rgba(45,122,79,.10);
    box-shadow: var(--km-shadow-lg);
    padding: 0;
    width: 300px !important;
    box-sizing: border-box;
    overflow: hidden;
}
.leaflet-popup-tip-container {
    display: none;
}
.leaflet-popup-content-wrapper::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid var(--km-bg-card);
    filter: drop-shadow(0 4px 4px rgba(31,58,42,.08));
}
.leaflet-popup-content {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    margin: 0 !important;
    width: 100% !important;
    color: var(--km-ink);
    font-size: 13px;
    line-height: 1.5;
}
.leaflet-container a.leaflet-popup-close-button {
    display: none !important;
}

/* --- GriefPrevention claim popup — Variant B layout --- */
.gp-popup {
    display: flex;
    flex-direction: column;
}
.gp-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(180deg, var(--km-green-100), var(--km-green-50));
    border-bottom: 1px solid var(--km-green-200);
}
.gp-logo {
    flex-shrink: 0;
}
.gp-title {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--km-green-900);
}
.gp-chip {
    margin-left: 6px;
    background: var(--km-bg-card);
    border: 1px solid var(--km-green-200);
    border-radius: 999px;
    padding: 2px 8px;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--km-green-700);
    line-height: 1.4;
}
.gp-owner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 6px;
}
.gp-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px;
    image-rendering: pixelated;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    flex-shrink: 0;
}
.gp-owner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gp-name {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--km-green-900);
    line-height: 1.2;
    word-break: break-word;
}
.gp-sub {
    margin-top: 1px;
    font-size: 11px;
    color: var(--km-ink-mute);
    line-height: 1.2;
}
.gp-trust {
    padding: 8px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gp-trust-section {
    display: flex;
    flex-direction: column;
}
.gp-trust-lbl {
    font-family: 'Kosugi Maru', 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    font-size: 11px;
    color: var(--km-green-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.gp-trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--km-green-50);
    border: 1px solid var(--km-green-100);
    color: var(--km-green-900);
    border-radius: 999px;
    padding: 4px 10px 4px 6px;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.2;
}
.gp-pill-avatar {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* --- tooltip (hover) --- */
.leaflet-tooltip {
    background: var(--km-bg-card);
    color: var(--km-ink);
    border-color: var(--km-green-200);
    border-radius: 8px;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 12px;
    box-shadow: var(--km-shadow);
    padding: 5px 8px;
}
.leaflet-tooltip-top:before { border-top-color: var(--km-bg-card); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--km-bg-card); }
.leaflet-tooltip-left:before { border-left-color: var(--km-bg-card); }
.leaflet-tooltip-right:before { border-right-color: var(--km-bg-card); }

/* --- sidebar --- */
#sidebar {
    background-color: rgba(31,58,42,0.85);
    color: #E8F0EA;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 12px;
    border-left: 1px solid rgba(123,199,154,0.2);
}
#sidebar legend {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--km-green-300);
}
#sidebar fieldset {
    border-top-color: rgba(123,199,154,0.2);
}
#sidebar fieldset a,
#sidebar fieldset a:visited {
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    border-radius: 8px;
    margin: 1px 4px;
    transition: background .15s;
}
#sidebar fieldset a:hover { background-color: rgba(123,199,154,0.12); }
#sidebar fieldset a.following { background-color: rgba(79,174,115,0.25); }
#sidebar fieldset a.following:hover { background-color: rgba(79,174,115,0.4); }
#sidebar fieldset#players a { padding: 8px 10px; }
#sidebar #pin {
    border-radius: 8px;
    filter: drop-shadow(0 0 4px rgba(123,199,154,.4));
    -webkit-filter: drop-shadow(0 0 4px rgba(123,199,154,.4));
}
#sidebar #pin.pinned:hover { background: rgba(63,149,96,0.5); border-color: rgba(63,149,96,0.75); }
#sidebar #pin.unpinned:hover { background: rgba(212,146,74,0.5); border-color: rgba(212,146,74,0.75); }
#sidebar fieldset#players::-webkit-scrollbar-thumb {
    border-right: 2px solid rgba(123,199,154,.4);
}

/* --- nameplates (player names on map) --- */
div.leaflet-nameplate-pane > div {
    background: rgba(31,58,42,0.75);
    color: #E8F0EA;
    font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', system-ui, sans-serif;
    font-weight: 700;
    border-color: rgba(31,58,42,0.85);
    border-radius: 8px;
    padding: 2px 6px;
}