@charset "utf-8";

:root {
	--tr-bg: #06080b;
	--tr-panel: rgba(10, 14, 19, 0.94);
	--tr-panel-soft: rgba(16, 21, 28, 0.88);
	--tr-border: rgba(196, 150, 55, 0.35);
	--tr-gold: #e2b844;
	--tr-gold-bright: #ffd85f;
	--tr-cyan: #22e4d2;
	--tr-red: #a52724;
	--tr-text: #e7e8e9;
	--tr-muted: #9aa2aa;
	--tr-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--tr-bg);
	scroll-behavior: smooth;
}

body {
	min-width: 0;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: transparent;
	color: var(--tr-text);
	font-family: "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -3;
	background:
		linear-gradient(180deg, rgba(4, 6, 9, 0.22) 0%, rgba(4, 6, 9, 0.42) 100%),
		url("images/tronesot-background.png") center center / cover no-repeat fixed;
}

.site-background {
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(circle at 50% 28%, rgba(189, 91, 24, 0.12), transparent 36%),
		linear-gradient(90deg, rgba(5, 9, 14, 0.72), transparent 28%, transparent 72%, rgba(5, 9, 14, 0.72));
	pointer-events: none;
}

a {
	color: var(--tr-gold);
	text-decoration: none;
	font-weight: 600;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a:hover {
	color: var(--tr-gold-bright);
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(5, 8, 12, 0.96);
	border-bottom: 1px solid rgba(226, 184, 68, 0.28);
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.52);
	backdrop-filter: blur(12px);
}

.topbar-inner {
	display: flex;
	align-items: center;
	width: min(1280px, calc(100% - 32px));
	min-height: 66px;
	margin: 0 auto;
	gap: 22px;
}

.brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 9px;
	color: #fff;
	letter-spacing: 0.02em;
}

.brand:hover {
	color: #fff;
}

.brand img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	mix-blend-mode: screen;
	filter: drop-shadow(0 0 8px rgba(226, 184, 68, 0.36));
}

.brand strong,
.brand small {
	display: block;
}

.brand strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 23px;
	line-height: 1;
	text-transform: uppercase;
}

.brand small {
	margin-top: 4px;
	color: var(--tr-gold);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

#tabs {
	position: static;
	right: auto;
	display: flex;
	align-self: stretch;
	flex: 1 1 auto;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
}

#tabs .tab,
#tabs .tab-active {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 18px;
	background: transparent;
	border: 0;
	color: #d8dadd;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}

#tabs .tab::after,
#tabs .tab-active::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 12px;
	height: 3px;
	background: transparent;
	box-shadow: none;
}

#tabs .tab i,
#tabs .tab-active i {
	width: 0;
	height: 0;
	margin: 3px 0 0 8px;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	border-top: 5px solid #8e959c;
}

#tabs .tab:hover {
	color: #fff;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.035);
}

#tabs .tab-active {
	color: var(--tr-gold-bright);
	background: linear-gradient(180deg, rgba(226, 184, 68, 0.04), rgba(226, 184, 68, 0.1));
}

#tabs .tab-active::after {
	background: var(--tr-gold);
	box-shadow: 0 0 14px rgba(226, 184, 68, 0.65);
}

.top-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	height: 34px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.52);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.button:hover {
	transform: translateY(-1px);
}

.button-login {
	background: linear-gradient(180deg, #5c2bbd, #28106b);
	border-color: #7855cf;
	color: #fff;
	box-shadow: 0 0 18px rgba(102, 65, 211, 0.4);
}

.button-download {
	background: linear-gradient(180deg, #b6c9b6, #657c6b);
	border-color: #d7bd72;
	color: #fff;
	box-shadow: 0 0 18px rgba(217, 183, 89, 0.34);
}

#mainsubmenu {
	display: block;
	float: none;
	width: 100%;
	height: 39px;
	margin: 0;
	padding: 0;
	background: rgba(8, 12, 17, 0.94);
	border-top: 1px solid rgba(255, 255, 255, 0.035);
}

.submenu-inner {
	width: min(1280px, calc(100% - 32px));
	height: 100%;
	margin: 0 auto;
	padding-left: 174px;
}

#mainsubmenu > .submenu-inner > div {
	display: none;
	height: 100%;
}

