/* Soul Eater theme for MyAAC - dark Titanium-style layout */

:root {
	--abyss: #080d11;
	--crypt: #0d151c;
	--crypt-2: #111c26;
	--grave: #1c2c3b;
	--bone: #e7eef5;
	--ash: #8fa5ba;
	--soul: #4cc3ff;
	--soul-dim: #2b8bc2;
	--ember: #ff7a2f;
	--display: "Segoe UI", Arial, Helvetica, system-ui, sans-serif;
	--body: "Segoe UI", Arial, Helvetica, system-ui, sans-serif;
	--radius: 4px;
	--wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--abyss); }

body {
	margin: 0;
	background: linear-gradient(rgba(8, 13, 17, 0.7), rgba(8, 13, 17, 0.7)), var(--abyss) url(images/background.jpg?v=2) center top / cover fixed no-repeat; /* image at 30% over #080d11 */
	color: var(--bone);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--soul); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 2px solid var(--soul);
	outline-offset: 2px;
}

img { max-width: 100%; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.skip-link {
	position: absolute; left: -9999px; top: 8px;
	background: var(--soul); color: var(--abyss); padding: 8px 12px; z-index: 100;
}
.skip-link:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	font-family: var(--body); font-weight: 700; font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-soul { background: var(--soul); color: #04141f; }
.btn-soul:hover { background: #9adcff; }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--grave); }
.btn-ghost:hover { border-color: var(--soul-dim); color: var(--soul); }
.btn-lg { padding: 12px 22px; font-size: 17px; }

/* ---------- Top bar ---------- */
.topbar {
	position: sticky; top: 0; z-index: 50;
	background: rgba(8, 13, 17, 0.94);
	border-bottom: 1px solid var(--grave);
}
.topbar-inner {
	display: flex; align-items: center; gap: 24px;
	min-height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--bone); }
.brand:hover { text-decoration: none; }
.brand-mark {
	width: 14px; height: 14px; border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, #d8fff9 0, var(--soul) 45%, rgba(76, 195, 255, 0) 72%);
	box-shadow: 0 0 14px rgba(76, 195, 255, 0.55);
}
.brand-name { font-family: var(--display); font-size: 26px; letter-spacing: 0.02em; line-height: 1; }

.nav-toggle {
	display: none;
	margin-left: auto;
	background: transparent; color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 6px 12px; font: inherit; cursor: pointer;
}

.site-nav { flex: 1; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.nav-item { position: relative; }
.nav-cat {
	background: transparent; border: 0; color: var(--bone);
	font: 500 16px var(--body);
	padding: 10px 12px; cursor: pointer; border-radius: var(--radius);
}
.nav-cat::after {
	content: ""; display: inline-block; margin-left: 7px; vertical-align: 3px;
	border: 4px solid transparent; border-top-color: var(--ash); border-bottom: 0;
}
.nav-cat:hover, .nav-item.is-open .nav-cat { color: var(--soul); }

.nav-drop {
	display: none;
	position: absolute; top: 100%; left: 0;
	min-width: 210px;
	list-style: none; margin: 4px 0 0; padding: 6px;
	background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius);
}
.nav-item.is-open .nav-drop { display: block; }
@media (hover: hover) and (min-width: 901px) {
	.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
	.nav-item:hover .nav-cat { color: var(--soul); }
}
.nav-drop a {
	display: block; padding: 7px 10px; border-radius: 3px;
	color: var(--bone); font-size: 15px;
}
.nav-drop a:hover { background: var(--crypt-2); color: var(--soul); text-decoration: none; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.status-pill {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 14px; color: var(--ash);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.status-pill.is-online .status-dot { background: var(--soul); box-shadow: 0 0 8px var(--soul); }

/* ---------- Hero (news page only) ---------- */
.hero {
	position: relative; overflow: hidden;
	border-bottom: 1px solid var(--grave);
	background:
		radial-gradient(ellipse 60% 80% at 18% 30%, rgba(76, 195, 255, 0.10), rgba(76, 195, 255, 0) 70%),
		radial-gradient(ellipse 50% 60% at 85% 100%, rgba(201, 71, 62, 0.08), rgba(201, 71, 62, 0) 70%),
		var(--abyss);
}
.hero-inner { padding-top: 72px; padding-bottom: 64px; }
.hero-title {
	margin: 0;
	font-family: var(--display); font-weight: 600;
	font-size: clamp(56px, 11vw, 132px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	color: var(--bone);
	text-shadow: 0 0 28px rgba(76, 195, 255, 0.35), 0 0 2px rgba(76, 195, 255, 0.6);
	animation: soul-rise 1.6s ease-out both;
}
@keyframes soul-rise {
	from { opacity: 0; text-shadow: 0 0 0 rgba(76, 195, 255, 0); filter: blur(6px); }
	to { opacity: 1; filter: blur(0); }
}
.hero-lead { max-width: 34em; margin: 20px 0 28px; font-size: 20px; color: var(--ash); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Layout ---------- */
.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	padding-top: 32px; padding-bottom: 56px;
}

.crumbs { margin: 0 0 4px; font-size: 14px; color: var(--ash); }
.crumbs a { color: var(--ash); }
.page-title {
	margin: 0 0 24px;
	font-family: var(--display); font-weight: 600;
	font-size: 40px; line-height: 1.1;
}

.section-title {
	margin: 0 0 12px;
	font-family: var(--display); font-weight: 600;
	font-size: 28px;
}

/* ---------- Latest updates (news tickers) ---------- */
.updates { margin-bottom: 32px; }
.updates-list {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--grave);
}
.update {
	display: grid;
	grid-template-columns: 20px 96px minmax(0, 1fr);
	gap: 12px; align-items: start;
	padding: 10px 4px;
	border-bottom: 1px solid var(--grave);
}
.update-icon { margin-top: 4px; }
.update-date { color: var(--ash); font-size: 15px; white-space: nowrap; }
.update-text summary { cursor: pointer; list-style: none; }
.update-text summary::-webkit-details-marker { display: none; }
.update-text summary::after { content: " +"; color: var(--soul-dim); }
.update-text[open] summary::after { content: " \2212"; }
.update-full { padding-top: 6px; color: var(--ash); }

/* ---------- Featured article ---------- */
.featured {
	display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px;
	margin-bottom: 40px; padding: 20px;
	background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius);
	border-left: 3px solid var(--soul);
}
.featured:not(:has(.featured-image)) { grid-template-columns: minmax(0, 1fr); }
.featured-image img { width: 100%; height: auto; display: block; border-radius: 2px; }
.featured-kicker { margin: 0; color: var(--soul); font-size: 15px; }
.featured-title { margin: 2px 0 10px; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; }
.featured-body { color: var(--bone); margin-bottom: 14px; }

/* ---------- News posts ---------- */
.news-post {
	padding-bottom: 28px; margin-bottom: 28px;
	border-bottom: 1px solid var(--grave);
}
.news-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.news-icon { width: 32px; height: 32px; flex: none; margin-top: 4px; }
.news-title { margin: 0; font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.15; }
.news-meta { margin: 2px 0 0; color: var(--ash); font-size: 15px; }
.news-meta span { margin-left: 8px; }
.news-body { max-width: 72ch; }
.news-body img { height: auto; }
.news-comments { margin: 12px 0 0; }

/* ---------- Generic content (core MyAAC pages) ---------- */
.content { overflow-x: auto; }
.content h1, .content h2, .content h3 { font-family: var(--display); font-weight: 600; line-height: 1.2; }
.content p { max-width: 75ch; }

.content table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; }
.content table td, .content table th { padding: 8px 10px; border-bottom: 1px solid var(--grave); text-align: left; vertical-align: top; }
.content table tr { background: transparent; }
.content table tr[bgcolor], .content table tr[style*="background"] { background: var(--crypt) !important; }
.content table tr:nth-child(even)[bgcolor] { background: var(--crypt-2) !important; }
.content table thead tr, .content table tr.white, .content table td.white, .content .white,
.content table tr[bgcolor="#1c2c3b"], .content table tr[bgcolor="#322C47"] {
	background: var(--grave) !important; color: var(--bone) !important;
}
.content table td[bgcolor] { background: transparent !important; }
.content .myaac-table > tbody > tr:nth-child(odd) { background: var(--crypt) !important; }
.content .myaac-table > tbody > tr:nth-child(even) { background: var(--crypt-2) !important; }
.content .myaac-table > thead > tr > td, .content .myaac-table > thead > tr > th { background: var(--grave) !important; }
.content .red { color: #e98a83; }
.content .green, .content font[color="green"] { color: var(--soul) !important; }

.content input[type="text"], .content input[type="password"], .content input[type="email"], .content input[type="number"],
.content select, .content textarea {
	background: var(--abyss); color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 8px 10px; font: inherit; max-width: 100%;
}
.content input[type="submit"], .content input[type="button"], .content button {
	background: var(--soul); color: #04141f;
	border: 0; border-radius: var(--radius);
	padding: 8px 16px; font: 700 15px var(--body); cursor: pointer;
}
.content input[type="submit"]:hover, .content input[type="button"]:hover, .content button:hover { background: #9adcff; }

.content .success, .content .error, .content .warning, .content .note {
	border-radius: var(--radius); padding: 10px 14px; margin: 0 0 16px;
	color: var(--bone) !important; background: var(--crypt) !important;
	border: 1px solid var(--grave) !important; border-left-width: 3px !important;
}
.content .success { border-left-color: var(--soul) !important; }
.content .error { border-left-color: var(--ember) !important; }
.content .warning, .content .note { border-left-color: #d8b25a !important; }

/* Extra pages from this plugin */
.se-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 28px; }
.se-fact { background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); padding: 14px 16px; }
.se-fact dt { color: var(--ash); font-size: 15px; }
.se-fact dd { margin: 2px 0 0; font-family: var(--display); font-size: 28px; line-height: 1.1; }
.se-steps { padding-left: 1.4em; max-width: 72ch; }
.se-steps li { margin-bottom: 14px; }
.se-steps li::marker { color: var(--soul); font-weight: 700; }
.se-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 28px; }
.se-tier { background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); padding: 16px; }
.se-tier h3 { margin: 0 0 4px; font-size: 24px; }
.se-tier .se-req { color: var(--soul); margin: 0 0 10px; }
.se-tier ul { margin: 0; padding-left: 1.1em; color: var(--ash); }
.se-events { list-style: none; padding: 0; margin: 0 0 28px; border-top: 1px solid var(--grave); }
.se-event { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--grave); }
.se-event time { color: var(--soul); }
.se-event h3 { margin: 0 0 2px; font-size: 22px; }
.se-event p { margin: 0; color: var(--ash); }
.se-note { color: var(--ash); font-size: 15px; }

