/* ===================================================== */
/*                     RESET / BASE                      */
/* ===================================================== */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Inter',sans-serif;
	color: #e6f1ff;
	background: #0f1115;
	line-height: 1.5;
}

button, input, select {
	font-family: 'Inter',sans-serif;
}

/* ===================================================== */
/*                       HEADER                          */
/* ===================================================== */

.main-header {
	height: 520px;
	position: relative;
	background: url('../images/header-bg.jpg') center 30% / cover no-repeat;
}

/* ===================================================== */
/*                       LOGO                            */
/* ===================================================== */

#logo {
	height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.logo-wrapper {
	position: relative;
	z-index: 2;
}

.logo-link {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 150px;
	letter-spacing: 4px;
	color: #7ecbff;
	text-decoration: none;
	/* brilho simples */
	text-shadow: 0 0 10px rgba(0,150,255,0.6), 0 0 20px rgba(0,120,255,0.4), 0 4px 8px rgba(0,0,0,0.9);
	animation: logoPulse 4s ease-in-out infinite;
}

@keyframes logoPulse {

	0% {
		filter: brightness(1);
		text-shadow: 0 0 10px rgba(120,200,255,.5), 0 0 20px rgba(80,170,255,.5), 0 0 40px rgba(30,120,255,.3);
	}

	50% {
		filter: brightness(1.25);
		text-shadow: 0 0 20px rgba(150,220,255,.9), 0 0 40px rgba(80,170,255,.8), 0 0 80px rgba(30,120,255,.6);
	}

	100% {
		filter: brightness(1);
		text-shadow: 0 0 10px rgba(120,200,255,.5), 0 0 20px rgba(80,170,255,.5), 0 0 40px rgba(30,120,255,.3);
	}
}

/* ===================================================== */
/*                     CHAMAS                            */
/* ===================================================== */

.flame-overlay {
	position: absolute;
	bottom: -160px;
	left: 50%;
	transform: translateX(-50%);
	width: 150%;
	max-width: 2200px;
	height: 580px;
	background: url('../images/blue-flames.png') center bottom / cover no-repeat;
	mix-blend-mode: screen;
	opacity: 0.45;
	/* remove laterais do retângulo */
	mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0%, black 15%, black 85%, transparent 100% );
	pointer-events: none;
}

/* ===================================================== */
/*                     SUBTITLE                          */
/* ===================================================== */

.logo-subtitle {
	margin-top: 10px;
	font-family: 'Cormorant Garamond',serif;
	font-size: 45px;
	letter-spacing: 2px;
	color: #e6f2ff;
	text-align: center;
	text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 10px rgba(80,180,255,.4);
}

/* ===================================================== */
/*                       NAVBAR                          */
/* ===================================================== */

.main-nav {
	width: 100%;
	background: rgba(0,0,0,.92);
	backdrop-filter: blur(6px);
	padding: 12px 0;
	position: relative;
	z-index: 9999;
}

#menu_container {
	display: flex;
	justify-content: center;
}

#nav {
	display: flex;
	list-style: none;
}

	#nav li {
		margin: 0 18px;
	}

	#nav a {
		padding: 20px 28px;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1.5px;
		color: #9bb3c9;
		text-decoration: none;
		text-transform: uppercase;
		transition: .3s;
	}

		#nav a:hover {
			color: #5ecbff;
		}

	/* ============================= */
	/* DROPDOWN MENU FIX */
	/* ============================= */

	#nav li {
		position: relative;
	}

		#nav li ul {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			background: rgba(0,0,0,.95);
			padding: 10px 0;
			list-style: none;
			min-width: 200px;
			z-index: 9999;
		}

			#nav li ul li {
				margin: 0;
			}

			#nav li ul a {
				display: block;
				padding: 8px 18px;
				font-size: 15px;
			}

		#nav li:hover ul {
			display: block;
		}

/* ===================================================== */
/*                     MAIN LAYOUT                       */
/* ===================================================== */

#main {
	background: linear-gradient(rgba(10,15,25,.9),rgba(10,15,25,.95)), url('../images/header-bg.jpg');
	background-size: cover;
	background-position: center top;
	background-attachment: fixed;
}

#site_content {
	display: flex;
	gap: 30px;
	padding: 30px;
}

/* ===================================================== */
/*                       SIDEBAR                         */
/* ===================================================== */

#sidebar_container {
	width: 260px;
	flex-shrink: 0;
}

