/*
 * DynmapCustomizer — Custom CSS
 */

/* ── Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&display=swap');

/* ── Page Theme ────────────────────────────────────────────────────────── */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
}

/* ── Hide Default Dynmap UI ────────────────────────────────────────────── */
.sidebar,.panel,.compass,.mobilecompass,.largeclock,.smallclock,.timeofday,
.logo,.link,.hitbar,.pin,.scrollarrow,.alertbox,.chat,.chatinput,.chatbox,
.dynmap_logo,.leaflet-control-zoom,.leaflet-control-attribution,
.leaflet-control-layers,.worldlist,.playerlist,.sidebarSection {
    display: none !important;
}

/* ── Vignette ──────────────────────────────────────────────────────────── */
#dcmap-vignette {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none; z-index: 1000;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,var(--dcmap-vignette-alpha,0.4)) 100%);
}

/* ── Corner Glyph ──────────────────────────────────────────────────────── */
#dcmap-glyph {
    position: fixed; top: 18px; left: 22px; z-index: 1001;
    font-size: 28px; color: #c9a84c;
    text-shadow: 0 0 8px rgba(201,168,76,0.4), 0 0 20px rgba(201,168,76,0.15);
    pointer-events: none; font-family: serif;
    opacity: 0.85; user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVER IP — Hanging Banner (top center)
   ═══════════════════════════════════════════════════════════════════════════ */

#dcmap-ip-box {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
    cursor: pointer;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Chain / hanging connector */
.dcmap-ip-chain {
    width: 2px;
    height: 14px;
    background: linear-gradient(180deg,
        rgba(140,110,60,0.6) 0%,
        rgba(160,130,70,0.8) 40%,
        rgba(120,90,50,0.6) 100%
    );
    position: relative;
}

/* Small ornamental knot at the chain bottom */
.dcmap-ip-chain::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 6px;
    background: radial-gradient(ellipse at center, rgba(180,150,80,0.7) 0%, rgba(120,90,50,0.4) 100%);
    border-radius: 50%;
}

/* The banner box itself */
.dcmap-ip-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 22px;
    background: linear-gradient(180deg,
        rgba(38,28,16,0.96) 0%,
        rgba(30,22,12,0.98) 50%,
        rgba(24,18,10,0.96) 100%
    );
    border: 1px solid rgba(140,105,50,0.45);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.6),
        0 1px 0 rgba(180,140,60,0.1) inset,
        0 0 20px rgba(201,168,76,0.04);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    transform-origin: top center;
}

/* Subtle corner ornaments on the banner */
.dcmap-ip-content::before,
.dcmap-ip-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 6px;
    height: 6px;
    border-bottom: 1px solid rgba(140,105,50,0.3);
}
.dcmap-ip-content::before {
    left: 4px;
    border-left: 1px solid rgba(140,105,50,0.3);
    border-radius: 0 0 0 0;
}
.dcmap-ip-content::after {
    right: 4px;
    border-right: 1px solid rgba(140,105,50,0.3);
    border-radius: 0 0 0 0;
}

/* Hover: banner drops slightly like swinging */
#dcmap-ip-box:hover .dcmap-ip-content {
    transform: translateY(3px);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.7),
        0 1px 0 rgba(180,140,60,0.15) inset,
        0 0 30px rgba(201,168,76,0.08);
}

/* Chain stretches slightly on hover */
#dcmap-ip-box:hover .dcmap-ip-chain {
    height: 17px;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dcmap-ip-chain {
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* No floating animation — the banner hangs still */
.dcmap-ip-glow {
    display: none;
}

.dcmap-ip-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(201,168,76,0.5);
    text-transform: uppercase;
}

.dcmap-ip-address {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #ddd0b0;
    text-shadow: 0 0 6px rgba(201,168,76,0.15);
}

.dcmap-ip-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 4px;
    background: rgba(201,168,76,0.06);
    color: rgba(201,168,76,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.dcmap-ip-copy:hover {
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.45);
    color: #c9a84c;
}

