@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
	--bg-0: #05070d;
	--bg-1: #090b12;
	--bg-2: #101625;
	--bg-3: #151f31;
	--panel-0: rgba(8, 12, 20, 0.76);
	--panel-1: rgba(15, 22, 36, 0.88);
	--panel-2: rgba(21, 30, 47, 0.92);
	--line-soft: rgba(255, 255, 255, 0.06);
	--line-strong: rgba(201, 162, 92, 0.32);
	--line-hot: rgba(255, 102, 68, 0.35);
	--text-main: #edf2ff;
	--text-soft: #c0c8dd;
	--text-dim: #8d96ac;
	--text-gold: #e9bf72;
	--text-fire: #ff8c63;
	--text-danger: #ff6876;
	--success: #84e2b9;
	--shadow-deep: 0 28px 80px rgba(0, 0, 0, 0.55);
	--shadow-fire: 0 0 48px rgba(255, 96, 72, 0.18);
	--shadow-gold: 0 0 40px rgba(233, 191, 114, 0.16);
	--radius-sm: 14px;
	--radius-md: 22px;
	--radius-lg: 32px;
	--font-head: "Cinzel", Georgia, serif;
	--font-body: "Manrope", "Segoe UI Variable", "Segoe UI", sans-serif;
}

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

html {
	scroll-behavior: smooth;
}

body.layout-body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(circle at 14% 12%, rgba(255, 110, 74, 0.14) 0, transparent 28%),
		radial-gradient(circle at 82% 8%, rgba(77, 118, 255, 0.16) 0, transparent 32%),
		linear-gradient(180deg, rgba(3, 5, 10, 0.76) 0, rgba(5, 7, 13, 0.94) 25%, rgba(5, 7, 13, 1) 100%),
		url('images/ui/page-bg.jpg') center top / cover fixed no-repeat;
	color: var(--text-main);
	font-family: var(--font-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

body.layout-body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		linear-gradient(transparent 0, rgba(255, 255, 255, 0.015) 48%, transparent 100%),
		radial-gradient(circle at center, rgba(255, 255, 255, 0.035) 0, transparent 62%);
	background-size: 100% 100%, 1200px 1200px;
	pointer-events: none;
	mix-blend-mode: screen;
	opacity: 0.45;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
}

a {
	color: var(--text-gold);
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

a:hover {
	color: #fff3d8;
}

small {
	color: var(--text-dim);
}

hr {
	border: 0;
	border-top: 1px solid var(--line-soft);
	margin: 1.5rem 0;
}

.ambient-glow {
	position: fixed;
	width: 460px;
	height: 460px;
	border-radius: 999px;
	filter: blur(100px);
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.ambient-glow--left {
	top: 120px;
	left: -120px;
	background: radial-gradient(circle, rgba(255, 114, 83, 0.9) 0, rgba(255, 114, 83, 0) 70%);
}

.ambient-glow--right {
	top: 260px;
	right: -160px;
	background: radial-gradient(circle, rgba(86, 118, 255, 0.9) 0, rgba(86, 118, 255, 0) 72%);
}

.site-hero,
.site-shell,
.site-footer {
	position: relative;
	z-index: 2;
}

.site-hero {
	margin: 0 auto;
	padding: 1.5rem 1.5rem 0;
	max-width: 1720px;
}

.site-hero__overlay {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(120deg, rgba(3, 6, 12, 0.66) 0, rgba(8, 12, 20, 0.74) 34%, rgba(16, 11, 11, 0.6) 100%);
	box-shadow: var(--shadow-deep), var(--shadow-fire), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-hero__overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 22%, rgba(255, 129, 70, 0.18) 0, transparent 24%),
		radial-gradient(circle at 78% 18%, rgba(255, 189, 92, 0.12) 0, transparent 20%),
		linear-gradient(180deg, rgba(6, 10, 18, 0.02) 0, rgba(6, 10, 18, 0.38) 52%, rgba(5, 8, 16, 0.9) 100%);
	pointer-events: none;
}

.site-hero__content {
	position: relative;
	z-index: 4;
	padding: 2.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: end;
	min-height: 520px;
}

.site-hero__scene {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.site-hero__sky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0.52;
	filter: saturate(1.1) contrast(1.06) brightness(0.82);
	transform: scale(1.06);
	animation: hero-sky-drift 20s ease-in-out infinite alternate;
}

.site-hero__mist {
	position: absolute;
	inset: auto -10% -4% -10%;
	height: 54%;
	background:
		radial-gradient(circle at 22% 48%, rgba(255, 128, 86, 0.18) 0, transparent 22%),
		radial-gradient(circle at 68% 26%, rgba(93, 126, 255, 0.14) 0, transparent 30%),
		linear-gradient(180deg, rgba(5, 8, 16, 0) 0, rgba(5, 8, 16, 0.5) 34%, rgba(4, 6, 12, 0.96) 100%);
	filter: blur(14px);
	animation: hero-mist-roll 14s ease-in-out infinite alternate;
}

.site-hero__rig {
	position: absolute;
	right: -3%;
	top: 6%;
	width: min(980px, 70vw);
	aspect-ratio: 1.84;
	opacity: 0.92;
	filter: drop-shadow(0 26px 52px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 36px rgba(255, 110, 80, 0.16));
	animation: hero-dragon-flight 9s ease-in-out infinite alternate;
	transform-origin: 58% 42%;
}

.site-hero__dragonpart {
	position: absolute;
	inset: 0;
	background: url('images/ui/dragon-rig-generated.png') center / 100% 100% no-repeat;
	mix-blend-mode: normal;
}

.site-hero__dragonpart--body {
	clip-path: polygon(21% 34%, 30% 26%, 43% 31%, 57% 34%, 69% 32%, 78% 40%, 87% 58%, 96% 82%, 88% 90%, 76% 83%, 63% 74%, 54% 77%, 46% 87%, 35% 85%, 27% 74%, 20% 54%);
	animation: hero-dragon-body 3.6s ease-in-out infinite;
}

.site-hero__dragonpart--wing-left {
	clip-path: polygon(0 11%, 19% 8%, 29% 14%, 35% 23%, 37% 42%, 32% 53%, 23% 61%, 11% 58%, 4% 45%, 0 28%);
	transform-origin: 34% 30%;
	animation: hero-wing-left 3.6s ease-in-out infinite;
}

.site-hero__dragonpart--wing-right {
	clip-path: polygon(58% 8%, 100% 6%, 100% 55%, 90% 60%, 77% 58%, 67% 50%, 59% 34%);
	transform-origin: 66% 29%;
	animation: hero-wing-right 3.6s ease-in-out infinite;
}

.site-hero__foreground {
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: url('images/ui/rpg-foreground.svg') center bottom / cover no-repeat;
	opacity: 0.94;
}

.site-hero__embers {
	position: absolute;
	inset: 0;
}

.site-hero__ember {
	position: absolute;
	bottom: 10%;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 196, 140, 0.95) 0, rgba(255, 120, 68, 0.7) 45%, rgba(255, 120, 68, 0) 74%);
	box-shadow: 0 0 14px rgba(255, 120, 68, 0.55);
	opacity: 0;
}