.sidebar {
	background: linear-gradient( 180deg, rgba(10,20,35,.92), rgba(5,10,20,.95) );
	border: 1px solid rgba(70,140,220,.25);
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 22px;
	box-shadow: 0 0 15px rgba(0,120,255,.15), inset 0 0 12px rgba(0,0,0,.9);
	transition: .25s;
}

	.sidebar:hover {
		border-color: rgba(120,200,255,.45);
		box-shadow: 0 0 20px rgba(0,150,255,.25), inset 0 0 18px rgba(0,0,0,.9);
	}

	.sidebar h3 {
		font-size: 22px;
		color: #8fd3ff;
		margin-bottom: 12px;
		border-bottom: 1px solid rgba(80,160,255,.25);
		padding-bottom: 6px;
		text-shadow: 0 0 8px rgba(0,150,255,.6), 0 0 15px rgba(0,100,255,.35);
	}

	/* inputs */

	.sidebar input {
		width: 100%;
		padding: 6px;
		margin-bottom: 8px;
		background: #0b1422;
		border: 1px solid rgba(80,160,255,.25);
		border-radius: 4px;
		color: #cfe6ff;
	}

		/* buttons */

		.sidebar button,
		.sidebar input[type="submit"] {
			width: 100%;
			padding: 10px 14px;
			background: linear-gradient( 180deg, #3ec5ff 0%, #1a8cff 50%, #0c5ccf 100% );
			border: 1px solid rgba(120,200,255,.4);
			border-radius: 6px;
			color: #ffffff;
			font-weight: 600;
			letter-spacing: .5px;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(80,170,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
			transition: .25s;
		}

			.sidebar button:hover,
			.sidebar input[type="submit"]:hover {
				background: linear-gradient( 180deg, #5fd4ff 0%, #2ea3ff 50%, #146ee6 100% );
				box-shadow: 0 0 15px rgba(120,200,255,.5), 0 0 30px rgba(60,150,255,.35);
				transform: translateY(-2px);
			}

			.sidebar button:active,
			.sidebar input[type="submit"]:active {
				transform: translateY(0px);
				box-shadow: 0 0 8px rgba(80,170,255,.35) inset;
			}

	/* links */

	.sidebar a {
		color: #6ec6ff;
		text-decoration: none;
	}

		.sidebar a:hover {
			color: #bfe9ff;
			text-shadow: 0 0 6px rgba(120,200,255,.6);
		}

	.sidebar ul {
		list-style: none;
	}

	.sidebar li {
		padding: 3px 0;
		color: #d6e8ff;
	}

/* ===================================================== */
/*                      CONTENT                          */
/* ===================================================== */

.content{
flex:1;
width:100%;
max-width:none;
background: rgba(10,15,25,.55);
border: 1px solid rgba(80,120,170,.25);
border-radius: 10px;
padding: 30px;
backdrop-filter: blur(6px);
box-shadow: 0 0 20px rgba(0,0,0,.6);
}

/* ===================================================== */
/*                     DOWNLOAD BTN                      */
/* ===================================================== */

.download-area {
	text-align: center;
	padding: 60px 0;
}

.download-btn {
	display: inline-block;
	padding: 18px 60px;
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	background: linear-gradient(#1bb6ff,#0066cc);
	box-shadow: 0 0 10px rgba(0,150,255,.7), 0 0 30px rgba(0,150,255,.4);
	transition: .25s;
}

	.download-btn:hover {
		transform: scale(1.07);
		background: linear-gradient(#3fd1ff,#0080ff);
		box-shadow: 0 0 20px rgba(0,150,255,1), 0 0 50px rgba(0,150,255,.7);
	}

/* ================================= */
/* CHARACTER PROFILE SYSTEM			 */
/* ================================= */

.character-wrapper {
	width: 100%;
	max-width: 1100px;
	margin: auto;
}

/* PANEL */

.tibia-panel {
	background: rgba(10,20,35,.9);
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 8px;
	margin-bottom: 25px;
	overflow: hidden;
	box-shadow: 0 0 12px rgba(0,0,0,.6);
}

.tibia-panel-title {
	background: rgba(0,0,0,.55);
	padding: 10px 14px;
	font-weight: 600;
	color: #8fd3ff;
	font-size: 18px;
	border-bottom: 1px solid rgba(80,160,255,.25);
}

.tibia-panel-content {
	padding: 12px;
}

/* ================================= */
/* CHARACTER INFO TABLE		     */
/* ================================= */

.char-info-table {
	width: 100%;
	border-collapse: collapse;
}

	.char-info-table td {
		padding: 8px 12px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

		.char-info-table td:first-child {
			width: 220px;
			color: #9bb3c9;
		}

		.char-info-table td:last-child {
			text-align: right;
			font-weight: 600;
		}

/* ================================= */
/* STATUS PLAYER					 */
/* ================================= */

.status-online {
	color: #00ff88;
	font-weight: 600;
	text-shadow: 0 0 6px rgba(0,255,136,0.6);
}

.status-offline {
	color: #ff6b6b;
	font-weight: 600;
}

/* ================================= */
/* GRID (SKILLS + EQUIPMENT)		 */
/* ================================= */

.char-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
	margin-bottom: 25px;
}

/* ================================= */
/* SKILLS TABLE						 */
/* ================================= */

.skills-table {
	width: 100%;
	border-collapse: collapse;
}

	.skills-table td {
		padding: 6px 10px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

		.skills-table td:first-child {
			color: #9bb3c9;
		}

		.skills-table td:last-child {
			text-align: right;
			font-weight: 600;
		}

/* ================================= */
/* EQUIPMENT GRID					 */
/* ================================= */

.equipment-grid {
	position: relative;
	width: 170px;
	height: 220px;
	margin: 20px auto;
	background-image: url('/layout/images/equipment-bg.png');
	background-size: 170px 220px;
}

.eq-slot {
	position: absolute;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.eq-slot img {
		width: 32px;
		height: 32px;
		transform: scale(1.25);
		transform-origin: center;
		image-rendering: pixelated;
		filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
		transition: transform 0.15s ease, filter 0.15s ease;
	}

		.eq-slot img:hover {
			transform: scale(1.4);
			filter: drop-shadow(0 0 6px rgba(100,180,255,0.9));
		}

/* POSIÇÕES */

.slot-head {
	top: 17px;
	left: 67px;
}

.slot-amulet {
	top: 40px;
	left: 19px;
}

.slot-backpack {
	top: 38px;
	left: 115px;
}

.slot-left {
	top: 88px;
	left: 19px;
}

.slot-armor {
	top: 70px;
	left: 66px;
}

.slot-shield {
	top: 92px;
	left: 115px;
}

.slot-ring {
	top: 144px;
	left: 19px;
}

.slot-legs {
	top: 123px;
	left: 66px;
}

.slot-ammo {
	top: 144px;
	left: 115px;
}

.slot-boots {
	top: 177px;
	left: 66px;
}

/* ================================= */
/* DEATH TABLE						 */
/* ================================= */

.death-table {
	width: 100%;
	border-collapse: collapse;
}

	.death-table td {
		padding: 8px 10px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

/* ================================= */
/* CHARACTER LIST					 */
/* ================================= */

.char-list {
	width: 100%;
	border-collapse: collapse;
}

	.char-list th {
		text-align: left;
		padding: 8px;
		background: rgba(0,0,0,.45);
		color: #8fd3ff;
	}

	.char-list td {
		padding: 8px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

/* ===================================================== */
/*                       FOOTER                          */
/* ===================================================== */

footer {
	background: #0b0d11;
	border-top: 1px solid #1f1f1f;
	color: #777;
	text-align: center;
	padding: 20px;
	margin-top: 40px;
}

/* ===================================================== */
/*                  ACCOUNT WELCOME                      */
/* ===================================================== */

.account-welcome {
	font-size: 16px;
	margin-bottom: 12px;
	color: #cfe6ff;
}

	.account-welcome strong {
		display: block;
		font-size: 22px;
		color: #5ecbff;
		margin-top: 4px;
	}

.account-menu {
	list-style: none;
	padding: 0;
	margin-top: 10px;
}

	.account-menu li {
		margin: 2px 0;
	}

	.account-menu a {
		display: block;
		padding: 4px 6px;
		border-radius: 6px;
		color: #6ec6ff;
		text-decoration: none;
		transition: .2s;
	}

		.account-menu a:hover {
			background: rgba(60,170,255,.15);
			padding-left: 10px;
			color: #bfe9ff;
		}

		.account-menu a::before {
			content: "â–¸ ";
			color: #5ecbff;
		}

/* ===================================================== */
/*                   HIGHSCORE SEARCH                    */
/* ===================================================== */

.highscore-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

	.highscore-form label {
		font-size: 14px;
		color: #9bb3c9;
	}

.highscore-select {
	width: 100%;
	padding: 6px;
	background: #0b1422;
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 4px;
	color: #cfe6ff;
}

.highscore-button {
	margin-top: 6px;
}

/* ===================================================== */
/*                     HIGHSCORES                        */
/* ===================================================== */

.highscores-container {
	max-width: 900px;
	margin: 40px auto;
	padding: 20px;
}

/* TITLE */

.highscores-title {
	text-align: center;
	font-size: 28px;
	margin-bottom: 20px;
	color: #8fd3ff;
	text-shadow: 0 0 8px rgba(0,150,255,.4);
}

/* FILTER BAR */

.highscores-filters {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}

	.highscores-filters select,
	.highscores-filters button {
		padding: 6px 10px;
		border-radius: 4px;
		border: 1px solid rgba(80,160,255,.25);
		background: #0b1422;
		color: #cfe6ff;
	}

/* TABLE */

.highscores-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

	/* HEADER */

	.highscores-table th {
		text-align: left;
		padding: 10px;
		background: rgba(0,0,0,.45);
		color: #8fd3ff;
		border-bottom: 1px solid rgba(80,160,255,.25);
	}

	/* CELLS */

	.highscores-table td {
		padding: 8px 10px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

	/* ZEBRA */

	.highscores-table tr:nth-child(even) {
		background: rgba(20,40,70,.25);
	}

	/* HOVER */

	.highscores-table tr:hover {
		background: rgba(60,120,200,.15);
	}

/* RANK NUMBER */

.highscores-rank {
	font-weight: 600;
	color: #5ecbff;
}

/* PLAYER NAME */

.highscores-table a {
	color: #6ec6ff;
	text-decoration: none;
}

	.highscores-table a:hover {
		color: #bfe9ff;
		text-shadow: 0 0 6px rgba(120,200,255,.6);
	}

/* ===================================================== */
/*                    COUNTRY FLAGS                      */
/* ===================================================== */

.highscores-flag {
	width: 14px;
	height: 10px;
	object-fit: contain;
	image-rendering: pixelated; /* mantém pixels nítidos */
	vertical-align: middle;
	margin-right: 6px;
	border-radius: 2px;
}

/* ===================================================== */
/*                 SERVER INFORMATION BOX                */
/* ===================================================== */

.server-info-item,
.server-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: 15px;
}

	.server-info-item .label,
	.server-status .label {
		color: #9bb3c9;
	}

	.server-info-item .value {
		font-weight: 700;
		color: #6ec6ff;
	}

		.server-info-item .value a {
			color: #6ec6ff;
			text-decoration: none;
		}

			.server-info-item .value a:hover {
				color: #bfe9ff;
			}

	/* STATUS */

	.server-status.online .value {
		color: #00ff88;
		font-weight: 700;
		text-shadow: 0 0 6px rgba(0,255,136,.5);
	}

	.server-status.offline .value {
		color: #ff4d4d;
		font-weight: 700;
		text-shadow: 0 0 6px rgba(255,0,0,.5);
	}

.server-info-list {
	list-style: none;
	padding: 0;
	margin-top: 10px;
}

	.server-info-list li {
		display: flex;
		justify-content: space-between;
		padding: 8px 0;
		border-bottom: 1px solid rgba(80,160,255,.15);
	}

	.server-info-list span {
		color: #9bb3c9;
	}

	.server-info-list strong {
		color: #6ec6ff;
		font-weight: 700;
	}

.server-status.online strong {
	color: #00ff88;
}

.server-status.offline strong {
	color: #ff4d4d;
}

/* ===================================================== */
/* SEARCH TOWN LIST                                      */
/* ===================================================== */

.town-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

	.town-search label {
		font-size: 14px;
		color: #9bb3c9;
	}

	.town-search select {
		width: 100%;
		padding: 6px;
		background: #0b1422;
		border: 1px solid rgba(80,160,255,.25);
		border-radius: 4px;
		color: #cfe6ff;
	}

/* ===================================================== */
/* SERVER INFO                                           */
/* ===================================================== */

.serverinfo-language {
	margin-bottom: 20px;
}

	.serverinfo-language button {
		background: linear-gradient(#1bb6ff,#0066cc);
		border: none;
		padding: 8px 14px;
		margin-right: 6px;
		color: white;
		border-radius: 6px;
		cursor: pointer;
		font-weight: bold;
	}

		.serverinfo-language button:hover {
			background: linear-gradient(#3fd1ff,#0080ff);
		}


.serverinfo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}


.server-card {
	background: rgba(10,20,35,.9);
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
}

	.server-card h3 {
		color: #8fd3ff;
		margin-bottom: 10px;
		border-bottom: 1px solid rgba(80,160,255,.25);
		padding-bottom: 6px;
	}

	.server-card ul {
		list-style: none;
		padding: 0;
	}

	.server-card li {
		padding: 4px 0;
		border-bottom: 1px solid rgba(80,120,170,.15);
	}

/* alinhamento geral */

.serverinfo-container {
	max-width: 1000px;
	margin: auto;
}

/* titulo */

.serverinfo-title {
	text-align: center;
	font-size: 32px;
	margin-bottom: 5px;
}

.serverinfo-sub {
	text-align: center;
	margin-bottom: 20px;
}

/* centralizar botões */

.serverinfo-language {
	text-align: center;
}

/* tabela filosofia */

.server-philosophy {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
}

	.server-philosophy th {
		text-align: left;
		padding: 10px;
		background: rgba(0,0,0,.45);
		color: #8fd3ff;
	}

	.server-philosophy td {
		padding: 8px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

.server-table {
	width: 100%;
	border-collapse: collapse;
}

	.server-table td {
		padding: 8px;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

/* ================= ACCOUNT PANEL ================= */

.account-container {
	width: 100%;
}

.account-title {
	text-align: center;
	font-size: 32px;
	margin-bottom: 5px;
}

.account-sub {
	text-align: center;
	opacity: .7;
	margin-bottom: 25px;
}

.account-card {
	background: rgba(10,20,35,.9);
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 20px;
	box-shadow: 0 0 10px rgba(0,0,0,.6);
}

	.account-card h3 {
		margin-bottom: 12px;
		color: #8fd3ff;
		border-bottom: 1px solid rgba(80,160,255,.25);
		padding-bottom: 6px;
	}

#myaccountTable td,
#myaccountTable th {
	padding: 8px;
}

.create-char-btn {
	display: block;
	margin-top: 12px;
	padding: 12px 22px;
	background: linear-gradient(180deg,#2aa9ff,#0a6cff);
	border: 1px solid rgba(120,180,255,.6);
	border-radius: 6px;
	color: white;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 0 0 10px rgba(30,120,255,.4), inset 0 0 6px rgba(255,255,255,.2);
	transition: all .2s ease;
	width: 220px;
	text-align: center;
	margin: 18px auto 0;
}

	.create-char-btn:hover {
		background: linear-gradient(180deg,#4ec2ff,#1a7cff);
		box-shadow: 0 0 14px rgba(50,150,255,.7), inset 0 0 8px rgba(255,255,255,.3);
	}

.form-group {
	margin-bottom: 16px;
}

	.form-group label {
		display: block;
		margin-bottom: 6px;
		font-weight: bold;
		color: #8fd3ff;
	}

.form-input {
	width: 100%;
	padding: 10px;
	background: rgba(10,20,35,.9);
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 6px;
	color: white;
	font-size: 14px;
}

	.form-input:focus {
		outline: none;
		border-color: #4ec2ff;
		box-shadow: 0 0 8px rgba(60,140,255,.4);
	}

.char-actions {
	margin-top: 4px;
}

#myaccountTable td {
	text-align: center;
	vertical-align: middle;
}

.char-name {
	color: #7ec8ff;
	font-weight: 600;
	text-decoration: none;
}

.online {
	color: #3cff6b;
	font-weight: 600;
}

.offline {
	color: #ff5555;
}

.btn-char {
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	margin-right: 4px;
	text-decoration: none;
}

	.btn-char.view {
		background: #2b7cff;
		color: white;
	}

	.btn-char.delete {
		background: #ff4040;
		color: white;
	}

/* ===================================================== */
/*                     HOME GRID                         */
/* ===================================================== */

.home-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 25px;
	max-width: 1100px;
	margin: auto;
}

.home-card {
	background: rgba(10,20,35,.9);
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 0 12px rgba(0,0,0,.6);
}

	.home-card h3 {
		color: #8fd3ff;
		margin-bottom: 12px;
		border-bottom: 1px solid rgba(80,160,255,.25);
		padding-bottom: 6px;
	}

	.home-card b {
		color: #9fd8ff;
	}

.copy-pix-btn,
.paypal-btn {
	background: linear-gradient(180deg,#2aa9ff,#0a6cff);
	border: 1px solid rgba(120,180,255,.6);
	border-radius: 6px;
	padding: 8px 16px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(30,120,255,.4);
	transition: .2s;
}

	.copy-pix-btn:hover,
	.paypal-btn:hover {
		background: linear-gradient(180deg,#4ec2ff,#1a7cff);
		box-shadow: 0 0 12px rgba(80,170,255,.6);
	}

/* ===================================================== */
/*                       FORUM                            */
/* ===================================================== */


/* ======================= */
/* BREADCRUMB / TITLE */
/* ======================= */

.forumBreadcrumb {
	font-size: 14px;
	margin-bottom: 10px;
	color: #9bb3c9;
}

	.forumBreadcrumb a {
		color: #6ec6ff;
		text-decoration: none;
	}

		.forumBreadcrumb a:hover {
			color: #bfe9ff;
			text-shadow: 0 0 6px rgba(120,200,255,.6);
		}

.forumTitle {
	font-size: 28px;
	color: #8fd3ff;
	margin-bottom: 10px;
}

	.forumTitle a {
		color: #6ec6ff;
		text-decoration: none;
	}

		.forumTitle a:hover {
			color: #bfe9ff;
		}


/* ======================= */
/* BOARD LIST */
/* ======================= */

#forumCategoryTable {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

	#forumCategoryTable td {
		padding: 14px;
		border-bottom: 1px solid rgba(80,120,170,.2);
		transition: .2s;
	}

	#forumCategoryTable tr {
		cursor: pointer;
	}

		#forumCategoryTable tr:hover {
			background: rgba(60,120,200,.18);
		}


/* ======================= */
/* THREAD LIST */
/* ======================= */

#forumThreadTable {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

	#forumThreadTable th {
		text-align: left;
		padding: 14px;
		background: rgba(0,0,0,.45);
		color: #8fd3ff;
		border-bottom: 1px solid rgba(80,160,255,.25);
	}

	#forumThreadTable td {
		padding: 14px;
		border-bottom: 1px solid rgba(80,120,170,.2);
		transition: .2s;
	}

	#forumThreadTable tr {
		cursor: pointer;
	}

		#forumThreadTable tr:hover {
			background: rgba(60,120,200,.18);
		}


/* ======================= */
/* THREAD POSTS */
/* ======================= */

.ThreadTable {
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	table-layout: auto;
}

	.ThreadTable td {
		padding: 18px;
		vertical-align: top;
		border-bottom: 1px solid rgba(80,120,170,.2);
	}

.forumPostText {
	width: 100%;
	color: #d6e8ff;
	line-height: 1.6;
	font-size: 15px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.ThreadTable p {
	margin: 0;
}


/* ======================= */
/* CREATE THREAD AREA */
/* ======================= */

.content form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
}


	/* ======================= */
	/* CHARACTER SELECT */
	/* ======================= */

	.content form select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 38px;
		min-width: 220px;
		padding: 8px 12px;
		background: #0b1422;
		border: 1px solid rgba(80,160,255,.25);
		border-radius: 6px;
		color: #cfe6ff;
		text-align: center;
		cursor: pointer;
	}

		.content form select:hover {
			border: 1px solid rgba(120,200,255,.45);
			box-shadow: 0 0 6px rgba(80,170,255,.25);
		}


/* ======================= */
/* TEXTAREA */
/* ======================= */

.forumReply {
	width: 100%;
	min-height: 160px;
	background: #0b1422;
	border: 1px solid rgba(80,160,255,.25);
	border-radius: 6px;
	padding: 10px;
	color: #cfe6ff;
	transition: .2s;
}

	.forumReply:focus {
		outline: none;
		border: 1px solid rgba(120,200,255,.6);
		box-shadow: 0 0 6px rgba(80,170,255,.25);
	}


/* ======================= */
/* BUTTON */
/* ======================= */

.content input[type="submit"] {
	padding: 10px 22px;
	background: linear-gradient(#2aa9ff,#0a6cff);
	border: 1px solid rgba(120,180,255,.6);
	border-radius: 6px;
	color: white;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(30,120,255,.4);
	transition: .2s;
}

	.content input[type="submit"]:hover {
		background: linear-gradient(#4ec2ff,#1a7cff);
		box-shadow: 0 0 14px rgba(80,170,255,.7);
		transform: translateY(-1px);
	}


/* ======================= */
/* BBCODE HELP */
/* ======================= */

.forum-bbcode-help {
	font-size: 13px;
	margin-top: 20px;
	padding-top: 10px;
	border-top: 1px solid rgba(80,160,255,.2);
	color: #9bb3c9;
}

.forumThreadBox {
	max-width: 100%;
	overflow: hidden;
}
.forumThreadHeader {
	font-size: 14px;
	color: #9bb3c9;
	text-align: right;
}

.forumTitle {
	font-size: 28px;
	color: #8fd3ff;
	margin-bottom: 20px;
}

.forumBreadcrumb {
	color: #9bb3c9;
	margin-bottom: 10px;
	font-size: 14px;
}

	.forumBreadcrumb a {
		color: #6ec6ff;
		text-decoration: none;
	}

/* header meta post */

.forumPostMeta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: #9bb3c9;
}

.forumPostDate {
	opacity: 0.9;
}

.forumPostAuthor a {
	color: #4db8ff;
	text-decoration: none;
}

	.forumPostAuthor a:hover {
		color: #8fd3ff;
	}

/* texto */

.forumPostText {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.6;
	color: #d6e8ff;
}

/* separador */

.bighr {
	border: none;
	border-top: 1px solid rgba(120,180,255,.25);
	margin: 25px 0;
}

/* ===================================================== */
/*                   ONLINE LIST                         */
/* ===================================================== */

.onlinelist-container{
max-width:900px;
margin:40px auto;
}

.onlinelist-table{
width:100%;
border-collapse:collapse;
font-size:15px;
}

.onlinelist-table th{
text-align:left;
padding:10px;
background:rgba(0,0,0,.45);
color:#8fd3ff;
border-bottom:1px solid rgba(80,160,255,.25);
}

.onlinelist-table td{
padding:8px 10px;
border-bottom:1px solid rgba(80,120,170,.2);
}

.onlinelist-table tr:nth-child(even){
background:rgba(20,40,70,.25);
}

.onlinelist-table tr:hover{
background:rgba(60,120,200,.15);
}

.onlinelist-table a{
color:#6ec6ff;
text-decoration:none;
}

.onlinelist-table a:hover{
color:#bfe9ff;
text-shadow:0 0 6px rgba(120,200,255,.6);
}

/* ================= ONLINE TITLE ================= */

.online-title{
text-align:center;
font-size:28px;
margin-bottom:20px;
color:#8fd3ff;
text-shadow:0 0 8px rgba(0,150,255,.4);
}

/* GUILDS PAGE */

.page-content{
width:100%;
max-width:100%;
}

.guilds-table{
width:100%;
border-collapse:collapse;
background:rgba(5,15,30,0.65);
border-radius:8px;
overflow:hidden;
}

.guilds-header{
background:rgba(0,0,0,0.45);
font-weight:600;
font-size:14px;
}

.guilds-header th{
padding:14px;
text-align:left;
color:#8fd3ff;
}

.guild-row{
cursor:pointer;
transition:all 0.2s ease;
}

.guild-row:hover{
background:rgba(0,140,255,0.08);
}

.guild-row td{
padding:16px;
vertical-align:middle;
}

/* LOGO */

.guild-logo img{
max-height:80px;
border-radius:6px;
display:block;
margin:auto;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}

/* GUILD NAME */

.guild-name{
font-size:16px;
font-weight:600;
color:#66b3ff;
}

.guild-motd{
font-size:13px;
opacity:0.7;
margin-top:4px;
}

/* INFO COLUMN */

.guild-info{
display:flex;
flex-direction:column;
gap:6px;
}

.guild-stat{
display:flex;
justify-content:space-between;
font-size:13px;
border-bottom:1px solid rgba(255,255,255,0.05);
padding-bottom:3px;
}

.guild-stat span{
opacity:0.7;
}

.guild-stat strong{
color:#6ec6ff;
}

.guild-logo-col{
width:120px;
}

.guild-info-col{
width:220px;
}

.guild-desc-col{
width:auto;
}

.guild-description-text{
font-size:13px;
opacity:0.65;
margin-top:6px;
max-width:500px;
line-height:1.4;
}

/* ===================================================== */
/*                     GUILD VIEW PAGE                   */
/* ===================================================== */

/* container geral */

#guildTitleDiv{
display:flex;
align-items:center;
gap:18px;
margin-bottom:30px;
}

#guildImageDiv img{
max-width:70px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.6);
}

#guildDescription h1{
font-size:28px;
color:#8fd3ff;
margin-bottom:4px;
}

#guildDescription p{
opacity:.7;
font-size:14px;
}


/* ===================================================== */
/*                     GUILD MEMBER TABLE                */
/* ===================================================== */

#guildViewTable{
width:100%;
border-collapse:collapse;
margin-bottom:30px;
font-size:15px;
}