#mainsubmenu a {
	display: inline-flex;
	align-items: center;
	float: none;
	height: 100%;
	margin: 0;
	padding: 0 14px;
	color: #aeb4ba;
	font-size: 12px;
	font-weight: 600;
}

#mainsubmenu a:hover {
	background: rgba(226, 184, 68, 0.08);
	color: var(--tr-gold-bright);
	text-decoration: none;
}

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 310px;
	overflow: hidden;
	border-bottom: 1px solid rgba(226, 184, 68, 0.2);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 7, 10, 0.12), rgba(4, 7, 10, 0.78)),
		transparent;
	transform: scale(1.015);
}

.hero-shade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.66) 78%),
		linear-gradient(90deg, rgba(3, 6, 9, 0.5), transparent 32%, transparent 68%, rgba(3, 6, 9, 0.5));
}

.hero-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 28px 20px 44px;
	text-align: center;
}

.hero-logo {
	width: 250px;
	max-width: 62vw;
	height: 175px;
	object-fit: contain;
	mix-blend-mode: screen;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.88));
}

.hero-content p {
	margin: -4px 0 14px;
	color: #e9e4d8;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	letter-spacing: 0.08em;
	text-shadow: 0 2px 6px #000;
}

.hero-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	background: rgba(4, 8, 11, 0.72);
	color: #cfd4d8;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-status span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ef534d;
	box-shadow: 0 0 11px rgba(239, 83, 77, 0.8);
}

.hero-status.is-online span {
	background: var(--tr-cyan);
	box-shadow: 0 0 11px rgba(34, 228, 210, 0.86);
}

.site-layout {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	width: min(1280px, calc(100% - 32px));
	margin: -32px auto 0;
	gap: 14px;
	align-items: start;
}

#content.content-panel {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	background: var(--tr-panel);
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-top: 2px solid rgba(226, 184, 68, 0.72);
	border-radius: 5px;
	box-shadow: var(--tr-shadow);
	backdrop-filter: blur(9px);
}

.content-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.075);
	background: linear-gradient(90deg, rgba(226, 184, 68, 0.08), transparent 50%);
	font-size: 12px;
}

.breadcrumb {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 9px;
	color: #858d95;
}

.breadcrumb strong {
	overflow: hidden;
	color: #e5e7e9;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.toolbar-status {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 5px;
	color: var(--tr-muted);
}

.toolbar-status > span {
	margin-right: 6px;
	color: #ef6863;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.toolbar-status > span.online {
	color: var(--tr-cyan);
}

#margins {
	float: none;
	width: auto;
	min-height: 320px;
	margin: 0;
	padding: 15px 18px 24px;
	color: var(--tr-text);
	text-align: left;
}

#ContentHelper {
	max-width: 100%;
	overflow-x: auto;
}

.sidebar {
	display: grid;
	gap: 13px;
}

.sidebar-card {
	overflow: hidden;
	padding: 13px;
	background: var(--tr-panel);
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-top: 2px solid var(--tr-gold);
	border-radius: 4px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(8px);
	text-align: center;
}

.sidebar-card h2 {
	margin: -13px -13px 13px;
	padding: 10px 12px;
	background: linear-gradient(90deg, #f0c500, #d8a700);
	color: #0e1012;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.server-emblem {
	height: 94px;
	margin: -4px 0 2px;
}

.server-emblem img {
	width: 116px;
	height: 94px;
	object-fit: contain;
	mix-blend-mode: screen;
}

.server-state {
	padding: 5px;
	border: 1px solid rgba(222, 70, 63, 0.42);
	background: linear-gradient(180deg, rgba(99, 23, 22, 0.5), rgba(23, 8, 9, 0.7));
	color: #ff6a64;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.14em;
}

.server-state.online {
	border-color: rgba(34, 228, 210, 0.35);
	background: linear-gradient(180deg, rgba(19, 99, 92, 0.45), rgba(5, 27, 29, 0.72));
	color: var(--tr-cyan);
	box-shadow: inset 0 0 18px rgba(34, 228, 210, 0.08);
}

.server-numbers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 12px;
	border: 1px solid rgba(255, 255, 255, 0.075);
}