.site-hero__ember--1 { left: 8%; animation: hero-ember-rise 6s linear infinite; }
.site-hero__ember--2 { left: 16%; width: 4px; height: 4px; animation: hero-ember-rise 7s linear infinite 1.5s; }
.site-hero__ember--3 { left: 28%; animation: hero-ember-rise 6.2s linear infinite 0.8s; }
.site-hero__ember--4 { left: 52%; width: 5px; height: 5px; animation: hero-ember-rise 7.4s linear infinite 2.2s; }
.site-hero__ember--5 { left: 64%; animation: hero-ember-rise 5.6s linear infinite 1.1s; }
.site-hero__ember--6 { left: 72%; width: 4px; height: 4px; animation: hero-ember-rise 6.8s linear infinite 3s; }
.site-hero__ember--7 { left: 84%; animation: hero-ember-rise 7.2s linear infinite 0.3s; }
.site-hero__ember--8 { left: 91%; width: 4px; height: 4px; animation: hero-ember-rise 6.1s linear infinite 2.6s; }

.hero-brand-block {
	position: relative;
	z-index: 20;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 58rem;
}

.hero-brand {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	color: var(--text-main);
}

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

.hero-brand__crest {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	border-radius: 24px;
	border: 1px solid rgba(255, 226, 172, 0.24);
	background:
		radial-gradient(circle at 30% 28%, rgba(255, 169, 112, 0.72) 0, rgba(173, 43, 31, 0.64) 32%, rgba(23, 10, 18, 0.9) 100%);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.44), 0 0 34px rgba(255, 115, 72, 0.18);
	font-family: var(--font-head);
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.hero-brand__copy {
	display: grid;
	gap: 0.35rem;
}

.hero-brand__eyebrow,
.site-panel__eyebrow,
.page-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-brand__title {
	font-family: var(--font-head);
	font-size: clamp(2.25rem, 6vw, 4.6rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.04;
	text-transform: uppercase;
	color: #fff5df;
	text-shadow: 0 0 34px rgba(255, 190, 118, 0.18), 0 8px 26px rgba(0, 0, 0, 0.44);
}

.hero-brand__subtitle {
	max-width: 44rem;
	font-size: 1rem;
	color: var(--text-soft);
}

.hero-action-row,
.hero-card__actions,
.hero-pill-row,
.page-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.hero-action-row {
	position: relative;
	z-index: 50;
}

.hero-cta,
.site-button,
.site-button:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.8rem 1.1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--font-head);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: visible;
}

.hero-cta::before,
.site-button::before {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: inherit;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0.18) 48%, rgba(255, 255, 255, 0) 72%);
	transform: translateX(-135%);
	opacity: 0;
	pointer-events: none;
}

.hero-cta:hover,
.site-button:hover {
	transform: translateY(-1px);
}

.hero-cta:hover {
	z-index: 80;
}

.hero-cta:hover::before,
.site-button:hover::before {
	opacity: 1;
	animation: button-sheen 900ms ease;
}

.hero-cta--gold,
.site-button--gold {
	background: linear-gradient(135deg, #f3d496 0, #c98a43 48%, #8a4a21 100%);
	color: #160f07;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3), 0 0 34px rgba(232, 186, 104, 0.18);
}

.hero-cta--stone,
.site-button--stone {
	background: linear-gradient(135deg, rgba(44, 54, 73, 0.96) 0, rgba(15, 20, 34, 0.96) 100%);
	border-color: rgba(255, 255, 255, 0.08);
	color: var(--text-main);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.hero-cta--ghost,
.site-button--ghost {
	background: rgba(10, 15, 26, 0.28);
	border-color: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	color: var(--text-soft);
}

.hero-cta--danger,
.site-button--danger {
	background: linear-gradient(135deg, rgba(176, 38, 38, 0.95) 0, rgba(91, 18, 30, 0.98) 100%);
	border-color: rgba(255, 156, 156, 0.18);
	color: #fff1f1;
}

.hero-cta > span:first-child {
	position: relative;
	z-index: 2;
}

.hero-cta__window {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 16px);
	transform: translateX(-50%) translateY(8px) scale(0.96);
	width: min(280px, 72vw);
	padding: 0.9rem 1rem;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(11, 16, 28, 0.94) 0, rgba(16, 22, 37, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36), 0 0 28px rgba(255, 112, 76, 0.1);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 120;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
	text-align: left;
}

.hero-cta__window::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 14px;
	height: 14px;
	background: rgba(16, 22, 37, 0.98);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transform: translateX(-50%) rotate(45deg);
}