/* ---------- Sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.panel {
	background: var(--crypt);
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 16px 18px;
}
.panel-title { margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 22px; }
.panel-text { margin: 0 0 12px; color: var(--ash); }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-more { display: inline-block; margin-top: 10px; font-size: 15px; }
.panel-links { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 15px; }

.stat-list { margin: 0; }
.stat-list div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--grave); }
.stat-list div:last-child { border-bottom: 0; }
.stat-list dt { color: var(--ash); }
.stat-list dd { margin: 0; font-weight: 500; }
.stat-list dd.ok { color: var(--soul); }
.stat-list dd.bad { color: #e98a83; }

.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 15px; color: var(--ash); }
.login-form input[type="text"], .login-form input[type="password"] {
	background: var(--abyss); color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 8px 10px; font: inherit; margin-bottom: 6px;
}
.login-form .check { display: flex; gap: 8px; align-items: center; margin: 2px 0 8px; }

.top-list { margin: 0; padding-left: 1.4em; }
.top-list li { padding: 5px 0; border-bottom: 1px solid var(--grave); }
.top-list li::marker { color: var(--soul); }
.top-list li span { float: right; color: var(--ash); font-size: 15px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--grave); background: #060a0e; }
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr repeat(5, 1fr);
	gap: 24px;
	padding-top: 40px; padding-bottom: 28px;
}
.footer-brand p { color: var(--ash); margin: 8px 0 0; font-size: 15px; }
.footer-col h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: 19px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 6px; }
.footer-col a { color: var(--ash); font-size: 15px; }
.footer-col a:hover { color: var(--soul); }
.footer-base { border-top: 1px solid var(--grave); padding-top: 16px; padding-bottom: 28px; color: var(--ash); font-size: 14px; }
.footer-base p { margin: 0 0 6px; }
.footer-meta a { color: var(--ash); }
.template-switch { margin-top: 10px; }
.template-switch select { background: var(--abyss); color: var(--bone); border: 1px solid var(--grave); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.footer-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.topbar-inner { flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
	.nav-toggle { display: inline-block; }
	.site-nav { display: none; flex-basis: 100%; order: 3; }
	.site-nav.is-open { display: block; }
	.nav-list { flex-direction: column; }
	.nav-cat { width: 100%; text-align: left; }
	.nav-drop { position: static; margin: 0 0 6px; }
	.topbar-actions { order: 2; }
	.layout { grid-template-columns: minmax(0, 1fr); }
	.featured { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.status-pill { display: none; }
	.hero-inner { padding-top: 48px; padding-bottom: 44px; }
	.update { grid-template-columns: 20px minmax(0, 1fr); }
	.update-date { grid-column: 2; }
	.update-text { grid-column: 2; }
	.se-event { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.footer-grid { grid-template-columns: repeat(2, 1fr); }
	.page-title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-title { animation: none; }
}

/* ---------- Live news bar ---------- */
.livebar {
	background: #0a1219;
	border-bottom: 1px solid var(--grave);
	font-size: 14px;
}
.livebar-inner { display: flex; align-items: center; gap: 14px; height: 36px; }
.live-label {
	display: inline-flex; align-items: center; gap: 7px;
	flex: none; color: var(--soul); font-weight: 700;
}
.live-pulse {
	width: 26px; height: 26px; flex: none;
	background: url("images/soul-coin.png?v=3") center / contain no-repeat;
	filter: drop-shadow(0 0 3px rgba(76, 195, 255, 0.55));
	animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
	0%, 100% { filter: drop-shadow(0 0 2px rgba(76, 195, 255, 0.4)); }
	50% { filter: drop-shadow(0 0 7px rgba(76, 195, 255, 0.9)); }
}
.live-viewport {
	flex: 1; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.live-track {
	display: flex; gap: 36px; width: max-content;
	list-style: none; margin: 0; padding: 0 24px;
}
.live-track.is-moving { animation: live-scroll var(--live-duration, 60s) linear infinite; }
.livebar:hover .live-track, .livebar:focus-within .live-track { animation-play-state: paused; }
@keyframes live-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.live-item { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; color: var(--bone); }
.live-item a { color: var(--bone); }
.live-item a:hover { color: var(--soul); }
.live-tag {
	font-size: 12px; font-weight: 700;
	padding: 1px 7px; border-radius: 3px;
	background: var(--grave); color: var(--ash);
}
.live-death .live-tag { background: rgba(201, 71, 62, 0.22); color: #f0a49e; }
.live-raid .live-tag { background: rgba(216, 178, 90, 0.2); color: #e7c97f; }
.live-world .live-tag { background: rgba(76, 195, 255, 0.16); color: var(--soul); }
.live-event .live-tag { background: rgba(76, 195, 255, 0.16); color: var(--soul); }
.live-when { color: var(--ash); font-size: 13px; }
.live-empty { color: var(--ash); }

@media (prefers-reduced-motion: reduce) {
	.live-pulse { animation: none; }
	.live-viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 560px) {
	.livebar-inner { gap: 10px; }
	.live-track { gap: 24px; }
}

/* ---------- Store page ---------- */
.page-store .layout { grid-template-columns: minmax(0, 1fr); }
.page-store .sidebar { display: none; }

.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.se-store-intro { color: var(--ash); margin: 0 0 16px; }
.se-store-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.se-store-search { position: relative; flex: 1 1 280px; }
.se-store-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ash); }
.content .se-store-search input {
	width: 100%; padding: 10px 12px 10px 34px;
	background: var(--crypt); color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius); font: inherit;
}
.content .se-store-sort select { padding: 10px 12px; background: var(--crypt); }

.se-store-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
.se-store-nav {
	position: sticky; top: 120px; align-self: start;
	max-height: calc(100vh - 140px); overflow: auto; padding-right: 6px;
}
.se-nav-group { margin: 18px 0 6px; font-family: var(--display); font-size: 18px; color: var(--bone); }
.se-nav-group:first-child { margin-top: 0; }
.se-store-nav a {
	display: flex; justify-content: space-between; gap: 8px;
	padding: 4px 8px; border-radius: 3px; color: var(--ash); font-size: 15px;
}
.se-store-nav a:hover { background: var(--crypt); color: var(--soul); text-decoration: none; }
.se-store-nav a span { font-variant-numeric: tabular-nums; }

.se-group > h2 {
	margin: 4px 0 4px; padding-bottom: 6px;
	border-bottom: 1px solid var(--grave);
	font-size: 30px;
}
.se-cat { margin: 18px 0 32px; scroll-margin-top: 120px; }
.se-cat h3 { margin: 0 0 8px; font-family: var(--body) !important; font-weight: 700 !important; font-size: 18px; }
.se-cat h3 small { margin-left: 8px; color: var(--ash); font-weight: 400; font-size: 14px; }
.se-cat-note { color: var(--ash); font-size: 14px; margin: 0 0 10px; }

.se-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.se-card {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 12px 10px; text-align: center;
	background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius);
}
.se-card:hover { border-color: var(--soul-dim); }
.se-thumb {
	width: 76px; height: 76px; display: grid; place-items: center;
	background: var(--abyss); border: 1px solid var(--grave); border-radius: 3px;
}
.se-thumb img { max-width: 64px; max-height: 64px;  }
.se-ph { font-family: var(--display); font-size: 26px; color: var(--ash); }
.se-nm { font-size: 14px; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.se-pr { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--soul); font-variant-numeric: tabular-nums; }
.se-coin {
	width: 22px; height: 22px; display: inline-block; vertical-align: -6px; margin-right: 3px;
	background: url(images/soul-coin.png) center / contain no-repeat;
}
.sc-ico { width: 26px; height: 26px; vertical-align: -7px; }
.se-tn { font-size: 12px; color: var(--ash); line-height: 1.3; }
.se-store-empty { display: none; color: var(--ash); padding: 40px 0; text-align: center; }
.se-store-chips { display: none; }

@media (max-width: 900px) {
	.se-store-layout { grid-template-columns: minmax(0, 1fr); }
	.se-store-nav { display: none; }
	.se-store-chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; }
	.se-store-chips a {
		white-space: nowrap; padding: 5px 11px; font-size: 14px;
		border: 1px solid var(--grave); border-radius: 999px; color: var(--bone);
	}
	.se-cards { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
}


/* ================= Titanium-style layout ================= */

/* flat navigation */
.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.nav-account { display: flex; gap: 2px; }
.nav-link {
	display: inline-block; padding: 10px 12px; border-radius: var(--radius);
	color: var(--bone); font: 500 16px var(--body); text-decoration: none; white-space: nowrap;
}
.nav-link:hover { color: var(--soul); background: var(--crypt); text-decoration: none; }
.nav-link.is-current { color: var(--soul); box-shadow: inset 0 -2px 0 var(--soul); border-radius: 0; }
.nav-account .nav-link:last-child { border: 1px solid var(--soul-dim); color: var(--soul); }
.nav-account .nav-link:last-child:hover { background: var(--soul); color: #04141f; }

/* main banner */
.banner {
	position: relative; overflow: hidden;
	height: clamp(340px, 42vw, 640px);
	border-bottom: 1px solid var(--grave);
	background: #000;
}
.banner-img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 42%;
}
.banner-shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 13, 17, 0) 38%, rgba(8, 13, 17, 0.72) 82%, var(--abyss) 100%),
		linear-gradient(90deg, rgba(8, 13, 17, 0.55) 0, rgba(8, 13, 17, 0) 55%);
}
.banner-inner {
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	padding-bottom: 36px;
}
.banner-title {
	margin: 0; font-family: var(--display); font-weight: 600;
	font-size: clamp(48px, 8vw, 104px); line-height: 0.95;
	text-shadow: 0 0 30px rgba(76, 195, 255, 0.45), 0 2px 12px rgba(0, 0, 0, 0.8);
	animation: soul-rise 1.4s ease-out both;
}
.banner-lead { max-width: 36em; margin: 12px 0 20px; font-size: 19px; color: #cfe0ee; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }
.banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.banner .btn-ghost { background: rgba(8, 13, 17, 0.55); border-color: rgba(231, 238, 245, 0.35); }
.banner .btn-ghost:hover { border-color: var(--soul); }

/* stats strip */
.stats {
	display: flex; flex-wrap: wrap; gap: 1px;
	margin: 0 0 28px; background: var(--grave);
	border: 1px solid var(--grave); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--crypt); padding: 14px 12px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 150px; min-width: 0; }
.stat-num { font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--bone); }
.stat-num small { font-size: 16px; color: var(--ash); }
.stat-num-sm { font-size: 20px; padding-top: 6px; }
.stat-num.ok { color: var(--soul); font-size: 24px; padding-top: 3px; }
.stat-num.bad { color: #ff8f86; font-size: 24px; padding-top: 3px; }
.stat-label { color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

/* latest deaths box */
.deaths { margin: 0 0 32px; }
.deaths .section-title a { color: var(--bone); }
.deaths-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--grave); }
.deaths-list li {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
	padding: 8px 4px; border-bottom: 1px solid var(--grave); font-size: 16px;
}
.deaths-list .live-tag { background: rgba(255, 122, 47, 0.18); color: #ffb083; }
.deaths-lvl, .deaths-by { color: var(--ash); }
.deaths-list .live-when { margin-left: auto; }

/* quick start + about */
.quickstart, .about { margin: 40px 0 0; }
.qs-steps {
	list-style: none; margin: 0; padding: 0; counter-reset: qs;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}
.qs-steps li {
	counter-increment: qs; position: relative;
	background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 16px 16px 16px 58px; display: flex; flex-direction: column; gap: 4px;
}
.qs-steps li::before {
	content: counter(qs); position: absolute; left: 14px; top: 14px;
	width: 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--display); font-size: 20px; color: #04141f; background: var(--soul);
	box-shadow: 0 0 14px rgba(76, 195, 255, 0.45);
}
.qs-steps strong { font-size: 18px; }
.qs-steps span { color: var(--ash); font-size: 15px; }
.about p { max-width: 70ch; color: var(--ash); }

/* sidebar extras */
.search-form { display: flex; gap: 8px; }
.search-form input[type="text"] {
	flex: 1; min-width: 0;
	background: var(--abyss); color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 8px 10px; font: inherit;
}
.panel { background: rgba(13, 21, 28, 0.88); }
.stat-list code { font-size: 14px; color: var(--soul); }
.footer { background: rgba(6, 10, 14, 0.92); }

/* responsive */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
	.site-nav { display: none; }
	.site-nav.is-open { display: flex; }
	.site-nav { flex-direction: column; align-items: stretch; }
	.nav-list { flex-direction: column; }
	.nav-account { flex-direction: column; }
	.nav-link { width: 100%; }
	.nav-account .nav-link:last-child { text-align: center; }
	.banner { height: clamp(300px, 70vw, 460px); }
}
@media (max-width: 560px) {
	.banner { height: 540px; }
	.banner-img { object-position: 50% 30%; }
	.banner-inner { padding-bottom: 22px; }
	.banner-lead { font-size: 17px; }
	.deaths-list .live-when { margin-left: 0; }
}


