/* --- RESET E GLOBAIS --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	/* backgrounds */
	--primary: #1e1e1e;
	--secondary: #121212;
	--third: #2a2a2a;
	--border: #333;

	/* text */
	--font-color: #dcdcdc;

	/* Links / anchors */
	--anchor: #daa520;
	--anchor-hover: #ffcb05;

	/* accent colors */
	--accent-gold: #daa520;
	--accent-cyan: #00d2ff;
	--accent-green: #4cd137;

	/* buttons or alert boxes with different colors */
	--bg-danger: #3c0e0e;
	--color-danger: #9e5858;
	--border-danger: #350505;

	--bg-warning: #905c00;
	--color-warning: #39280a;
	--border-warning: #322001;

	--bg-info: #005d90;
	--color-info: #00263e;
	--border-info: #022530;

	--bg-success: #009039;
	--color-success: #003f0c;
	--border-success: #00380c;

	--bg-default: rgb(15,17,20);
	--color-default: #968452;
	--border-default: #000;
}

body {
	background-color: #121212;
	background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
	font-family: 'Roboto', sans-serif;
	color: var(--font-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Fontes Pixeladas para Títulos */
h1, h2, h3, .btn, .nav-brand, .ward-input, label, th, .social-btn, .section-title, .cta-button { 
	font-family: 'Press Start 2P', cursive; 
}

body, ul { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: var(--anchor); }
a:hover { color: var(--anchor-hover); }
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
* { transition-duration: 0.2s; }
*:hover { transition-duration: 0s; }

nav .container > div > ul > li > ul {
	position: absolute;
	border: 2px solid;
	border-top:none !important;
	border-color: var(--border);
	width: 200px;
}

nav { border: 10px solid var(--primary); }
nav .container { padding-left: 10px; }
nav .container > div > ul > li,
.modIcon:hover > i:nth-child(2) { display: inline-block; }

nav .container > div > ul > li > a { padding: 20px; }
nav .container > div > ul > li:hover > ul,
nav .container > div > ul > li > a,
nav .container > div > ul > li > ul > li > a { display: block; }
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
nav .container, .preventCollapse, .ellipsis { overflow: hidden; }

.topPane { margin-bottom: 10px; }
.leftPane {
	width: 100%;
}
.rightPane { 
	width: 100%;
}
.searchForm { width: 200px; }
.body { padding: 10px 0px; }
table { 
	width: 100%; 
	table-layout: auto;
	word-wrap: break-word;
	border-collapse: collapse;
}
td, th { 
	padding: 10px 8px; 
	word-wrap: break-word;
	overflow-wrap: break-word;
	vertical-align: middle;
	font-size: 12px;
}
.header { color: #33a7d1; }
.feedContainer { margin:2rem 0; }
.pull-left { float:left; }
.pull-right { float:right; }
.well, .header { width: auto;}
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }


.searchForm input {
    width: 100%;
    height: 25px;
    border: 1px solid var(--border);
    color: var(--font-color);
    font-size: 1em;
}

#countDownTimer {
	line-height: 2.3;
	padding: 0px 10px;
	color: #ff0000;
}

.modIcon > i:nth-child(2),
.modIcon:hover > i:nth-child(1),
/*.loginContainer, */
nav .container > div > ul > li > ul {
	display: none;
}

.loginForm {
    display: flex;
    flex-wrap: wrap;
}
.loginForm button:hover {
	background: #0000004d;
}
.loginForm button {
    width: 100%;
    margin-top: 10px;
    background: rgb(15,17,20);
    color: var(--font-color);
    height: 40px;
    border: 1px solid var(--border);
    font-size: 1em;
}

.loginForm input {
	width: 100%;
	height: 30px;
	border: none;
	color: #fff;
	font-size: 1em;
	border-bottom: 1px solid var(--border);
}


.main {
	width: 1220px;
	margin: 1rem auto;
	position: relative;
	z-index: 1;
	/* margin:auto; */
}

body {
	background: url("../img/umbreon_bg.png");
	background-size: 728px 738px;
}


.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
}