.hero-cta__window small,
.realm-nav__hoverpanel small {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-cta__window strong,
.realm-nav__hoverpanel strong {
	display: block;
	color: #fff3db;
	font-family: var(--font-head);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero-cta__window em,
.realm-nav__hoverpanel em {
	display: block;
	margin-top: 0.35rem;
	color: var(--text-soft);
	font-size: 0.8rem;
	font-style: normal;
	line-height: 1.45;
}

.hero-cta:hover .hero-cta__window,
.hero-cta:focus-visible .hero-cta__window {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

.hero-cta--small,
.site-button {
	min-height: 40px;
	padding: 0.72rem 1rem;
	font-size: 0.75rem;
}

.hero-status-grid {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.hero-card {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	padding: 1.25rem;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(10, 16, 29, 0.82) 0, rgba(12, 18, 30, 0.92) 100%);
	border: 1px solid rgba(255, 255, 255, 0.07);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 46px rgba(0, 0, 0, 0.24);
	backdrop-filter: blur(14px);
}

.hero-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 189, 116, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 22px 60px rgba(0, 0, 0, 0.28), 0 0 28px rgba(255, 102, 68, 0.08);
}

.hero-card--status {
	background:
		radial-gradient(circle at top right, rgba(255, 105, 76, 0.12) 0, transparent 32%),
		linear-gradient(180deg, rgba(10, 16, 29, 0.82) 0, rgba(12, 18, 30, 0.92) 100%);
}

.hero-card--account {
	background:
		radial-gradient(circle at top left, rgba(86, 118, 255, 0.18) 0, transparent 30%),
		linear-gradient(180deg, rgba(10, 16, 29, 0.82) 0, rgba(12, 18, 30, 0.92) 100%);
}

.hero-card__label {
	margin-bottom: 0.35rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.73rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.hero-card__value {
	font-family: var(--font-head);
	font-size: clamp(1.1rem, 2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.15;
}

.hero-card__meta {
	margin-top: 0.5rem;
	color: var(--text-soft);
	font-size: 0.92rem;
}

.status-online {
	color: var(--success);
}

.status-offline {
	color: var(--text-danger);
}

.hero-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--text-soft);
	font-size: 0.78rem;
}

.hero-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.8rem;
	margin-top: 0.6rem;
}

.hero-stat {
	padding: 0.85rem 0.95rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-stat__name {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--text-dim);
	font-size: 0.8rem;
}

.hero-stat strong {
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff5df;
}

.site-shell {
	max-width: 1720px;
	margin: 0 auto;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr) 320px;
	gap: 1.5rem;
	align-items: start;
	isolation: isolate;
}

.site-panel,
.content-panel,
.theme-card,
.news-stack,
.news-feature,
.news-article {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background:
		linear-gradient(180deg, rgba(8, 12, 20, 0.84) 0, rgba(14, 20, 33, 0.9) 100%),
		url('images/ui/stone-bg.jpg') center / cover no-repeat;
	box-shadow: var(--shadow-deep);
}

.site-panel::before,
.content-panel::before,
.theme-card::before,
.news-stack::before,
.news-feature::before,
.news-article::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(255, 198, 125, 0.08) 0, transparent 34%),
		linear-gradient(315deg, rgba(76, 112, 255, 0.08) 0, transparent 26%);
	opacity: 0.9;
	pointer-events: none;
}

.site-panel > *,
.content-panel > *,
.theme-card > *,
.news-stack > *,
.news-feature > *,
.news-article > * {
	position: relative;
	z-index: 1;
}

.site-panel {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
	padding: 1.2rem;
}

.site-panel:hover,
.theme-card:hover,
.content-panel:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 188, 111, 0.14);
	box-shadow: 0 34px 84px rgba(0, 0, 0, 0.58), 0 0 28px rgba(255, 116, 74, 0.08);
}

.site-panel__intro h2,
.sidebar-monster__copy h2 {
	margin: 0.2rem 0 0.65rem;
	font-family: var(--font-head);
	font-size: 1.35rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff4df;
}

.site-panel__intro p,
.sidebar-monster__copy p {
	margin: 0;
	color: var(--text-soft);
	font-size: 0.93rem;
}

.realm-nav {
	display: grid;
	gap: 0.9rem;
	margin-top: 1.2rem;
}

.realm-nav__group {
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.05);
	overflow: visible;
}

.realm-nav__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 1rem;
	list-style: none;
	cursor: pointer;
}

.realm-nav__summary::-webkit-details-marker {
	display: none;
}

.realm-nav__summary small {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.67rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.realm-nav__summary strong {
	font-family: var(--font-head);
	font-size: 0.94rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.realm-nav__arrow {
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--text-gold);
	border-bottom: 2px solid var(--text-gold);
	transform: rotate(45deg);
	transition: transform 160ms ease;
	margin-right: 0.35rem;
}

.realm-nav__group[open] .realm-nav__arrow {
	transform: rotate(225deg);
}

.realm-nav__links {
	display: grid;
	gap: 0.55rem;
	padding: 0 0.9rem 0.95rem;
}

.realm-nav__link {
	position: relative;
	display: grid;
	gap: 0.12rem;
	padding: 0.8rem 0.85rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.025);
}

.realm-nav__link:hover {
	z-index: 90;
}

.realm-nav__link.is-active,
.realm-nav__link[aria-current="page"] {
	border-color: rgba(255, 174, 115, 0.35);
	background:
		linear-gradient(135deg, rgba(255, 111, 83, 0.14) 0, rgba(255, 188, 113, 0.12) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 212, 162, 0.04), 0 0 26px rgba(255, 118, 74, 0.1);
}

.realm-nav__link-title {
	font-weight: 700;
	color: var(--text-main);
}

.realm-nav__link-meta {
	font-size: 0.76rem;
	color: var(--text-dim);
}