.server-numbers div {
	padding: 8px 4px;
}

.server-numbers div + div {
	border-left: 1px solid rgba(255, 255, 255, 0.075);
}

.server-numbers strong,
.server-numbers span {
	display: block;
}

.server-numbers strong {
	color: #fff;
	font-size: 18px;
}

.server-numbers span {
	color: var(--tr-muted);
	font-size: 10px;
}

.uptime {
	margin: 9px 0 0;
	color: #717b84;
	font-size: 10px;
}

.newcomer-card {
	padding-top: 17px;
}

.newcomer-card > span {
	color: #969fa7;
	font-size: 10px;
	letter-spacing: 0.1em;
}

.newcomer-card h2 {
	margin: 2px 0 12px;
	padding: 0;
	background: none;
	color: #f1f2f3;
	font-family: "Segoe UI", Tahoma, sans-serif;
	font-size: 14px;
}

.sidebar-cta,
.download-link {
	display: block;
	padding: 9px 10px;
	border: 1px solid #e0b128;
	background: linear-gradient(180deg, #ffd72f, #c89a00);
	color: #11151a;
	font-weight: 900;
	text-shadow: 0 1px rgba(255, 255, 255, 0.42);
}

.sidebar-cta:hover,
.download-link:hover {
	background: linear-gradient(180deg, #ffe36a, #d8a800);
	color: #07090b;
	transform: translateY(-1px);
}

.quick-card {
	padding: 0;
	text-align: left;
}

.quick-card h2 {
	margin: 0;
}

.quick-card a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: #c8cdd1;
	font-size: 12px;
}

.quick-card a:last-child {
	border-bottom: 0;
}

.quick-card a:hover {
	padding-left: 17px;
	background: rgba(226, 184, 68, 0.07);
	color: var(--tr-gold-bright);
}

.quick-card a span {
	width: 17px;
	color: var(--tr-gold);
	text-align: center;
}

.world-card ul {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.world-card li {
	display: flex;
	justify-content: space-between;
	padding: 7px 3px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--tr-muted);
	font-size: 11px;
}

.world-card li strong {
	color: #fff;
}

.download-link {
	padding: 8px;
	font-size: 11px;
}

.site-footer {
	background: rgba(6, 9, 13, 0.85);
	border-radius: 10px;
	display: flex;
	align-items: center;
	width: min(1280px, calc(100% - 32px));
	margin: 22px auto 22px;
	padding: 18px 10px 28px;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: #a9b0b7;
	font-size: 10px;
}

.site-footer > img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	mix-blend-mode: screen;
}

.site-footer strong {
	color: #afb5ba;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
}

.site-footer p {
	margin: 2px 0 0;
}

.template-switch {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 8px;
}

.template-switch form {
	margin: 0;
}

.template-switch select {
	min-width: 105px;
}

/* MyAAC content */
hr {
	height: 1px;
	border: 0;
	background: rgba(255, 255, 255, 0.09);
}

input,
select,
textarea,
button {
	max-width: 100%;
	border: 1px solid #3d464e;
	border-radius: 3px;
	background: #11171d;
	color: #e4e7e9;
	font: inherit;
}

input,
select,
textarea {
	padding: 7px 9px;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--tr-gold);
	box-shadow: 0 0 0 2px rgba(226, 184, 68, 0.12);
}

