@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Metal+Mania&family=Luckiest+Guy&display=swap');

:root {
	/* backgrounds */
	--primary: rgb(20,14,14);
	--secondary: rgb(14,10,10);
	--third: #ddd;
	--border: rgb(60,10,10);

	/* text */
	--font-color: rgb(190,175,175);

	/* Links / anchors */
	--anchor:#c94040;
	--anchor-hover:#ff5252;

	/* 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,10,10);
	--color-default: #b06060;
	--border-default: #000;
}



body {
	font-family: 'arial', sans-serif;
	color:var(--font-color);
	background:
		linear-gradient(180deg, rgba(8,3,3,0.25) 0%, rgba(8,3,3,0.35) 45%, rgba(3,1,1,0.65) 100%),
		#0a0303 url("../img/naruto_sunset.webp") no-repeat center top fixed;
	background-size: 100% 100%, cover;
	min-height: 100vh;
}


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; }
* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;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: none; border-bottom: 2px solid rgba(255,60,60,0.25); padding: 4px 0; }
nav .container { padding-left: 10px; overflow: visible; max-width: 1220px; margin: 0 auto; }

.site-logo {
	float: left;
	padding: 8px 15px 8px 0;
}
.site-logo img {
	height: 60px;
	width: auto;
	display: block;
	filter: drop-shadow(0 0 6px rgba(200,20,20,0.6));
}
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; z-index: 1; }
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }

/* Kozackie napisy menu */
nav .container > div > ul > li > a {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #e8d6b0;
	text-shadow:
		0 0 6px rgba(255,40,40,0.9),
		0 0 12px rgba(255,0,0,0.6),
		1px 1px 0 #000;
}
nav .container > div > ul > li > a:hover {
	color: #fff;
	text-shadow:
		0 0 10px #ff2b2b,
		0 0 20px #ff0000,
		0 0 30px #ff0000,
		1px 1px 0 #000;
}
nav .container > div > ul > li > a i {
	color: #c94040;
	text-shadow: 0 0 8px rgba(255,0,0,0.8);
}
.preventCollapse, .ellipsis { overflow: hidden; }

.topPane { margin-bottom: 10px; }
.leftPane { width: 70%; }
.rightPane { width: 29%; }
.searchForm { width: 200px; }
.body { padding: 10px 0px; }
table { width: 100%; }
td { padding: 10px 5px; }
.header {
	color: #fff;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: linear-gradient(90deg, rgba(90,0,0,0.9), rgba(30,10,10,0.9));
	border-left: 4px solid #ff2b2b;
	text-shadow: 0 0 8px rgba(255,0,0,0.7);
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.feedContainer { margin:2rem 0; }
.pull-left { float:left; }
.pull-right { float:right; }
.well, .header { width: auto; }
.centralizeContent { text-align: center; }
.smedia { font-size: 2em; }

/* ---- Full-bleed hero ---- */
.hero-region {
	width: 100%;
	background: var(--secondary);
}

.hero-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.banner {
    background: url("../img/header.png") center 22% / cover no-repeat;
    height: 640px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    position: relative;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: linear-gradient(to bottom, rgba(10,3,3,0) 42%, rgba(8,3,3,0.75) 75%, rgba(6,2,2,0.97) 100%);
	padding-bottom: 44px;
}

.hero-badge {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffb0b0;
	background: rgba(20,4,4,0.55);
	border: 1px solid rgba(255,60,60,0.5);
	border-radius: 20px;
	padding: 6px 16px;
	backdrop-filter: blur(2px);
}

.hero-cta {
	text-align: center;
	max-width: 640px;
	padding: 0 20px;
}

.hero-tagline {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.5px;
	color: #f5e8e0;
	text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 16px rgba(255,0,0,0.35);
	margin: 0 0 20px 0;
	text-wrap: balance;
}

.hero-buttons {
	margin-bottom: 18px;
}

.hero-btn {
	display: inline-block;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 13px 28px;
	border-radius: 5px;
	margin: 0 8px;
}

.hero-btn-primary {
	background: linear-gradient(180deg, #ff2b2b, #7a0000);
	color: #fff !important;
	box-shadow: 0 0 20px rgba(255,0,0,0.45);
	border: 1px solid #ff5252;
}
.hero-btn-primary:hover {
	background: linear-gradient(180deg, #ff5252, #a00000);
	box-shadow: 0 0 28px rgba(255,0,0,0.7);
}

.hero-btn-secondary {
	background: rgba(255,255,255,0.04);
	color: #e8d6b0 !important;
	border: 1px solid rgba(255,255,255,0.25);
}
.hero-btn-secondary:hover {
	background: rgba(255,255,255,0.1);
	border-color: #fff;
}

.hero-status {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.hero-pill {
	font-size: 13px;
	color: var(--font-color);
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 6px 14px;
}

.hero-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
}
.hero-dot.online { background: #3ddc5b; box-shadow: 0 0 8px #3ddc5b; }
.hero-dot.offline { background: #ff3333; box-shadow: 0 0 8px #ff3333; }

.leftPane, .rightPane {
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

table, .feedContainer {
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
}



.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: #c94040;
}

.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: linear-gradient(180deg, #ff2b2b, #8c0000);
	box-shadow: 0 0 20px rgba(255,0,0,0.7);
	border-color: #ff2b2b;
}
.loginForm button {
    width: 100%;
    margin-top: 10px;
    background: linear-gradient(180deg, #7a0000, #3c0000);
    color: #fff;
    height: 40px;
    border: 1px solid var(--border);
    font-size: 1em;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
}

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

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

.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, footer, table, .header, .feedContainer {
	background: var(--primary);
}
.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 */
.leftPane img {
	max-width: 100%;
}
/* adding button style to select */
select {
	background: rgb(30,10,10);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
input {
	background: rgb(30,10,10);
	color: var(--font-color);
	height: 40px;
	border: 1px solid var(--border);
	font-size: 1em;
}
#loginContainer li {
	text-align: right;
}

ul.linkbuttons {
	margin-top: 8px;
	padding: 0 8px;
}
ul.linkbuttons li {
	display: inline-block;
	border: 1px solid #c94040;
	width: calc(50% - 10px);
	float: left;
	margin-bottom: 16px;
	text-align: center;
}
ul.linkbuttons li:nth-child(odd) {
	margin-right: 16px;
}
ul.linkbuttons li a {
	padding: 5px 0;
	display: inline-block;
	width: 100%;
	text-align: center;
}
ul.linkbuttons:after {
	content: '';
	display: block;
	clear: both;
}
.widget,
.widget .body,
.search_widget,
.search_widget .body {
	padding-bottom: 0;
}
.widget center {
	margin: auto;
}
.widget h3 {
	margin-bottom: 0;
}
.search_widget form {
	margin: auto;
}
.search_widget input {
	width: 50%;
	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(20,14,14);
}
.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;
}
/* ===================================================================
   Shinobi sign & parchment theme
   - Wooden signboard headers + parchment content, layered onto the
     existing dark ember hero theme above. Applies globally since
     Znote's .well > .header / .well > .body pattern is reused on
     every page (news, login, highscores, character search, etc.)
   =================================================================== */

.navPane, .leftPane, .rightPane {
	box-sizing: border-box;
}
.navPane { width: 21%; margin-right: 1.4%; float: left; }
.leftPane { width: 50.6%; margin-right: 1.4%; }
.rightPane { width: 25%; }

.navPane, .leftPane, .rightPane {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Wooden signboard title bars (news posts, widgets, nav boxes) */
.well > .header,
.navBox-title {
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px),
		radial-gradient(ellipse 60px 14px at 15% 30%, rgba(0,0,0,0.25), transparent 70%),
		radial-gradient(ellipse 40px 10px at 70% 70%, rgba(0,0,0,0.2), transparent 70%),
		repeating-linear-gradient(115deg, rgba(0,0,0,0.1) 0 6px, rgba(255,255,255,0.04) 6px 12px),
		linear-gradient(180deg, #9c6a3a 0%, #7a4d29 40%, #5c3a1e 70%, #452a15 100%);
	border: 2px solid #2a1a0c;
	border-left: 4px solid #ff2b2b;
	border-radius: 8px 8px 0 0;
	color: #f5e3bd;
	text-shadow: 1px 1px 0 #2a1a0d, 0 0 6px rgba(0,0,0,0.5);
	box-shadow: inset 0 1px 0 rgba(255,210,140,0.3), inset 0 -2px 4px rgba(0,0,0,0.35), 0 3px 10px rgba(0,0,0,0.5);
}

/* Parchment content panels - faint leaf/swirl watermark instead of flat color */
.well > .body,
.widget .body {
	background-color: #efe0bd;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10,26 C7,26 5,23 7,20 C6,16 10,13 13,15 C14,11 20,11 21,15 C25,13 29,17 26,21 C29,23 27,27 23,26 Z' fill='none' stroke='%235a3a1e' stroke-width='0.8' opacity='0.15'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 24px 24px;
	color: #3b2a1a;
	text-shadow: none;
	border: 2px solid #33200f;
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: inset 0 0 30px rgba(80,50,20,0.25);
}
.well { margin-bottom: 16px; background: transparent; border-radius: 8px; overflow: visible; }
.well > .body a,
.widget .body a {
	color: #8a3b1e;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	letter-spacing: 0.4px;
}
.well > .body a:hover,
.widget .body a:hover { color: #c94040; }
.well > .body label,
.widget .body label {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	color: #5a2a12;
	letter-spacing: 0.4px;
}
.well > .body input,
.well > .body select {
	background-color: #fbf3dd;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)' fill='none' stroke='%235a3a1e' stroke-width='0.6' opacity='0.1'%3E%3Cpath d='M16,9 C19,12 19,20 16,23 C13,20 13,12 16,9 Z'/%3E%3Cline x1='16' y1='11' x2='16' y2='21'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 24px 24px;
	color: #3b2a1a;
	font-family: 'Cinzel', serif;
	border: 2px solid #6b4423;
	border-radius: 4px;
	padding: 6px 8px;
	box-shadow: inset 0 1px 4px rgba(80,50,20,0.25);
}
.well > .body input[type="submit"],
.well > .body input.submitButton,
.well > .body button {
	background: linear-gradient(180deg, #9c6a3a 0%, #7a4d29 45%, #5c3a1e 100%);
	color: #fff2d8;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	border: 2px solid #33200f;
	box-shadow: inset 0 1px 0 rgba(255,210,150,0.3), 0 2px 6px rgba(0,0,0,0.4);
	cursor: pointer;
}
.well > .body input[type="submit"]:hover,
.well > .body input.submitButton:hover,
.well > .body button:hover {
	background: linear-gradient(180deg, #b07a45, #6b4423 100%);
}

/* News post headline row inside the parchment body */
.postHolder .well > .header a { color: #ffd9a0; }

/* Empty-state text ("No news exist.") still needs to read on the dark page bg */
.leftPane > p { color: var(--font-color); padding: 10px; }

/* Left navigation: wooden signboard link list */
.navBox { margin-bottom: 16px; }
.navBox-title {
	padding: 10px 14px;
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 8px;
}
.navBox-title i { color: #ffb347; text-shadow: 0 0 6px rgba(255,120,0,0.8); }
.navBox ul {
	background: #efe0bd;
	border: 2px solid #33200f;
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: inset 0 0 20px rgba(80,50,20,0.25);
}
.navBox ul li a {
	display: block;
	padding: 10px 14px;
	color: #5a2a12;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.6px;
	text-shadow: 0 1px 0 rgba(255,220,170,0.5);
	border-bottom: 1px solid rgba(80,50,20,0.15);
}
.navBox ul li:last-child a { border-bottom: none; }
.navBox ul li a:hover {
	background: rgba(255,60,20,0.12);
	color: #8a1e0e;
}

/* Village emblem badge above the left nav: wood ring + lacquered center */
.navEmblem {
	position: relative;
	width: 88px;
	height: 88px;
	margin: 0 auto 16px auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-conic-gradient(from 0deg, rgba(0,0,0,0.15) 0deg 4deg, rgba(255,255,255,0.05) 4deg 8deg),
		linear-gradient(160deg, #9c6a3a, #5c3a1e 60%, #3a2312 100%);
	border: 2px solid #241609;
	box-shadow: 0 4px 14px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,210,150,0.3);
}
.navEmblem::before {
	content: '';
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff5b3d, #a30f0f 55%, #4a0505 100%);
	border: 2px solid #2a0a0a;
	box-shadow: inset 0 2px 6px rgba(255,255,255,0.3), 0 0 18px rgba(255,40,0,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
}
.navEmblem i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 26px;
	color: #fff2d8;
	text-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.navEmblem-svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}

/* Glowing "Download Client" plaque, like a village signboard button */
.downloadBtn {
	display: block;
	text-align: center;
	margin: 0 0 16px 0;
	padding: 12px 10px;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px),
		linear-gradient(180deg, #9c6a3a 0%, #7a4d29 40%, #5c3a1e 70%, #452a15 100%);
	border: 2px solid #241609;
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255,210,150,0.3), 0 3px 10px rgba(0,0,0,0.5);
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #6dff6d !important;
	text-shadow: 0 0 6px #2bff2b, 0 0 14px rgba(40,255,40,0.7), 1px 1px 0 #000;
}
.downloadBtn:hover {
	color: #b6ffb6 !important;
	text-shadow: 0 0 10px #4dff4d, 0 0 22px rgba(80,255,80,0.9), 1px 1px 0 #000;
}
.downloadBtn i { margin-right: 6px; }

/* Leaf accents on wooden signboard headers */
.well > .header,
.navBox-title {
	position: relative;
}
.well > .header::before,
.well > .header::after,
.navBox-title::before,
.navBox-title::after {
	font-family: 'FontAwesome';
	content: '\f06c';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #6dbb3f;
	text-shadow: 0 0 4px rgba(0,0,0,0.6);
	font-size: 13px;
	opacity: 0.85;
}
.well > .header::before,
.navBox-title::before { left: 8px; }
.well > .header::after,
.navBox-title::after { right: 8px; transform: translateY(-50%) scaleX(-1); }

/* Bubble-letter site logo strip, like a village-festival banner wordmark */
.siteLogoStrip {
	text-align: center;
	padding: 22px 10px 14px 10px;
	background: linear-gradient(180deg, rgba(8,3,3,0.15), rgba(8,3,3,0.55));
}
.siteLogoImg {
	display: inline-block;
	max-width: 520px;
	width: 90%;
	height: auto;
	filter: drop-shadow(0 6px 16px rgba(0,0,0,0.6));
}
.siteLogoSub {
	display: block;
	margin-top: -6px;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #ffb347;
	text-shadow: 0 0 10px rgba(255,120,0,0.7), 1px 1px 0 #000;
}
@media (max-width: 900px) {
	.siteLogoText { font-size: 38px; }
}

/* Center content column: parchment scroll panel so raw page text
   (downloads.php, serverinfo.php, etc.) isn't floating bare on the bg */
.leftPane {
	background: #efe0bd !important;
	color: #3b2a1a !important;
	border: 2px solid #33200f !important;
	border-radius: 8px;
	padding: 22px 26px;
	box-shadow: inset 0 0 40px rgba(80,50,20,0.2), 0 4px 16px rgba(0,0,0,0.5) !important;
}
.leftPane h1, .leftPane h2, .leftPane h3,
.leftPane h4, .leftPane h5 {
	color: #6b1f0e;
	font-family: 'Cinzel', serif;
	text-shadow: none;
	border-bottom: 2px solid rgba(107,31,14,0.25);
	padding-bottom: 6px;
}
.leftPane a { color: #8a3b1e; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.4px; }
.leftPane a:hover { color: #c94040; }
.leftPane table {
	background: transparent;
	border: 2px solid #33200f;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 18px;
	border-collapse: separate;
	border-spacing: 0;
}
.leftPane td { color: #3b2a1a; padding: 8px 12px; }
.leftPane tr.yellow {
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px),
		linear-gradient(180deg, #9c6a3a 0%, #7a4d29 40%, #5c3a1e 70%, #452a15 100%);
}
.leftPane tr.yellow td {
	color: #f5e3bd;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 13px;
	text-shadow: 1px 1px 0 #2a1a0d;
	padding: 10px 12px;
}
.leftPane tr:not(.yellow):nth-child(even) { background: rgba(90,58,30,0.06); }
.leftPane tr:not(.yellow) td { border-top: 1px solid rgba(90,58,30,0.12); }
.leftPane table {
	position: relative;
	box-shadow: inset 0 0 0 3px rgba(90,58,30,0.35), 0 3px 10px rgba(0,0,0,0.3);
}
.leftPane table::before,
.leftPane table::after {
	content: '';
	position: absolute;
	top: -3px;
	width: 10px;
	height: 10px;
	border: 2px solid #5a3a1e;
	opacity: 0.7;
	z-index: 1;
}
.leftPane table::before { left: -3px; border-right: none; border-bottom: none; }
.leftPane table::after { right: -3px; border-left: none; border-bottom: none; }

/* Account panel quick-link buttons (My Account, Create Character, etc.) */
ul.linkbuttons li {
	position: relative;
	background: linear-gradient(180deg, #9c6a3a 0%, #7a4d29 45%, #5c3a1e 100%) !important;
	border: 2px solid #33200f !important;
	border-radius: 6px;
	box-shadow: inset 0 1px 0 rgba(255,210,150,0.25), 0 2px 6px rgba(0,0,0,0.35);
}
ul.linkbuttons li a {
	padding: 10px 0;
	color: #fff2d8 !important;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
ul.linkbuttons li:hover {
	background: linear-gradient(180deg, #b07a45, #6b4423 100%) !important;
}
/* Small corner "metal bracket" accents */
ul.linkbuttons li::before,
ul.linkbuttons li::after {
	content: '';
	position: absolute;
	top: 3px;
	width: 8px;
	height: 8px;
	border: 1.5px solid #cbb888;
	opacity: 0.6;
}
ul.linkbuttons li::before { left: 3px; border-right: none; border-bottom: none; }
ul.linkbuttons li::after { right: 3px; border-left: none; border-bottom: none; }

/* Plain form controls sitting directly in the parchment (character action bar, etc.) */
.leftPane select,
.leftPane input:not([type="submit"]),
.leftPane button,
.leftPane input[type="submit"] {
	background-color: #fbf3dd;
	color: #3b2a1a;
	font-family: 'Cinzel', serif;
	border: 2px solid #6b4423;
	border-radius: 4px;
	padding: 6px 10px;
}
.leftPane input[type="submit"],
.leftPane button {
	background: linear-gradient(180deg, #9c6a3a 0%, #7a4d29 45%, #5c3a1e 100%);
	color: #fff2d8;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	cursor: pointer;
}
.leftPane input[type="submit"]:hover,
.leftPane button:hover {
	background: linear-gradient(180deg, #b07a45, #6b4423 100%);
}
.leftPane form > div,
.leftPane form {
	background: transparent;
}
/* News post cards keep their own wood/parchment look nested inside the scroll */
.leftPane .well > .header { margin-top: 4px; }

/* Shop category tabs (ALL / ITEMS / PREMIUM / OUTFITS / MOUNTS / MISC) */
#categoryNavigator {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
#categoryNavigator .nav_link {
	display: inline-block;
	padding: 8px 16px;
	background: linear-gradient(180deg, #9c6a3a 0%, #7a4d29 45%, #5c3a1e 100%) !important;
	border: 2px solid #33200f;
	border-radius: 6px;
	color: #fff2d8 !important;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	box-shadow: inset 0 1px 0 rgba(255,210,150,0.25), 0 2px 6px rgba(0,0,0,0.35);
}
#categoryNavigator .nav_link:hover {
	background: linear-gradient(180deg, #b07a45, #6b4423 100%) !important;
}
.leftPane table[id^="cat_"] {
	display: none;
}
.leftPane table[id^="cat_"].show {
	display: table;
}

/* ===================================================================
   UNIFIED LIGHT TABLES (fix)
   Wczesniej: tr:nth-child(2n+1) malowal co drugi wiersz na prawie czarno,
   a tekst byl ciemnobrazowy => nieczytelne. Teraz wszystkie tabele
   (w srodkowej kolumnie i w widgetach z boku) sa jasne, jeden kolor.
   =================================================================== */
.leftPane table,
.well > .body table {
	background: #f3e5c0 !important;
}
.leftPane tr:not(.yellow),
.leftPane tbody tr:not(.yellow),
.leftPane tr:nth-child(2n+1):not(.yellow),
.leftPane tr:not(.yellow):nth-child(even),
.well > .body tr:not(.yellow),
.well > .body tr:nth-child(2n+1):not(.yellow),
.well > .body tr:not(.yellow):nth-child(even) {
	background: transparent !important;
}
.leftPane tr.yellow td,
.leftPane tr.yellow th {
	color: #f5e3bd !important;
}
.leftPane tr:not(.yellow) td,
.well > .body tr:not(.yellow) td {
	color: #3b2a1a !important;
	border-top: 1px solid rgba(90,58,30,0.22) !important;
}
.leftPane tr:not(.yellow) td a,
.well > .body tr:not(.yellow) td a {
	color: #8a3b1e !important;
}
.leftPane th,
.well > .body th {
	background: linear-gradient(180deg, #9c6a3a 0%, #7a4d29 50%, #5c3a1e 100%) !important;
	color: #f5e3bd !important;
	text-shadow: 1px 1px 0 #2a1a0d;
}
/* ====== END UNIFIED LIGHT TABLES ====== */