.realm-nav__hoverpanel {
	position: absolute;
	left: calc(100% + 18px);
	top: 50%;
	transform: translateY(-50%) translateX(-6px) scale(0.96);
	width: 240px;
	padding: 0.9rem 1rem;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(11, 16, 28, 0.96) 0, rgba(16, 22, 37, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36), 0 0 30px rgba(255, 115, 72, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 8;
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.realm-nav__hoverpanel::before {
	content: "";
	position: absolute;
	right: 100%;
	top: 50%;
	width: 14px;
	height: 14px;
	background: rgba(12, 18, 31, 0.98);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transform: translate(50%, -50%) rotate(45deg);
}

.realm-nav__link:hover .realm-nav__hoverpanel,
.realm-nav__link:focus-visible .realm-nav__hoverpanel {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0) scale(1);
}

.theme-switcher {
	margin-top: 1.15rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line-soft);
}

.site-panel--nav {
	position: relative;
	z-index: 60;
	overflow: visible;
}

.theme-switcher label {
	display: block;
	margin-bottom: 0.45rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.page-banner {
	padding: 1.4rem 1.55rem;
	margin-bottom: 1rem;
	border-radius: 26px;
	background:
		linear-gradient(130deg, rgba(19, 28, 45, 0.88) 0, rgba(11, 16, 27, 0.94) 100%),
		url('images/ui/stone-tile.png') center / 420px 420px repeat;
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: var(--shadow-deep);
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
}

.page-banner h1 {
	margin: 0.22rem 0 0.42rem;
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff4de;
}

.page-banner p {
	margin: 0;
	color: var(--text-soft);
	max-width: 52rem;
}

.page-banner__chips span {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--font-head);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-soft);
}

.content-panel__inner {
	padding: 1.55rem;
}

.site-main,
.site-sidebar {
	position: relative;
	z-index: 4;
}

.content-panel__footer {
	padding: 0 1.55rem 1.55rem;
}

