/* Marketplace (07/10/2026): visualizador do mapa (public/js/mkmap.js) e página do
   anúncio (views/marketplace_item.ejs). A tooltip do item é .it-tip (wdpt.css). */

/* ---------------------------------------------------------------- mapa */
.mkv { position: relative; overflow: hidden; background: #1a120c url(/images/maps/paper.webp) center / cover; border: 1px solid #3a2616; border-radius: 4px; cursor: grab; touch-action: none; user-select: none }
.mkv.mkv-drag { cursor: grabbing }
.mkv-stage { position: absolute; inset: 0; transform-origin: 0 0 }
.mkv-img, .mkv-layer { position: absolute }
.mkv-img { max-width: none; pointer-events: none }
.mkv-mark { position: absolute; transform-origin: 50% 50% }
.mkv-npc { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #1aa3ff; border: 1px solid #0b2a44; box-shadow: 0 0 3px rgba(0, 0, 0, .6) }
.mkv-npc:hover { background: #7fd0ff; z-index: 3 }
.mkv-pin { width: 22px; height: 22px; margin: -22px 0 0 -11px; transform-origin: 50% 100% !important; cursor: pointer; z-index: 2 }
.mkv-pin::before { content: ''; position: absolute; left: 2px; top: 0; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #ffe2c4; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); box-sizing: border-box }
.mkv-pin::after { content: ''; position: absolute; left: 8px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ffe2c4 }
.mkv-atual::before { background: #e8413a }
.mkv-atual { z-index: 4 }
.mkv-similar::before { background: #e8a93a }
.mkv-pin.mkv-hl::before { background: #fff2a8; border-color: #e8413a }
.mkv-pin.mkv-hl { z-index: 5 }
.mkv-hint { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 3px 10px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #e1dfc1; background: rgba(12, 6, 4, .72); border: 1px solid #4a3220; border-radius: 3px; pointer-events: none; transition: opacity .3s; white-space: nowrap }
.mkv.mkv-zoomed .mkv-hint { opacity: 0 }
.mkv-ctl { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 6 }
.mkv-ctl button { width: 30px; height: 30px; font-size: 18px; line-height: 1; color: #ffd9a8; background: rgba(20, 10, 6, .85); border: 1px solid #6b4a2a; border-radius: 3px; cursor: pointer }
.mkv-ctl button:hover { border-color: #fabc86 }
.mkv-tip { position: absolute; transform: translate(-50%, calc(-100% - 6px)); padding: 3px 8px; font-size: 12px; color: #ffe9cc; background: rgba(12, 6, 4, .92); border: 1px solid #6b4a2a; border-radius: 3px; pointer-events: none; white-space: nowrap; z-index: 7 }
.mkv-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #d0baa4 }
.mkv-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: -1px }
.mkv-legend .lg-atual { background: #e8413a }
.mkv-legend .lg-similar { background: #e8a93a }
.mkv-legend .lg-npc { background: #1aa3ff; border-radius: 0 }

/* Talismã: retrato da classe, redondo, com o selo dourado do talismã */
.mk-icon.mk-icon-class { position: relative }
.mk-icon.mk-icon-class img { width: 54px; height: 54px; max-width: none; max-height: none; border-radius: 50%; border: 2px solid #c9a24a; box-shadow: 0 0 8px rgba(201, 162, 74, .45) }
.mk-icon.mk-icon-class::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; background: url(/images/items/CT101.png) center / contain no-repeat }
.mkd-sim img.mkd-sim-class { border-radius: 50%; border: 1px solid #c9a24a }

/* lista: sem mapa (fica na página do anúncio) */
.mk-layout .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.mk-card .mk-detail { text-decoration: none }

/* ---------------------------------------------------------------- página do anúncio */
.mkd { padding: 18px 20px 24px }
.mkd-back { display: inline-block; margin-bottom: 14px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #d0baa4; text-decoration: none }
.mkd-back:hover { color: #ffd9a8 }
.mkd-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start }
.mkd-side { display: flex; flex-direction: column; gap: 12px }
.mkd-box { background: rgba(20, 10, 6, .55); border: 1px solid #4a3220; border-radius: 4px; padding: 12px 14px }
.mkd-head { font-family: 'TrajanProRegular', serif; font-size: 12px; letter-spacing: 2px; color: #d0baa4; text-transform: uppercase; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px }
.mkd-head small { font-family: inherit; letter-spacing: 1px; font-size: 11px; color: #96847a; text-transform: none }
.mkd-tipwrap { display: flex; justify-content: center }
.mkd-tipwrap .it-tip { width: 100% }
.mkd-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #e1dfc1; padding: 3px 0 }
.mkd-row span:first-child { color: #96847a }
.mkd-price { display: flex; flex-direction: column; gap: 4px; font-size: 18px; font-weight: 700 }
.mkd-seller { display: flex; align-items: center; gap: 10px }
.mkd-seller img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #6b4a2a; background: #0c0604 }
.mkd-seller b { display: block; color: #ffd9a8; font-weight: 600 }
.mkd-seller small { color: #96847a; font-size: 12px }
.mkd-shoptitle { margin-top: 8px; padding: 8px 10px; font-size: 13px; color: #e1dfc1; background: rgba(12, 6, 4, .6); border: 1px solid #3a2616; border-radius: 3px; font-style: italic; word-break: break-word }
.mkd-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px }
.mkd-howto { font-size: 12px; color: #96847a; line-height: 1.5; margin-top: 8px }
.mkd-howto b { color: #e1dfc1 }
.mkd-mapbox .mkv { height: 640px }
.mkd-mapbox .mkd-head { margin-bottom: 8px }

/* ficha do personagem (talismã) */
.mkd-char { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-bottom: 10px }
.mkd-char img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #8a6a3a; background: #0c0604 }
.mkd-char b { display: block; font-family: 'TrajanProRegular', serif; font-size: 17px; letter-spacing: 1px; color: #ffd9a8 }
.mkd-char small { color: #d0baa4; font-size: 13px }
.mkd-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px }
.mkd-stats .mkd-row { border-bottom: 1px dashed rgba(107, 74, 42, .35) }
.mkd-note { font-size: 11px; color: #96847a; margin-top: 8px; line-height: 1.5 }
.mkd-equip { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-top: 10px }
.mkd-eq { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: rgba(12, 6, 4, .7); border: 1px solid #3a2616; border-radius: 3px; cursor: help }
.mkd-eq:hover { border-color: #fabc86 }
.mkd-eq img { max-width: 80%; max-height: 80% }
.mkd-eq em { position: absolute; left: 3px; bottom: 1px; font-size: 9px; font-style: normal; color: #96847a; text-transform: uppercase; letter-spacing: .5px }
.mkd-eq .it-tip { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: 300px; z-index: 20; pointer-events: none; text-align: left }
.mkd-eq:hover .it-tip { display: block }

/* mesmos itens em outras lojas */
.mkd-similar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px }
.mkd-sim { display: flex; gap: 10px; padding: 10px; background: rgba(20, 10, 6, .55); border: 1px solid #4a3220; border-radius: 4px; text-decoration: none; color: inherit }
.mkd-sim:hover, .mkd-sim.mkv-hl { border-color: #e8a93a }
.mkd-sim img { width: 44px; height: 44px; object-fit: contain }
.mkd-sim div { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px }
.mkd-sim b { color: #ffd9a8; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mkd-sim span { color: #96847a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mkd-empty { font-size: 13px; color: #96847a; padding: 6px 0 }
.mkd-gone { text-align: center; padding: 60px 20px; color: #d0baa4 }
.mkd-gone b { display: block; font-family: 'TrajanProRegular', serif; font-size: 18px; color: #ffd9a8; margin-bottom: 10px; letter-spacing: 1px }

@media (max-width: 980px) {
    .mkd-grid { grid-template-columns: 1fr }
    .mkd-mapbox .mkv { height: 70vw; min-height: 320px }
    .mk-layout .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}