input[type="submit"],
input[type="button"],
button {
	padding: 7px 14px;
	background: linear-gradient(180deg, #dab43f, #9e761c);
	border-color: #e6c45b;
	color: #101317;
	font-weight: 800;
	cursor: pointer;
}

.TableContainer {
	border-color: #303942;
	background: #0e141a;
	color: var(--tr-text);
	font-size: 12px;
}

.TableContainer .Odd,
.Odd {
	background-color: #121920 !important;
}

.TableContainer .Even,
.Even {
	background-color: #192128 !important;
}

.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer {
	background: linear-gradient(90deg, #7c1e1d, #331111) !important;
}

.TableContainer .CaptionContainer .Text {
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
}

.TableContentContainer,
.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5 {
	border-color: #303942;
	background: #121920;
	color: var(--tr-text);
}

.TableContent td,
.TableContainer td {
	border-color: rgba(255, 255, 255, 0.055) !important;
}

.LabelH,
.LabelH td {
	background: #252d34 !important;
	color: #e4e7e9;
}

#News {
	margin: 0 0 3px;
}

.NewsHeadline {
	margin-top: 10px;
}

.NewsHeadlineBackground {
	display: flex;
	align-items: center;
	min-height: 38px;
	padding: 0 12px;
	background: linear-gradient(90deg, #811d1b, #2e1011) !important;
	border: 1px solid rgba(211, 77, 65, 0.34);
	border-radius: 3px 3px 0 0;
	color: #fff;
}

.NewsHeadlineIcon {
	width: 28px;
	height: 28px;
	margin-right: 9px;
	object-fit: contain;
}

.NewsHeadlineDate,
.NewsHeadlineText,
.NewsHeadlineAuthor {
	position: static;
	float: none;
	color: #fff;
}

.NewsHeadlineDate {
	margin-right: 6px;
	color: #f0c6aa;
	font-size: 11px;
}

.NewsHeadlineText {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	font-weight: 800;
}

.NewsHeadlineAuthor {
	margin-left: auto;
	font-size: 11px;
}

#ContentHelper > table {
	max-width: 100%;
	color: inherit;
}

#ContentHelper img {
	max-width: 100%;
	height: auto;
}

#ContentHelper table[width="100%"] {
	width: 100% !important;
}

#content-bot,
#copyrights,
#page,
#header,
#top {
	display: none;
}

/* ===== Barra de redes sociales ===== */
.social-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.075);
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 60%);
}

.social-bar .social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 6px;
	background: rgba(12, 17, 23, 0.85);
	color: #d6dade;
	font-size: 12px;
	font-weight: 700;
}

.social-bar .social svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.social-bar .social span {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.social-bar .social-fb svg { fill: #4a6cc4; }
.social-bar .social-ig svg { fill: #e05a8a; }
.social-bar .social-dc svg { fill: #7b86f5; }
.social-bar .social-tw svg { fill: #a970ff; }

.social-bar .social:hover svg { fill: #fff; }

.social-bar .social:hover {
	border-color: var(--tr-gold);
	background: rgba(226, 184, 68, 0.1);
	color: #fff;
	transform: translateY(-1px);
}

/* ===== Box Players Online ===== */
.players-card {
	padding-bottom: 15px;
}

.players-emblem {
	height: 88px;
	margin: 2px 0 6px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.players-emblem img {
	width: 90px;
	height: 84px;
	object-fit: contain;
	mix-blend-mode: screen;
	filter: drop-shadow(0 0 12px rgba(226, 184, 68, 0.35));
	animation: playersFloat 4s ease-in-out infinite;
}

@keyframes playersFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.players-count {
	display: block;
	padding: 9px 10px;
	border: 1px solid rgba(34, 228, 210, 0.35);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(19, 99, 92, 0.4), rgba(5, 27, 29, 0.7));
	color: var(--tr-cyan);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.players-count strong {
	font-size: 18px;
	color: #fff;
}

.players-count.is-offline {
	border-color: rgba(222, 70, 63, 0.4);
	background: linear-gradient(180deg, rgba(99, 23, 22, 0.45), rgba(23, 8, 9, 0.7));
	color: #ff6a64;
}

.players-count:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 16px rgba(34, 228, 210, 0.18);
}

/* ===== Box Server Save ===== */
.save-emblem {
	font-size: 34px;
	line-height: 1;
	margin: 4px 0 8px;
	filter: drop-shadow(0 0 10px rgba(226, 184, 68, 0.4));
}

.save-countdown {
	padding: 8px 6px;
	border: 1px solid rgba(226, 184, 68, 0.4);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(38, 30, 8, 0.7), rgba(15, 12, 5, 0.8));
	color: var(--tr-gold-bright);
	font-family: "Consolas", "Courier New", monospace;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-shadow: 0 0 12px rgba(255, 216, 95, 0.4);
}

.save-hint {
	margin: 8px 0 0;
	color: #717b84;
	font-size: 10px;
}

/* ===== Contenido MyAAC: estilo clasico beige (tibiacom), como HegalOT ===== */
/* El area de contenido es pergamino; el resto (header/hero/sidebar) sigue oscuro */
#margins {
	background: #d8d4c4;
	color: #2f2b23;
	border-radius: 0 0 4px 4px;
}

#ContentHelper,
#ContentHelper td {
	color: #2f2b23;
}

#ContentHelper a { color: #7c0f0f; font-weight: bold; }
#ContentHelper a:hover { color: #b31717; }

/* Cajas/tablas clasicas beige */
#ContentHelper .TableContainer {
	border: 1px solid #5c5341 !important;
	background-color: #d4d0c0 !important;
	color: #2f2b23 !important;
}

#ContentHelper .TableContentContainer,
#ContentHelper .Table1,
#ContentHelper .Table2,
#ContentHelper .Table3,
#ContentHelper .Table4,
#ContentHelper .Table5 {
	background-color: #d4d0c0 !important;
	border-color: #a79d84 !important;
	color: #2f2b23 !important;
}

#ContentHelper .Odd { background-color: #e7e3d6 !important; }
#ContentHelper .Even { background-color: #d4d0c0 !important; }

/* Caption (barra de titulo de cada caja, ej. "Tickers") */
#ContentHelper .CaptionContainer,
#ContentHelper .CaptionInnerContainer {
	background: #454038 !important;
	border: 0 !important;
}