.ad-slot {
	max-width: 420px;
	margin-left: auto;
	padding: 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.site-sidebar,
.site-main {
	min-width: 0;
}

.site-sidebar {
	display: grid;
	gap: 1rem;
}

.sidebar-monster {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
}

.sidebar-monster__media {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 24px;
	background:
		radial-gradient(circle at center, rgba(255, 162, 84, 0.14) 0, rgba(255, 162, 84, 0) 72%),
		rgba(0, 0, 0, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: var(--shadow-gold);
}

.sidebar-monster__media img {
	width: 72px;
	height: 72px;
	image-rendering: pixelated;
}

.status-card {
	margin-top: 1.2rem;
	display: grid;
	gap: 0.25rem;
	padding: 0.95rem 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--text-main);
}

.status-card strong {
	font-family: var(--font-head);
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.status-card span {
	color: var(--text-soft);
	font-size: 0.84rem;
}

.status-card__label {
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.status-card--online strong {
	color: var(--success);
}

.status-card--offline strong {
	color: var(--text-danger);
}

.themeboxes-wrap {
	display: grid;
	gap: 1rem;
}

.theme-card {
	padding: 1.15rem;
}

.theme-card__header {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.95rem;
}

.theme-card__seal {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: url('images/ui/wax-seal.png') center / cover no-repeat;
	filter: drop-shadow(0 0 10px rgba(255, 103, 85, 0.34));
	flex-shrink: 0;
	animation: seal-pulse 4.2s ease-in-out infinite;
}

.theme-card__title {
	font-family: var(--font-head);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff2d3;
}

.theme-card__body {
	color: var(--text-soft);
	font-size: 0.88rem;
}

.theme-card--beast .theme-card__body,
.theme-card--gallery .theme-card__body {
	display: grid;
	gap: 1rem;
}

.featured-beast {
	display: grid;
	gap: 1rem;
}

.featured-beast__hero {
	display: grid;
	grid-template-columns: 102px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	color: inherit;
}

.featured-beast__media {
	display: grid;
	place-items: center;
	width: 102px;
	height: 102px;
	border-radius: 26px;
	background:
		radial-gradient(circle at center, rgba(255, 170, 92, 0.16) 0, rgba(255, 170, 92, 0) 70%),
		linear-gradient(180deg, rgba(24, 18, 19, 0.92) 0, rgba(10, 13, 21, 0.98) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 36px rgba(0, 0, 0, 0.32);
}

.featured-beast__media img {
	width: 78px;
	height: 78px;
	object-fit: contain;
	image-rendering: pixelated;
}

.featured-beast__copy {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.featured-beast__eyebrow {
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.featured-beast__title {
	font-family: var(--font-head);
	font-size: 1.24rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff3da;
}

.featured-beast__type {
	color: var(--text-soft);
	font-size: 0.82rem;
}

.featured-beast__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
}

.featured-beast__stat {
	display: grid;
	gap: 0.28rem;
	padding: 0.85rem 0.8rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.featured-beast__stat span {
	color: var(--text-dim);
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.featured-beast__stat strong {
	font-family: var(--font-head);
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff1d3;
}

.featured-beast__blurb {
	margin: 0;
	color: var(--text-soft);
	line-height: 1.6;
}

.theme-card__body p:first-child,
.content-body p:first-child {
	margin-top: 0;
}

.theme-card__body p:last-child,
.content-body p:last-child {
	margin-bottom: 0;
}

.theme-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.login-panel {
	display: grid;
	gap: 1rem;
}

.login-form {
	margin: 0;
}

.login-form__arena {
	padding: 1.25rem;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(10, 15, 24, 0.95) 0, rgba(16, 22, 34, 0.98) 100%),
		url('images/ui/stone-tile.png') center / 420px 420px repeat;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 44px rgba(0, 0, 0, 0.28);
}

.login-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 1rem 1.25rem;
	align-items: start;
}

.login-form__fields {
	display: grid;
	gap: 1rem;
}

.login-field {
	display: grid;
	gap: 0.45rem;
}

.login-field__label {
	color: #fff0d7;
	font-family: var(--font-head);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.login-field input[type="text"],
.login-field input[type="password"] {
	width: 100%;
	min-height: 56px;
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 214, 168, 0.16);
	background: linear-gradient(180deg, rgba(12, 17, 28, 0.96) 0, rgba(18, 24, 38, 0.98) 100%);
	color: var(--text-main);
	font-size: 1rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.login-field input[type="text"]::placeholder,
.login-field input[type="password"]::placeholder {
	color: var(--text-dim);
}

.login-check {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--text-soft);
	font-size: 0.95rem;
}

.login-check input {
	width: 18px;
	height: 18px;
}

.login-form__actions {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.login-form__actions .site-button,
.login-form__actions a {
	width: 100%;
}

.create-account-panel {
	display: grid;
	gap: 1.2rem;
}

.create-account-panel__intro {
	display: grid;
	gap: 0.45rem;
	max-width: 52rem;
}

.create-account-panel__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.create-account-panel__intro p {
	margin: 0;
	color: var(--text-soft);
}

.create-account-form {
	display: grid;
	gap: 1rem;
}

.create-account-sections {
	display: grid;
	gap: 1rem;
}

.create-panel {
	padding: 1.25rem;
	border-radius: 24px;
	background:
		linear-gradient(180deg, rgba(10, 15, 24, 0.95) 0, rgba(16, 22, 34, 0.98) 100%),
		url('images/ui/stone-tile.png') center / 420px 420px repeat;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 44px rgba(0, 0, 0, 0.28);
}

.create-panel__header {
	display: grid;
	gap: 0.32rem;
	margin-bottom: 1rem;
}

.create-panel__title {
	font-family: var(--font-head);
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff2d3;
}

.create-panel__meta {
	color: var(--text-dim);
	font-size: 0.84rem;
}

.create-panel__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.2rem;
}

.create-field {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
}

.create-field--full {
	grid-column: 1 / -1;
}

.create-field__label {
	color: #fff0d7;
	font-family: var(--font-head);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.create-field__control {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.create-field__control > input,
.create-field__control > select,
.create-field__control > textarea {
	flex: 1 1 auto;
	min-width: 0;
}

.create-field__hint {
	color: var(--text-dim);
	font-size: 0.78rem;
}

.create-field__indicator {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.create-field__flag {
	width: 22px;
	height: 16px;
	border-radius: 4px;
	object-fit: cover;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.create-field__error {
	color: #ffb5b5;
	font-size: 0.84rem;
	min-height: 1.2em;
}

.create-account-note {
	margin: 0;
	padding: 0.9rem 1rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--text-soft);
}

.create-option-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

.create-option {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.62rem 0.85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--text-soft);
}

.create-option input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
}

.create-account-consent {
	display: grid;
	gap: 0.75rem;
}

.create-check {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--text-soft);
}

.create-check input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.create-account-form__submit {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	align-items: center;
}

.theme-card__screenshot {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(180deg, rgba(10, 14, 24, 0.94) 0, rgba(16, 22, 36, 0.98) 100%);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.theme-card__screenshot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
}

.theme-card__screenshot-caption {
	position: absolute;
	inset: auto 0 0 0;
	display: grid;
	gap: 0.18rem;
	padding: 0.9rem 1rem;
	background: linear-gradient(180deg, rgba(5, 8, 16, 0) 0, rgba(5, 8, 16, 0.88) 100%);
}

.theme-card__screenshot-caption strong {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff1d4;
}

.theme-card__screenshot-caption em {
	color: var(--text-soft);
	font-size: 0.78rem;
	font-style: normal;
}

.theme-card__list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.theme-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.65rem 0.8rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.theme-card__rank {
	font-family: var(--font-head);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	color: var(--text-fire);
	text-transform: uppercase;
}

.theme-card__player {
	flex: 1;
	min-width: 0;
}

.theme-card__player strong {
	display: block;
	color: var(--text-main);
}

.theme-card__player span {
	display: block;
	color: var(--text-dim);
	font-size: 0.78rem;
}

.theme-card__outfit {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	object-fit: contain;
}

.theme-card__poll-link,
.theme-card__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 0.95rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--text-main);
	font-weight: 700;
}

.theme-card__social-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.theme-card__social small {
	display: block;
	color: var(--text-fire);
	font-family: var(--font-head);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.theme-card__social strong {
	display: block;
	color: var(--text-main);
	font-size: 0.92rem;
}

.news-stack,
.news-feature,
.news-article {
	padding: 1.3rem;
	margin-bottom: 1rem;
}

.news-stack__header,
.news-feature__header,
.news-article__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--line-soft);
}

.news-stack__title,
.news-feature__title,
.news-article__title {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff4de;
}

.news-stack__meta,
.news-feature__meta,
.news-article__meta {
	color: var(--text-dim);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.news-stack__list {
	display: grid;
	gap: 0.75rem;
}

.news-stack__entry {
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	overflow: hidden;
}

.news-stack__entry summary {
	list-style: none;
	cursor: pointer;
	padding: 0.95rem 1rem;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: center;
}

.news-stack__entry summary::-webkit-details-marker {
	display: none;
}

.news-stack__entry summary:hover {
	background: rgba(255, 255, 255, 0.02);
}

.news-stack__icon {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.04);
}

.news-stack__icon img {
	width: 20px;
	height: 20px;
}

.news-stack__headline {
	display: grid;
	gap: 0.2rem;
}

.news-stack__headline strong {
	color: var(--text-main);
}

.news-stack__headline span {
	font-size: 0.83rem;
	color: var(--text-dim);
}

.news-stack__entry-body {
	padding: 0 1rem 1rem 1rem;
	color: var(--text-soft);
}

.news-feature__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 1rem;
	align-items: start;
}

.news-feature__copy p {
	color: var(--text-soft);
}

.news-feature__media img {
	display: block;
	width: 100%;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	object-fit: cover;
}

.news-feature__cta,
.news-article__cta {
	margin-top: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.news-article__lead {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1rem;
}

.news-article__lead img {
	width: 34px;
	height: 34px;
}

.news-article__author {
	color: var(--text-dim);
	font-size: 0.84rem;
}

.news-article__body {
	color: var(--text-soft);
}

.news-article__footer {
	margin-top: 1rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--line-soft);
}

.content-body {
	color: var(--text-main);
}

.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
	margin: 1.3rem 0 0.75rem;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff4de;
}