#guildViewTable th{
text-align:left;
padding:12px;
background:rgba(0,0,0,.45);
color:#8fd3ff;
border-bottom:1px solid rgba(80,160,255,.25);
}

#guildViewTable td{
padding:10px 12px;
border-bottom:1px solid rgba(80,120,170,.2);
}

#guildViewTable tr:nth-child(even){
background:rgba(20,40,70,.25);
}

#guildViewTable tr:hover{
background:rgba(60,120,200,.15);
}

#guildViewTable a{
color:#6ec6ff;
text-decoration:none;
}

#guildViewTable a:hover{
color:#bfe9ff;
text-shadow:0 0 6px rgba(120,200,255,.6);
}


/* ================================= */
/* GUILD CONTROL PANEL */
/* ================================= */

.guild-actions{
width:100%;
display:flex;
flex-direction:column;
gap:14px;
margin-top:25px;
}

/* caixa */

.guild-actions form{
display:grid;
grid-template-columns:1fr auto;
grid-auto-rows:auto;
gap:8px 16px;

background:rgba(10,20,35,.9);
border:1px solid rgba(80,160,255,.25);
border-radius:8px;

padding:14px 16px;

box-shadow:0 0 10px rgba(0,0,0,.5);
}

/* remover bullet */

.guild-actions ul{
list-style:none;
margin:0;
padding:0;
display:contents;
}