.alert-box {
	max-width: 500px;
	font-size: 14px;
	border-radius: 5px;
	border: 1px solid var(--third);
	margin: 0 auto;
	margin-bottom: 15px;
	text-align: center;
}

.alert-default {
	background: var(--bg-default);
	color: var(--color-default);
	border-color: var(--border-default);
}
.alert-info {
	background: var(--bg-info);
	color: var(--color-info);
	border-color: var(--border-info);
}
.alert-success {
    background: var(--bg-success);
    color: var(--color-success);
    border-color: var(--border-success);
}
.alert-warning {
	background: var(--bg-warning);
	color: var(--color-warning);
	border-color: var(--border-warning);
}
.alert-danger {
	background: var(--bg-danger);
	color: var(--color-danger);
	border-color: var(--border-danger);
}
.alert-collapse {display:inline-block;}
.alert-size1 { font-size: 12px; }
.alert-size2 { font-size: 15px; }
.alert-size3 { font-size: 18px; }
.alert-size4 { font-size: 20px; }


nav .container > div > ul > li > ul > li > a:hover,
.searchForm input, #countDownTimer, .loginForm input,
nav, table, .header, .feedContainer {
	background: var(--primary);
}

.feedContainer {	
	border-radius: 10px;
}

footer {
	background: var(--primary);
	border-radius: 10px;
}

.loginForm .well {
	width: 100%;
}

nav .container,
nav .container > div > ul > li > ul,
.leftPane, .rightPane, .topPane,
tr:nth-child(2n+1) {
	background: var(--secondary);
}

footer, .feedContainer,
nav .container, .topPane {
	border-bottom: 2px solid var(--border)
}

table, .header, .well, .smedia a {
	padding: 10px;
}

.searchForm input,
.loginForm input,
.alert-box {
	padding: 5px;
}

/* Znote AAC */
/* adding button style to select */
select {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
input {
	background: rgb(15,17,20);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
#loginContainer li {
	text-align: right;
}

div .displayPoints {
	position: relative;
	padding: 5px 15px 5px 15px;
}

div .displayPoints a {
	border: 1px solid #33a7d1;
	width: calc(50% - 10px);
	margin-bottom: 16px;
	text-align: center;
	text-align: center;
}

ul.linkbuttons {
	margin-top: 8px;
	padding: 0;
	list-style: none;
}
ul.linkbuttons li {
	display: block;
	border: 1px solid var(--accent-gold);
	width: 100%;
	margin-bottom: 10px;
	text-align: center;
	float: none;
}
ul.linkbuttons li:nth-child(odd) {
	margin-right: 0;
}
ul.linkbuttons li a {
	padding: 10px 5px;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 11px;
	word-wrap: break-word;
}
ul.linkbuttons:after {
	content: '';
	display: block;
	clear: both;
}
.widget,
.widget .body,
.search_widget,
.search_widget .body {
	padding-bottom: 10px;
}
.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 10px;
	word-wrap: break-word;
}
.widget .body {
	overflow: hidden;
}
.search_widget form {
	margin: auto;
}
.search_widget input {
	width: 100%;
	float: left;
}
.search_widget label {
	padding: 9px;
	float: left;
}
.search_widget form:after {
	display: block;
	content: '';
	clear: both;
}
div.relative {
	position: relative;
}
.search_widget #name_suggestion {
	position: absolute;
	width: 280px;
	left: -290px;
	display: none;
}
.search_widget #name_suggestion.show {
	display: block;
}
.search_widget .sname {
	text-align: right;
}
.search_widget .sname a {
	display: inline-block;
	background-color: black;
	padding: 10px 20px;
	border-bottom: 1px solid rgb(30,33,40);
}
.page_credits .feedContainer .pull-left.leftPane {
	box-sizing: border-box;
	padding-left: 8px;
	padding-right: 8px;
}

.page_characterprofile #characterProfileTable thead th:first-of-type {
	position: relative;
	width: 28%;
}
.page_characterprofile #characterProfileTable thead th:last-of-type {
	text-align: left;
	padding-left: 16px;
}
.page_characterprofile .outfit {
	position: absolute;
	top: 0;
	left: 0;
}
.page_characterprofile .flag {
	position: absolute;
	top: 16px;
	right: 16px;
}
.postHolder iframe {
	display: block;
	margin: auto;
}

