/* Guías del servidor: estilos aislados. */
.xsg-home-guide {
	position: relative;
	display: flex !important;
	align-items: center;
	width: 100%;
	min-height: 90px;
	margin: 13px 0 0;
	padding: 13px 14px;
	background: radial-gradient(circle at 82% 10%, rgba(40, 172, 238, .18), transparent 42%), linear-gradient(112deg, #103a56, #091b2d 68%, #101a27);
	border: 1px solid #3c779b;
	border-left: 4px solid #edbb3f;
	border-radius: 5px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .36), 0 0 14px rgba(24, 145, 211, .1), inset 0 1px rgba(255, 255, 255, .05);
	color: #eaf5ff !important;
	text-decoration: none !important;
	overflow: hidden;
	isolation: isolate;
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.xsg-home-guide:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #37b9f4 34%, #f0bd43 72%, transparent);
	box-shadow: 0 0 10px rgba(46, 181, 239, .5);
	pointer-events: none;
}
.xsg-home-guide:after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -32px;
	top: -45px;
	width: 150px;
	height: 150px;
	background: radial-gradient(circle, rgba(237, 187, 63, .15), transparent 68%);
	pointer-events: none;
}
.xsg-home-guide:hover,
.xsg-home-guide:focus {
	border-color: #55b6e2;
	border-left-color: #ffd15d;
	box-shadow: 0 13px 28px rgba(0, 0, 0, .42), 0 0 20px rgba(37, 174, 235, .2), inset 0 1px rgba(255, 255, 255, .06);
	color: #fff !important;
	text-decoration: none !important;
	transform: translateY(-2px);
}
.xsg-home-guide-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	margin-right: 13px;
	background: linear-gradient(145deg, #195277, #0a2a43);
	border: 1px solid #62b6df;
	border-radius: 5px;
	box-shadow: 0 0 13px rgba(46, 173, 231, .15), inset 0 1px rgba(255, 255, 255, .08);
}
.xsg-home-guide-icon svg {
	width: 29px;
	height: 29px;
	fill: #f2c34d;
	filter: drop-shadow(0 0 5px rgba(239, 188, 61, .25));
}
.xsg-home-guide-copy {
	position: relative;
	display: block;
	min-width: 0;
	line-height: 1.15;
}
.xsg-home-guide-copy small,
.xsg-home-guide-copy strong,
.xsg-home-guide-copy em {
	display: block;
	font-style: normal;
}
.xsg-home-guide-copy small {
	margin-bottom: 5px;
	color: #77c8ec;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.35px;
}
.xsg-home-guide-copy strong {
	color: #fff;
	font-family: "PT Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .4px;
	text-shadow: 0 1px 8px rgba(25, 161, 226, .18);
}
.xsg-home-guide-copy em {
	margin-top: 4px;
	color: #d8ab43;
	font-size: 10px;
}
.xsg-home-guide-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	margin-left: auto;
	background: rgba(6, 25, 40, .7);
	border: 1px solid #3f86aa;
	border-radius: 50%;
	color: #80d8ff;
	font-size: 21px;
	line-height: 1;
	box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