/* ===== v3: logo + uncropped banner ===== */
.brand-logo { height: 46px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(76, 195, 255, 0.35)); }
.footer-logo { height: 38px; width: auto; display: block; }
.banner { height: auto; background: #02060a; }
.banner-img {
	position: static; display: block; margin: 0 auto;
	width: 100%; height: auto; max-height: calc(100vh - 110px);
	object-fit: contain; object-position: center;
}
.banner-shade { display: none; }
.banner-inner {
	position: static; transform: none; left: auto; bottom: auto;
	text-align: center; padding-top: 22px; padding-bottom: 26px;
	background: linear-gradient(180deg, #02060a 0, var(--abyss) 100%);
}
.banner-inner { max-width: none; }
.banner-lead { margin: 0 auto 18px; max-width: 40em; text-shadow: none; }
.banner-actions { justify-content: center; }
.banner .btn-ghost { background: transparent; }
@media (max-width: 560px) {
	.banner { height: auto; }
	.banner-img { object-position: center; max-height: none; }
	.brand-logo { height: 34px; }
	.banner-inner { padding-top: 16px; padding-bottom: 20px; }
}

/* ===== v4: cropped full-width banner, overlay actions, wide stats, gallery, highscores ===== */
.banner { position: relative; overflow: hidden; height: clamp(380px, 40vw, 640px); background: #02060a; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 38%; margin: 0; }
.banner-shade { display: block; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(2,6,10,0) 35%, rgba(2,6,10,.55) 65%, rgba(2,6,10,.92) 100%); }
.banner-inner { position: absolute; left: 0; right: 0; bottom: 0; transform: none; width: 100%;
	text-align: center; padding: 0 16px 28px; background: none; }
.banner-lead { max-width: 44em; margin: 0 auto 16px; font-size: 19px; text-shadow: 0 1px 10px rgba(0,0,0,.95); }
.banner-actions { justify-content: center; }
.banner .btn-ghost { background: rgba(8,13,17,.55); }
.stats-wrap { margin-top: 22px; }
.stats-wrap .stats { margin: 0 auto; max-width: 1100px; width: 100%; }
.stats-wrap .stat { padding: 18px 12px; }
.stats-wrap .stat-num { font-size: 34px; }
.gallery { margin: 0 0 32px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.shot { display: block; aspect-ratio: 16/9; border: 1px solid var(--grave); border-radius: var(--radius); overflow: hidden; background: var(--crypt); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.shot:hover img { transform: scale(1.04); }
.shot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	border-style: dashed; color: var(--ash); text-align: center; }
.shot-empty span { font-family: var(--display); font-size: 20px; color: var(--bone); }
.shot-empty small { font-size: 13px; }
@media (max-width: 900px) { .banner { height: clamp(360px, 75vw, 480px); } }
@media (max-width: 560px) {
	.banner { height: 460px; }
	.banner-img { position: absolute; max-height: none; }
	.banner-inner { padding: 0 14px 18px; }
	.banner-lead { font-size: 16px; }
	.stats-wrap .stat-num { font-size: 26px; }
}

/* highscores */
.hs-head { text-align: center; margin: 0 0 14px; }
.hs-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 14px;
	background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); }
.hs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hs-label { color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; min-width: 80px; }
.hs-pill { padding: 5px 12px; border: 1px solid var(--grave); border-radius: 999px; color: var(--bone); font-size: 15px; text-decoration: none; background: var(--abyss); }
.hs-pill:hover { border-color: var(--soul); color: var(--soul); text-decoration: none; }
.hs-pill.is-on { background: var(--soul); border-color: var(--soul); color: #04141f; }
.hs-table { width: 100%; border-collapse: collapse; }
.hs-table th { text-align: left; padding: 10px 12px; background: var(--crypt-2); color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--grave); }
.hs-table td { padding: 6px 12px; border-bottom: 1px solid var(--grave); vertical-align: middle; }
.hs-table tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.hs-table .c { text-align: center; }
.hs-outfit { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.hs-outfit img { position: static; margin: 0; max-width: 64px; max-height: 64px; image-rendering: auto; }
.hs-name small { display: block; color: var(--ash); }
.hs-pager { display: flex; justify-content: space-between; margin-top: 14px; }
@media (max-width: 560px) { .hs-label { width: 100%; } .hs-table td, .hs-table th { padding: 6px 6px; } }
.hs-outfit img { transform: translate(-10px, -10px); }

/* ===== v5: spells, tickets ===== */
.nav-link.nav-accent { color: var(--ember); }
.nav-link.nav-accent:hover, .nav-link.nav-accent.is-current { color: #ffb083; }
.ticket-fab {
	position: fixed; right: 18px; bottom: 18px; z-index: 40;
	padding: 12px 20px; border-radius: 999px; font: 700 16px var(--body);
	background: var(--ember); color: #1a0d04; text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 122, 47, .35);
}
.ticket-fab:hover { background: #ff9757; text-decoration: none; }

.se-lead { color: var(--ash); max-width: 62ch; margin: 0 0 16px; }
.sp-search, .tk-form input[type="text"], .tk-form select, .tk-form textarea {
	width: 100%; background: var(--abyss); color: var(--bone);
	border: 1px solid var(--grave); border-radius: var(--radius); padding: 10px 12px; font: inherit;
}
.sp-search { max-width: 420px; }
.sp-tools { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; padding: 14px; background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); }
button.hs-pill { cursor: pointer; font-family: inherit; }
.sp-wrap { overflow-x: auto; }
.sp-table td { font-size: 15px; }
.sp-table tr[hidden] { display: none; }
.sp-name small { display: block; color: var(--ash); }
.sp-table code { color: var(--soul); font-size: 14px; }
.sp-vocs { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-voc, .sp-tag, .tk-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--grave); color: var(--ash); }
.sp-tag-soul { color: #04141f; background: var(--soul); border-color: var(--soul); margin-left: 6px; }
.sp-tag-prem { color: #ffb083; border-color: rgba(255, 122, 47, .5); }
.sp-empty { text-align: center; color: var(--ash); padding: 24px; }

.tk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.tk-filters { margin: 0 0 16px; }
.tk-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid; }
.tk-open { color: var(--soul); border-color: var(--soul-dim); }
.tk-answered { color: #ffb083; border-color: rgba(255, 122, 47, .6); }
.tk-resolved { color: #5fd08a; border-color: #2f7a4d; }
.tk-closed { color: var(--ash); border-color: var(--grave); }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 6px 0 18px; }
.tk-title { margin: 0; font-size: 26px; }
.tk-meta { margin: 4px 0 0; color: var(--ash); }
.tk-thread { display: flex; flex-direction: column; gap: 12px; }
.tk-msg { background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); padding: 12px 14px; }
.tk-msg.is-staff { border-color: var(--soul-dim); background: rgba(43, 139, 194, .12); }
.tk-msg header { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.tk-msg time { margin-left: auto; color: var(--ash); font-size: 13px; }
.tk-tag { color: #04141f; background: var(--soul); border-color: var(--soul); }
.tk-body { overflow-wrap: anywhere; }
.tk-form { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; max-width: 720px; }
.tk-form label { color: var(--ash); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tk-side { margin-top: 6px; }
.tk-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-inline select { background: var(--abyss); color: var(--bone); border: 1px solid var(--grave); border-radius: var(--radius); padding: 8px; }
.tk-inline label { margin: 0; }
.tk-hint { color: var(--ash); font-size: 14px; margin: 0; }
.tk-errors { background: rgba(255, 143, 134, .1); border: 1px solid #a8483f; border-radius: var(--radius); padding: 8px 14px; margin: 0 0 16px; color: #ffb4ad; }
.tk-errors ul { margin: 0; padding-left: 18px; }
.tk-notice { background: rgba(95, 208, 138, .1); border: 1px solid #2f7a4d; color: #9be8b8; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 14px; }
.tk-back { margin: 0 0 8px; }
@media (max-width: 560px) { .ticket-fab { right: 12px; bottom: 12px; } .tk-head { flex-direction: column; } }
button.hs-pill:not(.is-on) { background: var(--abyss); color: var(--bone); border: 1px solid var(--grave); box-shadow: none; }
button.hs-pill.is-on { background: var(--soul); color: #04141f; border-color: var(--soul); }
button.hs-pill:hover:not(.is-on) { border-color: var(--soul); color: var(--soul); }
.hs-table td.sp-vocs { display: table-cell; }
.sp-vocs .sp-voc { margin: 2px 4px 2px 0; }
.sp-table td { vertical-align: middle; }

/* account management side menu (core template sets its own colours inline) */
#account-manage { padding: 0; }
#account-manage div#one { width: 190px; }
#account-manage div#two { margin-left: 190px; padding-left: 24px; }
#account-manage .vertical-menu { display: flex; flex-direction: column; gap: 6px; }
#account-manage .vertical-menu a {
	background-color: var(--crypt) !important; color: var(--bone) !important;
	border: 1px solid var(--grave); border-radius: var(--radius);
	padding: 10px 14px; font-weight: 500; text-decoration: none;
}
#account-manage .vertical-menu a:hover {
	background-color: var(--crypt-2) !important; color: var(--soul) !important; border-color: var(--soul-dim);
}
#account-manage h1 { font-size: 30px; margin-top: 0; }
@media (max-width: 760px) {
	#account-manage div#one { float: none; width: 100%; margin-bottom: 16px; }
	#account-manage div#two { margin-left: 0; padding-left: 0; }
	#account-manage .vertical-menu { flex-direction: row; flex-wrap: wrap; }
}

/* create character */
.cc-intro { color: var(--ash); max-width: 70ch; }
.cc-form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.cc-card { background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); padding: 18px; }
.cc-h { margin: 0 0 14px; font-size: 22px; }
.cc-row { display: flex; flex-wrap: wrap; gap: 20px; }
.cc-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; }
.cc-field label, .cc-label { color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.cc-name { display: flex; align-items: center; gap: 10px; }
.cc-name input { flex: 1; background: var(--abyss); color: var(--bone); border: 1px solid var(--grave); border-radius: var(--radius); padding: 11px 12px; font: inherit; font-size: 17px; }
.cc-name input:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76, 195, 255, .18); }
.cc-error { min-height: 18px; font-size: 13px; color: #ff8f86; }
.cc-seg { display: flex; gap: 8px; }
.cc-seg input, .cc-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-seg label { flex: 1; text-align: center; padding: 11px 14px; background: var(--abyss); border: 1px solid var(--grave); border-radius: var(--radius); cursor: pointer; color: var(--bone); font-size: 16px; text-transform: none; letter-spacing: 0; }
.cc-seg input:checked + label, .cc-opt input:checked + label { border-color: var(--soul); background: rgba(76, 195, 255, .14); box-shadow: 0 0 0 1px var(--soul) inset; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cc-opt { position: relative; }
.cc-opt label { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px; background: var(--abyss); border: 1px solid var(--grave); border-radius: var(--radius); cursor: pointer; }
.cc-opt label:hover, .cc-seg label:hover { border-color: var(--soul-dim); }
.cc-opt strong { font-family: var(--display); font-size: 20px; font-weight: 600; }
.cc-opt span { color: var(--ash); font-size: 14px; line-height: 1.35; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-form input:focus-visible + label { outline: 2px solid var(--soul); outline-offset: 2px; }
.hs-outfit { width: 80px; height: 80px; }
.hs-outfit img { transform-origin: 48px 48px; transform: translate(-16px, -16px) scale(1.7); }
.hs-outfit { width: 72px; height: 72px; }
.hs-outfit img { transform: translate(-16px, -16px) scale(1.3); }

/* ---- Soul Coins page ---- */
.sc-who { display: flex; align-items: center; gap: 8px; color: var(--ash); }
.sc-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 20px 0 28px; }
.sc-pack { position: relative; text-align: center; padding: 22px 16px 20px; background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); }
.sc-pack.is-featured { border-color: var(--soul); box-shadow: 0 0 18px rgba(76, 195, 255, 0.18); }
.sc-pack-ico { width: 84px; height: 84px; filter: drop-shadow(0 0 10px rgba(76, 195, 255, 0.55)); }
.sc-pack h3 { margin: 8px 0 0; font-size: 28px; }
.sc-pack h3 small { display: block; font-size: 14px; color: var(--ash); font-weight: 400; }
.sc-price { margin: 6px 0 0; font-size: 20px; color: var(--soul); }
.sc-per { margin: 0 0 14px; font-size: 13px; color: var(--ash); }
.sc-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--soul); color: #04141f; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 10px; white-space: nowrap; }

/* ---- Store: Soul Coins banner ---- */
.sc-banner { display: flex; align-items: center; gap: 20px; padding: 18px 22px; margin: 0 0 22px;
	background: linear-gradient(100deg, rgba(76, 195, 255, 0.14), rgba(13, 21, 28, 0.9) 60%);
	border: 1px solid var(--soul-dim); border-radius: var(--radius); }
.sc-banner-ico { width: 72px; height: 72px; filter: drop-shadow(0 0 10px rgba(76, 195, 255, 0.55)); flex: none; }
.sc-banner-text { flex: 1; min-width: 0; }
.sc-banner-text h2 { margin: 0 0 4px; }
.sc-banner-text p { margin: 0; color: var(--ash); }
@media (max-width: 640px) { .sc-banner { flex-direction: column; text-align: center; } }
.home-news { margin-top: 28px; }

/* ---- transparent UI + character page ---- */
.panel, .se-panel, .footer, .hs-table, .sp-table { background: rgba(13, 21, 28, 0.38) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.content table tr[bgcolor], .content table tr[style*="background"] { background: rgba(13, 21, 28, 0.35) !important; }
.content table tr:nth-child(even)[bgcolor] { background: rgba(17, 28, 38, 0.35) !important; }
.content .myaac-table > tbody > tr:nth-child(odd) { background: rgba(13, 21, 28, 0.35) !important; }
.content .myaac-table > tbody > tr:nth-child(even) { background: rgba(17, 28, 38, 0.35) !important; }
.content table tr.white, .content table td.white, .content .white,
.content table tr[bgcolor="#1c2c3b"], .content table tr[bgcolor="#322C47"],
.content .myaac-table > thead > tr > td, .content .myaac-table > thead > tr > th { background: rgba(28, 44, 59, 0.55) !important; }
.hs-table th { background: rgba(28, 44, 59, 0.55); }

.char-name-wrap { display: flex; align-items: center; gap: 16px; }
.char-frame { flex: 0 0 auto; width: 104px; height: 104px; padding: 0; background: none !important; box-shadow: none !important; border: 0 !important; }
.char-frame .hs-outfit { width: 104px; height: 104px; margin: 0; background: none !important; overflow: visible; display: flex; align-items: center; justify-content: center; }
.char-frame .hs-outfit img { max-width: 64px; max-height: 64px; transform-origin: 48px 48px; transform: translate(-16px, -16px) scale(1.8); filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.char-name-text { font-size: 20px; }
.content td .char-name-wrap { min-height: 100px; }

/* equipment: premium frames */
.content td img[width="32"] { width: 48px !important; height: 48px !important; image-rendering: pixelated; display: block; margin: 0 auto; background: transparent; }
.content table[style*="#292929"] td, .content table[style*="background: #292929"] td {
	width: 62px; height: 62px; padding: 5px !important; text-align: center; vertical-align: middle;
	border: 2px solid transparent !important; border-radius: 8px;
	background: linear-gradient(#0c1822, #0c1822) padding-box, linear-gradient(145deg, #7fdcff, #1d5f86 45%, #0b2233 55%, #4cc3ff) border-box !important;
	box-shadow: 0 0 8px rgba(76,195,255,.22), inset 0 0 10px rgba(76,195,255,.12);
}
.content table[style*="#292929"] tr[height] td { width: auto; height: 14px; border: 0 !important; background: none !important; box-shadow: none; }
.content table[style*="#292929"], .content table[style*="background: #292929"] { background: transparent !important; border-spacing: 6px; border-collapse: separate; }
.content table[style*="#808080"], .content table[style*="background: #808080"] { background: rgba(13, 21, 28, .45) !important; border: 1px solid rgba(76,195,255,.35) !important; border-radius: 10px; padding: 6px; }

/* equipment: real size, no stretching */
.content table[width="100"], .content table[width="100"] > tbody > tr > td { width: auto !important; }
.content td:has(> table[width="100"]) { width: auto !important; }
.content table[style*="#292929"] td, .content table[style*="background: #292929"] td { width: 58px !important; height: 58px !important; min-width: 58px; padding: 4px !important; }
.content table[style*="#292929"] td img[width="32"] { width: 44px !important; height: 44px !important; max-width: none; }
.content table[style*="#292929"] { border-spacing: 5px; }

/* ---- header: one tidy row ---- */
@media (min-width: 901px) {
	.topbar-inner.wrap { max-width: 1400px; gap: 20px; }
	.brand { flex: 0 0 auto; }
	.site-nav { flex: 1 1 auto; min-width: 0; gap: 16px; }
	.nav-list { flex-wrap: nowrap; gap: 10px; }
	.nav-link { padding: 10px 12px; font-size: 15px; }
	.nav-account { flex: 0 0 auto; align-items: center; gap: 6px; margin-left: auto; padding-left: 16px; border-left: 1px solid var(--grave); }
	.nav-account .nav-link:last-child { padding: 7px 14px; }
	.status-pill { flex: 0 0 auto; white-space: nowrap; padding: 6px 12px; border: 1px solid var(--grave); border-radius: 999px; background: rgba(13,21,28,.5); }
	.nav-link.nav-accent { color: var(--ember); }
}

/* v33: keep the online pill clear of the account buttons */
@media (min-width: 981px) {
	.nav-list { gap: 4px; }
	.nav-link { padding: 10px 9px; }
	.nav-account { padding-left: 12px; }
	.status-pill { margin-left: 22px; }
}

/* v34: website store buying */
.se-buybar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 10px 14px; margin: 0 0 14px; background: var(--crypt); border: 1px solid var(--grave); border-radius: var(--radius); }
.se-buybar small { color: var(--ash); }
.se-card { position: relative; }
.se-buy { margin-top: auto; padding: 6px 18px; font: 600 14px var(--body); color: #04121b; background: var(--soul);
	border: 0; border-radius: 3px; cursor: pointer; }
.se-buy:hover { background: #7bd3ff; }
.se-buy-na { margin-top: auto; padding: 4px 8px; font-size: 12px; color: var(--ash); }
.se-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(2,6,10,.75); padding: 16px; }
.se-modal[hidden] { display: none; }
.se-modal-box { width: min(440px, 100%); padding: 22px; background: var(--crypt-2); border: 1px solid var(--soul-dim); border-radius: var(--radius); color: var(--bone); }
.se-modal-box h3 { margin: 0 0 10px; }
.se-modal-box label { display: block; margin: 12px 0; color: var(--ash); }
.se-modal-box select { display: block; width: 100%; margin-top: 6px; padding: 8px; color: var(--bone); background: var(--abyss); border: 1px solid var(--grave); border-radius: 3px; }
.se-m-note { font-size: 13px; color: var(--ash); }
.se-m-err { min-height: 1.2em; color: #ff8a80; font-size: 14px; }
.se-m-actions { display: flex; justify-content: flex-end; gap: 10px; }
.se-orders { margin: 22px 0; }
.se-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.se-orders-table th, .se-orders-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--grave); }
.se-os { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--grave); }
.se-os-pending { color: #ffd27a; } .se-os-delivered { color: #7ee2a0; } .se-os-failed, .se-os-cancelled { color: #ff8a80; }
.se-cancel { padding: 3px 10px; color: var(--bone); background: transparent; border: 1px solid var(--grave); border-radius: 3px; cursor: pointer; }

/* v35: store category list */
.se-store-nav a.on, .se-store-chips a.on { background: var(--crypt); color: var(--soul); border-color: var(--soul-dim); }
.se-store-nav a { cursor: pointer; }

/* character page sections */
.char-table { margin-bottom: 18px; }
.char-label { color: var(--ash); font-weight: 600; white-space: nowrap; }
.char-muted { color: var(--ash); }
.char-date { color: var(--ash); white-space: nowrap; }
.char-table .char-frame { margin: 0; }

/* skills + equipment side by side, aligned to the page */
.content table.char-split { border-collapse: separate; border-spacing: 16px 0; width: 100%; margin: 0 0 18px; table-layout: fixed; }
.content table.char-split > tbody > tr > td { padding: 0; border: 0; vertical-align: top; background: transparent; }
.content table.char-split table { margin: 0; }
.content table.char-split table[style*="808080"] { background: transparent !important; border: 0 !important; width: auto; margin: 6px auto; }
.content table.char-split table[style*="808080"] td { padding: 0; border: 0; }

/* top guilds + guild wars */
.pg-note { margin: 0 0 14px; color: var(--ash); max-width: none; }
.tg-logo { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; display: block; margin: 0 auto; }
.tg-table td { padding: 8px 12px; }
.tg-table .hs-name a { font-size: 18px; }
.gw-info { margin: 0 0 18px; padding: 12px 16px; background: rgba(13,21,28,.38); border: 1px solid var(--grave); border-radius: var(--radius); color: var(--ash); }
.gw-info b { color: var(--bone); }
.gw-list { margin: 0 0 22px; }
.gw-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--grave); }
.gw-row:nth-child(odd) { background: rgba(255,255,255,.02); }
.gw-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.gw-side img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.gw-mid { text-align: center; color: var(--ash); font-size: 15px; }
.gw-score { font-size: 30px; color: var(--bone); line-height: 1.3; }
@media (max-width: 640px) { .gw-row { grid-template-columns: 1fr; } }
.content { overflow-x: hidden; }

/* ===== v36: tidier site layout ===== */
/* inner pages use the full width, no sidebar */
.layout.layout-wide { grid-template-columns: minmax(0, 1fr); }
.layout.layout-wide .main { max-width: 100%; }
.page-title { margin-bottom: 16px; }
.crumbs { margin-bottom: 2px; }

/* header search */
.nav-search { flex: 0 1 190px; }
.nav-search input { width: 100%; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--grave); background: rgba(13,21,28,.6); color: var(--bone); font: inherit; font-size: 14px; }
.nav-search input:focus { border-color: var(--soul); outline: none; }
@media (max-width: 1180px) { .nav-search { display: none; } }

/* dropdown buttons look like the other nav links */
.nav-item > .nav-cat.nav-link { background: transparent; border: 0; cursor: pointer; font-family: var(--body); }
.nav-item > .nav-cat.nav-link:hover { background: var(--crypt); }
.nav-drop { z-index: 60; min-width: 200px; background: rgba(13,21,28,.97); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
@media (min-width: 901px) { .nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 6px; } }

/* compact footer */
.footer-compact { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 22px; padding-bottom: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--ash); font-size: 15px; }
.footer-links a:hover { color: var(--soul); }

/* home: tighter sections */
.quickstart { margin-top: 28px; }
.sidebar { gap: 16px; }

/* commands page */
.cmd-table { width: 100%; margin: 0 0 20px; }
.cmd-table .cmd-name { width: 280px; white-space: nowrap; }
.cmd-table code { color: var(--soul); background: rgba(76,195,255,.08); padding: 2px 8px; border-radius: 3px; }
@media (max-width: 640px) { .cmd-table .cmd-name { width: auto; white-space: normal; } }

/* VIP card + benefits */
.vip-packs { grid-template-columns: repeat(auto-fit, minmax(230px, 280px)); }
.vip-more { display: block; margin-top: 12px; font-size: 14px; }
.vip-flash { padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--grave); }
.vip-flash.is-ok { border-color: #5fd08a; color: #5fd08a; }
.vip-flash.is-err { border-color: #ff8f86; color: #ff8f86; }
.vip-short { columns: 2; margin: 0 0 16px; padding-left: 1.2em; }
.vip-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 22px; padding: 18px 22px; background: rgba(13,21,28,.5); border: 1px solid var(--soul-dim); border-radius: var(--radius); }
.vip-hero h2 { margin: 0 0 4px; }
.vip-hero p { margin: 0; color: var(--ash); }
.vip-compare th, .vip-compare td { text-align: left; }
.vip-compare td:nth-child(n+2), .vip-compare th:nth-child(n+2) { text-align: center; width: 150px; }
.vip-badge { color: #ffd36b; font-weight: 700; }
.se-store-vip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 12px 18px; background: rgba(13,21,28,.5); border: 1px solid var(--soul-dim); border-radius: var(--radius); }
@media (max-width: 560px) { .vip-short { columns: 1; } }


/* v40: VIP benefit cards: even rows, longest text first */
.vip-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.vip-benefits .se-tier { height: auto; }
.vip-benefits .se-tier h3 { font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.vip-benefits .se-tier p { margin: 0; line-height: 1.55; }
.vip-gifts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 0 0 28px; align-items: stretch; }
.vip-gifts .se-tier h3 { font-size: 20px; margin: 0 0 8px; }
.vip-gifts .se-tier ul { margin: 0 0 12px; padding-left: 1.2em; }
.vip-gifts .se-tier p { margin: 0; line-height: 1.55; color: var(--ash); }
@media (max-width: 1000px) { .vip-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .vip-benefits, .vip-gifts { grid-template-columns: 1fr; } }

/* v39: header back on one line, compact enough that nothing overlaps */
@media (min-width: 901px) {
	.topbar-inner.wrap { max-width: 1640px; flex-wrap: nowrap; gap: 14px; }
	.brand-logo { width: 180px; height: auto; }
	.site-nav { min-width: 0; gap: 10px; }
	.nav-list { gap: 0; }
	.nav-link { padding: 10px 8px; font-size: 14px; white-space: nowrap; }
	.nav-account { padding-left: 10px; gap: 4px; }
	.nav-account .nav-link:last-child { padding: 6px 12px; }
	.nav-search { flex: 0 1 150px; min-width: 110px; }
	.status-pill { margin-left: 4px; padding: 6px 10px; font-size: 14px; }
}
@media (min-width: 901px) and (max-width: 1500px) { .nav-search { display: none; } }

@media (min-width: 901px) {
	.nav-list { flex: 1 1 auto; justify-content: space-evenly; }
	.nav-link { padding: 10px 12px; }
}

.vip-plans .vip-planprice { margin: 0 0 8px; color: var(--soul); font-size: 18px; }
.vip-gifts .se-tier li { margin-bottom: 8px; line-height: 1.5; }
.vip-gifts .se-tier p { color: var(--ash); }
.vip-gifts:has(> section:only-child) { grid-template-columns: 1fr; }

/* v42: character page - general information on the left, skills and equipment next to it */
.char-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 18px; }
.char-top.char-top-single { grid-template-columns: minmax(0, 1fr); }
.char-top.char-top-single .char-side { display: none; }
.char-top .char-main .char-table, .char-top .char-main table { margin-bottom: 0; }
.char-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.char-side .char-box { margin: 0; }
.char-side .char-box > table { width: 100%; margin: 0; }
.content .char-side table[style*="808080"] { background: transparent !important; border: 0 !important; width: auto; margin: 6px auto; }
.content .char-side table[style*="808080"] td { padding: 0; border: 0; }
@media (max-width: 900px) { .char-top { grid-template-columns: minmax(0, 1fr); } }