#ContentHelper .CaptionContainer .Text {
	color: #f2e9d0 !important;
	font-family: Verdana, Arial, sans-serif !important;
	font-weight: bold !important;
}

/* Labels de formularios */
#ContentHelper .LabelH,
#ContentHelper .LabelH td { background-color: #b3a988 !important; color: #1c1a15 !important; }
#ContentHelper .LabelV,
#ContentHelper .LabelV120,
#ContentHelper .LabelV150,
#ContentHelper .LabelV200 { color: #2f2b23 !important; }

/* News headline clasico (barra roja con textura) */
#ContentHelper .NewsHeadlineBackground {
	background-color: #7a1f1c !important;
	background-image: url("images/news/newsheadline_background.gif") !important;
	background-repeat: repeat-x !important;
	border: 0 !important;
}

/* Inputs claros clasicos */
#ContentHelper input,
#ContentHelper select,
#ContentHelper textarea {
	background: #ffffff !important;
	border: 1px solid #7d745c !important;
	color: #1c1a15 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#ContentHelper input[type="submit"],
#ContentHelper input[type="button"],
#ContentHelper button {
	background: #ded9c8 !important;
	border: 1px solid #7d745c !important;
	color: #1c1a15 !important;
	font-weight: bold !important;
}

/* ===== News Ticker: box grande organizado (estilo HegalOT) ===== */
#ContentHelper .tsbox {
	margin: 2px 0 16px;
	border: 1px solid #4a4436;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

#ContentHelper .tsbox-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: linear-gradient(180deg, #5a5347, #3c372e);
	border-bottom: 2px solid #d8b64a;
	color: #f5e9c8;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: 800;
}

#ContentHelper .tsbox-head .tsbox-ic {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: url("images/news/icon_0_small.gif") center / contain no-repeat;
}

#ContentHelper .tsbox-body {
	background: #e7e3d6;
	padding: 2px 0;
}

#ContentHelper .ts-row {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 8px 12px;
	border-bottom: 1px solid #cfc9b6;
	color: #2f2b23;
	font-size: 12px;
	line-height: 1.45;
}

#ContentHelper .ts-row:last-child {
	border-bottom: 0;
}

#ContentHelper .ts-even {
	background: #ded9c8;
}

#ContentHelper .ts-ic {
	width: 16px;
	height: 16px;
	margin-top: 1px;
	flex: 0 0 auto;
}

#ContentHelper .ts-date {
	flex: 0 0 auto;
	color: #7c0f0f;
	font-weight: bold;
}

#ContentHelper .ts-text {
	flex: 1 1 auto;
}

/* ===== News: cada noticia en su propia caja ===== */
#ContentHelper .newsbox {
	margin: 0 0 16px;
	border: 1px solid #4a4436;
	border-radius: 3px;
	overflow: hidden;
	background: #e7e3d6;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