.xsg-page {
	position: relative;
	width: 100%;
	color: #cbd9e6;
}
.xsg-page * {
	box-sizing: border-box;
}
.xsg-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 132px;
	margin-bottom: 18px;
	padding: 24px 26px;
	background: linear-gradient(125deg, rgba(11, 37, 59, .98), rgba(6, 17, 31, .98));
	border: 1px solid #31536d;
	border-radius: 5px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .03);
	overflow: hidden;
}
.xsg-hero:after {
	content: "";
	position: absolute;
	top: -80px;
	right: -30px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(23, 151, 223, .16), transparent 68%);
	pointer-events: none;
}
.xsg-hero-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	margin-right: 20px;
	background: linear-gradient(145deg, #173f5e, #091f33);
	border: 1px solid #3a789f;
	border-radius: 5px;
	box-shadow: 0 0 20px rgba(28, 152, 222, .12), inset 0 1px rgba(255, 255, 255, .06);
}
.xsg-hero-icon svg {
	width: 36px;
	height: 36px;
	fill: #e0b144;
}
.xsg-hero > div {
	position: relative;
	z-index: 1;
}
.xsg-hero small,
.xsg-guide-heading small {
	display: block;
	margin-bottom: 5px;
	color: #d7a937;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.4px;
}
.xsg-hero h2 {
	margin: 0 0 7px;
	color: #f4f9ff;
	font-family: "PT Sans", Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 34px;
}
.xsg-hero p {
	margin: 0;
	color: #9eb4c7;
	font-size: 14px;
	line-height: 21px;
}
.xsg-guide {
	position: relative;
	padding: 22px 24px 24px;
	background: linear-gradient(145deg, rgba(10, 29, 47, .96), rgba(5, 15, 27, .98));
	border: 1px solid #2b4b64;
	border-top: 2px solid #239fdc;
	border-radius: 5px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .025);
}
.xsg-guide-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	op: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
}
.xsg-guide-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.xsg-guide-tabs label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 68px;
	padding: 10px 14px;
	background: linear-gradient(110deg, #0c263c, #071725);
	border: 1px solid #2e526c;
	border-radius: 4px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .025);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.xsg-guide-tabs label:hover {
	background: linear-gradient(110deg, #12334d, #091b2b);
	border-color: #3b7699;
	transform: translateY(-1px);
}
.xsg-guide-tabs label:after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, #27aeef, transparent);
	opacity: 0;
	transition: opacity .2s ease;
}
.xsg-tab-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 39px;
	width: 39px;
	height: 39px;
	margin-right: 11px;
	background: #081a29;
	border: 1px solid #315b75;
	border-radius: 3px;
	color: #68c9f4;
	font-size: 12px;
	font-weight: 700;
}
.xsg-guide-tabs label > span:last-child {
	display: block;
	min-width: 0;
}
.xsg-guide-tabs small,
.xsg-guide-tabs strong {
	display: block;
}
.xsg-guide-tabs small {
	margin-bottom: 3px;
	color: #6f98b1;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.xsg-guide-tabs strong {
	color: #dceaf5;
	font-size: 14px;
	line-height: 19px;
}
#xsg-guide-golden:checked ~ .xsg-guide-tabs label[for="xsg-guide-golden"],
#xsg-guide-kundun:checked ~ .xsg-guide-tabs label[for="xsg-guide-kundun"],
#xsg-guide-feather:checked ~ .xsg-guide-tabs label[for="xsg-guide-feather"] {
	background: linear-gradient(110deg, #17405e, #0a2032);
	border-color: #47a3d2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
}
#xsg-guide-golden:checked ~ .xsg-guide-tabs label[for="xsg-guide-golden"]:after,
#xsg-guide-kundun:checked ~ .xsg-guide-tabs label[for="xsg-guide-kundun"]:after,
#xsg-guide-feather:checked ~ .xsg-guide-tabs label[for="xsg-guide-feather"]:after {
	opacity: 1;
}
#xsg-guide-golden:checked ~ .xsg-guide-tabs label[for="xsg-guide-golden"] .xsg-tab-number,
#xsg-guide-kundun:checked ~ .xsg-guide-tabs label[for="xsg-guide-kundun"] .xsg-tab-number,
#xsg-guide-feather:checked ~ .xsg-guide-tabs label[for="xsg-guide-feather"] .xsg-tab-number {
	border-color: #d5a83c;
	color: #e8ba47;
}
.xsg-guide-panel {
	display: none;
}
#xsg-guide-golden:checked ~ .xsg-guide-panels .xsg-guide-panel-golden,
#xsg-guide-kundun:checked ~ .xsg-guide-panels .xsg-guide-panel-kundun,
#xsg-guide-feather:checked ~ .xsg-guide-panels .xsg-guide-panel-feather {
	display: block;
}
.xsg-coming-soon {
	display: flex;
	align-items: center;
	min-height: 132px;
	margin-top: 18px;
	padding: 22px;
	background: linear-gradient(125deg, rgba(17, 49, 72, .92), rgba(7, 22, 35, .96));
	border: 1px solid #345a72;
	border-left: 3px solid #d3a43a;
	border-radius: 4px;
}
.xsg-coming-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	margin-right: 17px;
	background: #0a2133;
	border: 1px solid #467a99;
	border-radius: 4px;
	color: #e5b546;
	font-size: 20px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.xsg-coming-soon small,