/* v43: account management layout */
#account-manage { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; width: 100%; padding: 0; }
#account-manage div#one { float: none; width: auto; position: sticky; top: 76px; }
#account-manage div#two { margin: 0; padding: 0; min-width: 0; }
#account-manage .vertical-menu a.is-current { border-color: var(--soul-dim); color: var(--soul) !important; }
#account-manage h1 { margin: 0 0 8px; }
#account-manage .acc-welcome { margin: 0 0 18px; color: var(--ash); line-height: 1.6; }
#account-manage .acc-welcome b { color: var(--bone); }
#account-manage .acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin: 0 0 16px; }
#account-manage .acc-col { min-width: 0; display: flex; flex-direction: column; }
#account-manage .acc-col .acc-box { flex: 1; margin: 0; }
#account-manage .acc-box { background: rgba(13, 21, 28, 0.45); border: 1px solid var(--grave); border-radius: var(--radius); padding: 16px 18px 18px; margin: 0 0 16px; min-width: 0; }
#account-manage .acc-box h2 { margin: 0 0 12px; font-size: 22px; }
#account-manage .acc-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
#account-manage .acc-table td, #account-manage .acc-table th { padding: 9px 10px; border-bottom: 1px solid var(--grave); text-align: left; vertical-align: middle; background: transparent !important; }
#account-manage .acc-table tr:last-child td { border-bottom: 0; }
#account-manage .acc-table:not(.acc-list) td:first-child { width: 150px; color: var(--ash); font-weight: 600; white-space: nowrap; }
#account-manage .acc-table tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }
#account-manage .acc-head th { background: rgba(28, 44, 59, 0.55) !important; color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
#account-manage .acc-table form { margin: 6px 0 0; }
#account-manage .acc-form { margin: 14px 0 0; }
#account-manage .acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
#account-manage .acc-actions form { margin: 0; }
#account-manage .acc-scroll { overflow-x: auto; }
#account-manage .acc-notice { background: rgba(76,195,255,.07); border: 1px solid var(--soul-dim); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; line-height: 1.5; }
#account-manage .acc-notice form { margin: 10px 0 0; }
@media (max-width: 1100px) { #account-manage .acc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
	#account-manage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	#account-manage div#one { position: static; }
	#account-manage .acc-table:not(.acc-list) td:first-child { width: auto; white-space: normal; }
}

