/* Wiki-ul Velon — aceeasi haina ca site-ul (antetul cu sigla, rosu-inchis,
   auriu si pergament), dar pe toata latimea, ca enciclopedia oficiala. */
:root {
	--wk-red: #7b1300; --wk-red2: #5a0d02; --wk-red3: #a1261a;
	--wk-gold: #f2d27a; --wk-gold2: #c9a35a; --wk-ink: #2a0d00; --wk-mut: #6b4a2a;
	--wk-parch: #f3e4bf; --wk-parch2: #ead6a6; --wk-line: #c9ad7a; --wk-dark: #160805;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wk { margin: 0; color: var(--wk-ink); font: 14px/1.5 "Segoe UI", Tahoma, Arial, sans-serif;
	background: #120503 url(../main/img/container-bg.jpg) repeat-y 50% 0; background: radial-gradient(ellipse at 50% 0, #3a0c05 0, #160603 45%, #0c0302 100%) fixed; }
a { color: var(--wk-red); text-decoration: none; }
a:hover { color: var(--wk-red3); }
img { max-width: 100%; }

/* antet: imaginea de antet a site-ului, cu sigla Velon */
.wk-head { position: relative; height: 170px; background: url(../main/img/header-bg-velon.jpg) no-repeat 50% 0 / auto 253px; border-bottom: 3px solid #2a0e04; }
.wk-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(rgba(10, 3, 1, 0), rgba(10, 3, 1, .92)); }
.wk-logo { position: absolute; left: 50%; top: 0; width: 200px; margin-left: -100px; z-index: 2; }
.wk-logo img { display: block; width: 200px; height: auto; }
.wk-headbar { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 16px; max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.wk-brand { color: var(--wk-gold); font: bold 18px/1 Georgia, "Palatino Linotype", serif; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.wk-brand:hover { color: #fff; }
.wk-back { margin-left: auto; color: #e9cf91; font-size: 13px; white-space: nowrap; }
.wk-back:hover { color: #fff; }

/* cautarea (in antet si mare, pe prima pagina) */
.wk-search, .wk-bigsearch { position: relative; flex: 1; max-width: 620px; display: flex; align-items: center; }
.wk-search > i, .wk-bigsearch > i { position: absolute; left: 14px; color: #8a6a44; pointer-events: none; }
.wk-search input, .wk-bigsearch input { flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 40px; border: 2px solid #8a5a1c; border-right: 0;
	border-radius: 6px 0 0 6px; background: #fff8e6; color: var(--wk-ink); font-size: 15px; outline: none; }
.wk-search input:focus, .wk-bigsearch input:focus { border-color: var(--wk-gold2); box-shadow: 0 0 0 3px rgba(242, 210, 122, .25); }
.wk-search button, .wk-bigsearch button { height: 40px; padding: 0 18px; border: 2px solid #3a0a00; border-radius: 0 6px 6px 0; cursor: pointer;
	background: linear-gradient(#b8311f, #7d1608 55%, #5e0e02); color: var(--wk-gold); font-weight: bold; font-size: 14px; }
.wk-search button:hover, .wk-bigsearch button:hover { filter: brightness(1.12); }
.wk-suggest { position: absolute; left: 0; right: 0; top: 44px; z-index: 50; background: #fff8e6; border: 1px solid #8a5a1c; border-radius: 6px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .55); overflow: hidden; }
.wk-suggest a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--wk-ink); border-bottom: 1px solid #ecdcb4; }
.wk-suggest a:last-child { border-bottom: 0; }
.wk-suggest a:hover, .wk-suggest a.on { background: #f1dfae; }
.wk-suggest .s-img { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: #2a1408; border-radius: 4px; overflow: hidden; }
.wk-suggest .s-img img { max-width: 34px; max-height: 34px; }
.wk-suggest .s-txt b { display: block; font-size: 14px; }
.wk-suggest .s-txt small { color: var(--wk-mut); font-size: 12px; }

/* asezarea: meniu in stanga, continut in dreapta */
.wk-wrap { display: flex; align-items: flex-start; gap: 18px; max-width: 1300px; margin: 18px auto 40px; padding: 0 20px; }
.wk-navtoggle { display: none; }
.wk-nav { flex: none; width: 240px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
	background: linear-gradient(#2a0f06, #1a0904); border: 1px solid #5a2a0a; border-radius: 8px; padding: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
	scrollbar-width: thin; scrollbar-color: #7a3a12 #1a0904; }
.wk-home { display: block; padding: 9px 12px; margin-bottom: 6px; border-radius: 5px; color: var(--wk-gold); font-weight: bold;
	background: linear-gradient(#8a1a0c, #5e0e02); border: 1px solid #3a0a00; }
.wk-home.on, .wk-home:hover { color: #fff; filter: brightness(1.12); }
.wk-navgroup h3 { margin: 12px 4px 6px; color: var(--wk-gold2); font: bold 12px/1 Georgia, serif; letter-spacing: .08em; text-transform: uppercase; }
.wk-navgroup ul { list-style: none; margin: 0; padding: 0; }
.wk-navgroup a { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 4px; color: #ead8b0; font-size: 13.5px; }
.wk-navgroup a em { font-style: normal; font-size: 11px; color: #9c8458; background: rgba(0, 0, 0, .35); padding: 1px 7px; border-radius: 10px; }
.wk-navgroup a:hover { background: rgba(242, 210, 122, .08); color: #fff; }
.wk-navgroup a.on { background: linear-gradient(90deg, rgba(161, 38, 26, .9), rgba(161, 38, 26, .2)); color: #fff; }
.wk-main { flex: 1; min-width: 0; }

/* casete */
.wk-box { background: var(--wk-parch); background: linear-gradient(#f6e9c8, #efdcb0); border: 1px solid #8a5a1c; border-radius: 8px; margin-bottom: 18px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 248, 225, .6); overflow: hidden; }
.wk-bar { margin: 0; padding: 10px 16px; color: var(--wk-gold); font: bold 16px/1.3 Georgia, "Palatino Linotype", serif; letter-spacing: .02em;
	background: linear-gradient(#8a1a0c, #5a0d02); border-bottom: 2px solid #3a0a00; text-shadow: 0 1px 2px #000; }
.wk-bar small { margin-left: 10px; font: 13px "Segoe UI", Tahoma, sans-serif; color: #e8c98a; opacity: .9; }
.wk-bar-lg { font-size: 22px; padding: 12px 18px; }
.wk-bar-lg small { display: block; margin: 4px 0 0; }
.wk-tab { display: inline-block; margin: 14px 0 8px; padding: 4px 14px; border-radius: 4px; font: bold 13px Georgia, serif; color: #fff4d0;
	background: linear-gradient(#6d2a10, #46160a); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.wk-crumbs { margin: 0 0 10px; color: #c9ad7a; font-size: 13px; }
.wk-crumbs a { color: #f2d27a; }
.wk-crumbs b { color: #fff; font-weight: 600; }
.wk-crumbs i { margin: 0 6px; font-size: 11px; opacity: .7; }

/* prima pagina */
.wk-hero { text-align: center; padding: 26px 20px 22px; margin-bottom: 18px; border-radius: 8px; border: 1px solid #5a2a0a;
	background: radial-gradient(ellipse at 50% 0, rgba(161, 38, 26, .35), transparent 70%), linear-gradient(#2a0f06, #1a0904); color: #ead8b0; }
.wk-hero h1 { margin: 0 0 6px; color: var(--wk-gold); font: bold 30px/1.2 Georgia, "Palatino Linotype", serif; text-shadow: 0 2px 4px #000; }
.wk-hero p { margin: 0 auto 16px; max-width: 760px; color: #d9c08a; }
.wk-hero .wk-bigsearch { margin: 0 auto; }
.wk-bigsearch input, .wk-bigsearch button { height: 48px; font-size: 16px; }
.wk-bigsearch .wk-suggest { top: 52px; text-align: left; }
.wk-stat { margin-top: 12px; color: #c9ad7a; font-size: 13px; }
.wk-stat b { color: var(--wk-gold); font-size: 16px; }
.wk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 14px; }
.wk-tile { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 10px 12px; border-radius: 8px;
	background: linear-gradient(#fff6dc, #f0deb2); border: 1px solid var(--wk-line); color: var(--wk-ink); transition: transform .15s, box-shadow .15s; }
.wk-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(90, 40, 0, .3); color: var(--wk-red); }
.wk-tile-img { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
	background: radial-gradient(circle, #3a1a0a, #1a0904); border: 2px solid #8a5a1c; border-radius: 50%; overflow: hidden; }
.wk-tile-img img { max-width: 64px; max-height: 64px; }
/* patru iconite pe dala: cate una pe clasa la echipament, patru creaturi la mobi */
.wk-tile-img.n4, .wk-tile-img.n3, .wk-tile-img.n2 { width: 96px; height: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; border-radius: 14px; }
.wk-tile-img.n4 img, .wk-tile-img.n3 img, .wk-tile-img.n2 img { width: 100%; height: 100%; max-width: 38px; max-height: 38px; object-fit: contain; margin: auto; }
.wk-tile-img.mob img { max-width: 38px; max-height: 38px; width: 38px; height: 38px; object-fit: cover; object-position: 50% 12%; border-radius: 50%; }
.wk-tile b { font-size: 15px; }
.wk-tile em { font-style: normal; font-size: 12px; color: var(--wk-mut); }

/* liste */
.wk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--wk-line); background: rgba(255, 248, 225, .45); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-chips a, .wk-sort a { padding: 4px 12px; border-radius: 14px; border: 1px solid var(--wk-line); background: #fff6dc; color: var(--wk-ink); font-size: 13px; }
.wk-chips a.on, .wk-sort a.on, .wk-chips a:hover, .wk-sort a:hover { background: var(--wk-red); border-color: var(--wk-red2); color: var(--wk-gold); }
.wk-sort { display: flex; gap: 6px; margin-left: auto; }
.wk-filter { flex: 1; min-width: 180px; max-width: 320px; height: 32px; padding: 0 10px; border: 1px solid #997c47; border-radius: 5px; background: #fff8e6; font-size: 14px; }
.wk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; padding: 12px; }
.wk-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 248, 225, .7); border: 1px solid #e0c99a; color: var(--wk-ink); }
.wk-row:hover { background: #fff3cf; border-color: var(--wk-gold2); color: var(--wk-red); }
.wk-ico { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 5px; overflow: hidden;
	background: radial-gradient(circle, #3a1a0a, #160805); border: 1px solid #6b3a12; color: #8a6a44; }
.wk-ico img { max-width: 40px; max-height: 40px; }
.wk-ico.mob { border-radius: 50%; }
.wk-ico.mob img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.wk-row-main { flex: 1; min-width: 0; }
.wk-row-main b { display: block; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-row-main small { display: block; color: var(--wk-mut); font-size: 12px; }
.wk-lvl { flex: none; font-size: 12px; color: var(--wk-mut); text-align: right; }
.wk-lvl b { display: block; font-size: 16px; color: var(--wk-red); }
.wk-empty { padding: 30px; text-align: center; color: var(--wk-mut); font-size: 15px; }

/* fisa: poza + informatii */
.wk-top2 { display: grid; grid-template-columns: minmax(240px, 38%) 1fr; }
.wk-pic { padding: 4px 18px 18px; text-align: center; border-right: 1px dashed var(--wk-line); }
.wk-pic .wk-tab { display: block; text-align: center; }
.wk-big { display: block; margin: 6px auto 0; max-height: 330px; width: auto; filter: drop-shadow(0 10px 14px rgba(60, 20, 0, .45)); }
.wk-noimg { display: flex; align-items: center; justify-content: center; height: 220px; color: #b99a6a; font-size: 64px; }
.wk-pics { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.wk-ingame { max-width: 250px; border: 2px solid #8a5a1c; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.wk-slot { display: flex; align-items: center; justify-content: center; min-width: 54px; min-height: 54px; padding: 8px; border-radius: 6px;
	background: radial-gradient(circle, #3a1a0a, #160805); border: 2px solid #8a5a1c; color: #8a6a44; }
.wk-slot img { image-rendering: auto; transform: scale(1.4); transform-origin: center; margin: 10px; }
.wk-info { padding: 4px 20px 18px; }
.wk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 6px 0 4px; }
.wk-dl dt { color: var(--wk-mut); font-weight: 600; }
.wk-dl dd { margin: 0; font-weight: bold; color: var(--wk-red); }
.wk-line { margin: 10px 0; }
.wk-desc { margin: 12px 0 4px; padding: 10px 12px; border-left: 4px solid var(--wk-gold2); background: rgba(255, 248, 225, .7); border-radius: 0 6px 6px 0; }
.wk-desc p { margin: 4px 0 0; font-style: italic; color: #4a2a10; }
.wk-flags { margin-top: 12px; }
.wk-flags ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.wk-flags li.ok i { color: #3d7a12; }
.wk-flags li.no { color: #8a6a44; }
.wk-flags li.no i { color: #a00; }
.wk-bul { list-style: none; margin: 0; padding: 0; }
.wk-bul li { padding: 3px 0 3px 16px; position: relative; }
.wk-bul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; background: var(--wk-red); transform: rotate(45deg); }

/* legatura spre alta intrare (obiect sau mob) */
.wk-ref { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 2px 8px 2px 2px; border-radius: 4px;
	background: rgba(255, 246, 214, .9); border: 1px solid #e0c99a; color: var(--wk-red); vertical-align: middle; }
.wk-ref:hover { border-color: var(--wk-gold2); background: #fff3cf; }
.wk-ref-ico { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 3px; overflow: hidden;
	background: radial-gradient(circle, #3a1a0a, #160805); color: #8a6a44; font-size: 12px; }
.wk-ref-ico img { max-width: 26px; max-height: 26px; }
.wk-ref.mob .wk-ref-ico { border-radius: 50%; }
.wk-ref.mob .wk-ref-ico img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.wk-ref-name { font-weight: 600; font-size: 13.5px; }
.wk-n, .wk-note-s { font-style: normal; font-size: 12px; color: var(--wk-mut); }
.wk-n { color: var(--wk-ink); font-weight: bold; }

/* evolutia +0..+9 */
.wk-steps { display: grid; grid-template-columns: repeat(5, 1fr); }
.wk-step { display: flex; flex-direction: column; border-right: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); }
.wk-step:nth-child(5n) { border-right: 0; }
.wk-cost { padding: 8px 6px; text-align: center; font-weight: bold; color: #6b4a00; background: rgba(255, 248, 225, .6); border-bottom: 1px dashed var(--wk-line); }
.wk-cost i { color: #c9962a; }
.wk-mats { min-height: 40px; padding: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.wk-mats .wk-ref { padding-right: 6px; }
.wk-mats .wk-ref-name { display: none; }
.wk-card { flex: 1; margin: 6px 8px 10px; padding: 8px 6px 10px; border-radius: 4px; text-align: center; font-size: 12px; line-height: 1.45;
	background: linear-gradient(#3a2414, #24150b); border: 1px solid #6b4a2a; color: #e8d7b0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.wk-card h4 { margin: 0 0 4px; color: #f6cf55; font-size: 12.5px; }
.wk-card p { margin: 0; }
.wk-card p span { color: #b9a37a; }
.wk-card p b { color: #8fd08f; font-weight: 600; }
.wk-card-lvl { color: #e8d7b0; }

/* hartile cu locurile metinelor */
.wk-maps { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 16px 16px; }
.wk-maps a { flex: 0 1 auto; border: 2px solid #8a5a1c; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.wk-maps img { display: block; max-height: 300px; width: auto; }

/* drop-uri / origine pe coloane */
.wk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; padding: 0 16px 16px; }
.wk-refs { display: flex; flex-wrap: wrap; }
.wk-col .wk-refs .wk-ref { display: flex; width: 100%; }

.wk-note { color: #b99a6a; font-size: 12px; text-align: center; margin: 8px 0 0; }
.wk-top { position: fixed; right: 18px; bottom: 18px; width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--wk-red); color: var(--wk-gold); border: 1px solid #3a0a00; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.wk-top.on { display: flex; }

/* telefon si tableta */
@media (max-width: 1100px) {
	.wk-steps { grid-template-columns: repeat(3, 1fr); }
	.wk-step:nth-child(5n) { border-right: 1px solid var(--wk-line); }
	.wk-step:nth-child(3n) { border-right: 0; }
}
@media (max-width: 860px) {
	.wk-head { height: 150px; background-size: auto 220px; }
	.wk-logo, .wk-logo img { width: 160px; margin-left: -80px; }
	.wk-headbar { flex-wrap: wrap; gap: 8px; bottom: 8px; }
	.wk-brand { display: none; }
	.wk-back span { display: none; }
	.wk-wrap { display: block; margin-top: 12px; padding: 0 10px; }
	.wk-navtoggle { display: block; width: 100%; margin-bottom: 10px; padding: 10px; border-radius: 6px; border: 1px solid #3a0a00;
		background: linear-gradient(#8a1a0c, #5e0e02); color: var(--wk-gold); font-weight: bold; font-size: 15px; cursor: pointer; }
	.wk-nav { display: none; width: auto; position: static; max-height: none; margin-bottom: 12px; }
	.wk-nav.open { display: block; }
	.wk-top2 { grid-template-columns: 1fr; }
	.wk-pic { border-right: 0; border-bottom: 1px dashed var(--wk-line); }
	.wk-steps { grid-template-columns: repeat(2, 1fr); }
	.wk-step:nth-child(3n) { border-right: 1px solid var(--wk-line); }
	.wk-step:nth-child(2n) { border-right: 0; }
	.wk-list { grid-template-columns: 1fr; }
	.wk-hero h1 { font-size: 24px; }
	.wk-sort { margin-left: 0; }
}