.topDownloadButton {
	text-align: center;
	width: 100px;
	height: 20px;
	display: block;
	padding: 5px 15px 5px 15px;
	border: 1px solid #1e6179;
	transition: 0.4s;        
	text-decoration: none;
	color: #2e8cad;
	font-family: Verdana;
}

.topDownloadButton:hover {
	border-color: #629fb3;
	color: #629fb3;
}

/* ============================================= */
/* === NOVA IDENTIDADE VISUAL - POKÉMON WARD === */
/* ============================================= */

/* --- BARRA DE NAVEGAÇÃO --- */
.ward-navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #2e2e2e;
	background-image: url('https://www.transparenttextures.com/patterns/black-scales.png');
	border-bottom: 4px solid #1a1a1a;
	border-top: 4px solid #daa520;
	padding: 15px 30px;
	height: 80px;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

.nav-brand {
	font-size: 18px;
	text-shadow: 3px 3px 0 #000;
	cursor: pointer;
}

.nav-brand a {
	text-decoration: none;
}

.poke-text {
	color: #ffcb05;
	-webkit-text-stroke: 1px #3b4cca;
}

.ward-text {
	color: #00d2ff;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 30px;
}

.nav-links li a {
	text-decoration: none;
	color: #dcdcdc;
	font-size: 10px;
	text-transform: uppercase;
	padding: 10px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: 0.3s;
	font-family: 'Press Start 2P', cursive;
}

.nav-links li a:hover {
	color: #daa520;
	text-shadow: 0 0 5px #daa520;
	border-bottom: 2px solid #daa520;
}

.nav-actions {
	display: flex;
	gap: 15px;
}

.btn {
	text-decoration: none;
	padding: 12px 20px;
	font-size: 10px;
	text-transform: uppercase;
	color: white;
	border: 2px solid #000;
	box-shadow: 4px 4px 0px #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Press Start 2P', cursive;
}

.btn:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0px #000;
}

.btn-login {
	background-color: #4a69bd;
	border-color: #1e3799;
}

.btn-login:hover {
	background-color: #6a89dd;
}

.btn-register {
	background-color: #27ae60;
	border-color: #1e8449;
}

.btn-register:hover {
	background-color: #2ecc71;
}

.btn-logout {
	background-color: #c0392b;
	border-color: #922b21;
}

.btn-logout:hover {
	background-color: #e74c3c;
}

.btn-download {
	background-color: #e58e26;
	border-color: #b71540;
	animation: pulse-border 2s infinite;
}

.btn-download:hover {
	background-color: #fa983a;
}