/* v44: VIP pages */
.vp-lead p { max-width: 760px; font-size: 18px; line-height: 1.65; color: var(--bone); margin: 0 0 20px; }
.vp-lead-p { max-width: 760px; font-size: 18px; line-height: 1.65; margin: 0 0 22px; }
.vp-status { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 24px; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: var(--radius); overflow: hidden; }
.vp-stat { flex: 1 1 200px; padding: 14px 20px; border-right: 1px solid var(--grave); display: flex; flex-direction: column; gap: 4px; }
.vp-stat:last-child { border-right: 0; }
.vp-stat span { color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .07em; }
.vp-stat strong { font-size: 20px; color: var(--bone); display: flex; align-items: center; gap: 8px; }
.vp-stat .sc-ico { width: 22px; height: 22px; }
.vp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 30px; align-items: stretch; }
.vp-plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 26px 22px; background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.6)); border: 1px solid var(--grave); border-radius: var(--radius); }
.vp-plan.is-featured { border-color: var(--soul); box-shadow: 0 0 0 1px rgba(76,195,255,.25), 0 10px 40px rgba(76,195,255,.12); }
.vp-ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--soul); color: #04141f; font-size: 13px; font-weight: 700; padding: 3px 14px; border-radius: 99px; white-space: nowrap; }
.vp-plan-ico { width: 64px; height: 64px; margin: 0 0 8px; filter: drop-shadow(0 4px 12px rgba(76,195,255,.4)); }
.vp-plan h3 { margin: 0; font-size: 26px; }
.vp-days { margin: 2px 0 14px; color: var(--ash); letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.vp-price { margin: 0; font-size: 40px; font-weight: 700; color: var(--soul); line-height: 1.1; }
.vp-price small { font-size: 16px; font-weight: 500; color: var(--ash); }
.vp-per { margin: 4px 0 18px; color: var(--ash); font-size: 14px; }
.vp-incl { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--grave); width: 100%; text-align: left; flex: 1; }
.vp-incl li { position: relative; padding: 5px 0 5px 26px; line-height: 1.45; }
.vp-incl li::before { content: "\2713"; position: absolute; left: 4px; top: 5px; color: var(--soul); font-weight: 700; }
.vp-incl em { color: var(--ash); font-size: 14px; }
.vp-plan form { width: 100%; margin: 0; }
.vp-buy { display: block; width: 100%; text-align: center; padding: 12px 18px; font-size: 17px; box-sizing: border-box; }
.vp-plan .vip-more { margin-top: 12px; }
.vp-panel { background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); padding: 20px 24px 22px; margin: 0 0 22px; }
.vp-panel h2 { margin: 0 0 14px; }
.vp-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.vp-checks li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid var(--grave); font-weight: 600; }
.vp-checks li::before { content: "\2713"; position: absolute; left: 4px; top: 8px; color: var(--soul); font-weight: 700; }
.vp-panel-link { margin: 0; }
.vp-notes .se-note { margin: 0 0 14px; line-height: 1.6; }
@media (max-width: 760px) { .vp-plans, .vp-checks { grid-template-columns: minmax(0, 1fr); } .vp-stat { border-right: 0; border-bottom: 1px solid var(--grave); } .vp-stat:last-child { border-bottom: 0; } }

/* benefits page */
.vip-hero { background: linear-gradient(90deg, rgba(76,195,255,.12), rgba(13,21,28,.5)); padding: 24px 28px; }
.vip-hero h2 { font-size: 28px; }
.vip-benefits .se-tier, .vip-gifts .se-tier, .vip-plans .se-tier { background: rgba(13,21,28,.5); transition: border-color .15s; }
.vip-benefits .se-tier:hover, .vip-gifts .se-tier:hover, .vip-plans .se-tier:hover { border-color: var(--soul-dim); }
.vip-benefits .se-tier h3 { color: var(--soul); }
.vp-tablewrap { overflow-x: auto; margin: 0 0 26px; border: 1px solid var(--grave); border-radius: var(--radius); background: rgba(13,21,28,.45); }
.vp-tablewrap .vip-compare { margin: 0; border-collapse: collapse; width: 100%; }
.vp-tablewrap .vip-compare th { background: rgba(28,44,59,.6); color: var(--ash); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px; }
.vp-tablewrap .vip-compare td { padding: 10px 14px; }
.vp-tablewrap .vip-compare tr:last-child td { border-bottom: 0; }
.vp-tablewrap .vip-compare td:nth-child(4), .vp-tablewrap .vip-compare th:nth-child(4) { background: rgba(76,195,255,.06); }
.vp-tablewrap .vip-compare td:nth-child(n+2), .vp-tablewrap .vip-compare th:nth-child(n+2) { width: 170px; }
.se-steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.se-steps li { counter-increment: st; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: var(--radius); padding: 44px 16px 16px; position: relative; line-height: 1.5; }
.se-steps li::before { content: counter(st); position: absolute; top: 12px; left: 16px; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--soul); color: #04141f; font-weight: 700; }
.vp-good { list-style: none; padding: 20px 24px; margin: 0 0 22px; background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); }
.vp-good li { position: relative; padding: 6px 0 6px 22px; line-height: 1.55; }
.vp-good li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--soul); }
@media (max-width: 1000px) { .se-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .se-steps { grid-template-columns: minmax(0, 1fr); } .vp-tablewrap .vip-compare td:nth-child(n+2), .vp-tablewrap .vip-compare th:nth-child(n+2) { width: auto; } }

/* v45: VIP benefits page */
.vb-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 36px; margin: 0 0 34px; background: radial-gradient(120% 140% at 0% 0%, rgba(76,195,255,.18), rgba(13,21,28,.55) 60%); border: 1px solid var(--soul-dim); border-radius: var(--radius); }
.vb-hero > div { flex: 1 1 380px; }
.vb-eyebrow { display: inline-block; color: var(--soul); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 8px; }
.vb-hero h2 { margin: 0 0 10px; font-size: 34px; line-height: 1.15; }
.vb-hero p { margin: 0; color: var(--ash); font-size: 17px; line-height: 1.6; max-width: 560px; }
.vb-hero p strong { color: var(--bone); }
.vb-h { margin: 38px 0 14px; font-size: 26px; }
.vb-sub { margin: -6px 0 16px; color: var(--ash); }
.vb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vb-card { position: relative; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: var(--radius); padding: 18px 18px 16px; transition: border-color .15s, transform .15s; overflow: hidden; }
.vb-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--soul), transparent); opacity: .7; }
.vb-card:hover { border-color: var(--soul-dim); transform: translateY(-2px); }
.vb-card h3 { margin: 0 0 6px; font-size: 19px; color: var(--bone); }
.vb-card p { margin: 0; color: var(--ash); line-height: 1.5; font-size: 15px; }
.vb-pack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 18px; }
.vb-pack { background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: var(--radius); overflow: hidden; }
.vb-pack.is-featured { border-color: var(--soul); box-shadow: 0 8px 30px rgba(76,195,255,.1); }
.vb-pack header { padding: 16px 20px; background: rgba(28,44,59,.55); border-bottom: 1px solid var(--grave); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.vb-pack header h3 { margin: 0; font-size: 20px; }
.vb-pack header span { color: var(--soul); font-weight: 600; }
.vb-pack ul { list-style: none; margin: 0; padding: 10px 20px 14px; }
.vb-pack li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--grave); }
.vb-pack li:last-child { border-bottom: 0; }
.vb-pack li::before { content: "\2713"; position: absolute; left: 2px; top: 9px; color: var(--soul); font-weight: 700; }
.vb-pack li em { display: block; color: var(--ash); font-size: 13px; font-style: normal; margin-top: 2px; }
.vb-acc { display: grid; gap: 8px; margin: 0 0 8px; }
.vb-acc details { background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); }
.vb-acc details[open] { border-color: var(--soul-dim); }
.vb-acc summary { cursor: pointer; padding: 13px 44px 13px 18px; font-weight: 600; position: relative; list-style: none; }
.vb-acc summary::-webkit-details-marker { display: none; }
.vb-acc summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--soul); font-size: 22px; font-weight: 400; }
.vb-acc details[open] summary::after { content: "\2212"; }
.vb-acc details p { margin: 0; padding: 0 18px 16px; color: var(--ash); line-height: 1.6; }
.vb-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 40px 0 10px; padding: 26px 32px; background: linear-gradient(90deg, rgba(76,195,255,.14), rgba(13,21,28,.5)); border: 1px solid var(--soul-dim); border-radius: var(--radius); }
.vb-cta h2 { margin: 0 0 4px; font-size: 24px; }
.vb-cta p { margin: 0; color: var(--ash); }
.se-steps li strong { display: block; margin-bottom: 4px; }
@media (max-width: 1000px) { .vb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .vb-grid, .vb-pack-grid { grid-template-columns: minmax(0, 1fr); } .vb-hero { padding: 24px 20px; } .vb-hero h2 { font-size: 27px; } }

/* v46: loyalty page */
.lo-acc { margin: 14px 0 0; }
.lo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.lo-col .vb-h { margin-top: 30px; }
.lo-col .vp-tablewrap { margin: 0; }
.vp-tablewrap .lo-table th, .vp-tablewrap .lo-table td { width: auto !important; text-align: left !important; background: transparent; }
.vp-tablewrap .lo-table th { background: rgba(28,44,59,.6) !important; }
.vp-tablewrap .lo-table td.lo-hl { color: var(--soul); font-weight: 600; background: rgba(76,195,255,.05) !important; }
.vp-tablewrap .lo-table tbody tr:hover td { background: rgba(255,255,255,.03); }
@media (max-width: 900px) { .lo-grid { grid-template-columns: minmax(0, 1fr); } }

