:root {
	--ink: #302719;
	--muted: #6f614b;
	--paper: #f4e7c7;
	--paper-light: #fff8e7;
	--paper-dark: #ddc797;
	--brown: #5b2d19;
	--brown-dark: #32170d;
	--gold: #c69845;
	--gold-light: #edcf82;
	--line: #aa8a56;
	--link: #7b2119;
	--success: #276127;
	--danger: #9b261e;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #17120d; }

body {
	min-height: 100vh;
	margin: 0;
	color: var(--ink);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	line-height: 1.5;
	background:
		radial-gradient(circle at 50% -10%, rgba(171, 118, 48, .24), transparent 40rem),
		repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
		#17120d;
}

a { color: var(--link); font-weight: 600; text-decoration: none; }
a:hover, a:focus-visible { color: #b13a28; text-decoration: underline; }

.skip-link { position: fixed; top: -60px; left: 12px; z-index: 10; padding: 9px 14px; color: #fff; background: var(--brown-dark); }
.skip-link:focus { top: 8px; color: #fff; }

.site-shell { width: min(1120px, calc(100% - 24px)); margin: 0 auto; }

.masthead {
	margin-top: 16px;
	padding: 22px 28px 18px;
	text-align: center;
	color: #f7e6b3;
	border: 1px solid #9b7037;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background:
		linear-gradient(rgba(48, 20, 10, .72), rgba(48, 20, 10, .92)),
		linear-gradient(110deg, #7a3d20, #3c1b0e 62%, #6b341b);
	box-shadow: 0 8px 30px rgba(0,0,0,.42), inset 0 0 0 3px rgba(222,180,89,.12);
}

.brand { display: inline-block; color: #f5d681; text-shadow: 0 2px 0 #1e0c06, 0 0 12px rgba(255,201,80,.25); }
.brand:hover { color: #fff0b9; text-decoration: none; }
.brand-title { display: block; font-size: clamp(2rem, 6vw, 3.7rem); font-weight: 700; letter-spacing: .06em; line-height: .95; }
.brand-subtitle { display: block; margin-top: 8px; color: #d7b86f; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }

.site-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; }
.sidebar { position: sticky; top: 10px; }
.side-nav { padding: 7px; border: 1px solid #8b642f; border-radius: 6px; background: linear-gradient(#674021, #3e2413); box-shadow: 0 7px 20px rgba(0,0,0,.35); }
.side-nav-primary { display: block; margin: 3px 2px 7px; padding: 9px 10px; color: #ffe9aa; text-align: center; text-transform: uppercase; border: 1px solid #a47736; border-radius: 3px; background: linear-gradient(#7c4a27, #4b2916); }
.side-nav-primary:hover { color: #fff7da; text-decoration: none; border-color: #d1a451; background: linear-gradient(#8a572f, #5c3019); }
.side-nav-download { margin-top: 8px; }
.nav-category { margin: 7px 2px; padding: 0; overflow: hidden; border: 1px solid #7d562b; border-radius: 3px; background: #2e1b10; }
.nav-category summary { padding: 8px 9px; color: #f4d98d; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; list-style-position: inside; background: linear-gradient(#61391f, #402313); }
.nav-category summary:hover { color: #fff2bd; background: linear-gradient(#724526, #4d2a17); }
.nav-category-links { padding: 4px 0; }
.nav-category-links a, .nav-category-links button { display: block; width: 100%; padding: 6px 11px; color: #e3cf9e; font: 600 .82rem/1.25 Georgia, "Times New Roman", serif; text-align: left; border: 0; background: transparent; cursor: pointer; }
.nav-category-links a:hover, .nav-category-links button:hover { color: #fff3c5; text-decoration: none; background: rgba(213,160,69,.18); }
.nav-category-links form { margin: 0; }

a.button, button.button, .nav .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 31px;
	margin: 2px;
	padding: 5px 10px;
	color: #f8e9bd;
	font: 700 .74rem/1.15 Georgia, "Times New Roman", serif;
	letter-spacing: .035em;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid #8f6531;
	border-radius: 3px;
	background: linear-gradient(#704426, #4b2916);
	box-shadow: inset 0 1px rgba(255,255,255,.1);
	cursor: pointer;
}
a.button:hover, button.button:hover, .nav .button:hover,
a.button:focus-visible, button.button:focus-visible {
	color: #fff7da;
	text-decoration: none;
	border-color: #d1a451;
	background: linear-gradient(#8a572f, #5c3019);
}

.page-content { min-height: 45vh; }

.box {
	position: relative;
	width: 100%;
	margin: 0 auto 18px;
	padding: clamp(16px, 3vw, 26px);
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 5px;
	background:
		linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0)),
		var(--paper);
	box-shadow: 0 5px 18px rgba(0,0,0,.3), inset 0 0 0 3px rgba(255,248,225,.48);
}

.box::before {
	content: "";
	position: absolute;
	top: 4px; left: 4px; right: 4px;
	height: 1px;
	background: rgba(255,255,255,.65);
}

h1, h2, h3 { color: var(--brown); line-height: 1.2; }
.box h1 {
	margin: -4px -4px 18px;
	padding: 0 0 10px;
	font-size: clamp(1.45rem, 3vw, 2rem);
	border-bottom: 2px solid var(--gold);
	text-shadow: 0 1px rgba(255,255,255,.7);
}
.box h2 { margin: 22px 0 10px; font-size: 1.25rem; }
.box h3 { font-size: 1.05rem; }
p { margin: .75em 0; }
small { color: var(--muted); }
code { padding: 2px 5px; color: #5a2519; border: 1px solid #cbb27c; border-radius: 3px; background: #ead8ad; }
strong { color: #402619; }

table { width: 100%; margin: 12px 0; border-spacing: 0; border-collapse: collapse; text-align: left; background: rgba(255,251,235,.5); }
th, td { padding: 9px 11px; vertical-align: top; border: 1px solid #c8ad76; overflow-wrap: anywhere; }
th { color: #f8eac2; font-size: .82rem; letter-spacing: .035em; text-transform: uppercase; background: linear-gradient(#704326, #54301b); }
tr:nth-child(even) td { background: rgba(196,160,93,.11); }
tr:hover td { background: rgba(218,177,91,.18); }
table.info { max-width: 760px; }
table.info th { width: 34%; }

form { max-width: 760px; }
.box > form { margin: 0; }
.box label {
	display: block;
	margin: 11px 0 4px;
	color: #55341e;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .075em;
	text-transform: uppercase;
}
.box label:has(input[type="checkbox"]), .box label:has(input[type="radio"]) { font-size: .95rem; letter-spacing: 0; text-transform: none; }

input, select, textarea, button { font: inherit; }
.box input[type="text"], .box input[type="password"], .box input[type="email"],
.box input[type="number"], .box input[type="search"], .box select, .box textarea {
	display: block;
	width: min(100%, 560px);
	min-height: 36px;
	padding: 6px 9px;
	color: #2e2418;
	border: 1px solid #a18454;
	border-radius: 3px;
	outline: 0;
	background: var(--paper-light);
	box-shadow: inset 0 1px 3px rgba(71,44,19,.13);
}

/* Pola liczbowe zachowuja walidacje, ale wygladaja jak zwykle pola tekstowe. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.box textarea { min-height: 100px; resize: vertical; }
.box input:focus, .box select:focus, .box textarea:focus { border-color: #8b481f; box-shadow: 0 0 0 3px rgba(160,100,38,.2), inset 0 1px 3px rgba(71,44,19,.1); }
.box input[type="checkbox"], .box input[type="radio"] { width: 1.1em; height: 1.1em; accent-color: var(--brown); vertical-align: -.15em; }

.box input[type="submit"], .box button[type="submit"] {
	display: inline-block;
	min-width: 120px;
	min-height: 34px;
	margin: 13px 5px 3px 0;
	padding: 6px 12px;
	font-size: .84rem;
	color: #fff3cf;
	font-weight: 700;
	border: 1px solid #3c190d;
	border-radius: 3px;
	background: linear-gradient(#8a4a27, #5b2d18);
	box-shadow: inset 0 1px rgba(255,255,255,.18), 0 2px 3px rgba(0,0,0,.18);
	cursor: pointer;
}
.box input[type="submit"]:hover, .box button[type="submit"]:hover { background: linear-gradient(#a15a2e, #6d351b); }
.box td form { display: inline; }
.box td input[type="submit"] { min-width: 0; min-height: 30px; margin: 2px; padding: 4px 9px; font-size: .8rem; }
.box td input[type="text"], .box td input[type="password"] { min-height: 32px; padding: 5px 7px; font-size: .86rem; }

.account-actions { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; max-width: 760px; }
.account-actions .button { width: 100%; min-height: 38px; margin: 0; padding: 7px 9px; text-align: center; }
.danger-zone { max-width: 560px; margin-top: 18px; padding-top: 4px; border-top: 1px solid #c9ad75; }
.danger-zone form { display: grid; grid-template-columns: minmax(170px, 1fr) auto; gap: 7px; align-items: end; }
.danger-zone label { grid-column: 1 / -1; margin-bottom: -3px; }
.danger-zone input[type="submit"] { margin: 0; white-space: nowrap; }

.support-ticket { margin: 14px 0; padding: 14px; border: 1px solid #b89961; border-radius: 5px; background: rgba(255,248,225,.42); }
.support-ticket > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.support-ticket > header h2 { margin: 0; }
.ticket-status { padding: 3px 8px; font-size: .7rem; font-weight: 700; text-transform: uppercase; border-radius: 10px; background: #d2bc8d; }
.ticket-status-open { color: #744311; }
.ticket-status-answered { color: #1f5e26; background: #c5dfb7; }
.ticket-status-closed { color: #6b6151; background: #d5cdbd; }
.support-chat { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #ccb17c; border-radius: 4px; background: rgba(255,253,244,.62); }
.chat-message { width: min(82%, 620px); padding: 8px 11px; border-radius: 8px; box-shadow: 0 1px 2px rgba(61,40,18,.12); }
.chat-message strong { display: block; margin-bottom: 2px; font-size: .75rem; }
.chat-message p { margin: 0; white-space: pre-wrap; }
.chat-player { align-self: flex-start; background: #ead6a7; border-bottom-left-radius: 2px; }
.chat-staff { align-self: flex-end; background: #d6e1ba; border-bottom-right-radius: 2px; }
.ticket-actions { margin-top: 10px; }
.ticket-actions > form:not(.ticket-reply) { display: inline-block; }
.ticket-reply { margin-top: 12px; }
.ticket-reply textarea { min-height: 76px; }
.ticket-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; width: 100%; }
.ticket-list-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--ink); border: 1px solid #bea26d; border-radius: 4px; background: rgba(255,250,232,.58); }
.ticket-list-item:hover { color: var(--brown); text-decoration: none; border-color: #9d7139; background: #f5e4bc; }
.ticket-list-item span:first-child { display: grid; gap: 2px; }
.ticket-list-item small { font-weight: 400; }
.support-ticket-detail { margin-bottom: 0; }
.support-ticket-detail > header h1 { margin: 0; padding: 0; border: 0; font-size: 1.35rem; }
.ticket-closed-note { margin-top: 12px; padding: 8px 10px; color: var(--muted); border: 1px solid #c5b28d; border-radius: 4px; background: rgba(210,201,181,.35); }
.support-view-switch { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.guild-account-status { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border: 1px solid #c2a66f; border-radius: 4px; background: rgba(255,250,232,.55); }
.guild-account-status span { color: var(--muted); }
.guild-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guild-action-grid .box { margin: 0; }
.guild-action-grid .box h2 { margin-top: 0; padding-bottom: 7px; border-bottom: 1px solid #c7a96e; }
.guild-danger { border-color: #a9695e; }
.guild-invitation-list { display: grid; gap: 7px; }
.guild-invitation-list article { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #c2a66f; border-radius: 4px; background: rgba(255,250,232,.55); }
.guild-invitation-list article > div:first-child { display: grid; gap: 2px; }
.guild-invitation-list article form { display: inline-block; }
.experience-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.experience-columns table { margin-top: 12px; font-size: .88rem; }
.experience-columns th, .experience-columns td { padding: 6px 8px; }

details { margin: 14px 0; padding: 10px 13px; border: 1px solid #c1a46d; border-radius: 4px; background: rgba(255,248,225,.45); }
summary { color: var(--link); font-weight: 700; cursor: pointer; }

.site-footer { margin: 26px 0 18px; color: #d8c393; text-align: center; }
.site-footer .footer-panel { padding: 15px 20px; border: 1px solid #654622; border-radius: 5px; background: rgba(39,25,14,.84); }
.site-footer h2 { margin: 0 0 7px; color: #e3c574; font-size: 1.05rem; }
.site-footer p { margin: 5px 0; color: #bca87d; font-size: .88rem; }
.site-footer details { max-width: 820px; margin: 10px auto 0; padding: 5px; border: 0; background: transparent; }
.site-footer summary { color: #cbb47e; font-size: .8rem; }
.server-key { margin-top: 8px; color: #8f7e5e; font: .68rem/1.3 Consolas, monospace; overflow-wrap: anywhere; }

.status-online { color: var(--success) !important; font-weight: 700; }
.status-offline { color: var(--danger) !important; font-weight: 700; }

@media (max-width: 760px) {
	.site-shell { width: min(100% - 12px, 1120px); }
	.masthead { margin-top: 6px; padding: 17px 10px 14px; }
	.site-layout { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
	.sidebar { position: static; }
	.side-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
	.side-nav-primary, .nav-category { margin: 0; }
	.nav-category { align-self: start; }
	.box { margin-bottom: 10px; padding: 15px 12px; }
	table { min-width: 560px; font-size: .9rem; }
	table.info { min-width: 0; }
	table.info th, table.info td { display: block; width: 100%; }
	table.info th { border-bottom: 0; }
	.box input[type="submit"], .box button[type="submit"] { width: 100%; margin-right: 0; }
	.box td input[type="submit"] { width: auto; }
}

@media (max-width: 620px) {
	.account-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.danger-zone form { grid-template-columns: 1fr; }
	.danger-zone label { grid-column: auto; }
	.chat-message { width: 94%; }
	.guild-action-grid { grid-template-columns: 1fr; }
	.guild-invitation-list article { align-items: flex-start; flex-direction: column; }
	.experience-columns { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
	.side-nav { grid-template-columns: 1fr; }
	.account-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
	a, input, select, textarea, button { transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
}