/* Ammuki Server - Realm: fantasia ilustrada, faixas azuis com moldura dourada, pergaminho */
:root {
	--navy: #0c2d63;
	--navy-2: #163f86;
	--navy-3: #2a6fc9;
	--gold: #f2b632;
	--gold-light: #fff3b0;
	--gold-dark: #a8620b;
	--parchment: #f3e4c2;
	--parchment-2: #e8d3a6;
	--parchment-edge: #c9a868;
	--ink: #2b1d0e;
	--ink-soft: #6b5536;
	--green: #2f8f3a;
	--orange: #e8751a;
	--purple: #5865f2;
	--online: #49d35b;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	color: var(--ink);
	font: 13px/1.5 Roboto, Arial, sans-serif;
	/* fundo: castelo com cavaleiros; se a imagem faltar, fica o ceu em gradiente */
	background:
		url("images/background_castelo.jpg") center bottom / cover fixed no-repeat,
		radial-gradient(ellipse at 50% 0%, rgba(255, 236, 170, .55), transparent 55%),
		radial-gradient(ellipse at 15% 85%, rgba(30, 70, 140, .55), transparent 60%),
		radial-gradient(ellipse at 85% 80%, rgba(110, 40, 30, .45), transparent 55%),
		linear-gradient(#7fb6e6 0%, #b9d7ee 30%, #6c8fb8 60%, #2c3f63 100%) fixed;
	min-height: 100vh;
}

a { color: #1d4f9c; }
a:hover { color: var(--gold-dark); }

/* ---------- brasao ---------- */
#crest { text-align: center; padding: 18px 16px 6px; }
#crest svg { width: min(460px, 92vw); height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }

/* ---------- grade ---------- */
#realm {
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 16px 24px;
	display: grid;
	grid-template-columns: 215px minmax(0, 1fr) 225px;
	gap: 16px;
	align-items: start;
}

/* ---------- faixas (titulos) ---------- */
.ribbon {
	position: relative;
	margin: 0;
	padding: 7px 26px;
	text-align: center;
	font: 800 14px Cinzel, Georgia, serif;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gold-light);
	text-shadow: 0 2px 0 #071833;
	background:
		linear-gradient(rgba(255, 255, 255, .18), transparent 50%),
		linear-gradient(90deg, var(--navy), var(--navy-2) 50%, var(--navy));
	border: 2px solid var(--gold);
	box-shadow: inset 0 0 0 2px #071833, 0 3px 6px rgba(0, 0, 0, .45);
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.ribbon::before, .ribbon::after {
	content: "\25C6";
	position: absolute;
	top: 50%;
	transform: translateY(-52%);
	font-size: 10px;
	color: var(--gold);
}
.ribbon::before { left: 14px; }
.ribbon::after { right: 14px; }
.ribbon.wide { text-align: left; padding-left: 30px; font-size: 15px; }
.ribbon.wide::before, .ribbon.wide::after { display: none; }
.ribbon.orange { background: linear-gradient(rgba(255, 255, 255, .25), transparent 55%), linear-gradient(90deg, #b2520c, var(--orange) 50%, #b2520c); }

/* ---------- molduras ---------- */
.frame, .panel { margin-bottom: 16px; }
.frame-body {
	margin: -2px 6px 0;
	padding: 14px 12px;
	background: linear-gradient(var(--parchment), var(--parchment-2));
	border: 3px solid var(--gold-dark);
	border-top: 0;
	border-radius: 0 0 10px 10px;
	box-shadow: inset 0 0 0 2px var(--parchment-edge), 0 4px 10px rgba(0, 0, 0, .4);
}
.frame-body.center { text-align: center; }
.frame-body p { margin: 6px 0 10px; }

/* ---------- botoes ---------- */
.btn {
	display: block;
	margin: 6px 0;
	padding: 8px 10px;
	text-align: center;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	border: 1px solid rgba(0, 0, 0, .55);
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 3px rgba(0, 0, 0, .35);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
	cursor: pointer;
}
.btn:hover { filter: brightness(1.12); color: #fff; }
.btn.blue { background: linear-gradient(#3f86e0, #1c4f9e); }
.btn.brown { background: linear-gradient(#9b7b55, #6b4f30); }
.btn.green { background: linear-gradient(#45b052, #237a2e); }
.btn.orange { background: linear-gradient(#ffa040, #d4610f); font-size: 13px; }
.btn.purple { background: linear-gradient(#6f7bff, #4450d6); }
.btn.gold { background: linear-gradient(#e7c35a, #a8781e); color: #2b1d0e; text-shadow: none; }
.btn.red { background: linear-gradient(#d9534f, #9e2a26); }
button.btn { font-family: inherit; }
.btn.disabled { opacity: .65; cursor: default; }
.btn.download { margin: 0 6px 16px; padding: 10px; font-size: 13px; }

/* ---------- menu ---------- */
.menu details { margin-bottom: 8px; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "\25BE"; font-size: 12px; }
.menu details[open] summary::after { content: "\25B4"; }
.menu ul {
	list-style: none;
	margin: -2px 6px 0;
	padding: 6px 0;
	background: linear-gradient(var(--parchment), var(--parchment-2));
	border: 3px solid var(--gold-dark);
	border-top: 0;
	border-radius: 0 0 8px 8px;
}
.menu li a { display: block; padding: 4px 14px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu li a::before { content: "\203A\00a0"; color: var(--gold-dark); font-weight: 700; }
.menu li a:hover, .menu li a.active { background: rgba(255, 255, 255, .55); color: var(--navy); }

/* ---------- centro ---------- */
.topbar {
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 11px 16px;
	background: linear-gradient(90deg, var(--navy), var(--navy-2) 50%, var(--navy));
	border: 2px solid var(--gold);
	box-shadow: inset 0 0 0 2px #071833, 0 4px 8px rgba(0, 0, 0, .45);
	clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
.topbar a { color: #fff; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--gold-light); }
.topbar .online b { color: var(--online); }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #c0392b; }
.dot.on { background: var(--online); box-shadow: 0 0 6px var(--online); }

.updates {
	list-style: none;
	margin: -2px 6px 0;
	padding: 0;
	background: var(--parchment);
	border: 3px solid var(--gold-dark);
	border-top: 0;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.updates li { display: flex; gap: 16px; padding: 7px 14px; border-bottom: 1px solid var(--parchment-edge); }
.updates li:nth-child(even) { background: var(--parchment-2); }
.updates li:last-child { border-bottom: 0; }
.updates time { flex: 0 0 76px; color: var(--ink-soft); }
.updates span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.parchment {
	margin: -2px 6px 0;
	padding: 22px 24px;
	min-height: 420px;
	background: radial-gradient(ellipse at center, #f8ecd0 55%, var(--parchment-2));
	border: 3px solid var(--gold-dark);
	border-top: 0;
	box-shadow: inset 0 0 0 2px var(--parchment-edge), inset 0 0 40px rgba(150, 110, 50, .25), 0 4px 12px rgba(0, 0, 0, .45);
	overflow-x: auto;
}
.parchment td, .parchment th { color: var(--ink); }
.parchment .white, .parchment font.white, .parchment td.white { color: var(--gold-light) !important; }
.parchment .NewsHeadline font[color="white"] { color: var(--navy); font: 800 15px Cinzel, Georgia, serif; letter-spacing: 1px; }
.parchment input, .parchment select, .parchment textarea {
	font: inherit;
	padding: 3px 6px;
	background: #fffaf0;
	color: var(--ink);
	border: 1px solid var(--parchment-edge);
}
/* botoes dentro das paginas: lado a lado, no padrao .btn (os antigos sao convertidos por ammuki_buttons) */
.parchment .btn {
	display: inline-block;
	min-width: 140px;
	margin: 4px 3px;
	vertical-align: middle;
	font-size: 12px;
	line-height: 1.2;
}
.parchment a .btn, .parchment a:hover .btn { color: #fff; text-decoration: none; }
/* botoes nativos do navegador (submit/button) com o mesmo visual */
.parchment input[type="submit"], .parchment input[type="button"], .parchment input[type="reset"], .parchment button:not(.btn) {
	display: inline-block;
	margin: 4px 3px;
	padding: 8px 14px;
	font: 700 12px Roboto, Arial, sans-serif;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
	background: linear-gradient(#3f86e0, #1c4f9e);
	border: 1px solid rgba(0, 0, 0, .55);
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 3px rgba(0, 0, 0, .35);
	cursor: pointer;
}
.parchment input[type="submit"]:hover, .parchment input[type="button"]:hover, .parchment input[type="reset"]:hover, .parchment button:not(.btn):hover { filter: brightness(1.12); }
/* sobras do Gesior (caso algum botao antigo escape da conversao): so a caixa creme de borda fina */
.parchment .BigButton {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 2px;
	background: none !important;
	vertical-align: middle;
}
.parchment .BigButtonOver { display: none !important; }
.parchment input.ButtonText {
	box-sizing: content-box;
	width: 135px;
	height: 25px;
	padding: 0;
	background: #fffaf0;
	border: 1px solid var(--parchment-edge);
	cursor: pointer;
	vertical-align: middle;
}
.parchment input.ButtonText:hover { background: #fff1cc; border-color: var(--gold-dark); }

/* ---------- direita ---------- */
.shop .frame-body { background: linear-gradient(#3a2414, #20140b); border-color: #b2520c; box-shadow: inset 0 0 0 2px #6b3a14, 0 4px 10px rgba(0, 0, 0, .4); }
.shop-title { margin: 4px 0 12px !important; text-align: center; font: 800 16px Cinzel, Georgia, serif; font-style: italic; color: var(--gold); text-shadow: 0 2px 0 #000; }

.medal {
	width: 62px;
	height: 62px;
	margin: 2px auto 6px;
	display: grid;
	place-items: center;
	font-size: 28px;
	border-radius: 50%;
	border: 3px solid var(--gold);
	box-shadow: 0 0 0 3px var(--gold-dark), 0 3px 6px rgba(0, 0, 0, .4);
}
.medal.discord { background: radial-gradient(#7e89ff, #4450d6); color: #fff; }
.medal.book { background: radial-gradient(#fbe7a4, #d6a640); }

.ranking { margin: 0; padding-left: 22px; text-align: left; }
.ranking li { display: flex; justify-content: space-between; gap: 6px; padding: 1px 0; }
.ranking a { text-decoration: none; font-weight: 500; }
.ranking a.online { color: var(--green); }
.empty { margin: 0; font-style: italic; color: var(--ink-soft); }

.rates { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0 0 10px; text-align: left; }
.rates dt { font-weight: 700; }
.rates dd { margin: 0; text-align: right; }

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

#bottom {
	padding: 14px;
	text-align: center;
	color: var(--gold-light);
	font: 600 12px Cinzel, Georgia, serif;
	letter-spacing: 2px;
	text-shadow: 0 1px 2px #000;
}

@media (max-width: 1000px) {
	#realm { grid-template-columns: 1fr; }
	#center { order: -1; }
}