.content-body h1:first-child,
.content-body h2:first-child,
.content-body h3:first-child {
	margin-top: 0;
}

.content-body p,
.content-body li {
	color: var(--text-soft);
}

.content-body ul,
.content-body ol {
	padding-left: 1.2rem;
}

.content-body iframe {
	max-width: 100%;
}

.content-body input[type="text"],
.content-body input[type="password"],
.content-body input[type="number"],
.content-body input[type="email"],
.content-body input[type="search"],
.content-body select,
.content-body textarea,
.theme-switcher select {
	width: 100%;
	max-width: 100%;
	padding: 0.82rem 0.95rem;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-main);
	font: inherit;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.content-body input[type="checkbox"],
.content-body input[type="radio"] {
	accent-color: #e09c59;
}

.content-body input:-webkit-autofill,
.content-body input:-webkit-autofill:hover,
.content-body input:-webkit-autofill:focus,
.content-body textarea:-webkit-autofill,
.content-body select:-webkit-autofill {
	-webkit-text-fill-color: var(--text-main) !important;
	caret-color: var(--text-main);
	-webkit-box-shadow: 0 0 0 1000px rgba(14, 20, 32, 0.96) inset !important;
	box-shadow: 0 0 0 1000px rgba(14, 20, 32, 0.96) inset !important;
	transition: background-color 9999s ease-in-out 0s;
}

.content-body textarea {
	min-height: 150px;
	resize: vertical;
}

.content-body input:focus,
.content-body select:focus,
.content-body textarea:focus,
.theme-switcher select:focus {
	border-color: rgba(255, 179, 111, 0.46);
	box-shadow: 0 0 0 4px rgba(255, 141, 93, 0.12);
}

.content-body form {
	max-width: 100%;
}

.content-body table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 1rem;
	color: var(--text-soft);
}

.content-body table table {
	margin-bottom: 0;
}

.content-body td,
.content-body th {
	padding: 0.78rem 0.9rem;
	vertical-align: top;
}

.content-body thead td,
.content-body th,
.content-body .white,
.content-body .whites {
	color: #fff4de !important;
	font-weight: 700;
}

.content-body .myaac-table,
.content-body .TableContentContainer,
.content-body .HeadlessTable,
.content-body .InnerTableContainer > table,
.content-body > table,
.content-body .TableContainer table {
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
}