.guild-actions li{
display:contents;
}

/* texto */

.guild-actions li:first-child{
grid-column:1 / span 2;
font-weight:600;
color:#8fd3ff;
}

/* inputs */

.guild-actions input,
.guild-actions textarea,
.guild-actions select{

width:100%;
padding:7px;

background:#0b1422;
border:1px solid rgba(80,160,255,.25);
border-radius:6px;

color:#cfe6ff;

}

/* textarea */

.guild-actions textarea{
height:55px;
resize:vertical;
}

/* botão padrão */

.guild-actions input[type="submit"]{

width:140px;
height:34px;

justify-self:end;
align-self:center;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

background:linear-gradient(#2aa9ff,#0a6cff);
border:1px solid rgba(120,180,255,.6);
border-radius:6px;

color:white;
font-weight:600;

cursor:pointer;

box-shadow:0 0 8px rgba(30,120,255,.4);
transition:.2s;

}

.guild-actions input[type="submit"]:hover{
background:linear-gradient(#4ec2ff,#1a7cff);
box-shadow:0 0 14px rgba(80,170,255,.7);
}

/* ================================= */
/* LAYOUT ESPECÍFICO DOS CAMPOS */
/* ================================= */

/* input abaixo do texto */

.guild-actions input[type="text"],
.guild-actions textarea,
.guild-actions select{
grid-column:1;
}

/* botão sempre na direita */

.guild-actions input[type="submit"]{
grid-column:2;
}

/* arquivo */

.guild-actions input[type="file"]{
grid-column:1;
}

/* múltiplos inputs (rank titles) */

.guild-actions form input[name^="rank_name"]{
grid-column:1;
}

.guild-actions input[type="submit"]{
width:140px;
height:34px;

display:flex;
align-items:center;
justify-content:center;

white-space:nowrap;

text-align:center;
font-size:13px;
padding:0 10px;
}

/* TABELA 4 - CHANGE GUILD MESSAGE */

.guild-actions textarea{
grid-column:1;
grid-row:2;
}

.guild-actions textarea + input[type="submit"]{
grid-column:2;
grid-row:2;
align-self:center;
}

/* TABELA 7 - DELETE GUILD */

.guild-actions form:has(input[value="Disband Guild"]){

grid-template-columns:1fr auto;
grid-template-rows:1fr;

align-items:center;

}

.guild-actions form:has(input[value="Disband Guild"]) li:first-child{

grid-column:1;
grid-row:1;

}

.guild-actions form:has(input[value="Disband Guild"]) input[type="submit"]{

grid-column:2;
grid-row:1;

}

/* ===================================== */
/* GUILD ACTION TABLE SPACING FIX        */
/* ===================================== */

.guild-actions table{
width:100%;
border-collapse:collapse;
margin:12px 0;
}

.guild-actions table:first-child{
margin-top:0;
}

.guild-actions table:last-child{
margin-bottom:0;
}

.guild-actions form{
margin:0;
}

.guild-invites-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.guild-invites-table th{
text-align:left;
padding:10px;
background:rgba(0,0,0,.45);
color:#8fd3ff;
}

.guild-invites-table td{
padding:8px;
border-bottom:1px solid rgba(80,120,170,.25);
}

.guild-invites-table tr:nth-child(even){
background:rgba(20,40,70,.25);
}

.guild-invites-table tr:hover{
background:rgba(60,120,200,.15);
}

.guild-invites-table form{
margin:0;
}