#ContentHelper .newsbox .NewsHeadlineBackground {
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 2px solid #d8b64a !important;
	border-radius: 0 !important;
}

#ContentHelper .newsbox-body {
	padding: 12px 15px;
	color: #2f2b23;
}

#ContentHelper .news-comments {
	margin-top: 12px;
	text-align: right;
}

/* =========================================================
   POLISH TronesOT — fuentes epicas, animaciones y brillos
   ========================================================= */
.brand strong,
.hero-content p,
.sidebar-card h2,
#ContentHelper .tsbox-head,
#ContentHelper .NewsHeadlineText,
.button {
	font-family: "Cinzel", Georgia, "Times New Roman", serif !important;
}

.hero-content p {
	font-family: "Cinzel Decorative", "Cinzel", Georgia, serif !important;
}

@keyframes tsFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tsKenBurns { from { transform: scale(1.02); } to { transform: scale(1.13); } }
@keyframes tsPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 228, 210, .5); } 50% { box-shadow: 0 0 0 7px rgba(34, 228, 210, 0); } }
@keyframes tsGlow { 0%, 100% { text-shadow: 0 0 8px rgba(255, 216, 95, .35), 0 2px 6px #000; } 50% { text-shadow: 0 0 20px rgba(255, 216, 95, .7), 0 2px 6px #000; } }
@keyframes tsSheen { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes tsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes tsShine { 0% { left: -60%; } 100% { left: 140%; } }
@keyframes tsSaveGlow { 0%, 100% { color: #ffd85f; text-shadow: 0 0 10px rgba(255, 216, 95, .4); } 50% { color: #fff0c0; text-shadow: 0 0 22px rgba(255, 216, 95, .85); } }
@keyframes tsEmbers { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .8; } 100% { transform: translateY(-140px); opacity: 0; } }

/* Hero: zoom lento, embers y titulo con brillo */
.hero::before { animation: tsKenBurns 24s ease-in-out infinite alternate; }
.hero-content p { animation: tsGlow 3.6s ease-in-out infinite; }
.hero-status.is-online { animation: tsPulse 2.2s ease-in-out infinite; }
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(2px 2px at 18% 85%, rgba(255, 200, 90, .9), transparent),
		radial-gradient(2px 2px at 62% 92%, rgba(255, 175, 70, .8), transparent),
		radial-gradient(1.5px 1.5px at 82% 78%, rgba(255, 220, 120, .8), transparent),
		radial-gradient(1.5px 1.5px at 38% 88%, rgba(255, 190, 80, .8), transparent),
		radial-gradient(1.5px 1.5px at 50% 95%, rgba(255, 210, 110, .7), transparent);
	background-repeat: no-repeat;
	animation: tsEmbers 6.5s linear infinite;
}

/* Entrada de secciones */
.site-layout .content-panel { animation: tsFadeUp .6s ease both; }
.sidebar-card { animation: tsFadeUp .6s ease both; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sidebar-card:nth-child(2) { animation-delay: .07s; }
.sidebar-card:nth-child(3) { animation-delay: .14s; }
.sidebar-card:nth-child(4) { animation-delay: .21s; }
.sidebar-card:nth-child(5) { animation-delay: .28s; }

.sidebar-card:hover {
	transform: translateY(-3px);
	border-top-color: var(--tr-gold-bright);
	box-shadow: 0 20px 42px rgba(0, 0, 0, .5), 0 0 22px rgba(226, 184, 68, .18);
}

/* Header dorado de cards con brillo animado (menos el newcomer) */
.sidebar-card:not(.newcomer-card) h2 {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #d8a700, #ffe27a, #d8a700) !important;
	background-size: 200% 100% !important;
	animation: tsSheen 6s linear infinite;
}

/* Emblema y estado del servidor */
.server-emblem img { animation: tsFloat 4.5s ease-in-out infinite; }
.server-state.online { animation: tsPulse 2.4s ease-in-out infinite; }

/* Server Save con contador brillante */
.save-countdown { animation: tsSaveGlow 2.6s ease-in-out infinite; }
.save-emblem { animation: tsFloat 5s ease-in-out infinite; }

/* Botones LOGIN / DESCARGAR: barrido de brillo + glow */
.button { position: relative; overflow: hidden; }
.button::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
}
.button:hover::after { animation: tsShine .8s ease; }
.button-login:hover { box-shadow: 0 0 22px rgba(122, 80, 230, .6); }
.button-download:hover { box-shadow: 0 0 22px rgba(217, 183, 89, .55); }

/* Nav: subrayado con glow al pasar */
#tabs .tab:hover::after { background: rgba(226, 184, 68, .55); box-shadow: 0 0 12px rgba(226, 184, 68, .45); }

/* Brand logo glow */
.brand img { transition: filter .2s ease, transform .2s ease; }
.brand:hover img { filter: drop-shadow(0 0 12px rgba(255, 216, 95, .7)); transform: scale(1.05); }

/* Redes: hover con glow por marca */
.social-bar .social { transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.social-bar .social:hover { transform: translateY(-2px); }
.social-bar .social-fb:hover { border-color: #4a6cc4; box-shadow: 0 0 16px rgba(74, 108, 196, .5); }
.social-bar .social-ig:hover { border-color: #e05a8a; box-shadow: 0 0 16px rgba(224, 90, 138, .5); }
.social-bar .social-dc:hover { border-color: #7b86f5; box-shadow: 0 0 16px rgba(123, 134, 245, .5); }
.social-bar .social-tw:hover { border-color: #a970ff; box-shadow: 0 0 16px rgba(169, 112, 255, .5); }

/* Ticker rows: hover resaltado */
#ContentHelper .ts-row { transition: background .15s ease, padding-left .15s ease; }
#ContentHelper .ts-row:hover { background: #f5f1e4; padding-left: 16px; }

/* News box: hover eleva + brillo en la barra roja */
#ContentHelper .newsbox { transition: transform .18s ease, box-shadow .18s ease; }
#ContentHelper .newsbox:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .42); }
#ContentHelper .newsbox .NewsHeadlineBackground { position: relative; overflow: hidden; }
#ContentHelper .newsbox .NewsHeadlineBackground::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
	transform: skewX(-20deg);
}
#ContentHelper .newsbox:hover .NewsHeadlineBackground::after { animation: tsShine 1s ease; }

/* Scrollbar dorada */
* { scrollbar-color: #6b5a1e #0b0f14; scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0f14; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #caa23a, #6b5a1e); border-radius: 8px; border: 2px solid #0b0f14; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffd85f, #8a7326); }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.hero::before, .hero::after, .hero-content p, .hero-status.is-online,
	.sidebar-card, .sidebar-card:not(.newcomer-card) h2, .server-emblem img,
	.server-state.online, .save-countdown, .save-emblem, .content-panel {
		animation: none !important;
	}
}

/* ===== Boxes con textura clasica tibiacom (verde piedra + pergamino) ===== */
#ContentHelper .tsbox,
#ContentHelper .newsbox {
	border: 2px solid #211d14 !important;
	border-radius: 0 !important;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .5) !important;
}

#ContentHelper .tsbox-head {
	background: linear-gradient(180deg, #7a8542 0%, #55602c 45%, #3c4620 100%) !important;
	border-bottom: 2px solid #d8b64a !important;
	color: #fdf6df !important;
	text-shadow: 0 1px 2px #1a1e0c, 0 0 8px rgba(0, 0, 0, .5);
}

#ContentHelper .tsbox-body,
#ContentHelper .newsbox,
#ContentHelper .newsbox-body {
	background: url("images/content/scroll.gif") repeat, #e9e5d6 !important;
}

#ContentHelper .ts-row {
	background-color: transparent !important;
}

#ContentHelper .ts-even {
	background-color: rgba(120, 108, 74, 0.13) !important;
}

/* ===== Pagina Donar (Stripe) ===== */
#ContentHelper .donate-head {
	font-family: "Cinzel", Georgia, serif;
	font-size: 22px;
	font-weight: 900;
	color: #5a3210;
	margin: 2px 0 4px;
}
#ContentHelper .donate-sub { margin: 0 0 16px; color: #4a4436; }
#ContentHelper .donate-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
}
#ContentHelper .donate-card {
	margin: 0;
	text-align: center;
	padding: 16px 12px;
	background: linear-gradient(180deg, #20262e, #141a20);
	border: 1px solid #3a434d;
	border-top: 3px solid var(--tr-gold);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
#ContentHelper .donate-card:hover {
	transform: translateY(-4px);
	border-top-color: var(--tr-gold-bright);
	box-shadow: 0 16px 32px rgba(0, 0, 0, .5), 0 0 20px rgba(226, 184, 68, .2);
}
#ContentHelper .donate-coins {
	font-family: "Cinzel", serif;
	font-size: 30px;
	font-weight: 900;
	color: var(--tr-gold-bright);
	line-height: 1;
}
#ContentHelper .donate-coins-label { color: #9aa2aa; font-size: 11px; letter-spacing: .18em; margin-bottom: 8px; }
#ContentHelper .donate-price { color: #e7e8e9; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
#ContentHelper .donate-btn {
	width: 100%;
	padding: 9px 0;
	cursor: pointer;
	border: 1px solid #e0b128 !important;
	background: linear-gradient(180deg, #ffd72f, #c89a00) !important;
	color: #11151a !important;
	font-weight: 900 !important;
	letter-spacing: .05em;
	border-radius: 5px;
}
#ContentHelper .donate-btn:hover { background: linear-gradient(180deg, #ffe36a, #d8a800) !important; }
#ContentHelper .donate-note { margin-top: 16px; color: #6a6250; font-size: 11px; }
#ContentHelper .donate-msg { padding: 10px 14px; border-radius: 5px; margin-bottom: 14px; font-weight: bold; }
#ContentHelper .donate-ok { background: #123d1e; color: #8ef0a5; border: 1px solid #2f7d47; }
#ContentHelper .donate-cancel { background: #3d1414; color: #ffb0ab; border: 1px solid #7d2f2f; }