.content-body .myaac-table td,
.content-body .myaac-table th,
.content-body .TableContent td,
.content-body > table > tbody > tr > td,
.content-body > table > tbody > tr > th {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.content-body tr:last-child > td,
.content-body tr:last-child > th {
	border-bottom: 0;
}

.content-body table table,
.content-body .TableContentAndRightShadow,
.content-body .TableContentContainer,
.content-body .TableContainer .Table1,
.content-body .TableContainer .Table2,
.content-body .TableContainer .Table3,
.content-body .TableContainer .Table4,
.content-body .TableContainer .Table5 {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.content-body .TableContentAndRightShadow,
.content-body .TableContentContainer,
.content-body .InnerTableContainer {
	background-image: none !important;
}

.content-body .TableContentAndRightShadow {
	padding-right: 0 !important;
}

.content-body .TableContainer {
	margin-bottom: 1rem;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
}

.content-body .CaptionContainer {
	padding: 1rem 1.15rem;
	background:
		linear-gradient(135deg, rgba(255, 110, 80, 0.12) 0, rgba(233, 191, 114, 0.1) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.content-body .CaptionContainer .Text {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff3db;
}

.content-body .CaptionContainer [class^="Caption"],
.content-body .MessageContainer [class^="BoxFrame"],
.content-body .TableShadowContainer,
.content-body .TableShadowContainerRightTop,
.content-body .TableShadowRightTop,
.content-body .TableBottomShadow,
.content-body .TableBottomLeftShadow,
.content-body .TableBottomRightShadow,
.content-body .BigButtonOver,
.content-body .Button,
.content-body .MediumButtonOver {
	display: none !important;
}

.content-body .InnerTableContainer {
	padding: 1rem 1.1rem 1.15rem;
}

.content-body .TableContent {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
}

.content-body .TableContent td,
.content-body .TableContent th {
	padding: 0.8rem 0.95rem;
	vertical-align: top;
}

.content-body .LabelV,
.content-body .LabelV120,
.content-body .LabelV150,
.content-body .LabelV200 {
	color: var(--text-dim);
	font-weight: 700;
	white-space: nowrap;
}

.content-body .FormFieldError {
	display: block;
	margin-top: 0.35rem;
	color: #ffb5b5;
	font-size: 0.84rem;
}

.content-body .OptionContainer {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.25rem 0.7rem 0.25rem 0;
	padding: 0.48rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.content-body .OptionContainer label {
	color: var(--text-soft);
}

.content-body #SuggestAccountNumber {
	margin-top: 0.35rem;
	font-size: 0.78rem;
}

.content-body #SuggestAccountNumber a {
	color: var(--text-fire);
}

.content-body .SmallBox,
.content-body .MessageContainer {
	margin-bottom: 1rem;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
}

.content-body .Message {
	padding: 1rem 1.1rem;
}

.content-body .TopButtonContainer {
	margin-bottom: 0.7rem;
	text-align: right;
}

.content-body .TopButton img,
.content-body img[src*="back-to-top"] {
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.content-body .InnerTableButtonRow,
.content-body .InnerTableButtonRow td {
	border: 0 !important;
	background: transparent !important;
	padding-top: 0.55rem;
}

.content-body .BigButton,
.content-body .MediumButtonBackground,
.content-body .ThemeboxButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
}

.content-body .BigButtonText,
.content-body .MediumButtonText,
.content-body .ThemeboxButton .ButtonText {
	position: static !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	min-width: 150px;
	padding: 0.72rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: linear-gradient(135deg, rgba(44, 54, 73, 0.96) 0, rgba(15, 20, 34, 0.96) 100%) !important;
	color: var(--text-main) !important;
	font-family: var(--font-head);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
	cursor: pointer;
}

.content-body img[src*="sbutton_"],
.content-body input[type="image"][src*="sbutton_"] {
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(44, 54, 73, 0.96) 0, rgba(15, 20, 34, 0.96) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0.12rem;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
}

/* Global reset for stock legacy table wrappers that still appear in system templates. */
.layout-body .SmallBox {
	margin-bottom: 1rem;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.layout-body .TableContainer,
.layout-body .MessageContainer {
	position: relative;
	margin-bottom: 1rem;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background:
		linear-gradient(180deg, rgba(8, 12, 20, 0.84) 0, rgba(14, 20, 33, 0.9) 100%),
		url('images/ui/stone-bg.jpg') center / cover no-repeat;
	box-shadow: var(--shadow-deep);
	overflow: hidden;
}

.layout-body .TableContainer > table.Table1,
.layout-body .TableContainer > table.Table2,
.layout-body .TableContainer > table.Table3,
.layout-body .TableContainer > table.Table4,
.layout-body .TableContainer > table.Table5,
.layout-body .TableContentAndRightShadow,
.layout-body .TableContentContainer,
.layout-body .InnerTableContainer,
.layout-body .Message,
.layout-body .CaptionContainer {
	background-image: none !important;
	box-shadow: none !important;
}

.layout-body .TableContainer > table.Table1,
.layout-body .TableContainer > table.Table2,
.layout-body .TableContainer > table.Table3,
.layout-body .TableContainer > table.Table4,
.layout-body .TableContainer > table.Table5 {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
	border: 0 !important;
}

.layout-body .TableContainer > table.Table1 > tbody > tr > td,
.layout-body .TableContainer > table.Table2 > tbody > tr > td,
.layout-body .TableContainer > table.Table3 > tbody > tr > td,
.layout-body .TableContainer > table.Table4 > tbody > tr > td,
.layout-body .TableContainer > table.Table5 > tbody > tr > td {
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.layout-body .TableContentAndRightShadow {
	margin-right: 0 !important;
	padding-right: 0 !important;
	background: transparent !important;
}

.layout-body .TableContentContainer,
.layout-body .InnerTableContainer,
.layout-body .Message {
	background: transparent !important;
}

.layout-body .InnerTableContainer {
	padding: 1rem 1.1rem 1.15rem;
}

.layout-body .CaptionContainer {
	padding: 1rem 1.15rem;
	background:
		linear-gradient(135deg, rgba(255, 110, 80, 0.12) 0, rgba(233, 191, 114, 0.1) 100%) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.layout-body .CaptionContainer .Text {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff3db;
}

.layout-body .CaptionContainer [class^="Caption"],
.layout-body .MessageContainer [class^="BoxFrame"],
.layout-body .TableShadowContainer,
.layout-body .TableShadowContainerRightTop,
.layout-body .TableShadowRightTop,
.layout-body .TableBottomShadow,
.layout-body .TableBottomLeftShadow,
.layout-body .TableBottomRightShadow,
.layout-body img[src*="headline-bracer-left"],
.layout-body img[src*="headline-bracer-right"] {
	display: none !important;
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
	color: var(--text-soft);
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr > :is(td, th),
.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > thead > tr > :is(td, th) {
	padding: 0.8rem 0.95rem;
	vertical-align: top;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.025) !important;
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr:nth-child(even) > :is(td, th) {
	background: rgba(255, 255, 255, 0.04) !important;
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr:last-child > :is(td, th) {
	border-bottom: 0;
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr.LabelH > :is(td, th),
.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > thead > tr > :is(td, th) {
	background:
		linear-gradient(135deg, rgba(255, 110, 80, 0.12) 0, rgba(233, 191, 114, 0.08) 100%) !important;
	color: #fff4de !important;
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr[style*="background-color"] > :is(td, th),
.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr > :is(td, th)[style*="background-color"],
.layout-body :is(.TableContent, .InnerTableContainer > table, .Message > table, .myaac-table, .HeadlessTable) > tbody > tr > :is(td, th)[bgcolor] {
	background: rgba(255, 255, 255, 0.03) !important;
}

.layout-body .LabelV,
.layout-body .LabelV120,
.layout-body .LabelV150,
.layout-body .LabelV200 {
	color: var(--text-dim) !important;
	font-weight: 700;
	white-space: nowrap;
}

.layout-body .FormFieldError {
	display: block;
	margin-top: 0.35rem;
	color: #ffb5b5;
	font-size: 0.84rem;
}

.layout-body .OptionContainer {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.25rem 0.7rem 0.25rem 0;
	padding: 0.48rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035) !important;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.layout-body .OptionContainer label {
	color: var(--text-soft) !important;
}

.layout-body .TopButtonContainer {
	margin-bottom: 0.7rem;
	text-align: right;
}

.layout-body .TopButton img,
.layout-body img[src*="back-to-top"] {
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.layout-body .InnerTableButtonRow,
.layout-body .InnerTableButtonRow td {
	border: 0 !important;
	background: transparent !important;
	padding-top: 0.55rem;
}

.site-button {
	appearance: none;
	background: none;
}

.site-button:focus-visible,
.hero-cta:focus-visible,
.realm-nav__summary:focus-visible,
.realm-nav__link:focus-visible {
	outline: 2px solid rgba(255, 179, 111, 0.72);
	outline-offset: 2px;
}

.content-body [bgcolor="#505050"],
.content-body [bgcolor="#05080f"],
.content-body [bgcolor="#0b0f18"] {
	background: rgba(255, 255, 255, 0.03) !important;
}

.content-body .green,
.content-body .online {
	color: var(--success) !important;
}

.content-body .red,
.content-body .offline {
	color: var(--text-danger) !important;
}

.content-body .warning,
.content-body .error,
.content-body .success {
	padding: 1rem 1.15rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 1rem;
}

.content-body .warning {
	background: rgba(255, 186, 90, 0.09);
	border-color: rgba(255, 194, 102, 0.2);
}

.content-body .error {
	background: rgba(255, 104, 118, 0.08);
	border-color: rgba(255, 104, 118, 0.18);
}

.content-body .success {
	background: rgba(132, 226, 185, 0.08);
	border-color: rgba(132, 226, 185, 0.2);
}

.NewsHeadline {
	margin-bottom: 0.8rem;
}

.NewsHeadlineBackground {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.NewsHeadlineIcon {
	width: 28px;
	height: 28px;
}

.NewsHeadlineDate,
.NewsHeadlineAuthor {
	color: var(--text-dim);
	font-size: 0.8rem;
}

.NewsHeadlineText {
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff2d8;
}

.site-footer {
	max-width: 1720px;
	margin: 0 auto;
	padding: 0 1.5rem 2rem;
}

.site-footer__inner {
	padding: 1.2rem 1.35rem;
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(7, 10, 17, 0.72);
	color: var(--text-dim);
	font-size: 0.82rem;
	text-align: center;
}

.site-footer__sep {
	margin: 0 0.5rem;
	color: rgba(255, 255, 255, 0.18);
}

@keyframes panel-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hero-sky-drift {
	0% {
		transform: scale(1.06) translate3d(0, 0, 0);
	}
	100% {
		transform: scale(1.1) translate3d(-1.5%, 1%, 0);
	}
}

@keyframes hero-mist-roll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-2%, 0.8%, 0);
	}
}

@keyframes hero-dragon-flight {
	0% {
		transform: translate3d(0, 0, 0) rotate(-1deg);
	}
	100% {
		transform: translate3d(1.5%, -1.4%, 0) rotate(1.2deg);
	}
}

@keyframes hero-dragon-body {
	0%,
	100% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	50% {
		transform: translate3d(0, 0.6%, 0) rotate(0.35deg);
	}
}

@keyframes hero-wing-left {
	0%,
	100% {
		transform: rotate(-1deg) translate3d(0, 0, 0);
	}
	50% {
		transform: rotate(-8deg) translate3d(-0.8%, -0.8%, 0);
	}
}

@keyframes hero-wing-right {
	0%,
	100% {
		transform: rotate(1deg) translate3d(0, 0, 0);
	}
	50% {
		transform: rotate(8deg) translate3d(0.8%, -1%, 0);
	}
}

@keyframes hero-ember-rise {
	0% {
		transform: translate3d(0, 0, 0) scale(0.6);
		opacity: 0;
	}
	12% {
		opacity: 0.9;
	}
	70% {
		opacity: 0.5;
	}
	100% {
		transform: translate3d(-20px, -280px, 0) scale(1.3);
		opacity: 0;
	}
}

@keyframes button-sheen {
	0% {
		transform: translateX(-135%);
	}
	100% {
		transform: translateX(135%);
	}
}

@keyframes seal-pulse {
	0%,
	100% {
		transform: scale(1);
		filter: drop-shadow(0 0 10px rgba(255, 103, 85, 0.34));
	}
	50% {
		transform: scale(1.06);
		filter: drop-shadow(0 0 16px rgba(255, 130, 92, 0.46));
	}
}

.site-hero__overlay,
.site-panel,
.content-panel,
.page-banner,
.theme-card,
.news-stack,
.news-feature,
.news-article {
	animation: panel-rise 420ms ease both;
}

@media (max-width: 1400px) {
	.site-shell {
		grid-template-columns: 280px minmax(0, 1fr) 300px;
	}
}

@media (max-width: 1180px) {
	.site-hero__content {
		grid-template-columns: 1fr;
	}

	.hero-status-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-shell {
		grid-template-columns: 280px minmax(0, 1fr);
	}

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

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

@media (max-width: 920px) {
	.site-hero,
	.site-shell,
	.site-footer {
		padding-left: 1rem;
		padding-right: 1rem;
	}

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

	.site-panel--nav {
		order: 2;
	}

	.site-main {
		order: 1;
	}

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

	.themeboxes-wrap {
		grid-template-columns: 1fr;
	}

	.realm-nav__hoverpanel {
		display: none;
	}

	.site-hero__rig {
		right: -12%;
		top: 14%;
		width: min(760px, 94vw);
		opacity: 0.74;
	}

	.page-banner {
		flex-direction: column;
		align-items: start;
	}

	.hero-status-grid {
		grid-template-columns: 1fr;
	}

	.news-feature__layout {
		grid-template-columns: 1fr;
	}

	.create-panel__grid {
		grid-template-columns: 1fr;
	}

	.login-form__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.site-hero__content,
	.content-panel__inner,
	.content-panel__footer,
	.site-panel,
	.theme-card,
	.news-stack,
	.news-feature,
	.news-article,
	.page-banner {
		padding: 1rem;
	}

	.hero-brand {
		align-items: start;
	}

	.hero-brand__crest {
		width: 68px;
		height: 68px;
		font-size: 1.2rem;
	}

	.hero-action-row,
	.hero-card__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta,
	.site-button {
		width: 100%;
	}

	.create-option-grid,
	.create-account-form__submit {
		flex-direction: column;
		align-items: stretch;
	}

	.featured-beast__hero,
	.featured-beast__stats {
		grid-template-columns: 1fr;
	}

	.featured-beast__media {
		width: 100%;
		height: 120px;
	}

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

	.sidebar-monster__media {
		width: 100%;
		height: 120px;
	}

	.site-hero__rig {
		right: -18%;
		top: 18%;
		width: 130vw;
		opacity: 0.5;
	}

	.page-banner__chips {
		width: 100%;
	}

	.page-banner__chips span {
		width: 100%;
		justify-content: center;
	}

	.news-stack__entry summary {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.news-stack__entry summary > :last-child {
		grid-column: 2;
	}

	.content-body td,
	.content-body th {
		padding: 0.68rem 0.72rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.site-hero__embers,
	.site-hero__rig {
		display: none;
	}
}