/* Map Toggle Bar */

/* Kelio SVG stroke — redaguok čia (Cursor rodo spalvų langelius); map.js skaito --road-stroke-* */
:root {
    --road-stroke-dirt_path: #4a3020;   /* tamsiai ruda — išvaikščiotas */
    --road-stroke-stone_path: #555555;  /* šviesiai pilka — akmuo */
    --road-stroke-brick_path: #3a3a3a;  /* tamsiai pilka — blokai */
}

.map-toggle-bar {
    display: flex;
    width: 50%;
    height: 13px;
    position: relative;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(to right, #a08040, #c0a060, #a08040);
    border: 1px solid #6a5a4a;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    margin: 20px auto;
}

.map-toggle-bar::before,
.map-toggle-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: #c0a060;
    border: 1px solid #6a5a4a;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 2px rgba(0,0,0,0.4);
    border-radius: 2px;
    z-index: 2;
}

.map-toggle-bar::before {
    left: -5px;
}

.map-toggle-bar::after {
    right: -5px;
}

.map-toggle-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    width: 100%;
}

.map-toggle-icon {
    width: 25px;
    height: 25px;
    background: linear-gradient(to bottom right, #a08040, #e0c080, #a08040);
    border: 2px solid #6a5a4a;
    border-radius: 5px;
    color: #333333;
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 0 3px rgba(255,255,255,0.4);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.map-toggle-bar.active .map-toggle-icon {
    background: linear-gradient(to bottom right, #60a030, #80c050, #60a030); /* Green gradient when active */
    border-color: #4a7a2a; /* Darker green border */
    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 0 3px rgba(255,255,255,0.4);
}

/* --------------------------------------------------------------------------
 * Žodynas žemėlapyje:
 * - Mažas žemėlapis — matomas langas (pvz. 7×7), judėjimas per langelius. Stiliai: .map-grid, .map-cell be .map-container--overview.
 * - Didelis žemėlapis (overview) — visa lokacija, .map-container.map-container--overview, mažesni langeliai (--map-overview-cell-px).
 * -------------------------------------------------------------------------- */

/* Map container */
.map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0px 10px 10px 10px;
    background: rgba(30, 30, 30, 0.8);
    border-radius: 12px;
    border: 2px solid #4a4a4a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    width: fit-content;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-height: 500px;
    overflow: hidden;
    opacity: 1;
}

/* Didelis žemėlapis (overview): išorinis apvalkalas neprasiplečia pagal vidinio tinklio min-content plotį */
.map-container.map-container--overview {
    box-sizing: border-box;
    max-width: 100%;
    /* fit-content imtų max iš antraštės eilutės / vaikų — ribojam pagal žemėlapio lango plotį + padding + rėmelis */
    width: min(100%, calc(var(--map-overview-scroll-max-w, 280px) + 24px));
    /* Įprastas .map-container turi max-height:500px + overflow:hidden — su big-map langu + valdymų eilute tai nukerpa apačią (mount/feed). */
    max-height: none;
    overflow: visible;
}

/* Big map: antraštės eilutė neplečia konteinerio platesnio už žemėlapio langą */
.map-container.map-container--overview .map-title-row {
    box-sizing: border-box;
    width: min(100%, var(--map-overview-scroll-max-w, 280px));
    max-width: min(100%, var(--map-overview-scroll-max-w, 280px));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.map-container.map-container--overview .map-title-row .map-title-center {
    min-width: 0;
}

.map-container.map-container--overview .map-title-row .map-location-name {
    min-width: 0;
    text-align: center;
    overflow-wrap: break-word;
}

.map-container.map-container--overview .map-title-row .map-exploration-pct {
    font-size: 0.78em;
}

.map-container.map-container--overview .map-controls-row {
    box-sizing: border-box;
    max-width: min(100%, var(--map-overview-scroll-max-w, 280px));
    width: 100%;
    flex-shrink: 0;
}

/* Įprastas vaizdas: apvalkalas „nematomas“ — išdėstymas kaip anksčiau */
.map-grid-scroll {
    display: contents;
}

/* Big map: fiksuotas langas — turinys tempiamas drag (overflow: hidden, ne scroll) */
.map-container.map-container--overview .map-grid-scroll {
    display: block;
    /* Tėvas .map-container — flex + align-items: center + width: fit-content.
       Be min-width: 0 flex vaikas plečiasi iki viso .map-grid min-content (visas žemėlapis). */
    min-width: 0;
    flex-shrink: 0;
    align-self: center;
    box-sizing: border-box;
    width: min(100%, var(--map-overview-scroll-max-w, 280px));
    max-width: min(100%, var(--map-overview-scroll-max-w, 280px));
    height: var(--map-overview-scroll-max-h, 280px);
    max-height: var(--map-overview-scroll-max-h, 280px);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    cursor: grab;
    border-radius: 6px;
    outline: 1px solid rgba(192, 160, 96, 0.35);
}

.map-container.map-container--overview .map-grid-scroll.map-grid-scroll--grabbing {
    cursor: grabbing;
}

/* Didelis žemėlapis (overview): visas lokacijos tinklelis; tarpai — žr. ir .map-grid (mažas žemėlapis).
 * Tinklelio fonas kaip rūkas (#171310), kad tarp unexplored langelių nešviesėtų „siūlai“ (mažą žemėlapį paliekam #2a2a2a). */
.map-container.map-container--overview .map-grid {
    gap: 1px;
    background-color: #171310;
    transform-origin: 0 0;
    will-change: transform;
    /* Be to: width:auto „ištemptų“ tinklelį iki lango pločio → offsetWidth≈vw → clamp išjungia horizontalią pan */
    width: max-content;
    min-width: max-content;
    box-sizing: border-box;
}

.map-container.map-container--overview .map-cell {
    width: var(--map-overview-cell-px, 17px);
    min-width: var(--map-overview-cell-px, 17px);
    height: var(--map-overview-cell-px, 17px);
    min-height: var(--map-overview-cell-px, 17px);
    /* Be išorinio border: 1px + gap maži langeliai atrodytų kaip dideli tarpai (kaimynų rėmeliai susideda). */
    border: none;
    border-radius: 1px;
    pointer-events: none;
    cursor: default;
}

.map-container.map-container--overview .map-cell:hover {
    background-color: #4a3a2a;
}

/*
 * Didelis žemėlapis: bazinis overview .map-cell turi border:none (tarp „siūlų“ išvengimui).
 * Urvas / barjeras remiasi rėmu ir cave-entry-gap-* — be jo matyti tik ::before kampus.
 * Be išorinio box-shadow — tas pats kaip mažame žemėlapyje (tik juodas rėmas + bracket).
 */
.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-cell {
    border: 2px solid #1a1a1a;
    border-radius: 2px;
    box-shadow: none;
    background-color: #382c20;
}

.map-container.map-container--overview .map-cell.directional-edge-cell.barrier-entry-cell {
    border: 2px solid #1a1a1a;
    border-radius: 2px;
    box-shadow: none;
    background-color: #4a3a2a;
}

.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-cell.shallow-water-cell,
.map-container.map-container--overview .map-cell.directional-edge-cell.barrier-entry-cell.shallow-water-cell {
    background-color: #2f76e0af;
}

.map-container.map-container--overview .map-cell.directional-edge-cell::before {
    inset: -2px;
    border-radius: 2px;
    background-size:
        2px 2px,
        2px 2px,
        2px 2px,
        2px 2px,
        4px 2px,
        2px 4px,
        4px 2px,
        2px 4px,
        4px 2px,
        2px 4px,
        4px 2px,
        2px 4px;
}

/* Ta pati „angių“ logika kaip mažame žemėlapyje — bazinė .cave-entry-gap-* pralaimi overview rėmui be šių taisyklių. */
.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-gap-up {
    border-top-color: transparent;
}
.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-gap-down {
    border-bottom-color: transparent;
}
.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-gap-left {
    border-left-color: transparent;
}
.map-container.map-container--overview .map-cell.directional-edge-cell.cave-entry-gap-right {
    border-right-color: transparent;
}

/* Bazinė .map-cell--fog-unexplored naudoja border !important — overview: vientisas rūkas (be rėmelių / ::after / auksinio hint) */
.map-container.map-container--overview .map-cell.map-cell--fog-unexplored {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.map-container.map-container--overview .map-cell.map-cell--fog-unexplored::after {
    display: none !important;
}
/* Big map — mount/feed tik peržiūrai, ne interaktyvūs */
.map-container.map-container--overview .map-mount-icon-slot,
.map-container.map-container--overview .map-feed-icon-slot {
    pointer-events: none;
    opacity: 0.55;
}

/* Pagrindinio #app-view klasė .container (style.css) turi overflow:hidden — be to apačioje nukerpama
   visa .map-controls-row (mount / rodyklės / feed), kai žemėlapyje įjungiama visa lokacija. */
#app-view.container.lw-map-overview-open {
    overflow: visible;
}

.map-container.map-container-transition {
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
}

.map-container.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

html.map-initial-hidden #mapContainer {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.map-title-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    column-gap: 6px;
    width: 100%;
    margin: 4px 0 6px 0;
    box-sizing: border-box;
}

.map-title-row .map-title-center {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.map-title-row .map-location-name {
    margin: 0;
    text-align: center;
}

.map-exploration-pct {
    margin: 0;
    font-size: 0.85em;
    font-weight: normal;
    color: #b8a878;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.map-overview-inline-btn {
    grid-column: 1;
    justify-self: start;
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #7a5828, #b89850, #7a5828);
    border: 1px solid rgba(192, 160, 96, 0.75);
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.map-overview-inline-btn:hover {
    filter: brightness(1.08);
}

.map-overview-inline-btn:active {
    transform: scale(0.95);
}

.map-overview-inline-btn-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.map-location-name {
    color: #e0e0e0; /* Simple color */
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Mažas žemėlapis — langelių dydžiai ir tarpai. 34px = map.js MAP_CELL_PX; gap keičiant — sinchronizuok map.js gapPx. Overview: .map-container--overview .map-grid */
.map-grid {
    display: grid;
    grid-template-columns: repeat(7, 34px);
    grid-template-rows: repeat(7, 34px);
    gap: 1px; /* ← tarpai tarp kvadratėlių (0 = be tarpų) */
    border: 2px solid #c0a060;
    border-radius: 5px;
    padding: 3px; /* ← padding aplink tinklelį */
    background-color: #2a2a2a;
}

.map-grid.vertical-portal {
    /* 34px = tas pats kaip MAP_CELL_PX / .map-cell */
    grid-template-columns: repeat(1, 34px);
    grid-template-rows: repeat(5, 34px);
    max-width: 38px;
}

.map-cell {
    position: relative; /* containing block for ::before (kelias, overlay) — be to ::before absolute „išsilieja“ iki map-grid */
    width: 34px; /* sutapatinti su map.js MAP_CELL_PX ir .map-grid repeat(..., 34px) */
    height: 34px;
    background-color: #4a3a2a;
    border: 1px solid #57422c; /* vizualus „siūlas“ tarp langelių net kai gap=0 */
    border-radius: 3px;
    cursor: pointer;
}

.map-cell:hover {
    background-color: #6a4a3a;
    transition: background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .map-cell:hover {
        transition: none;
    }
}

/* Exploration: unexplored — vieninga plytelė; paslėpti vandenį, kelius, ikonas (::before keliams / kampams). */
.map-cell.map-cell--fog-unexplored {
    isolation: isolate;
    background-color: #171310 !important;
    background-image: none !important;
    box-shadow: none !important;
    --road-layer: none !important;
    border: 1px solid #2c241c !important;
}
.map-cell.map-cell--fog-unexplored::before {
    display: none !important;
}
.map-cell.map-cell--fog-unexplored::after {
    content: '' !important;
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    /* Nepermatomas sluoksnis ant bet kokios temos žemiau */
    background: #15110e !important;
    background-image: none !important;
    opacity: 1 !important;
    z-index: 6;
    pointer-events: none;
}
.map-cell.inactive-cell {
    background-color: #1a1a1a;
    cursor: not-allowed;
    position: relative;
}

.map-cell.inactive-cell::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #a03030;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.player-current-cell {
    position: relative;
}

.player-current-cell::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    border-radius: 50%;
    border: 2px solid #c0a060;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
    z-index: 3;
    pointer-events: none;
}

/* Big map: mažesnis langelis (17px) — proporcingas mažesnis žaidėjo rutuliukas */
.map-container.map-container--overview .player-current-cell::after {
    width: 9px;
    height: 9px;
    border-width: 1px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

/* Grupės narys tame pačiame lokacijos žemėlapyje (mažas ir didelis overview) */
.party-member-cell {
    position: relative;
}

.party-member-cell::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background-color: #4fc3f7;
    border-radius: 50%;
    border: 2px solid #1565c0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    z-index: 2;
    pointer-events: none;
}

.map-container.map-container--overview .party-member-cell::after {
    width: 8px;
    height: 8px;
    border-width: 1px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

/* Keli grupės nariai tame pačiame langelyje — skaičius rutuliuko viduryje */
.party-member-cell--stack::after {
    content: attr(data-party-count);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.map-container.map-container--overview .party-member-cell--stack::after {
    width: 10px;
    height: 10px;
    font-size: 6px;
}

/* Jūs + kiti grupės nariai tame pačiame langelyje */
.player-current-cell--party-stack::after {
    content: attr(data-party-count);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 10px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: #1a1408;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.map-container.map-container--overview .player-current-cell--party-stack::after {
    width: 10px;
    height: 10px;
    font-size: 6px;
}

/* Grupės draugas matomas net ant rūko (tik party taškas, ne visas laukas) */
.map-cell.party-member-cell.map-cell--fog-unexplored::after {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #4fc3f7 !important;
    background-image: none !important;
    border: 2px solid #1565c0 !important;
    opacity: 1 !important;
    z-index: 8;
}

.map-container.map-container--overview .party-member-cell.map-cell--fog-unexplored::after {
    width: 8px;
    height: 8px;
    border-width: 1px;
}

.map-cell.party-member-cell--stack.map-cell--fog-unexplored::after {
    width: 18px;
    height: 18px;
    font-size: 9px;
}

.map-container.map-container--overview .party-member-cell--stack.map-cell--fog-unexplored::after {
    width: 10px;
    height: 10px;
    font-size: 6px;
}

.portal-entry-cell {
    background-color: #000; /* Black for portal entry */
    border: 1px solid #333;
}

.exit-to-dark-forest-cell {
    background-color: #cac8c8; /* Reverted to original color for exit to Dark Forest */
    border: 1px solid #333;
}

.mountain-cell {
    background-color: #8B4513; /* Brown for mountains */
    cursor: not-allowed;
}

.mountain-cell:hover {
    background-color: #8B4513; /* No hover effect for mountains */
}

.gate-to-dark-forest-cell {
    background-image: url('../assets/img/Gate/Gate.png'); /* Corrected path to Gate.png */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.location-transition-cell {
    /* Kaip paprastas .map-cell — be žalios „exit“ žymės; perėjimas vis tiek valdomas logikoje. */
    background-color: #4a3a2a;
    border: 1px solid #6a5a4a;
}

.portal-image-cell {
    background-image: url('../assets/img/Gate/Portal.png'); /* Corrected path based on user feedback */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.village-zone-cell {
    background-color: #d3d3d38f; /* Light grey color for village zone */
    border: 1px solid #A9A9A9;
}

/* New water cell styles (.map-cell.* — didesnis specifiškumas už .monster-cell ir kitas vėlesnes 1 klasės taisykles) */
.map-cell.shallow-water-cell {
    background-color: #2f76e0af; /* Light blue for shallow water */
    border: 1px solid #2f76e0af;
}

.map-cell.deep-water-cell {
    background-color: #0057b3a8 !important; /* Darker, more distinct blue for deep water */
    border: 1px solid #0057b3a8;
    cursor: not-allowed; /* Deep water is likely not traversable */
}

.map-cell.deep-water-cell:hover {
    background-color: #004085 !important; /* Slightly darker blue on hover */
    border-color: #004085; /* sutampa su fonu — kitaip lieka šviesesnis rgba rėmas */
}

/* Bendras „sienelių“ rėmas (kaip cave) — urvas ir barjeras naudoja tuos pačius cave-entry-gap-* klasės vardus. */
.directional-edge-cell {
    --directional-edge-bracket: #1a1a1a;
    --de-corner-tl: var(--directional-edge-bracket);
    --de-corner-tr: var(--directional-edge-bracket);
    --de-corner-bl: var(--directional-edge-bracket);
    --de-corner-br: var(--directional-edge-bracket);
    /* Kampo „rankos“ (::before 8×3 / 3×8 poros kiekvienam kampui) — be jų lieka matomas L-kampas net kai --de-corner-* transparent */
    --de-arm-tl: var(--directional-edge-bracket);
    --de-arm-tr: var(--directional-edge-bracket);
    --de-arm-bl: var(--directional-edge-bracket);
    --de-arm-br: var(--directional-edge-bracket);
    box-sizing: border-box;
}

.directional-edge-cell::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 3px;
    background-image:
        linear-gradient(var(--de-corner-tl), var(--de-corner-tl)),
        linear-gradient(var(--de-corner-tr), var(--de-corner-tr)),
        linear-gradient(var(--de-corner-bl), var(--de-corner-bl)),
        linear-gradient(var(--de-corner-br), var(--de-corner-br)),
        linear-gradient(var(--de-arm-tl), var(--de-arm-tl)),
        linear-gradient(var(--de-arm-tl), var(--de-arm-tl)),
        linear-gradient(var(--de-arm-tr), var(--de-arm-tr)),
        linear-gradient(var(--de-arm-tr), var(--de-arm-tr)),
        linear-gradient(var(--de-arm-bl), var(--de-arm-bl)),
        linear-gradient(var(--de-arm-bl), var(--de-arm-bl)),
        linear-gradient(var(--de-arm-br), var(--de-arm-br)),
        linear-gradient(var(--de-arm-br), var(--de-arm-br));
    background-size:
        3px 3px,
        3px 3px,
        3px 3px,
        3px 3px,
        8px 3px,
        3px 8px,
        8px 3px,
        3px 8px,
        8px 3px,
        3px 8px,
        8px 3px,
        3px 8px;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        top left,
        top left,
        top right,
        top right,
        bottom left,
        bottom left,
        bottom right,
        bottom right;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    z-index: 2;
    pointer-events: none;
}

/* Paslėpti atskirus „bracket“ kampus (meta.hide_corners: tl, tr, bl, br — ekrano/tinklelio koord.). */
.directional-edge-cell.de-hide-corner-tl {
    --de-corner-tl: transparent;
    --de-arm-tl: transparent;
}

.directional-edge-cell.de-hide-corner-tr {
    --de-corner-tr: transparent;
    --de-arm-tr: transparent;
}

.directional-edge-cell.de-hide-corner-bl {
    --de-corner-bl: transparent;
    --de-arm-bl: transparent;
}

.directional-edge-cell.de-hide-corner-br {
    --de-corner-br: transparent;
    --de-arm-br: transparent;
}

.cave-entry-cell.directional-edge-cell {
    border: 3px solid #1a1a1a;
    border-radius: 2px;
    background-color: #382c20;
    --directional-edge-bracket: #1a1a1a;
}

/* Tvora / šlaitas / barjeras — ta pati gap logika ir tas pats rėmo storis kaip urve (3px), kad ::before bracket sluoksnis (inset: -3px) sutaptų su kraštu. */
.barrier-entry-cell.directional-edge-cell {
    border: 3px solid #1a1a1a;
    border-radius: 2px;
    background-color: #4a3a2a;
    --directional-edge-bracket: #1a1a1a;
}

.map-cell.barrier-entry-cell:hover {
    background-color: #6a4a3a;
}

/* Seklus vanduo: hover kaip bazinė plytelė (ne .map-cell:hover ruda / ne barjero hover). */
.map-cell.shallow-water-cell:hover {
    background-color: #2f76e0af;
}

.directional-edge-cell.cave-entry-gap-up {
    border-top-color: transparent;
}

.directional-edge-cell.cave-entry-gap-down {
    border-bottom-color: transparent;
}

.directional-edge-cell.cave-entry-gap-left {
    border-left-color: transparent;
}

.directional-edge-cell.cave-entry-gap-right {
    border-right-color: transparent;
}

/* Urvas / barjeras + seklus vanduo (keli specialActiveCells toje pačioje celėje) */
.map-cell.cave-entry-cell.shallow-water-cell,
.map-cell.barrier-entry-cell.shallow-water-cell {
    background-color: #2f76e0af;
}

/* Kelias: SVG stroke ~3.7 px; spalva iš --road-layer (dirt_path / stone_path / brick_path) */
.map-cell.road-segment-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--road-layer, none) center / 100% 100% no-repeat;
    opacity: 0.95;
}

#map-cell-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9em;
    pointer-events: none;
    display: none;
    z-index: 10000;
    white-space: nowrap;
    border: 1px solid #c0a060;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Map Controls */
.map-controls-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
}

.map-side-icon {
    width: 34px;
    height: 34px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: visible;
    flex-shrink: 0;
}

.map-mount-icon-slot{
    margin-right: -8px;
}
.map-feed-icon-slot {
    margin-top: 0px;
    margin-left: -8px;
}

.map-side-icon.empty-slot {
    background-color: #1f1f1f;
    border: 1px solid #6a5a4a;
}

.map-side-icon .item-combined-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 5px;
}

.map-side-icon-badge,
.map-side-icon-quantity {
    position: absolute;
    z-index: 5;
    font-size: 7px;
    font-weight: bold;
    line-height: 1;
    border-radius: 3px;
    padding: 1px 3px;
    pointer-events: none;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.map-side-icon-badge {
    top: 1px;
    left: 1px;
}

.map-side-icon-quantity {
    right: 1px;
    bottom: 1px;
    background: rgba(38, 38, 38, 0.95);
    border: 1px solid rgba(192, 160, 96, 0.8);
    font-size: 10px;
    padding: 1px 1px;
}

.map-side-icon-badge-on {
    background: rgba(36, 122, 47, 0.95);
    border: 1px solid rgba(122, 219, 140, 0.85);
}

.map-side-icon-badge-off {
    background: rgba(133, 33, 33, 0.95);
    border: 1px solid rgba(235, 128, 128, 0.85);
}

.map-controls {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 0px;
    margin-top: 0;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
}

@font-face {
    font-family: 'LittleArrows';
    src: url('../assets/fonts/arrows/Littlearrows-Regular.otf') format('opentype'); /* Adjusted path */
    font-weight: normal;
    font-style: normal;
}

.arrow-button {
    width: 50px;
    height: 50px;
    background-color: #4a3a2a;
    color: #e0e0e0;
    border: 1px solid #6a5a4a;
    border-radius: 5px;
    font-size: 1.8em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: 'LittleArrows', Arial, sans-serif;
    font-weight: normal;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.arrow-button:hover {
    background-color: #6a4a3a;
}

.arrow-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #3a2a1a;
}

.horizontal-arrows {
    display: contents;
}

.map-wrapper {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 1;
    position: relative;
}

.map-wrapper.hidden {
    max-height: 0 !important; /* Force hide content */
    opacity: 0 !important; /* Force hide content */
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    box-shadow: none;
}

.map-wrapper.hidden .map-container {
    display: none; /* Ensure content is not interactive when hidden */
}

/* Fishing spot cell style */
.fishing-spot-cell {
    position: relative; /* Needed for pseudo-element positioning */
}

.fishing-spot-cell::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/Spot/Fish_icon.png'); /* Fishing spot image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none; /* Allow interaction with the cell underneath */
}

/* Monster cell style */
.monster-cell {
    position: relative;
    background-color: #6b3e2e; /* A darker, earthy tone for monster cells */
    border: 1px solid #8d5b48;
    cursor: default; /* Indicate it's not interactive */
}

.monster-cell:hover {
    background-color: #8d5b48; /* Slightly lighter on hover */
}

.monster-cell.player-current-cell {
    background-image: none !important; /* Ensure player dot is on top */
}

/* Styling for location coordinates in map_monsters.php */
.location-coords {
    font-size: 0.8em; /* Smaller font size */
    color: #c0a060; /* A slightly different color for distinction */
}

/* Styling for the main title in map_monsters.php */
.monster-page-title {
    font-size: 1.2em; /* Reduced font size for the main title */
    margin-bottom: 10px; /* Add some space below the title */
    margin-top: 40px; /* Add more space from the top */
}