.xsg-coming-soon strong {
	display: block;
}
.xsg-coming-soon small {
	margin-bottom: 4px;
	color: #d5a83d;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.xsg-coming-soon strong {
	color: #eef7fd;
	font-size: 19px;
	line-height: 24px;
}
.xsg-coming-soon p {
	margin: 5px 0 0;
	color: #9bb2c2;
	font-size: 14px;
	line-height: 21px;
}
.xsg-guide-heading {
	display: flex;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #243f55;
}
.xsg-guide-number {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	margin-right: 14px;
	background: #0a1e30;
	border: 1px solid #37637f;
	border-radius: 4px;
	color: #63c8f6;
	font-size: 16px;
	font-weight: 700;
}
.xsg-guide-heading small {
	margin-bottom: 3px;
	font-size: 10px;
}
.xsg-guide-heading h3 {
	margin: 0;
	color: #f3f8fd;
	font-family: "PT Sans", Arial, sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 28px;
}
.xsg-guide-intro {
	margin: 18px 0;
	color: #b3c5d4;
	font-size: 15px;
	line-height: 23px;
}
.xsg-drop-rules {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
}
.xsg-drop-rules span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70px;
	padding: 9px 6px;
	background: linear-gradient(160deg, #102c44, #081827);
	border: 1px solid #31536c;
	border-radius: 4px;
	color: #9eb6c9;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
}
.xsg-drop-rules b {
	display: block;
	margin-bottom: 5px;
	color: #e4b747;
	font-size: 22px;
	line-height: 25px;
}
.xsg-guide-note {
	display: flex;
	align-items: center;
	margin-top: 16px;
	padding: 11px 13px;
	background: rgba(7, 24, 39, .88);
	border: 1px solid #294961;
	border-left: 3px solid #d6a837;
	border-radius: 3px;
}
.xsg-guide-note > span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border: 1px solid #bc9130;
	border-radius: 50%;
	color: #e3b84d;
	font-family: Georgia, serif;
	font-size: 12px;
	font-weight: 700;
}
.xsg-guide-note p {
	margin: 0;
	color: #8fa7ba;
	font-size: 12px;
	line-height: 19px;
}
.xsg-guide-note-top {
	margin-bottom: 17px;
}
.xsg-kundun-boxes {
	display: grid;
	gap: 10px;
}
.xsg-kundun-box {
	background: rgba(5, 17, 29, .94);
	border: 1px solid #2c4c64;
	border-radius: 4px;
	overflow: hidden;
}
.xsg-kundun-box[open] {
	border-color: #397092;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.xsg-kundun-box summary {
	display: flex;
	align-items: center;
	min-height: 68px;
	padding: 10px 14px;
	background: linear-gradient(100deg, #102d45, #081827 72%);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.xsg-kundun-box summary::-webkit-details-marker {
	display: none;
}
.xsg-kundun-box summary:hover {
	background: linear-gradient(100deg, #143750, #0a1d2e 72%);
}
.xsg-box-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	margin-right: 12px;
	background: linear-gradient(145deg, #1a4767, #0a2438);
	border: 1px solid #4182a9;
	border-radius: 4px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 4px 10px rgba(0, 0, 0, .2);
}
.xsg-box-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 50px;
	max-height: 50px;
}
.xsg-box-name {
	display: block;
	min-width: 0;
}
.xsg-box-name small,
.xsg-box-name strong {
	display: block;
}
.xsg-box-name small {
	margin-bottom: 3px;
	color: #709db8;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.xsg-box-name strong {
	color: #edf7ff;
	font-size: 17px;
	line-height: 22px;
}
.xsg-box-count {
	margin-left: auto;
	padding: 4px 8px;
	background: #081827;
	border: 1px solid #2e5067;
	border-radius: 3px;
	color: #8fb3c9;
	font-size: 11px;
	white-space: nowrap;
}
.xsg-box-arrow {
	width: 9px;
	height: 9px;
	margin: 0 4px 0 13px;
	border-right: 2px solid #5fc3f3;
	border-bottom: 2px solid #5fc3f3;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s ease;
}
.xsg-kundun-box[open] .xsg-box-arrow {
	transform: rotate(225deg) translate(-2px, -2px);
}
.xsg-box-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 15px;
	border-top: 1px solid #29475e;
}
.xsg-drop-category {
	min-width: 0;
	padding: 12px;
	background: rgba(10, 30, 47, .78);
	border: 1px solid #29475d;
	border-radius: 3px;
}
.xsg-drop-category:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
.xsg-drop-category-wide {
	grid-column: 1 / -1;
}
.xsg-drop-category h4 {
	display: flex;
	align-items: center;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #2c4b60;
	color: #e5b545;
	font-size: 15px;
	font-weight: 700;
	line-height: 17px;
}
.xsg-drop-category h4 small {
	margin-left: auto;
	padding: 1px 6px;
	background: #071724;
	border: 1px solid #28475c;
	border-radius: 8px;
	color: #83a9bf;
	font-size: 10px;
}
.xsg-drop-category ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.xsg-drop-category li {
	position: relative;
	min-width: 0;
	padding: 5px 7px 5px 16px;
	background: rgba(5, 18, 29, .66);
	border: 1px solid rgba(49, 80, 101, .62);
	border-radius: 2px;
	color: #b7c9d6;
	font-size: 12px;
	line-height: 18px;
}
.xsg-drop-category li:before {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	width: 4px;
	height: 4px;
	background: #30aeea;
	box-shadow: 0 0 5px rgba(48, 174, 234, .55);
	transform: rotate(45deg);
}
.xsg-feather-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: 12px;
}
.xsg-feather-items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.xsg-feather-items > span {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 116px;
	padding: 13px;
	background: linear-gradient(150deg, #102e47, #071826);
	border: 1px solid #315873;
	border-radius: 4px;
	text-align: center;
}
.xsg-feather-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 9px;
	background: #091b2a;
	border: 1px solid #426d87;
	border-radius: 4px;
	box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 5px 12px rgba(0, 0, 0, .22);
}
.xsg-feather-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 48px;
	max-height: 48px;
	image-rendering: auto;
}
.xsg-feather-items small,
.xsg-feather-items strong,
.xsg-feather-items em {
	display: block;
}
.xsg-feather-items small {
	margin-bottom: 3px;
	color: #719bb4;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.xsg-feather-items strong {
	color: #edf6fd;
	font-size: 15px;
	line-height: 20px;
}
.xsg-feather-items em {
	margin-top: 3px;
	color: #d8a93b;
	font-size: 12px;
	font-style: normal;
}
.xsg-feather-rate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 116px;
	padding: 13px;
	background: radial-gradient(circle at 50% 25%, rgba(202, 153, 36, .16), transparent 65%), #0a1b2a;
	border: 1px solid #9d7b2f;
	border-radius: 4px;
	box-shadow: inset 0 0 18px rgba(220, 172, 55, .06);
	text-align: center;
}
.xsg-feather-rate small {
	color: #c29b42;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
}
.xsg-feather-rate strong {
	margin: 4px 0;
	color: #f1c456;
	font-size: 42px;
	line-height: 46px;
	text-shadow: 0 0 15px rgba(231, 184, 65, .25);
}
.xsg-feather-rate span {
	color: #819caf;
	font-size: 12px;
}
.xsg-monster-heading {
	margin: 20px 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid #29475d;
}
.xsg-monster-heading small {
	display: block;
	margin-bottom: 4px;
	color: #d4a63a;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
}
.xsg-monster-heading h4 {
	margin: 0 0 4px;
	color: #edf6fd;
	font-size: 21px;
	line-height: 26px;
}
.xsg-monster-heading p {
	margin: 0;
	color: #8fa7b9;
	font-size: 13px;
	line-height: 20px;
}
.xsg-monster-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.xsg-monster-grid > span {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 8px 10px;
	background: linear-gradient(145deg, #102b42, #071724);
	border: 1px solid #30516a;
	border-radius: 3px;
}
.xsg-monster-grid b {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	background: #071826;
	border: 1px solid #35617d;
	border-radius: 3px;
	color: #57bee9;
	font-size: 10px;
}
.xsg-monster-grid strong {
	color: #cbdce8;
	font-size: 13px;
	line-height: 18px;
}
.xsg-feather-note {
	margin-top: 14px;
	border-left-color: #d3a137;
}
.xsg-feather-note p strong,
.xsg-feather-note p b {
	color: #e1b348;
}

@media (max-width: 700px) {
	.xsg-hero {
		align-items: flex-start;
		padding: 18px;
	}
	.xsg-hero-icon {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
		margin-right: 13px;
	}
	.xsg-hero-icon svg {
		width: 28px;
		height: 28px;
	}
	.xsg-hero h2 {
		font-size: 21px;
		line-height: 27px;
	}
	.xsg-guide {
		padding: 17px 15px 18px;
	}
	.xsg-guide-tabs {
		grid-template-columns: 1fr;
	}
	.xsg-drop-rules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.xsg-box-content,
	.xsg-drop-category ul {
		grid-template-columns: 1fr;
	}
	.xsg-drop-category:last-child:nth-child(odd) {
		grid-column: auto;
	}
	.xsg-drop-category-wide {
		grid-column: auto;
	}
	.xsg-box-count {
		display: none;
	}
	.xsg-feather-overview {
		grid-template-columns: 1fr;
	}
	.xsg-monster-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}