@media (max-width: 1040px) {
	.topbar-inner {
		gap: 8px;
	}

	.brand span {
		display: none;
	}

	#tabs .tab,
	#tabs .tab-active {
		padding: 0 11px;
		font-size: 12px;
	}

	.submenu-inner {
		padding-left: 58px;
	}
}

@media (max-width: 820px) {
	.topbar {
		position: relative;
	}

	.topbar-inner {
		flex-wrap: wrap;
		padding: 8px 0;
	}

	.brand span {
		display: block;
	}

	#tabs {
		order: 3;
		flex: 1 0 100%;
		min-height: 44px;
		overflow-x: auto;
	}

	#tabs .tab,
	#tabs .tab-active {
		flex: 1 0 auto;
		min-width: 104px;
	}

	.top-actions {
		margin-left: auto;
	}

	#mainsubmenu {
		height: auto;
	}

	.submenu-inner {
		width: 100%;
		padding: 0 8px;
		overflow-x: auto;
	}

	.site-layout {
		grid-template-columns: 1fr;
	}

	.sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.status-card {
		grid-row: span 2;
	}
}

@media (max-width: 560px) {
	.topbar-inner,
	.site-layout,
	.site-footer {
		width: min(100% - 18px, 1280px);
	}

	.brand strong {
		font-size: 18px;
	}

	.brand small {
		display: none;
	}

	.button {
		min-width: 0;
		padding: 0 10px;
		font-size: 10px;
	}

	.button-download {
		display: none;
	}

	.hero {
		min-height: 250px;
	}

	.hero-logo {
		height: 145px;
	}

	.hero-content p {
		font-size: 14px;
	}

	.content-toolbar {
		align-items: flex-start;
		flex-direction: column;
		padding: 9px 12px;
		gap: 4px;
	}

	#margins {
		padding: 10px;
	}

	.sidebar {
		grid-template-columns: 1fr;
	}

	.status-card {
		grid-row: auto;
	}

	.site-footer {
		flex-wrap: wrap;
	}

	.template-switch {
		flex-basis: 100%;
		margin-left: 62px;
	}

	.NewsHeadlineBackground {
		flex-wrap: wrap;
		padding: 7px 9px;
	}

	.NewsHeadlineAuthor {
		flex-basis: 100%;
		margin: 3px 0 0 37px;
	}
}
