/* Library (mapa e wikis): visual no estilo do layout tibiacom (pergaminho, cabecalho escuro). */
.lib-head { margin: 0 0 8px; }
.lib-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.lib-tab { padding: 4px 14px; background: #d4c0a1; border: 1px solid #5f4d41; color: #3a2a1a !important; font-weight: bold; text-decoration: none; }
.lib-tab.lib-active, .lib-tab:hover { background: #505050; color: #fff !important; }
.lib-title { font-size: 18px; margin: 4px 0 2px; color: #3a2a1a; }
.lib-sub, .lib-hint { margin: 0 0 6px; color: #5f4d41; font-size: 12px; }
.lib-box { background: #f1e0c6; border: 1px solid #5f4d41; padding: 8px; margin-bottom: 10px; }
.lib-box h2 { font-size: 14px; margin: 0 0 6px; color: #3a2a1a; }
.lib-empty { color: #7a5a3a; font-style: italic; }
.lib-back { margin: 4px 0 12px; }
.lib-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lib-cat { padding: 3px 8px; background: #e4d4b4; border: 1px solid #a08a6a; color: #3a2a1a !important; text-decoration: none; font-size: 12px; white-space: nowrap; }
.lib-cat small { color: #7a5a3a; }
.lib-cat.lib-active, .lib-cat:hover { background: #505050; color: #fff !important; }
.lib-cat.lib-active small, .lib-cat:hover small { color: #ddd; }
/* decoracoes: secoes da Store do client (icone de 13 px em dobro), uma linha por grupo */
.lib-decos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 6px; background: #e4d4b4; border: 1px solid #a08a6a; }
.lib-decogroup-title { display: flex; align-items: center; gap: 4px; font-weight: bold; font-size: 12px; color: #3a2a1a; margin-bottom: 3px; }
.lib-decorow { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-deco { display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 4px; background: #f1e0c6; border: 1px solid #a08a6a; color: #3a2a1a !important; text-decoration: none; font-size: 12px; white-space: nowrap; }
.lib-deco small { color: #7a5a3a; }
.lib-deco.lib-active, .lib-deco:hover { background: #505050; color: #fff !important; }
.lib-deco.lib-active small, .lib-deco:hover small { color: #ddd; }
.lib-caticon { width: 26px; height: 26px; image-rendering: pixelated; image-rendering: crisp-edges; }
.lib-decogroup-title .lib-caticon { width: 20px; height: 20px; }
.lib-search { display: flex; gap: 4px; margin-bottom: 8px; }
.lib-search input[type=search] { flex: 1; max-width: 320px; padding: 3px 6px; border: 1px solid #a08a6a; }
.lib-table { width: 100%; border-collapse: separate; border-spacing: 1px; font-size: 12px; }
.lib-table th { background: #505050; color: #fff; text-align: left; padding: 4px 6px; white-space: nowrap; }
.lib-table td { padding: 2px 6px; vertical-align: middle; }
.lib-list tbody tr:nth-child(odd) td { background: #f0e4cc; }
.lib-list tbody tr:nth-child(even) td { background: #e4d4b4; }
.lib-list tbody tr:hover td { background: #fff3d6; }
.lib-sortable { cursor: pointer; user-select: none; }
.lib-sortable::after { content: ' \2195'; opacity: .5; }
.lib-sortable[data-dir=asc]::after { content: ' \25B2'; opacity: 1; }
.lib-sortable[data-dir=desc]::after { content: ' \25BC'; opacity: 1; }
.lib-img { width: 36px; text-align: center; }
.lib-mimg { width: 68px; }
.lib-name a { font-weight: bold; }
.lib-n { text-align: right; white-space: nowrap; }
.lib-extra { color: #5f4d41; }
.lib-sprite { image-rendering: pixelated; image-rendering: crisp-edges; vertical-align: middle; }
.lib-x2 { zoom: 2; }
.lib-x3 { zoom: 3; }
.lib-detail { display: flex; gap: 16px; align-items: flex-start; }
.lib-detail-img { min-width: 110px; min-height: 100px; display: flex; align-items: flex-end; justify-content: center; background: #e4d4b4; border: 1px solid #a08a6a; padding: 6px; }
.lib-detail-body { flex: 1; }
.lib-kv th { width: 180px; }
.lib-kv td { background: #f0e4cc; }
.lib-desc { font-style: italic; margin: 8px 0 0; }
.lib-store { margin: 8px 0 0; font-weight: bold; }
.lib-voices { margin: 8px 0 0; color: #5f4d41; }
.lib-grid, .lib-loot, .lib-where { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-card, .lib-loot-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 92px; min-height: 76px; padding: 4px; background: #e4d4b4; border: 1px solid #a08a6a; text-align: center; font-size: 11px; color: #3a2a1a !important; text-decoration: none; }
.lib-card:hover, a.lib-loot-item:hover { background: #fff3d6; }
.lib-loot-item { width: 84px; min-height: 60px; }
.lib-count { position: absolute; top: 30px; left: 50%; margin-left: 4px; font-size: 10px; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.lib-place { padding: 3px 8px; background: #e4d4b4; border: 1px solid #a08a6a; font-size: 12px; text-decoration: none; }
.lib-place:hover { background: #fff3d6; }
.lib-mapbox { padding: 6px; }
.lib-map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; }
.lib-floor { display: inline-flex; align-items: center; gap: 4px; }
.lib-floor b { min-width: 22px; text-align: center; font-size: 14px; }
.lib-coords { font-family: monospace; min-width: 140px; }
/* onde nao ha mapa (fora do mundo, sqm sem chao) fica preto, em todo andar; o mar de verdade vem nos tiles.
   O seletor duplo ganha do .leaflet-container (#ddd) do leaflet.css, que carrega depois. */
.lib-map { height: 620px; border: 1px solid #3a2a1a; }
.lib-map, .lib-map.leaflet-container { background: #000; }
/* andares de baixo vistos de cima (map.js, so acima do terreo): escurecidos, como profundidade */
.lib-map .leaflet-below1-pane { filter: brightness(0.5); }
.lib-map .leaflet-below2-pane { filter: brightness(0.34); }
.lib-map .leaflet-below3-pane { filter: brightness(0.22); }
.lib-map .leaflet-tile { image-rendering: pixelated; }
.lib-map a { font-weight: bold; }
@media (max-width: 700px) {
  .lib-detail { flex-direction: column; }
  .lib-map { height: 70vh; }
  .lib-list td:nth-child(n+7), .lib-list th:nth-child(n+7) { display: none; }
}
/* quests */
.lib-intro { margin: 0 0 8px; }
.lib-box h2 small { color: #7a5a3a; font-weight: normal; }
.lib-quests td { padding: 3px 6px; }
.lib-reward a { display: inline-flex; gap: 2px; margin-right: 6px; vertical-align: middle; }
.lib-reward span { color: #5f4d41; }
.lib-mission { padding: 6px 0 8px; border-top: 1px solid #c8b08a; }
.lib-mission:first-of-type { border-top: 0; }
.lib-mission h3 { font-size: 13px; margin: 0 0 4px; color: #3a2a1a; }
.lib-steps { margin: 0 0 4px 18px; padding: 0; }
.lib-steps li { margin: 2px 0; }
.lib-mappos { margin: 6px 0 0; }
.lib-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-choice { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* mapa: sprites dos monstros e NPCs com o nome em cima (map.js) */
.lib-mk { overflow: visible; }
.lib-mk img { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.lib-mk-name { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 1px; white-space: nowrap;
  font: bold 11px Verdana, Tahoma, sans-serif; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; }
.lib-mk-name small { font-size: 9px; color: #ddd; }
.lib-mk-m { color: #5fd35f; }
.lib-mk-n { color: #7fd0ff; }
/* "Disponivel em": em quais mundos o sistema esta no ar (config/site_worlds.php, system/site_worlds.php) */
.sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; }
.sw-label { font-size: 11px; font-weight: bold; color: #5f4d41; margin-right: 2px; }
.sw-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border: 1px solid #a08a6a; font-size: 11px;
  font-weight: normal; line-height: 1.5; white-space: nowrap; }
.sw-on { background: #d9e4c0; border-color: #5c7a3a; color: #2f4a17; }
.sw-off { background: #e8dcc6; color: #8a7a66; }
.sw-mark { font-weight: bold; }
/* fileira "Modo" (ex.: Loot Pouch: loot completo / so moedas): pergaminho dourado; o modo diferente do normal em ambar */
.sw-mode { background: #efe3c2; border-color: #a88a4e; color: #4e3b1c; }
.sw-mode b { font-weight: bold; }
.sw-mode-alt { background: #f3d99a; border-color: #9a6a1c; color: #5a3608; }
.sw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sys-card .sw-row { margin-top: 3px; gap: 3px; }
.sys-card .sw-label { font-size: 10px; }
.sys-card .sw-chip { font-size: 10px; padding: 0 5px; }
.sw-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.sw-box { padding: 4px 8px; } .sw-box .sw-row { margin: 0; }