@keyframes pulse-border {
	0% { box-shadow: 4px 4px 0px #000; }
	50% { box-shadow: 4px 4px 0px #b71540; }
	100% { box-shadow: 4px 4px 0px #000; }
}

/* --- HERO HEADER (BANNER) --- */
.hero-section {
	height: 400px;
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('https://via.placeholder.com/1920x600/2a2a2a/555?text=Wallpaper+Pokemon+Ward');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-bottom: 4px solid #daa520;
	flex-direction: column;
}

.hero-content h1 {
	font-size: 35px;
	color: #fff;
	text-shadow: 4px 4px 0 #000;
	margin-bottom: 20px;
	line-height: 1.5;
}

.hero-content p {
	font-size: 16px;
	color: #eee;
	background-color: rgba(0,0,0,0.5);
	padding: 10px;
	font-family: 'Roboto', sans-serif;
}

.cta-button {
	font-family: 'Press Start 2P', cursive;
	background-color: #daa520;
	color: #000;
	padding: 15px 30px;
	text-decoration: none;
	font-size: 12px;
	border: 2px solid #fff;
	box-shadow: 5px 5px 0 #000;
	display: inline-block;
	margin-top: 20px;
	cursor: pointer;
}

.cta-button:hover {
	background-color: #ffcb05;
	transform: scale(1.05);
	color: #000;
}

/* --- LAYOUT GERAL --- */
.main-container {
	max-width: 1200px;
	margin: 40px auto;
	padding: 0 20px;
	flex: 1;
	width: 100%;
}

.home-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
}

/* --- CONTEÚDO PRINCIPAL (LEFT PANE) --- */
.news-feed.leftPane {
	min-height: 500px;
}

.section-title {
	color: #daa520;
	font-size: 18px;
	margin-bottom: 20px;
	border-left: 5px solid #00d2ff;
	padding-left: 15px;
	text-shadow: 2px 2px 0 #000;
}

/* --- NOTÍCIAS --- */
.news-card, #news {
	background-color: #1e1e1e;
	border: 2px solid #333;
	margin-bottom: 30px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.news-header, #news tr.yellow {
	background-color: #2a2a2a;
	padding: 15px;
	border-bottom: 2px solid #333;
}

.news-header .date {
	background-color: #00d2ff;
	color: #000;
	padding: 5px 8px;
	font-weight: bold;
	font-size: 10px;
	border: 1px solid #fff;
}

.news-header h3 {
	font-size: 14px;
	color: #fff;
}

.news-body {
	padding: 20px;
}

.news-img {
	width: 100%;
	height: auto;
	border: 2px solid #000;
	margin-bottom: 15px;
}

.read-more {
	color: #daa520;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
}

.read-more:hover {
	text-decoration: underline;
}

/* --- SIDEBAR & WIDGETS --- */
.sidebar.rightPane {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.widget {
	background-color: #1e1e1e;
	border: 2px solid #444;
	padding: 15px;
	box-shadow: 5px 5px 0 #000;
	overflow: hidden;
	word-wrap: break-word;
}

.widget h3, .widget .header {
	font-size: 10px;
	color: #daa520;
	margin-bottom: 15px;
	text-align: center;
	border-bottom: 2px solid #444;
	padding-bottom: 10px;
	font-family: 'Press Start 2P', cursive;
	word-wrap: break-word;
	line-height: 1.5;
}

.widget table {
	table-layout: auto;
	width: 100%;
}

.widget td {
	word-wrap: break-word;
	overflow-wrap: break-word;
	font-size: 11px;
	padding: 8px 5px;
}

.widget .rank-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget .rank-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 5px;
	border-bottom: 1px solid #333;
	font-size: 11px;
	gap: 5px;
}

.widget .rank-list li a {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.server-indicator {
	display: inline-block;
	padding: 5px 15px;
	color: white;
	font-size: 10px;
	margin-bottom: 10px;
	border: 2px solid #000;
}

.server-indicator.online {
	background-color: #4cd137;
}

.rank-list li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #333;
	font-size: 12px;
}

.rank-pos {
	color: #daa520;
	font-weight: bold;
}

.lvl {
	color: #00d2ff;
}

/* --- BOTÕES SOCIAIS (DISCORD/FACEBOOK) --- */
.social-btn {
	display: block;
	text-align: center;
	padding: 10px;
	margin-bottom: 10px;
	text-decoration: none;
	color: white;
	font-size: 10px;
	border: 2px solid #000;
	transition: transform 0.2s;
	font-family: 'Press Start 2P', cursive;
}

.social-btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 2px 2px 0 #fff;
	color: white;
}

.social-btn.discord {
	background-color: #7289da;
}

.social-btn.facebook {
	background-color: #3b5998;
}

/* --- FORMULÁRIOS (LOGIN/REGISTER) --- */
.auth-wrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: 20px;
}

.auth-container {
	width: 100%;
	max-width: 500px;
	background-color: #1e1e1e;
	border: 2px solid #daa520;
	box-shadow: 0 0 20px rgba(218, 165, 32, 0.2);
	padding: 30px;
}

.auth-header {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 2px solid #333;
	padding-bottom: 15px;
}

.auth-header h2 {
	color: #daa520;
	font-size: 20px;
	margin-bottom: 10px;
}

.auth-header p {
	font-size: 12px;
	color: #888;
}

.ward-form .form-group {
	margin-bottom: 20px;
}

.ward-form label {
	display: block;
	color: #00d2ff;
	font-size: 10px;
	margin-bottom: 8px;
}

.ward-input {
	width: 100%;
	padding: 12px;
	background-color: #121212;
	border: 1px solid #444;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	outline: none;
	transition: border 0.3s;
}