/* v47: guild manager */
.gm-hero h2 { font-size: 32px; }
.gm-options { margin: 0 0 24px; }
a.gm-opt { display: block; color: inherit; text-decoration: none; }
a.gm-opt h3 { color: var(--soul); }
a.gm-opt.gm-danger::before { background: linear-gradient(90deg, #ff6b61, transparent); }
a.gm-opt.gm-danger h3 { color: #ff8f86; }
a.gm-opt.gm-danger:hover { border-color: #ff6b61; }
.gm-panel { background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); padding: 18px 22px 22px; margin: 0 0 20px; }
.gm-panel h2 { margin: 0 0 14px; font-size: 22px; }
.gm-add { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.gm-panel input[type=text] { background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 6px; padding: 10px 12px; font: inherit; min-width: 0; }
.gm-panel input[type=text]:focus { outline: none; border-color: var(--soul); }
.gm-add input[type=text] { flex: 1 1 260px; max-width: 420px; }
.gm-ranks td { vertical-align: middle; }
.gm-ranks input[type=text] { width: 100%; max-width: 360px; box-sizing: border-box; }
.gm-ranks .gm-id { color: var(--ash); width: 50px; }
.gm-ranks .gm-lv { text-align: center !important; width: 110px; }
.gm-ranks .gm-lv input { accent-color: var(--soul); width: 18px; height: 18px; cursor: pointer; }
.gm-ranks .gm-del { text-align: right !important; width: 100px; }
.gm-delbtn { padding: 6px 14px; font-size: 14px; }
.gm-delbtn:hover { border-color: #ff6b61; color: #ff8f86; }
.gm-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: none; white-space: nowrap; }
.gm-badge.is-leader { background: rgba(255,107,97,.18); color: #ff9a92; }
.gm-badge.is-vice { background: rgba(255,211,107,.16); color: #ffd36b; }
.gm-badge.is-member { background: rgba(95,208,138,.16); color: #7fe0a3; }
.gm-save { margin: 18px 0 0; text-align: right; }
.gm-info { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 24px; }
.gm-info .vb-card ul { margin: 10px 0 0; padding-left: 1.2em; color: var(--ash); line-height: 1.6; font-size: 15px; }
@media (max-width: 700px) { .gm-info { grid-template-columns: minmax(0, 1fr); } .gm-save { text-align: center; } }

/* v48: guild logo frame */
.content img[src*="guilds/"] { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 2px solid var(--soul); background: var(--crypt); box-shadow: 0 0 0 3px rgba(5,10,15,.9), 0 0 0 4px var(--soul-dim), 0 0 18px rgba(76,195,255,.35); vertical-align: middle; image-rendering: auto; }
.content td:has(> img[src*="guilds/"]) { padding: 12px 14px; }

/* v49: guild logos keep a true square whatever the cell width */
.content img[src*="guilds/"] { width: 72px; height: 72px; min-width: 72px; max-width: none; flex: none; }
.content img[src*="guilds/"][width="96"] { width: 96px; height: 96px; min-width: 96px; }
.content img[src*="guilds/"][width="120"] { width: 120px; height: 120px; min-width: 120px; }
.content img[src*="guilds/"][width="64"] { width: 64px; height: 64px; min-width: 64px; }
.content img[src*="guilds/"][width="56"] { width: 56px; height: 56px; min-width: 56px; }

/* v50: houses */
.hf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.hf-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.hf-group legend { width: 100%; padding: 0; margin: 0 0 8px; color: var(--ash); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; float: left; }
.hf-group legend + * { clear: left; }
.hf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.hf-opt label { display: inline-block; padding: 7px 16px; border: 1px solid var(--grave); border-radius: 99px; background: var(--crypt); color: var(--bone); cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.hf-opt label:hover { border-color: var(--soul-dim); }
.hf-opt input:checked + label { background: rgba(76,195,255,.16); border-color: var(--soul); color: var(--soul); font-weight: 600; }
.hf-opt input:focus-visible + label { outline: 2px solid var(--soul); outline-offset: 2px; }
.hf-submit { margin-top: 20px; text-align: left; }
.hf-table .hf-name { font-weight: 600; }
.hf-table th.c, .hf-table td.c { text-align: center; }
.hf-table .hf-act { text-align: right; width: 90px; }
.hf-view { padding: 5px 16px; font-size: 14px; }
.hf-empty { margin: 0; color: var(--ash); }
.hv-hero { align-items: center; }
.hv-hero p { font-size: 18px; }
.hv-img { max-height: 160px; border-radius: 14px; border: 2px solid var(--soul); box-shadow: 0 0 0 3px rgba(5,10,15,.9), 0 0 0 4px var(--soul-dim), 0 0 18px rgba(76,195,255,.3); background: var(--crypt); }
.hv-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 24px; }
.hv-stats .vb-card h3 { font-size: 22px; color: var(--soul); }
@media (max-width: 760px) { .hf-grid, .hv-stats { grid-template-columns: minmax(0, 1fr); } }

/* v51: last kills */
.lk-table td { padding: 12px 14px; line-height: 1.55; }
.lk-id { color: var(--ash); font-weight: 600; }
.lk-time { color: var(--ash); white-space: nowrap; font-size: 14px; }
.lk-text a { font-weight: 600; }
.lk-text strong, .lk-text b { color: var(--soul); }
@media (max-width: 640px) { .lk-time { white-space: normal; } }

/* v52: who is online */
.on-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 8px #5fd08a; margin-right: 4px; vertical-align: middle; }
.on-dot.is-off { background: #ff8f86; box-shadow: 0 0 8px #ff8f86; }
.on-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 18px; }
.on-stats .vb-card h3 { font-size: 22px; color: var(--soul); margin: 0 0 2px; }
.on-vocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 20px; }
.on-voc { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: var(--radius); }
.on-voc span { color: var(--ash); }
.on-voc strong { font-size: 22px; color: var(--bone); }
.on-table th a { color: inherit; }
.on-table th a:hover { color: var(--soul); text-decoration: none; }
.on-table td { vertical-align: middle; }
.on-outfit { display: inline-block; width: 56px; height: 56px; image-rendering: pixelated; vertical-align: middle; }
.on-skulls { margin: 14px 0 0; color: var(--ash); font-size: 14px; }
.on-skulls img { vertical-align: middle; }
@media (max-width: 900px) { .on-stats, .on-vocs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v53: spells */
.sp-tools { padding: 18px 22px; gap: 14px; }
.sp-tools .sp-search { max-width: none; width: 100%; padding: 12px 16px; font-size: 16px; border-radius: 10px; }
.sp-count { color: var(--ash); font-size: 14px; margin-top: -6px; }
.sp-wrap.vp-tablewrap { margin: 0 0 24px; }
.sp-table { margin: 0; width: 100%; }
.sp-table thead th { position: sticky; top: 0; background: rgba(28,44,59,.92) !important; z-index: 2; }
.sp-table thead th[data-sort]:hover { color: var(--soul); }
.sp-table tbody tr:hover td { background: rgba(76,195,255,.05); }
.sp-table td, .sp-table th { padding: 11px 14px; }
.sp-table td.c, .sp-table th.c { text-align: center; }
.sp-name strong { font-size: 16px; }
.sp-table code { background: rgba(76,195,255,.08); padding: 2px 8px; border-radius: 4px; }
.sp-voc { background: rgba(255,255,255,.04); }
.sp-voc-sorcerer { color: #ff9a92; border-color: rgba(255,154,146,.4); }
.sp-voc-druid { color: #7fe0a3; border-color: rgba(127,224,163,.4); }
.sp-voc-paladin { color: #ffd36b; border-color: rgba(255,211,107,.4); }
.sp-voc-knight { color: #8fd0ff; border-color: rgba(143,208,255,.4); }
.sp-voc-monk { color: #d6a8ff; border-color: rgba(214,168,255,.4); }

/* v54: server info */
.si-rates { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 8px; }
.si-rates .vb-card { text-align: center; }
.si-rates .vb-card h3 { font-size: 28px; color: var(--soul); margin: 0 0 2px; }
.si-rates .vb-card h3 a { color: inherit; }
.si-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 20px; align-items: stretch; }
.si-cols .gm-panel { margin: 0; }
.si-table { width: 100%; margin: 0; border-collapse: collapse; }
.si-table td { padding: 11px 6px; border-bottom: 1px solid var(--grave); vertical-align: top; line-height: 1.5; background: transparent !important; }
.si-table tr:last-child td { border-bottom: 0; }
.si-table td:first-child { color: var(--ash); width: 42%; font-weight: 600; }
@media (max-width: 1000px) { .si-rates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .si-cols { grid-template-columns: minmax(0, 1fr); } .si-rates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v55: experience stages, commands, guide, downloads, store */
.es-table td, .es-table th { text-align: left; }
.es-rate { color: var(--soul); font-weight: 700; }
.vp-tablewrap .es-table td:nth-child(n+2), .vp-tablewrap .es-table th:nth-child(n+2) { width: 160px; text-align: left; }
.cmd-search { flex: 0 1 320px; }
.cmd-search input { width: 100%; box-sizing: border-box; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 10px; padding: 12px 16px; font: inherit; }
.cmd-search input:focus { outline: none; border-color: var(--soul); }
.cmd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 20px; align-items: start; }
.cmd-group { margin: 0; }
.cmd-group[hidden], .cmd-table2 tr[hidden] { display: none; }
.cmd-table2 .cmd-name { width: 40%; white-space: nowrap; }
.cmd-table2 code { color: var(--soul); background: rgba(76,195,255,.08); padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.cmd-table2 td { padding: 10px 6px; }
.dl-body { padding: 18px 22px 22px; }
.dl-body p { margin: 0 0 14px; color: var(--ash); }
.dl-btn { display: block; text-align: center; box-sizing: border-box; width: 100%; }
.dl-sub { margin: 20px 0 10px; color: var(--soul); font-size: 18px; }
.dl-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.se-steps code { color: var(--soul); background: rgba(76,195,255,.08); padding: 1px 6px; border-radius: 4px; }
.sc-banner.vb-hero { margin: 0 0 20px; gap: 24px; justify-content: flex-start; }
.sc-banner.vb-hero .sc-banner-text { flex: 1 1 320px; }
.sc-banner.vb-hero .sc-banner-text h2 { font-size: 32px; }
.sc-banner.vb-hero .btn { margin-left: auto; }
.se-store-vip { border-radius: var(--radius); padding: 14px 20px; margin: 0 0 22px; }
.se-buybar { border-radius: var(--radius); padding: 14px 20px !important; margin: 0 0 14px !important; }
.se-store-controls.gm-panel { padding: 14px 16px; margin: 0 0 14px; align-items: center; }
.se-store-intro { margin: 0 0 14px; }
.se-cards { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.se-card { padding: 16px 12px 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.6)); transition: border-color .15s, transform .15s, box-shadow .15s; }
.se-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(76,195,255,.12); }
.se-thumb { width: 84px; height: 84px; border-radius: 12px; background: rgba(5,10,15,.6); }
.se-thumb img { max-width: 68px; max-height: 68px; }
.se-group > h2 { font-size: 28px; border-bottom-color: var(--soul-dim); }
.se-cat h3 { font-size: 19px; }
.se-store-nav { background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); padding: 14px 10px 14px 12px; }
.se-store-nav a { padding: 6px 10px; border-radius: 8px; }
.se-orders { background: rgba(13,21,28,.45); border: 1px solid var(--grave); border-radius: var(--radius); padding: 16px 20px; }
@media (max-width: 800px) { .cmd-grid { grid-template-columns: minmax(0, 1fr); } .dl-three { grid-template-columns: minmax(0, 1fr); } }

/* v56 soul-coins */
.sc-packs { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0 0 30px; }
.sc-pack { background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.55)); padding: 28px 18px 22px; transition: border-color .15s, transform .15s; }
.sc-pack:hover { border-color: var(--soul-dim); transform: translateY(-3px); }
.sc-pack form { margin: 0; }
.sc-pack .btn { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; }
.sc-flash { padding: 12px 16px; background: rgba(76,195,255,.08); border: 1px solid var(--soul-dim); border-radius: var(--radius); }
.sc-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .sc-steps3 { grid-template-columns: minmax(0, 1fr); } }

/* v57 store category rail */
.se-store-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 30px; }
.se-store-nav {
	padding: 12px 10px 14px; border: 1px solid var(--soul-dim); border-radius: 10px;
	background: linear-gradient(180deg, rgba(76,195,255,.10), rgba(13,21,28,.62) 140px), rgba(13,21,28,.5);
	box-shadow: 0 10px 34px rgba(0,0,0,.35); scrollbar-width: thin; scrollbar-color: var(--soul-dim) transparent;
}
.se-store-nav .se-nav-group {
	display: flex; align-items: center; gap: 10px; margin: 18px 6px 8px; font-family: var(--display);
	font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soul);
}
.se-store-nav .se-nav-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--soul-dim), transparent); }
.se-store-nav a {
	position: relative; align-items: center; padding: 9px 10px 9px 16px; margin: 2px 0; border-radius: 8px;
	font-size: 15px; font-weight: 500; color: #b4c6d8; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s, padding-left .15s;
}
.se-store-nav a::before {
	content: ""; position: absolute; left: 5px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
	background: var(--soul-dim); transition: all .15s;
}
.se-store-nav a span {
	min-width: 26px; padding: 1px 8px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 600;
	color: var(--ash); background: rgba(143,165,186,.12);
}
.se-store-nav a:hover { background: rgba(76,195,255,.08); color: var(--bone); padding-left: 20px; }
.se-store-nav a:hover::before { background: var(--soul); box-shadow: 0 0 8px var(--soul); }
.se-store-nav a.on {
	background: linear-gradient(90deg, rgba(76,195,255,.22), rgba(76,195,255,.06)); color: #fff; border-color: rgba(76,195,255,.4);
	box-shadow: inset 3px 0 0 var(--soul), 0 0 18px rgba(76,195,255,.12); padding-left: 20px;
}
.se-store-nav a.on::before { left: 9px; width: 6px; height: 6px; margin-top: -3px; background: var(--soul); box-shadow: 0 0 10px var(--soul); }
.se-store-nav a.on span { background: var(--soul); color: #04141f; }
.se-store-nav > a:first-child { font-weight: 700; letter-spacing: .02em; padding: 11px 10px 11px 20px; margin-bottom: 4px; }
.se-store-chips a { border-radius: 999px; }

/* v58 members-only gate */
.se-gate { margin-top: 10px; }
.se-gate-actions { flex: 0 0 auto !important; display: flex; flex-wrap: wrap; gap: 12px; }

/* v59 news ticker rows + premium home */
.nt { margin: 0 0 34px; background: rgba(13,21,28,.5); border: 1px solid var(--soul-dim); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.3); }
.nt-head { margin: 0; padding: 14px 20px; text-align: center; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--bone);
	background: linear-gradient(180deg, rgba(76,195,255,.28), rgba(43,139,194,.10)); border-bottom: 1px solid var(--soul-dim); text-shadow: 0 0 14px rgba(76,195,255,.5); }