.dcmap-ip-toast {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    color: #c9a84c;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.dcmap-ip-toast.show {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COORDINATE DISPLAY (bottom center)
   ═══════════════════════════════════════════════════════════════════════════ */

#dcmap-coords {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(30,22,12,0.9) 0%, rgba(20,15,8,0.92) 100%);
    border: 1px solid rgba(120,90,50,0.35);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    user-select: none;
    /* Prevent subpixel blurring from transform */
    transform: translateX(-50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.dcmap-compass-icon {
    color: #a08860;
    opacity: 0.8;
    flex-shrink: 0;
}

.dcmap-coord-text {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: #b8a07a;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* Prevent blur from changing text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    /* Force pixel-perfect rendering */
    will-change: auto;
    font-variant-numeric: tabular-nums;
}

.dcmap-coord-text b {
    color: #e0d0b0;
    font-weight: 700;
    /* Fixed-width numbers prevent layout shifts */
    display: inline-block;
    min-width: 3.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── World Selector Bar ────────────────────────────────────────────────── */
#dcmap-world-bar {
    position: fixed; top: 14px; right: 18px;
    z-index: 1001; display: flex; gap: 4px; align-items: center;
}

.dcmap-world-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 1px solid rgba(120,90,50,0.5);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(40,30,18,0.92) 0%, rgba(28,20,12,0.95) 100%);
    color: #b8a07a;
    font-family: 'Cinzel', serif;
    font-size: 12px; font-weight: 400;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

.dcmap-world-btn:hover {
    background: linear-gradient(180deg, rgba(55,40,22,0.95) 0%, rgba(38,28,16,0.97) 100%);
    border-color: rgba(160,120,60,0.6);
    color: #d4c4a0;
}

.dcmap-world-btn.active {
    background: linear-gradient(180deg, rgba(70,50,25,0.95) 0%, rgba(50,35,18,0.97) 100%);
    border-color: rgba(201,168,76,0.7);
    color: #e8d8b4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 12px rgba(201,168,76,0.1);
}

.dcmap-world-icon { width: 14px; height: 14px; opacity: 0.7; }
.dcmap-world-btn.active .dcmap-world-icon { opacity: 0.9; }

/* ── Wynncraft-Style Labels ────────────────────────────────────────────── */
.dcmap-label {
    font-family: var(--dcmap-font-family, 'Cinzel', 'Palatino Linotype', 'Book Antiqua', 'Garamond', serif);
    letter-spacing: 0.08em; white-space: nowrap; line-height: 1.3;
    display: inline-block;
    -webkit-text-stroke: 0.8px rgba(0,0,0,0.85);
    paint-order: stroke fill;
    text-shadow:
        1px 1px 1px rgba(0,0,0,0.7), -1px -1px 1px rgba(0,0,0,0.7),
        1px -1px 1px rgba(0,0,0,0.7), -1px 1px 1px rgba(0,0,0,0.7),
        0 0 4px rgba(0,0,0,0.5);
    background: none !important; border: none !important;
    padding: 0 !important; margin: 0 !important;
}
.dcmap-label span { letter-spacing: 0.04em; opacity: 0.85; }

/* Label container overrides */
span.markerName_dcmap_labels,
span.markerName-show.markerName_dcmap_labels {
    background: none !important; border: none !important;
    box-shadow: none !important; padding: 0 !important;
    position: absolute !important; left: 50% !important; top: 50% !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important; display: block !important;
}
.mapMarker img[src*="dcmap_transparent"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER MARKERS — Fantasy-themed head + health bar
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Z-INDEX LAYERING:
 * Labels (mapMarker with dcmap_labels) should render ON TOP of players.
 * Player markers should render BEHIND labels.
 */
.playerMarker {
    z-index: 100 !important;
}
.mapMarker {
    z-index: 200 !important;
}

/* ── Player Container ──────────────────────────────────────────────────── */
.playerMarker {
    text-align: center;
    transition: opacity 0.3s ease;
}

/* ── Player Head Icon ──────────────────────────────────────────────────── */
.playerMarker .playerIcon,
.playerMarker .playerIconSm,
.playerMarker .playerIconLg {
    display: block !important;
    border: 2px solid rgba(140, 105, 50, 0.6) !important;
    border-radius: 3px !important;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(0, 0, 0, 0.3),
        inset 0 0 1px rgba(255, 255, 255, 0.1) !important;
    image-rendering: pixelated !important;
    background: rgba(20, 15, 10, 0.7) !important;
}

/* Standard icon: 32x32 head */
.playerMarker .playerIcon,
.playerMarker canvas.playerIcon {
    width: 28px !important;
    height: 28px !important;
}

/* Small icon */
.playerMarker .playerIconSm,
.playerMarker canvas.playerIconSm {
    width: 20px !important;
    height: 20px !important;
}

/* Large icon */
.playerMarker .playerIconLg,
.playerMarker canvas.playerIconLg {
    width: 36px !important;
    height: 36px !important;
}

/* Fallback player.png image (before head loads) */
.playerMarker img.playerIcon,
.playerMarker img.playerIconSm,
.playerMarker img.playerIconLg {
    display: block !important;
    image-rendering: pixelated !important;
}

/* ── Player Name ───────────────────────────────────────────────────────── */
.playerMarker .playerName,
.playerMarker .playerNameSm,
.playerMarker .playerNameLg,
.playerMarker .playerNameNoHealth {
    display: block !important;
    font-family: 'Cinzel', serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    color: #c0b090 !important;
    text-shadow:
        1px 1px 1px rgba(0, 0, 0, 0.9),
        -1px -1px 1px rgba(0, 0, 0, 0.9),
        1px -1px 1px rgba(0, 0, 0, 0.9),
        -1px 1px 1px rgba(0, 0, 0, 0.9),
        0 0 4px rgba(0, 0, 0, 0.7) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    margin-top: 2px !important;
    padding: 0 !important;
    opacity: 0.85;
}

/* ── Health / Armor Bars ───────────────────────────────────────────────── */
.playerMarker .healthContainer,
.playerMarker .healthContainerSm,
.playerMarker .healthContainerLg {
    display: block !important;
    margin-top: 2px !important;
    width: 52px !important;
}

.playerMarker .playerHealthBackground {
    width: 100% !important;
    height: 4px !important;
    background: rgba(60, 10, 10, 0.7) !important;
    border: 1px solid rgba(100, 30, 30, 0.4) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    margin-bottom: 1px !important;
}

.playerMarker .playerHealth {
    height: 100% !important;
    background: linear-gradient(90deg,
        #8b2020 0%,
        #c43030 40%,
        #e04040 100%
    ) !important;
    border-radius: 1px !important;
    transition: width 0.3s ease !important;
    box-shadow: 0 0 3px rgba(200, 50, 50, 0.4) !important;
}

.playerMarker .playerArmorBackground {
    width: 100% !important;
    height: 3px !important;
    background: rgba(20, 30, 60, 0.6) !important;
    border: 1px solid rgba(40, 60, 100, 0.3) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.playerMarker .playerArmor {
    height: 100% !important;
    background: linear-gradient(90deg,
        #3060a0 0%,
        #4080c0 40%,
        #60a0e0 100%
    ) !important;
    border-radius: 1px !important;
    transition: width 0.3s ease !important;
    box-shadow: 0 0 3px rgba(60, 120, 200, 0.3) !important;
}

/* ── Map Fill ──────────────────────────────────────────────────────────── */
.dynmap, .map, .leaflet-container { background: #0d0d0d !important; }