.ward-input:focus {
	border-color: #daa520;
}

.btn-submit {
	width: 100%;
	background-color: #4cd137;
	color: #000;
	padding: 15px;
	border: 2px solid #2e8c22;
	cursor: pointer;
	margin-top: 10px;
	font-size: 12px;
	transition: transform 0.1s;
	font-family: 'Press Start 2P', cursive;
}

.btn-submit:active {
	transform: scale(0.98);
}

.form-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	font-size: 12px;
}

.form-footer a {
	color: #888;
	text-decoration: none;
}

.form-footer a:hover {
	color: #fff;
}

/* --- FOOTER --- */
.ward-footer {
	background-color: #1a1a1a;
	border-top: 4px solid #daa520;
	padding: 30px;
	text-align: center;
	margin-top: auto;
}

.footer-content p {
	font-size: 12px;
	color: #777;
	margin-bottom: 5px;
}

.footer-disclaimer {
	font-size: 10px !important;
	color: #555 !important;
	margin-top: 10px;
}

/* --- TABELAS ESTILIZADAS --- */
#news tr.yellow td,
#changelogTable tr.yellow td {
	background-color: #2a2a2a;
	color: #daa520;
	font-family: 'Press Start 2P', cursive;
	font-size: 10px;
	padding: 15px;
	border-bottom: 2px solid #333;
}

#news td,
#changelogTable td {
	background-color: #1e1e1e;
	padding: 15px;
	border-bottom: 1px solid #333;
}

/* --- TABELAS GERAIS DO CONTEÚDO --- */
.leftPane table,
.news-feed table {
	background-color: #1e1e1e;
	border: 2px solid #333;
	margin-bottom: 20px;
}

.leftPane table th,
.news-feed table th {
	background-color: #2a2a2a;
	color: #daa520;
	font-family: 'Press Start 2P', cursive;
	font-size: 9px;
	padding: 12px 8px;
	text-align: left;
	border-bottom: 2px solid #444;
}

.leftPane table td,
.news-feed table td {
	padding: 10px 8px;
	border-bottom: 1px solid #333;
	font-size: 12px;
}

.leftPane table tr:hover,
.news-feed table tr:hover {
	background-color: #252525;
}

/* --- FORMULÁRIOS E INPUTS GERAIS --- */
.leftPane input[type="text"],
.leftPane input[type="password"],
.leftPane input[type="email"],
.leftPane select {
	background-color: #121212;
	border: 1px solid #444;
	color: #fff;
	padding: 10px;
	font-size: 12px;
	width: 100%;
	max-width: 300px;
}

.leftPane input[type="submit"],
.leftPane button {
	background-color: #4cd137;
	color: #000;
	border: 2px solid #2e8c22;
	padding: 10px 20px;
	cursor: pointer;
	font-family: 'Press Start 2P', cursive;
	font-size: 10px;
}

.leftPane input[type="submit"]:hover,
.leftPane button:hover {
	background-color: #5ae146;
}

/* --- TÍTULOS E HEADERS DE CONTEÚDO --- */
.leftPane h1,
.leftPane h2,
.leftPane h3 {
	color: #daa520;
	font-family: 'Press Start 2P', cursive;
	margin-bottom: 15px;
	text-shadow: 2px 2px 0 #000;
}

.leftPane h1 {
	font-size: 16px;
}

.leftPane h2 {
	font-size: 14px;
}

.leftPane h3 {
	font-size: 12px;
}

.leftPane p {
	margin-bottom: 10px;
	line-height: 1.6;
}

/* --- RESPONSIVIDADE (CELULAR) --- */
@media (max-width: 768px) {
	.home-grid {
		grid-template-columns: 1fr;
	}
	
	.ward-navbar {
		flex-direction: column;
		height: auto;
		padding: 20px;
		gap: 20px;
	}
	
	.nav-links {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
	
	.nav-actions {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.hero-content h1 {
		font-size: 20px;
	}
	
	.hero-section {
		height: 300px;
		padding: 20px;
	}
	
	.sidebar.rightPane {
		order: -1;
	}
}