.nt-list { list-style: none; margin: 0; padding: 0; }
.nt-row { border-bottom: 1px solid rgba(28,44,59,.9); }
.nt-row:last-child { border-bottom: 0; }
.nt-row:nth-child(even) { background: rgba(76,195,255,.04); }
.nt-item summary { display: grid; grid-template-columns: 18px 112px minmax(0, 1fr) 24px; gap: 12px; align-items: center; padding: 11px 16px; cursor: pointer; list-style: none; transition: background .15s; }
.nt-item summary::-webkit-details-marker { display: none; }
.nt-item summary:hover { background: rgba(76,195,255,.09); }
.nt-icon { width: 14px; height: 14px; }
.nt-date { color: var(--ash); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); font-size: 15px; }
.nt-text b, .nt-text strong { color: #fff; }
.nt-toggle { position: relative; width: 20px; height: 20px; border: 1px solid var(--soul-dim); border-radius: 5px; background: rgba(76,195,255,.08); transition: all .15s; }
.nt-toggle::before, .nt-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--soul); transition: transform .2s; }
.nt-toggle::before { width: 10px; height: 2px; margin: -1px 0 0 -5px; }
.nt-toggle::after { width: 2px; height: 10px; margin: -5px 0 0 -1px; }
.nt-item summary:hover .nt-toggle { background: rgba(76,195,255,.2); box-shadow: 0 0 10px rgba(76,195,255,.4); }
.nt-item[open] { background: rgba(76,195,255,.06); }
.nt-item[open] .nt-toggle::after { transform: scaleY(0); }
.nt-item[open] .nt-text { white-space: normal; }
.nt-full { padding: 4px 20px 18px 158px; color: var(--ash); line-height: 1.6; }
.nt-full img { max-width: 100%; height: auto; }
.nt-archive { display: block; padding: 10px 20px 12px; font-size: 14px; border-top: 1px solid rgba(28,44,59,.9); }
@media (max-width: 640px) { .nt-item summary { grid-template-columns: 14px minmax(0, 1fr) 22px; } .nt-date { grid-column: 2; } .nt-text { grid-column: 2; grid-row: 2; } .nt-toggle { grid-column: 3; grid-row: 1 / span 2; } .nt-full { padding: 4px 16px 16px; } }

/* home sections */
.section-title { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--soul); }
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--soul-dim), transparent); }
.home-news .news-post, .news-post { position: relative; background: linear-gradient(180deg, rgba(17,28,38,.72), rgba(13,21,28,.52)); border: 1px solid var(--grave); border-radius: 10px; padding: 22px 26px 20px; margin: 0 0 18px; overflow: hidden; transition: border-color .15s; }
.news-post::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--soul), transparent); opacity: .75; }
.news-post:hover { border-color: var(--soul-dim); }
.news-title { font-size: 26px; }
.news-meta { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.news-icon { filter: drop-shadow(0 0 8px rgba(76,195,255,.4)); }
.featured { border-radius: 10px; border-color: var(--soul-dim); background: linear-gradient(120deg, rgba(76,195,255,.12), rgba(13,21,28,.55) 60%); }
.featured-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.quickstart { margin-top: 34px; }
.qs-steps { list-style: none; counter-reset: qs; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.qs-steps li { counter-increment: qs; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 46px 16px 16px; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: 10px; line-height: 1.45; transition: border-color .15s, transform .15s; }
.qs-steps li:hover { border-color: var(--soul-dim); transform: translateY(-2px); }
.qs-steps li::before { content: counter(qs); position: absolute; top: 12px; left: 16px; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%; background: var(--soul); color: #04141f; font-weight: 700; box-shadow: 0 0 14px rgba(76,195,255,.5); }
.qs-steps strong { color: var(--bone); font-size: 17px; }
.qs-steps span { color: var(--ash); font-size: 14.5px; }
@media (max-width: 900px) { .qs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sidebar .panel { border-radius: 10px; border-color: var(--grave); padding: 18px 20px; background: linear-gradient(180deg, rgba(17,28,38,.72), rgba(13,21,28,.52)) !important; box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.sidebar .panel-title { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--soul); margin: 0 0 14px; }
.sidebar .panel-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--soul-dim), transparent); }
.top-list { list-style: none; counter-reset: tp; padding: 0; margin: 0 0 8px; }
.top-list li { counter-increment: tp; display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(28,44,59,.8); }
.top-list li:last-child { border-bottom: 0; }
.top-list li::before { content: counter(tp); flex: none; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 6px; background: rgba(76,195,255,.12); color: var(--soul); font-size: 12px; font-weight: 700; }
.top-list li:nth-child(-n+3)::before { background: var(--soul); color: #04141f; }
.top-list li span { margin-left: auto; color: var(--ash); font-size: 13px; }
.panel-more { font-weight: 600; font-size: 14px; }
.panel-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

/* v60 members-only gate with login form */
.se-gate-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 36px 40px; margin: 6px 0 30px;
	background: radial-gradient(120% 140% at 0% 0%, rgba(76,195,255,.18), rgba(13,21,28,.55) 60%); border: 1px solid var(--soul-dim); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.35); }
.se-gate-info h2 { margin: 0 0 12px; font-size: 32px; line-height: 1.15; }
.se-gate-info p { margin: 0 0 12px; color: var(--ash); font-size: 17px; line-height: 1.6; }
.se-gate-new { font-size: 15px !important; }
.se-gate-form { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: rgba(8,13,17,.55); border: 1px solid var(--grave); border-radius: 10px; }
.se-gate-form label { font-size: 14px; color: var(--ash); text-transform: uppercase; letter-spacing: .08em; }
.se-gate-form input[type="text"], .se-gate-form input[type="password"] { width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 8px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 8px; font: inherit; }
.se-gate-form input:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
.se-gate-form .check { display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 15px; margin: 2px 0 10px; }
.se-gate-form .btn { width: 100%; justify-content: center; text-align: center; }
.se-gate-links { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: 14px; }
@media (max-width: 820px) { .se-gate-card { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; gap: 24px; } }
.se-gate-form label.se-bad { color: #ff8a8a; }
.se-login-card { max-width: 980px; margin-left: auto; margin-right: auto; }

.nt-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 18px; color: var(--ash); }

.nt-links { display: flex; gap: 22px; border-top: 1px solid rgba(28,44,59,.9); }
.nt-links .nt-archive { border-top: 0; }

/* v64 character search */
.ch-search { margin: 0 0 24px; }
.ch-search-form { flex: 1 1 420px; display: flex; gap: 10px; }
.ch-search-form input { flex: 1; min-width: 0; box-sizing: border-box; padding: 14px 18px; font: inherit; font-size: 17px; color: var(--bone); background: rgba(8,13,17,.6); border: 1px solid var(--grave); border-radius: 10px; }
.ch-search-form input:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }

/* v65 news editor */
.ne-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; padding: 14px 18px; background: rgba(76,195,255,.07); border: 1px dashed var(--soul-dim); border-radius: 10px; }
.ne-top span { color: var(--ash); font-size: 14px; }
.ne-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid rgba(28,44,59,.9); }
.ne-bar form { margin: 0; }
.ne-bar .btn { padding: 8px 18px; }
.ne-form { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; }
.ne-form label { font-size: 13px; color: var(--ash); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.ne-form input[type="text"], .ne-form select, .ne-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; color: var(--bone); background: var(--crypt); border: 1px solid var(--grave); border-radius: 8px; }
.ne-form textarea { font-family: Consolas, "Courier New", monospace; font-size: 15px; line-height: 1.5; resize: vertical; }
.ne-form input:focus, .ne-form select:focus, .ne-form textarea:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
.ne-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ne-row > div { display: flex; flex-direction: column; gap: 6px; }
.ne-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ne-tools button { padding: 7px 14px; cursor: pointer; color: var(--bone); background: rgba(76,195,255,.08); border: 1px solid var(--grave); border-radius: 6px; font: inherit; font-size: 14px; }
.ne-tools button:hover { border-color: var(--soul); color: var(--soul); }
.ne-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 640px) { .ne-row { grid-template-columns: 1fr; } }

/* v66 downloads: how to connect */
.se-steps.dl-four { max-width: none; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin: 0 0 30px; }
.se-steps.dl-four li { margin: 0; padding: 50px 18px 18px; font-size: 15px; color: var(--ash); overflow-wrap: anywhere; }
.se-steps.dl-four li strong { font-size: 17px; color: var(--bone); margin-bottom: 6px; }
.se-steps.dl-four li::before { top: 14px; left: 18px; box-shadow: 0 0 14px rgba(76,195,255,.45); }
.dl-sub { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; color: var(--ash); font-size: 16px; font-weight: 500; }
.dl-chip { padding: 4px 14px; border-radius: 999px; background: rgba(76,195,255,.14); border: 1px solid var(--soul-dim); color: var(--soul); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1000px) { .se-steps.dl-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .se-steps.dl-four { grid-template-columns: minmax(0, 1fr); } }

.ne-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.ne-icon { display: flex !important; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 12px 6px; margin: 0 !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--ash) !important; text-align: center; background: rgba(13,21,28,.5); border: 1px solid var(--grave); border-radius: 10px; transition: all .15s; }
.ne-icon input { position: absolute; opacity: 0; pointer-events: none; }
.ne-icon img { width: 32px; height: 32px; object-fit: contain; }
.ne-icon:hover { border-color: var(--soul-dim); }
.ne-icon.is-on { border-color: var(--soul); background: rgba(76,195,255,.14); color: var(--bone) !important; box-shadow: 0 0 16px rgba(76,195,255,.25); }

.ne-list tr.is-hidden td { opacity: .6; }
.ne-acts a { margin-right: 14px; font-weight: 600; }

/* v69 premium outfit pedestal (character page, highscores, online list) */
.hs-outfit, .char-frame .hs-outfit {
	position: relative; border-radius: 50% !important; overflow: visible;
	background: radial-gradient(circle at 50% 42%, rgba(76,195,255,.30), rgba(76,195,255,.09) 55%, rgba(8,13,17,0) 74%), rgba(8,13,17,.55) !important;
	border: 1px solid rgba(76,195,255,.55);
	box-shadow: 0 0 0 4px rgba(76,195,255,.07), 0 0 24px rgba(76,195,255,.28), inset 0 0 20px rgba(76,195,255,.16);
	transition: box-shadow .2s, border-color .2s;
}
.hs-outfit::before {
	content: ""; position: absolute; left: 20%; right: 20%; bottom: 13%; height: 9px; border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(76,195,255,.55), rgba(76,195,255,0) 70%);
}
.hs-outfit img { position: relative; z-index: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,.65)); }
tr:hover .hs-outfit, .char-frame:hover .hs-outfit { border-color: var(--soul); box-shadow: 0 0 0 4px rgba(76,195,255,.12), 0 0 34px rgba(76,195,255,.5), inset 0 0 24px rgba(76,195,255,.25); }
.hs-outfit { width: 76px; height: 76px; }
.char-frame .hs-outfit { width: 112px; height: 112px; }
.char-frame { width: 112px !important; height: 112px !important; }
.char-frame .hs-outfit img { filter: drop-shadow(0 5px 7px rgba(0,0,0,.7)); }
.on-outfit { border-radius: 50%; background-color: rgba(8,13,17,.55); border: 1px solid rgba(76,195,255,.5);
	box-shadow: 0 0 0 3px rgba(76,195,255,.07), 0 0 16px rgba(76,195,255,.28), inset 0 0 14px rgba(76,195,255,.16); transition: box-shadow .2s, border-color .2s; }
tr:hover .on-outfit { border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.12), 0 0 24px rgba(76,195,255,.5), inset 0 0 16px rgba(76,195,255,.25); }

/* v70 square outfit frames */
.hs-outfit, .char-frame .hs-outfit { border-radius: 14px !important; }
.on-outfit { border-radius: 12px; }
.hs-outfit::before { left: 22%; right: 22%; bottom: 10%; }
.hs-table td.c .hs-outfit { margin: 0 auto; }

/* v71 highscores: name on the left, outfit right beside it */
.hs-namebox { display: flex; align-items: center; gap: 22px; }
.hs-nametext { flex: 0 1 auto; min-width: 220px; }
.hs-namebox .hs-outfit { flex: 0 0 auto; margin: 0; }
@media (max-width: 560px) { .hs-nametext { min-width: 0; } }

/* v72 highscores: separate Outfit column right after Name */
.hs-table td .hs-outfit { margin: 0; }

.hs-table .hs-voc { color: var(--ash); font-weight: 500; }

/* v74 highscores: aligned, premium columns */
.hs-rank { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; }
.hs-rank th, .hs-rank td { vertical-align: middle !important; padding: 12px 14px; }
.hs-rank th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash); }
.hs-rank tbody tr { height: 92px; }
.hs-rank tbody td { border-top: 1px solid rgba(28,44,59,.9); }
.hs-rank tbody tr:first-child td { border-top: 0; }
.hs-rank tbody tr:hover td { background: rgba(76,195,255,.07) !important; }
.hs-rank .hs-c-rank { width: 70px; }
.hs-rank .hs-c-name { width: auto; }
.hs-rank .hs-c-outfit { width: 110px; }
.hs-rank .hs-c-voc { width: 170px; }
.hs-rank .hs-c-num { width: 100px; }
.hs-rank .hs-c-pts { width: 150px; }
.hs-rank td.c, .hs-rank th.c { text-align: center; }
.hs-rank td.c:first-child { font-size: 18px; font-weight: 700; color: var(--bone); }
.hs-rank tbody tr:nth-child(-n+3) td.c:first-child { color: var(--soul); text-shadow: 0 0 12px rgba(76,195,255,.5); }
.hs-rank .hs-name { display: table-cell; font-size: 17px; font-weight: 600; white-space: nowrap; }
.hs-rank .hs-name > * { vertical-align: middle; }
.hs-rank .hs-voc { font-size: 15px; }
.hs-rank td.c { font-variant-numeric: tabular-nums; font-size: 16px; }
.hs-rank .hs-outfit { margin: 0 auto; }

/* v75 highscores: balanced column widths (no big gap after the name) */
.hs-rank .hs-c-rank { width: 8%; }
.hs-rank .hs-c-name { width: 30%; }
.hs-rank .hs-c-outfit { width: 14%; }
.hs-rank .hs-c-voc { width: 20%; }
.hs-rank .hs-c-num { width: 12%; }
.hs-rank .hs-c-pts { width: 16%; }
.hs-rank .hs-c-voc, .hs-rank td.hs-voc { text-align: center; }
.hs-rank td.hs-name { text-align: left; }
@media (max-width: 800px) { .hs-rank { table-layout: auto; } .hs-rank th, .hs-rank td { padding: 10px 8px; } }

/* v76 transfer coins */
.tc-card { max-width: 560px; margin: 18px 0; padding: 24px 26px; background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.55)); border: 1px solid var(--grave); border-radius: var(--radius); }
.tc-card h3 { margin: 0 0 14px; }
.tc-form label { display: block; margin: 12px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.tc-form input[type="text"], .tc-form input[type="number"] { width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 8px; font: inherit; }
.tc-form input:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
.tc-form .btn { margin: 18px 10px 0 0; }
.tc-sum { font-size: 18px; margin: 0 0 6px; }
.tc-hint { margin: 14px 0 0; font-size: 14px; color: var(--ash); }
.tc-ok { border-color: #3fae6a; background: rgba(63,174,106,.10); }
.tc-err { border-color: #c4524f; background: rgba(196,82,79,.10); }
.tc-table th, .tc-table td { text-align: left; padding: 10px 14px; }
.tc-table .c { text-align: right; }
.acc-coins { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.acc-coins h2 { margin: 0 0 4px; }
.acc-coins p { margin: 0; color: var(--ash); }

/* v77 bigger logo, header and footer aligned with the page width */
@media (min-width: 901px) {
	.topbar-inner.wrap { max-width: var(--wrap); gap: 14px; }
	.brand-logo { width: 236px; height: auto; }
	.nav-link { padding: 10px 9px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 900px) { .brand-logo { height: 40px; width: auto; } }
.footer-logo { height: 62px; width: auto; margin: 0; }
.footer-brand { text-align: left; }

/* v78 header: logo centered between the tabs, account / search / online in a slim strip above */
.hd-util { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 8px; padding-bottom: 0; }
.hd-util .nav-search { flex: 0 1 190px; display: block; margin-right: auto; }
.hd-util .hd-account { display: flex; align-items: center; gap: 4px; }
.hd-util .hd-account .nav-link { padding: 4px 10px; font-size: 14px; }
.hd-util .status-pill { margin: 0; padding: 4px 12px; font-size: 14px; white-space: nowrap; }
.nav-account-m { display: none; }
@media (min-width: 901px) {
	.topbar-inner.wrap { max-width: var(--wrap); display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 8px; }
	.topbar-inner .site-nav { display: contents; }
	.nav-toggle { display: none; }
	.topbar-inner .nav-list { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; justify-content: space-around; gap: 0; }
	.topbar-inner .nav-l { order: 1; }
	.topbar-inner .brand { order: 2; flex: 0 0 auto; margin: 0 10px; }
	.topbar-inner .nav-r { order: 3; }
	.topbar-inner .brand-logo { width: 250px; height: auto; }
	.topbar-inner .nav-link { padding: 10px 10px; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 900px) {
	.hd-util .nav-search, .hd-util .hd-account { display: none; }
	.nav-account-m { display: flex; }
	.hd-util { padding-top: 6px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .hd-util .nav-search { display: none; } .topbar-inner .nav-link { padding: 10px 6px; font-size: 14px; } .topbar-inner .brand-logo { width: 200px; } }

/* v79 guild page */
.gd-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gd-logo { width: 112px; height: 112px; object-fit: cover; border-radius: 18px; border: 2px solid var(--soul-dim); box-shadow: 0 0 22px rgba(76,195,255,.25); background: var(--crypt); flex: 0 0 auto; }
.gd-head { flex: 1 1 260px; min-width: 0; }
.gd-head h2 { margin: 2px 0 6px; font-size: 34px; }
.gd-sub { margin: 0; color: var(--ash); }
.gd-card { margin: 14px 0; padding: 20px 24px; background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.55)); border: 1px solid var(--grave); border-radius: var(--radius); }
.gd-card h3 { margin: 0 0 10px; }
.gd-desc { line-height: 1.6; word-break: break-word; }
.gd-table th, .gd-table td { text-align: left; padding: 10px 14px; vertical-align: middle; }
.gd-table .c { text-align: center; }
.gd-name form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.gd-nick { display: inline-flex; gap: 6px; margin-left: auto; }
.gd-nick input { width: 120px; padding: 5px 10px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 8px; font: inherit; font-size: 13px; }
.gd-nick .btn { padding: 4px 12px; font-size: 13px; }
.gd-nicktxt { color: var(--ash); }
.gd-rank { display: inline-block; padding: 2px 10px; border: 1px solid var(--soul-dim); border-radius: 999px; font-size: 13px; color: var(--soul); }
.gd-on { color: #5fd08a; font-weight: 600; }
.gd-off { color: var(--ash); }
.gd-kick { margin-left: auto; font-size: 12px; color: #ff8a8a; text-transform: uppercase; letter-spacing: .05em; }
.gd-empty { color: var(--ash); text-align: center; margin: 6px 0; }
.gd-invited { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.gd-invited li { display: flex; align-items: center; gap: 12px; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.gd-actions form { margin: 0; }

/* v80 language switch (English / Portuguese-Brazil via Google Translate) */
.lang-switch { display: inline-flex; border: 1px solid var(--grave); border-radius: 999px; overflow: hidden; background: rgba(13,21,28,.5); }
.lang-btn { background: transparent; border: 0; color: var(--ash); font: inherit; font-size: 13px; padding: 4px 12px; cursor: pointer; }
.lang-btn:hover { color: var(--bone); }
.lang-btn.is-on { background: var(--soul); color: #04141f; font-weight: 700; }
.hd-util .lang-switch { order: 0; }
body { top: 0 !important; }
.goog-te-banner-frame, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip, iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb-OEVmcd { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* v81 flags in the language switch */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; }
.lang-flag { width: 20px; height: 13px; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }

/* v82 create account */
.ca-card { align-items: start; }
.ca-perks { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 10px; }
.ca-perks li { padding: 10px 14px; border: 1px solid var(--grave); border-left: 3px solid var(--soul); border-radius: 8px; background: rgba(13,21,28,.45); }
.ca-h { margin: 10px 0 4px; font-size: 18px; color: var(--soul); }
.ca-h:first-of-type { margin-top: 0; }
.ca-form label { display: block; margin: 12px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.ca-form label.check { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--bone); }
.ca-form input[type="text"], .ca-form input[type="password"], .ca-form select { width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 8px; font: inherit; }
.ca-form select { appearance: auto; }
.ca-form input:focus, .ca-form select:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
.ca-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.ca-country { display: flex; align-items: center; gap: 10px; }
.ca-country select { flex: 1; }
.ca-country img { width: 24px; height: auto; }
.ca-country img[src=""] { display: none; }
.ca-ind { display: none !important; }
.ca-form .FormFieldError { display: block; min-height: 0; margin-top: 4px; font-size: 13px; color: #ff8a8a; }
.ca-hint { margin: 6px 0 0; font-size: 13px; color: var(--ash); }
#SuggestAccountNumber { float: right; font-size: 12px; text-transform: none; letter-spacing: 0; }
.ca-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-opts span { position: relative; }
.ca-opts input { position: absolute; opacity: 0; pointer-events: none; }
.ca-opts label { margin: 0 !important; padding: 8px 16px; border: 1px solid var(--grave); border-radius: 999px; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--bone) !important; background: var(--crypt); }
.ca-opts input:checked + label { background: var(--soul); border-color: var(--soul); color: #04141f !important; font-weight: 700; }
.ca-opts input:focus-visible + label { box-shadow: 0 0 0 3px rgba(76,195,255,.25); }
.ca-rules { margin-top: 18px !important; }
.ca-form .btn { margin-top: 16px; width: 100%; justify-content: center; }
@media (max-width: 600px) { .ca-two { grid-template-columns: minmax(0,1fr); } }

/* v83 quests page */
.qs-search { margin: 18px 0; }
.qs-search input { width: 100%; max-width: 460px; box-sizing: border-box; padding: 12px 16px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 999px; font: inherit; }
.qs-search input:focus { outline: none; border-color: var(--soul); box-shadow: 0 0 0 3px rgba(76,195,255,.15); }
.qs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.55)); border: 1px solid var(--grave); border-radius: 10px; transition: border-color .15s, transform .15s; }
.qs-item:hover { border-color: var(--soul-dim); transform: translateY(-2px); }
.qs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--soul); box-shadow: 0 0 8px var(--soul); flex: 0 0 auto; }
.qs-none { color: var(--ash); text-align: center; margin: 24px 0; }

/* Char Bazaar */
.bz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.bz-tabs a { padding: 9px 16px; border: 1px solid var(--grave); border-radius: 8px; background: rgba(17,28,38,.6); color: var(--bone); text-decoration: none; font-size: 14px; }
.bz-tabs a:hover, .bz-tabs a.on { border-color: var(--soul); color: var(--soul); }
.bz-sort { color: var(--ash); font-size: 14px; }
.bz-sort a { margin-left: 10px; color: var(--bone); }
.bz-sort a.on { color: var(--soul); font-weight: 700; }
.bz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 14px 0; }
.bz-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center; text-decoration: none; color: var(--bone); background: linear-gradient(180deg, rgba(17,28,38,.75), rgba(13,21,28,.55)); border: 1px solid var(--grave); border-radius: var(--radius); transition: border-color .15s, transform .15s; }
.bz-card:hover { border-color: var(--soul-dim); transform: translateY(-2px); }
.bz-card span { color: var(--ash); font-size: 13px; }
.bz-card .bz-price { color: var(--bone); font-size: 17px; font-weight: 700; margin-top: 6px; }
.bz-outfit { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.bz-outfit.big { width: 96px; height: 96px; }
.bz-detail { max-width: 720px; }
.bz-head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.bz-head h3 { margin: 0; font-size: 26px; }
.bz-detail h4 { margin: 22px 0 8px; }
.bz-rules { max-width: 760px; }
.bz-rules li { margin: 10px 0; line-height: 1.5; }
.tc-form select { width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--crypt); color: var(--bone); border: 1px solid var(--grave); border-radius: 8px; font: inherit; }
.tc-form .check { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 14px; margin-top: 16px; }

/* Cookie consent */
.se-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: 14px 16px; background: rgba(8,13,17,.97); border-top: 1px solid var(--soul-dim, #2a6f8f); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.se-consent-in { max-width: 980px; margin: 0 auto; }
.se-consent h3 { margin: 0 0 6px; font-size: 18px; }
.se-consent p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ash); }
.se-consent-opts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 12px; font-size: 14px; }
.se-consent-opts[hidden] { display: none; }
.se-consent-opts label { display: flex; align-items: center; gap: 8px; }
.se-consent-opts em { color: var(--ash); font-style: normal; font-size: 12px; }
.se-consent-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.se-consent-btns .btn { margin: 0; }
.footer-base a#se-cookie-settings { color: var(--ash); text-decoration: underline; font-size: 13px; }