/* =========================================================
   TidurRO — custom FluxCP theme
   Dark fantasy / gamer UI, RO-inspired, fully responsive.
   ========================================================= */

:root{
	--gold:        #e0b14a;
	--gold-bright: #ffd876;
	--ink:         #f3e6c4;
	--ink-dim:     #c9c2ac;
	--bg-deep:     #05070c;
	--panel:       rgba(14, 18, 30, 0.86);
	--panel-soft:  rgba(20, 25, 40, 0.72);
	--panel-border:rgba(224, 177, 74, 0.35);
	--line:        rgba(224, 177, 74, 0.18);
	--row-alt:     rgba(255, 255, 255, 0.035);
	--row-hover:   rgba(224, 177, 74, 0.10);
	--danger:      #ff6b6b;
	--ok:          #6fdc8c;
	--mana:        #5ecbf0;
	--mana-bright: #9fe8ff;
	--mystic:      #b48cff;
	--radius:      14px;
	--radius-sm:   8px;
	--shadow:      0 18px 50px rgba(0,0,0,0.55);
	--sidebar-w:   250px;
	--topbar-h:    64px;
}

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

html{
	min-height: 100%;
	background: var(--bg-deep);
}
body{
	margin: 0;
	padding: 0;
	min-height: 100%;
	color: var(--ink);
	font-family: "Segoe UI", Roboto, "Trebuchet MS", Verdana, sans-serif;
	font-size: 15px;
	line-height: 1.55;

	background-color: var(--bg-deep);
	background-image:
		linear-gradient(180deg, rgba(3,5,10,0.55) 0%, rgba(3,5,10,0.80) 55%, rgba(3,5,10,0.96) 100%),
		linear-gradient(90deg, rgba(3,5,10,0.75) 0%, rgba(3,5,10,0.15) 35%, rgba(3,5,10,0.15) 65%, rgba(3,5,10,0.75) 100%),
		url('../img/hero/rwc2004-bg.jpg');
	background-size: cover;
	background-position: center 20%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
@media (max-width: 780px){
	body{ background-attachment: scroll; }
}

a{ color: var(--gold-bright); text-decoration: none; }
a:hover{ color: #fff; text-decoration: underline; }

h1, h2, h3, h4{
	color: var(--gold-bright);
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 0.03em;
	margin: 0 0 14px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
h2{ font-size: 1.5em; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
h3{ font-size: 1.15em; }

p{ margin: 0 0 12px; }

/* ---------------------------------------------------------
   Fixed hero background
   --------------------------------------------------------- */
.bg-hero{ display: none; } /* background now applied directly on body, see above */

/* ---------------------------------------------------------
   Top bar
   --------------------------------------------------------- */
.site-topbar{
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 18px;
	background: linear-gradient(180deg, rgba(6,8,14,0.92), rgba(6,8,14,0.75));
	border-bottom: 1px solid var(--panel-border);
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(10px);
}
.site-topbar .brand{
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.site-topbar .brand:hover{ text-decoration: none; }
.site-topbar img#logo{
	max-height: 42px;
	filter: drop-shadow(0 0 8px rgba(224,177,74,0.5));
}
.brand-name{
	font-family: Georgia, serif;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--gold-bright);
	font-size: 1.15em;
	text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.nav-toggle-input{ display: none; }
.nav-toggle-btn{
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 8px;
}
.nav-toggle-btn span{
	display: block;
	height: 2px;
	background: var(--gold-bright);
	border-radius: 2px;
}

.sidebar-scrim{
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 45;
}

/* ---------------------------------------------------------
   App shell / layout
   --------------------------------------------------------- */
.app-shell{
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	gap: 22px;
	max-width: 1320px;
	margin: 22px auto;
	padding: 0 20px 40px;
	align-items: start;
}

/* ---------------------------------------------------------
   Sidebar (un-table the legacy chrome tables)
   --------------------------------------------------------- */
.app-sidebar{
	position: sticky;
	top: calc(var(--topbar-h) + 18px);
}
.app-sidebar table{
	width: 100%;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	margin-bottom: 18px;
	border-collapse: collapse;
}
.app-sidebar table, .app-sidebar tbody, .app-sidebar tr, .app-sidebar td, .app-sidebar th{
	display: block;
	width: 100%;
}
.app-sidebar img{ display: none; } /* drop the old 1px corner/spacer gifs */
.app-sidebar th.menuitem{
	background: linear-gradient(90deg, rgba(224,177,74,0.18), transparent);
	color: var(--gold-bright);
	text-transform: uppercase;
	font-size: 0.72em;
	letter-spacing: 0.12em;
	padding: 12px 16px 8px;
	text-align: left;
	border-top: 1px solid var(--line);
}
.app-sidebar tr:first-child th.menuitem{ border-top: none; }
.app-sidebar td.menuitem{ padding: 0; }
.app-sidebar td.menuitem a{
	display: block;
	padding: 10px 18px;
	color: var(--ink);
	font-size: 0.93em;
	border-left: 3px solid transparent;
	transition: background .15s, border-color .15s, color .15s;
}
.app-sidebar td.menuitem a:hover{
	background: var(--row-hover);
	border-left-color: var(--gold);
	color: var(--gold-bright);
	text-decoration: none;
}
.app-sidebar td.menuitem a span{ display: block; }

/* ---------------------------------------------------------
   Login box
   --------------------------------------------------------- */
#loginbox{
	width: 100%;
	background: var(--panel-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
	border-collapse: collapse;
	font-size: 0.92em;
}
#loginbox, #loginbox tbody, #loginbox tr, #loginbox td{ display: block; width: 100%; }
#loginbox img{ display: none; }
/* Old theme markup hardcodes bgcolor="#e1eaf3" (light blue) via raw HTML attribute
   on every td — override it here or it bleeds through as a pale patch on the dark UI. */
#loginbox td{
	padding: 10px 16px;
	background: transparent;
	color: var(--ink);
}
#loginbox td[bgcolor]{ background: transparent; }
/* The old table markup's every row also has empty spacer/corner-image <td>s (for the
   decorative rounded-corner GIFs, already hidden above) — forcing display:block on every
   td turns each of THOSE into its own empty padded block too, breaking the box into
   several stacked blank bars around the real content (most visible on the admin-menu row).
   Collapse anything with no real content down to nothing. */
#loginbox td:empty, #loginbox td:has(> img):not(:has(> :not(img))){ display: none; padding: 0; }
#loginbox a{ color: var(--gold-bright); }

/* Legacy <font color="..."> tags in Service Desk (staff-reply author name,
   ticket status labels) use named colors like "brown"/"darkgrey" picked for a
   light theme — override so they stay legible against the dark UI. Scoped to
   the servicedesk module only: item descriptions also use <font color> tags,
   but those carry the item's own real in-game text color and must NOT be
   touched — forcing all of them gold would erase meaningful color-coding. */
body.module-servicedesk font[color]{ font-weight: 600; }
body.module-servicedesk font[color="brown"]{ color: var(--gold-bright) !important; }
body.module-servicedesk font[color="green"]{ color: var(--ok) !important; }
body.module-servicedesk font[color="orange"]{ color: #ffb648 !important; }
body.module-servicedesk font[color="darkgrey"]{ color: var(--ink-dim) !important; }
#loginbox select{ margin-left: 4px; background: rgba(255,255,255,0.06); color: var(--ink); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 3px 6px; }
.loginbox-admin-menu{ border-top: 1px solid var(--line); padding-top: 8px !important; }

/* ---------------------------------------------------------
   Content panel
   --------------------------------------------------------- */
.content-panel{
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 26px 28px 30px;
	min-height: 60vh;
	overflow-x: auto;
}

#submenu, #pagemenu{
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	margin-bottom: 16px;
	font-size: 0.9em;
	color: var(--ink-dim);
}
#submenu a, #pagemenu a{
	color: var(--gold-bright);
	margin: 0 3px;
}
.sub-menu-item.current-sub-menu{
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

.credit-balance{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(90deg, rgba(224,177,74,0.16), rgba(224,177,74,0.02));
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 12px 18px;
	margin-bottom: 18px;
}
.balance-text{ color: var(--ink-dim); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.08em; }
.balance-amount{ color: var(--gold-bright); font-size: 1.4em; font-weight: 700; }

p.message{
	background: rgba(111,220,140,0.12);
	border: 1px solid rgba(111,220,140,0.4);
	color: var(--ok);
	padding: 12px 16px;
	border-radius: var(--radius-sm);
}
p.notice{
	background: rgba(255,107,107,0.12);
	border: 1px solid rgba(255,107,107,0.4);
	color: var(--danger);
	padding: 12px 16px;
	border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   Tables (data listings across nearly every module)
   --------------------------------------------------------- */
table{ border-collapse: collapse; }
.horizontal-table, .vertical-table, .generic-form-table, table#server_status,
table.woe-table, table#admin_sidebar + table{
	width: 100%;
	margin: 4px 0 22px;
	font-size: 0.92em;
}
.horizontal-table th, .vertical-table th, .generic-form-table th, #server_status th{
	background: rgba(224,177,74,0.14);
	color: var(--gold-bright);
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--panel-border);
	font-weight: 600;
	white-space: nowrap;
	line-height: 1.25;
}
.horizontal-table td, .vertical-table td, .generic-form-table td, #server_status td{
	padding: 6px 10px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1.3;
}
/* Dense reference tables (item/monster DB etc.) commonly run 10-16 columns wide —
   tighten further and let long text truncate instead of wrapping/ragged rows. */
.horizontal-table{ font-size: 0.86em; }
.horizontal-table td{ max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.horizontal-table td:has(img), .horizontal-table td:has(a){ overflow: visible; }
.horizontal-table img{
	display: block;
	max-height: 28px;
	max-width: 28px;
	width: auto;
	height: auto;
	margin: 0 auto;
	vertical-align: middle;
}
.horizontal-table tr:nth-child(even) td{ background: var(--row-alt); }
.horizontal-table tr:hover td{ background: var(--row-hover); }
.vertical-table th{ width: 220px; white-space: nowrap; background: rgba(224,177,74,0.08); }
.empty-row td{ text-align: center; color: var(--ink-dim); font-style: italic; padding: 24px 12px; white-space: normal; }

/* Scroll affordance so a 16-column table doesn't look like it silently cuts off */
.content-panel{ position: relative; }
.content-panel table.horizontal-table{
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}

.not-applicable{ color: #6b7188; font-style: italic; }
.status.yes, .yes, .online, td .yes{ color: var(--ok); font-weight: 600; }
.status.no, .no, .offline, td .no{ color: var(--danger); font-weight: 600; }
.red{ color: var(--danger); }
.green{ color: var(--ok); }
.important{ color: var(--gold-bright); font-weight: 700; }
.broken{ color: var(--danger); text-decoration: line-through; }

.account-state{ padding: 3px 9px; border-radius: 999px; font-size: 0.82em; display: inline-block; }
.account-state.state-banned{ background: rgba(255,107,107,0.18); color: var(--danger); }
.account-state.state-unknown{ background: rgba(120,120,140,0.2); color: var(--ink-dim); }
.account-state.state-pending{ background: rgba(224,177,74,0.2); color: var(--gold-bright); }

/* ---------------------------------------------------------
   Forms
   --------------------------------------------------------- */
input[type=text], input[type=password], input[type=file], input[type=email],
select, textarea{
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	color: var(--ink);
	padding: 9px 12px;
	font-size: 0.95em;
	font-family: inherit;
	transition: border-color .15s, background .15s;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{
	outline: none;
	border-color: var(--gold);
	background: rgba(224,177,74,0.08);
}
select{ appearance: auto; }

input[type=submit], input[type=button], button{
	background: linear-gradient(180deg, var(--gold-bright), var(--gold));
	color: #241a04;
	border: none;
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(224,177,74,0.25);
	transition: transform .1s, box-shadow .15s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover{
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(224,177,74,0.35);
}
input[type=submit]:active, input[type=button]:active, button:active{ transform: translateY(0); }

.generic-form, .search-form, .search-form2{
	background: var(--panel-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin-bottom: 20px;
}
.generic-form label, .search-form label{
	display: inline-block;
	min-width: 140px;
	color: var(--ink-dim);
}
.toggler a{ font-size: 0.9em; }

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */
.pages{ margin: 14px 0; text-align: center; }
.pages a{
	display: inline-block;
	padding: 6px 12px;
	margin: 0 2px;
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	color: var(--ink);
}
.pages a:hover{ background: var(--row-hover); text-decoration: none; }
.pages a.current-page{
	background: var(--gold);
	color: #241a04;
	font-weight: 700;
	border-color: var(--gold);
}
p.info-text{ color: var(--ink-dim); font-size: 0.85em; }

/* ---------------------------------------------------------
   News (homepage feed)
   --------------------------------------------------------- */
.newsDiv{
	border-bottom: 1px solid var(--line);
	padding: 14px 0;
}
.newsDate{ color: var(--ink-dim); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; }
.newsCont a.news_link{ color: var(--gold-bright); font-size: 1.05em; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
	text-align: center;
	color: var(--ink-dim);
	font-size: 0.82em;
	padding: 20px 16px 40px;
}
.site-footer a{ color: var(--gold-bright); }
.footer-controls{ margin-top: 6px; }
.footer-controls select{ font-size: 0.85em; padding: 4px 8px; }
#copyright strong{ color: var(--gold-bright); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 980px){
	.app-shell{ grid-template-columns: 1fr; }
	.app-sidebar{
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(82vw, 300px);
		padding: calc(var(--topbar-h) + 16px) 14px 16px;
		background: rgba(6,8,14,0.98);
		overflow-y: auto;
		z-index: 50;
		transform: translateX(-105%);
		transition: transform .25s ease;
		box-shadow: var(--shadow);
	}
	.nav-toggle-btn{ display: flex; }
	#nav-toggle:checked ~ .app-shell .app-sidebar{ transform: translateX(0); }
	#nav-toggle:checked ~ .app-shell .sidebar-scrim{ display: block; }
}

@media (max-width: 600px){
	.app-shell{ margin: 12px auto; padding: 0 12px 30px; gap: 14px; }
	.content-panel{ padding: 18px 16px 22px; border-radius: var(--radius-sm); }
	.brand-name{ display: none; }
	.generic-form label, .search-form label{ display: block; min-width: 0; margin-bottom: 4px; }
	h2{ font-size: 1.25em; }
	.horizontal-table, .vertical-table, .generic-form-table{ font-size: 0.85em; }
}

/* Admin (red) logo variant keeps working, just resized like the normal one */
img#logo{ width: auto; }

/* =========================================================
   Motion, glow & polish
   ========================================================= */
@keyframes fadeInUp{
	from{ opacity: 0; transform: translateY(14px); }
	to{ opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse{
	0%, 100%{ box-shadow: 0 0 0 1px var(--panel-border), 0 18px 50px rgba(0,0,0,0.55), 0 0 24px rgba(224,177,74,0.10); }
	50%{ box-shadow: 0 0 0 1px rgba(224,177,74,0.6), 0 18px 60px rgba(0,0,0,0.6), 0 0 40px rgba(224,177,74,0.28); }
}
@keyframes textGlow{
	0%, 100%{ text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 14px rgba(224,177,74,0.25); }
	50%{ text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 26px rgba(224,177,74,0.55), 0 0 46px rgba(94,203,240,0.18); }
}
@keyframes twinkle{
	0%, 100%{ opacity: 0; transform: scale(0.4); }
	50%{ opacity: 1; transform: scale(1); }
}
@keyframes shimmerSweep{
	0%{ transform: translateX(-120%) rotate(8deg); }
	100%{ transform: translateX(220%) rotate(8deg); }
}

@media (prefers-reduced-motion: no-preference){
	.content-panel{ animation: fadeInUp .5s ease both, glowPulse 6s ease-in-out infinite; }
	.app-sidebar table{ animation: fadeInUp .5s ease both; }
	.hero-title{ animation: textGlow 4s ease-in-out infinite; }
}

h2, h3, .brand-name{ animation: none; }

/* Button shimmer sweep on hover */
input[type=submit], input[type=button], button{ position: relative; overflow: hidden; }
input[type=submit]::after, input[type=button]::after, button::after{
	content: "";
	position: absolute;
	top: -50%;
	left: 0;
	width: 30%;
	height: 200%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
	transform: translateX(-120%) rotate(8deg);
	pointer-events: none;
}
input[type=submit]:hover::after, input[type=button]:hover::after, button:hover::after{
	animation: shimmerSweep .7s ease forwards;
}

/* Nav link animated underline accent */
.app-sidebar td.menuitem a{ position: relative; }
.app-sidebar td.menuitem a::before{
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--mana-bright), var(--gold));
	transform: scaleY(0);
	transition: transform .18s ease;
}
.app-sidebar td.menuitem a:hover::before{ transform: scaleY(1); }

/* Headings pick up a faint dual-tone glow */
.content-panel h2{
	background: linear-gradient(90deg, var(--gold-bright), var(--mana-bright) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--gold-bright);
}

/* =========================================================
   Homepage hero banner + stat cards + character showcase
   ========================================================= */
.hero-banner{
	position: relative;
	text-align: center;
	padding: 34px 16px 40px;
	margin: -26px -28px 26px;
	border-radius: var(--radius) var(--radius) 0 0;
	background:
		radial-gradient(ellipse at 50% -10%, rgba(94,203,240,0.16), transparent 60%),
		radial-gradient(ellipse at 50% 110%, rgba(224,177,74,0.14), transparent 60%);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}
.hero-sparkles{ position: absolute; inset: 0; pointer-events: none; }
.hero-sparkles i{
	position: absolute;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--mana-bright);
	box-shadow: 0 0 6px 1px var(--mana-bright);
	animation: twinkle 3.2s ease-in-out infinite;
}
.hero-sparkles i:nth-child(odd){ background: var(--gold-bright); box-shadow: 0 0 6px 1px var(--gold-bright); }
.hero-sparkles i:nth-child(3n){ width: 2px; height: 2px; }
/* deterministic-ish scatter using nth-child so no JS/inline styles needed */
.hero-sparkles i:nth-child(1){ left: 4%; top: 18%; animation-delay: 0s; }
.hero-sparkles i:nth-child(2){ left: 12%; top: 62%; animation-delay: .3s; }
.hero-sparkles i:nth-child(3){ left: 20%; top: 30%; animation-delay: .6s; }
.hero-sparkles i:nth-child(4){ left: 28%; top: 75%; animation-delay: .9s; }
.hero-sparkles i:nth-child(5){ left: 35%; top: 12%; animation-delay: 1.2s; }
.hero-sparkles i:nth-child(6){ left: 42%; top: 55%; animation-delay: 1.5s; }
.hero-sparkles i:nth-child(7){ left: 50%; top: 85%; animation-delay: 1.8s; }
.hero-sparkles i:nth-child(8){ left: 58%; top: 22%; animation-delay: 2.1s; }
.hero-sparkles i:nth-child(9){ left: 65%; top: 68%; animation-delay: 2.4s; }
.hero-sparkles i:nth-child(10){ left: 72%; top: 40%; animation-delay: 2.7s; }
.hero-sparkles i:nth-child(11){ left: 80%; top: 15%; animation-delay: 0.15s; }
.hero-sparkles i:nth-child(12){ left: 88%; top: 60%; animation-delay: 0.45s; }
.hero-sparkles i:nth-child(13){ left: 95%; top: 33%; animation-delay: 0.75s; }
.hero-sparkles i:nth-child(14){ left: 8%; top: 45%; animation-delay: 1.05s; }
.hero-sparkles i:nth-child(15){ left: 16%; top: 88%; animation-delay: 1.35s; }
.hero-sparkles i:nth-child(16){ left: 24%; top: 5%; animation-delay: 1.65s; }
.hero-sparkles i:nth-child(17){ left: 32%; top: 92%; animation-delay: 1.95s; }
.hero-sparkles i:nth-child(18){ left: 46%; top: 30%; animation-delay: 2.25s; }
.hero-sparkles i:nth-child(19){ left: 54%; top: 8%; animation-delay: 2.55s; }
.hero-sparkles i:nth-child(20){ left: 62%; top: 90%; animation-delay: 2.85s; }
.hero-sparkles i:nth-child(21){ left: 70%; top: 50%; animation-delay: 0.2s; }
.hero-sparkles i:nth-child(22){ left: 78%; top: 78%; animation-delay: 0.9s; }
.hero-sparkles i:nth-child(23){ left: 90%; top: 10%; animation-delay: 1.5s; }
.hero-sparkles i:nth-child(24){ left: 98%; top: 70%; animation-delay: 2.1s; }

.hero-title{
	position: relative;
	font-size: clamp(1.8em, 4vw, 2.6em);
	margin: 0 0 6px;
	letter-spacing: 0.05em;
}
.hero-tagline{
	position: relative;
	color: var(--ink-dim);
	font-style: italic;
	margin-bottom: 24px;
}

.stat-cards{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 26px;
}
.stat-card{
	background: var(--panel-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 16px 26px;
	min-width: 150px;
	transition: transform .2s ease, border-color .2s ease;
}
.stat-card:hover{ transform: translateY(-3px); border-color: var(--mana); }
.stat-card-value{
	display: block;
	font-family: Georgia, serif;
	font-size: 1.6em;
	font-weight: 700;
	color: var(--gold-bright);
	text-shadow: 0 0 16px rgba(224,177,74,0.35);
}
.stat-card-label{
	display: block;
	margin-top: 4px;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-dim);
}

.char-showcase{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.char-card{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 150px;
	padding: 14px 10px 16px;
	background: linear-gradient(180deg, rgba(224,177,74,0.10), rgba(20,25,40,0.6));
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.char-card:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 18px rgba(94,203,240,0.2); }
.char-card.char-rank-1{ border-color: var(--gold-bright); box-shadow: 0 0 18px rgba(255,216,118,0.25); }
.char-rank{
	font-size: 0.72em;
	color: var(--mana-bright);
	font-weight: 700;
	letter-spacing: 0.08em;
}
.char-name{ font-weight: 700; color: var(--gold-bright); }
.char-class{ font-size: 0.78em; color: var(--ink-dim); }
.char-level{ font-size: 0.78em; color: var(--ink); }
.char-guild{ font-size: 0.72em; color: var(--mana-bright); }

@media (max-width: 600px){
	.hero-banner{ margin: -18px -16px 20px; padding: 26px 12px 30px; }
	.stat-card{ min-width: 120px; padding: 12px 16px; }
	.char-card{ width: 130px; }
}

/* =========================================================
   Live server status strip
   ========================================================= */
@keyframes dotPulse{
	0%, 100%{ box-shadow: 0 0 0 0 currentColor; opacity: 1; }
	70%{ box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
}
.server-strip{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 22px;
}
.server-pill{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.78em;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255,255,255,0.03);
	color: var(--ink-dim);
}
.server-pill .dot{
	width: 7px; height: 7px;
	border-radius: 50%;
	display: inline-block;
	animation: dotPulse 1.8s ease-out infinite;
}
.server-pill.is-up{ color: var(--ok); border-color: rgba(111,220,140,0.35); }
.server-pill.is-up .dot{ background: var(--ok); color: var(--ok); }
.server-pill.is-down{ color: var(--danger); border-color: rgba(255,107,107,0.35); }
.server-pill.is-down .dot{ background: var(--danger); color: var(--danger); }

/* =========================================================
   Themed scrollbar
   ========================================================= */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--bg-deep); }
::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--gold), var(--mana));
	border-radius: 10px;
	border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--gold-bright), var(--mana-bright)); }
html{ scrollbar-color: var(--gold) var(--bg-deep); scrollbar-width: thin; }

/* =========================================================
   Magic cursor trail (desktop only — skipped on touch devices)
   ========================================================= */
.cursor-spark{
	position: fixed;
	top: 0; left: 0;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mana-bright), var(--gold) 70%, transparent);
	pointer-events: none;
	z-index: 9999;
	opacity: 0.9;
	transform: translate(-50%, -50%);
	animation: sparkFade .7s ease-out forwards;
	will-change: transform, opacity;
}
@keyframes sparkFade{
	from{ opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
	to{ opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
}
@media (hover: none){ .cursor-spark{ display: none; } }

/* =========================================================
   Hero parallax tilt (mouse-driven, desktop only)
   ========================================================= */
.hero-banner{ transform-style: preserve-3d; transition: transform .15s ease-out; }
@media (hover: none){ .hero-banner{ transform: none !important; } }

/* =========================================================
   Numeric column right-alignment — Item DB & Monster DB
   (column positions are fixed per module, mapped by nth-child)
   ========================================================= */
body.module-item .horizontal-table th:nth-child(6),
body.module-item .horizontal-table th:nth-child(7),
body.module-item .horizontal-table th:nth-child(8),
body.module-item .horizontal-table th:nth-child(9),
body.module-item .horizontal-table th:nth-child(10),
body.module-item .horizontal-table th:nth-child(11),
body.module-item .horizontal-table th:nth-child(12),
body.module-item .horizontal-table th:nth-child(13),
body.module-item .horizontal-table td:nth-child(7),
body.module-item .horizontal-table td:nth-child(8),
body.module-item .horizontal-table td:nth-child(9),
body.module-item .horizontal-table td:nth-child(10),
body.module-item .horizontal-table td:nth-child(11),
body.module-item .horizontal-table td:nth-child(12),
body.module-item .horizontal-table td:nth-child(13),
body.module-item .horizontal-table td:nth-child(14),
body.module-monster .horizontal-table th:nth-child(4),
body.module-monster .horizontal-table th:nth-child(5),
body.module-monster .horizontal-table th:nth-child(9),
body.module-monster .horizontal-table th:nth-child(10),
body.module-monster .horizontal-table td:nth-child(4),
body.module-monster .horizontal-table td:nth-child(5),
body.module-monster .horizontal-table td:nth-child(9),
body.module-monster .horizontal-table td:nth-child(10){
	text-align: right;
	font-variant-numeric: tabular-nums;
}
/* Item ID / Monster ID already ships right-aligned via FluxCP's own markup — keep it consistent */
body.module-item .horizontal-table td:first-child,
body.module-monster .horizontal-table td:first-child{
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* =========================================================
   LEVEL UP! login celebration
   ========================================================= */
.levelup-overlay{
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at center, rgba(5,7,12,0.35), rgba(5,7,12,0.88) 70%);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .5s ease;
	cursor: pointer;
}
.levelup-overlay.is-active{ opacity: 1; pointer-events: auto; }

.levelup-burst{
	position: absolute;
	width: 120px; height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--gold-bright), var(--gold) 40%, transparent 72%);
	filter: blur(2px);
	transform: scale(0);
	opacity: 0;
}
.levelup-overlay.is-active .levelup-burst{ animation: levelupBurst 1s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes levelupBurst{
	0%{ transform: scale(0); opacity: 0.9; }
	60%{ transform: scale(9); opacity: 0.35; }
	100%{ transform: scale(13); opacity: 0; }
}

.levelup-rays{
	position: absolute;
	width: 700px; height: 700px;
	max-width: 140vw; max-height: 140vw;
	background: repeating-conic-gradient(
		from 0deg,
		rgba(255,216,118,0.16) 0deg 4deg,
		transparent 4deg 16deg
	);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.4) rotate(0deg);
}
.levelup-overlay.is-active .levelup-rays{ animation: levelupRays 2.8s ease-out forwards; }
@keyframes levelupRays{
	0%{ opacity: 0; transform: scale(0.4) rotate(0deg); }
	15%{ opacity: 0.9; }
	100%{ opacity: 0; transform: scale(1.5) rotate(60deg); }
}

.levelup-confetti{ position: absolute; inset: 0; overflow: hidden; }
.levelup-confetti i{
	position: absolute;
	top: -5%;
	width: 7px; height: 12px;
	background: var(--gold-bright);
	opacity: 0;
	transform-origin: center;
}
.levelup-overlay.is-active .levelup-confetti i{ animation: confettiFall 1.8s ease-in forwards; }
.levelup-confetti i:nth-child(3n){ background: var(--mana-bright); }
.levelup-confetti i:nth-child(4n){ background: var(--mystic); }
.levelup-confetti i:nth-child(odd){ border-radius: 50%; width: 8px; height: 8px; }
@keyframes confettiFall{
	0%{ opacity: 0; transform: translateY(0) rotate(0deg); }
	8%{ opacity: 1; }
	100%{ opacity: 0; transform: translateY(105vh) rotate(540deg); }
}
.levelup-confetti i:nth-child(1){ left: 3%; animation-delay: .05s; }
.levelup-confetti i:nth-child(2){ left: 7%; animation-delay: .35s; }
.levelup-confetti i:nth-child(3){ left: 11%; animation-delay: .15s; }
.levelup-confetti i:nth-child(4){ left: 15%; animation-delay: .55s; }
.levelup-confetti i:nth-child(5){ left: 19%; animation-delay: .25s; }
.levelup-confetti i:nth-child(6){ left: 23%; animation-delay: .65s; }
.levelup-confetti i:nth-child(7){ left: 27%; animation-delay: .1s; }
.levelup-confetti i:nth-child(8){ left: 31%; animation-delay: .45s; }
.levelup-confetti i:nth-child(9){ left: 35%; animation-delay: .3s; }
.levelup-confetti i:nth-child(10){ left: 39%; animation-delay: .6s; }
.levelup-confetti i:nth-child(11){ left: 43%; animation-delay: .2s; }
.levelup-confetti i:nth-child(12){ left: 47%; animation-delay: .5s; }
.levelup-confetti i:nth-child(13){ left: 51%; animation-delay: .08s; }
.levelup-confetti i:nth-child(14){ left: 55%; animation-delay: .4s; }
.levelup-confetti i:nth-child(15){ left: 59%; animation-delay: .22s; }
.levelup-confetti i:nth-child(16){ left: 63%; animation-delay: .58s; }
.levelup-confetti i:nth-child(17){ left: 67%; animation-delay: .12s; }
.levelup-confetti i:nth-child(18){ left: 71%; animation-delay: .48s; }
.levelup-confetti i:nth-child(19){ left: 75%; animation-delay: .33s; }
.levelup-confetti i:nth-child(20){ left: 79%; animation-delay: .63s; }
.levelup-confetti i:nth-child(21){ left: 83%; animation-delay: .18s; }
.levelup-confetti i:nth-child(22){ left: 87%; animation-delay: .53s; }
.levelup-confetti i:nth-child(23){ left: 91%; animation-delay: .28s; }
.levelup-confetti i:nth-child(24){ left: 95%; animation-delay: .68s; }
.levelup-confetti i:nth-child(25){ left: 5%; animation-delay: .38s; }
.levelup-confetti i:nth-child(26){ left: 17%; animation-delay: .13s; }
.levelup-confetti i:nth-child(27){ left: 33%; animation-delay: .43s; }
.levelup-confetti i:nth-child(28){ left: 61%; animation-delay: .27s; }
.levelup-confetti i:nth-child(29){ left: 77%; animation-delay: .57s; }
.levelup-confetti i:nth-child(30){ left: 97%; animation-delay: .07s; }

.levelup-text{
	position: relative;
	text-align: center;
}
.levelup-headline{
	display: block;
	font-family: Georgia, serif;
	font-weight: 900;
	font-size: clamp(2.6em, 9vw, 5.5em);
	letter-spacing: 0.06em;
	background: linear-gradient(180deg, #fff, var(--gold-bright) 55%, var(--gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 26px rgba(255,216,118,0.75)) drop-shadow(0 6px 0 rgba(0,0,0,0.4));
	transform: scale(0.2);
	opacity: 0;
}
.levelup-overlay.is-active .levelup-headline{ animation: levelupText .7s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes levelupText{
	0%{ transform: scale(0.2); opacity: 0; }
	60%{ transform: scale(1.15); opacity: 1; }
	80%{ transform: scale(0.94); }
	100%{ transform: scale(1); opacity: 1; }
}
.levelup-sub{
	display: block;
	margin-top: 10px;
	font-size: clamp(1em, 2.4vw, 1.3em);
	color: var(--mana-bright);
	text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 16px rgba(94,203,240,0.4);
	opacity: 0;
	transform: translateY(10px);
}
.levelup-overlay.is-active .levelup-sub{ animation: levelupSub .6s ease .35s forwards; }
@keyframes levelupSub{
	to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px){
	.levelup-rays{ width: 100vw; height: 100vw; }
}

/* ===== Our Worlds section ===== */
.worlds-section{
	position: relative;
	text-align: center;
	margin: 34px 0 30px;
	padding: 28px 16px;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.worlds-heading{
	font-family: Georgia, serif;
	color: var(--gold-bright);
	text-shadow: 0 0 16px rgba(224,177,74,0.35);
	margin: 0 0 6px;
}
.worlds-subheading{
	color: var(--ink-dim);
	margin: 0 0 22px;
	font-style: italic;
}
.worlds-grid{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.world-card{
	position: relative;
	background: var(--panel-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 22px 28px;
	min-width: 200px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.world-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.5);
}
.world-badge{
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.world-name{
	font-family: Georgia, serif;
	font-size: 1.4em;
	margin: 0 0 8px;
	color: var(--ink);
}
.world-desc{
	color: var(--ink-dim);
	font-size: 0.9em;
	margin: 0;
}
.world-high{ border-color: rgba(255,107,107,0.4); }
.world-high:hover{ border-color: var(--danger); }
.world-high .world-badge{ background: rgba(255,107,107,0.15); color: var(--danger); border: 1px solid rgba(255,107,107,0.4); }
.world-mid{ border-color: rgba(224,177,74,0.4); }
.world-mid:hover{ border-color: var(--gold-bright); }
.world-mid .world-badge{ background: rgba(255,216,118,0.15); color: var(--gold-bright); border: 1px solid rgba(255,216,118,0.4); }
.world-low{ border-color: rgba(94,203,240,0.4); }
.world-low:hover{ border-color: var(--mana); }
.world-low .world-badge{ background: rgba(94,203,240,0.15); color: var(--mana); border: 1px solid rgba(94,203,240,0.4); }

@media (max-width: 600px){
	.world-card{ min-width: 140px; padding: 16px 18px; }
}

/* ===== World tabs (Server Info / Server Status) ===== */
.world-tabs{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 20px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}
.world-tab-btn{
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	background: var(--panel-soft);
	color: var(--ink-dim);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	padding: 8px 18px;
	cursor: pointer;
	transition: all .15s ease;
}
.world-tab-btn:hover{ color: var(--ink); border-color: var(--gold); }
.world-tab-btn.active{
	background: rgba(224,177,74,0.15);
	color: var(--gold-bright);
	border-color: var(--gold-bright);
	box-shadow: 0 0 12px rgba(224,177,74,0.25);
}
.world-tab-panel{ display: none; }
.world-tab-panel.active{ display: block; }

/* ===== World description box (login/register server dropdown) ===== */
.world-desc-box{
	margin-top: 8px;
	padding: 10px 14px;
	background: var(--panel-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	font-size: 0.88em;
	color: var(--ink-dim);
	max-width: 380px;
	word-wrap: break-word;
	white-space: normal;
}

/* ===== Global world switcher (header) ===== */
.world-switcher{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.world-switcher-label{
	color: var(--ink-dim);
	font-size: 0.8em;
	margin-right: 2px;
}
.world-switcher-btn{
	font-size: 0.82em;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--panel-soft);
	color: var(--ink-dim);
	border: 1px solid var(--panel-border);
	text-decoration: none;
	transition: all .15s ease;
}
.world-switcher-btn:hover{ color: var(--ink); border-color: var(--gold); }
.world-switcher-btn.active{
	background: rgba(224,177,74,0.18);
	color: var(--gold-bright);
	border-color: var(--gold-bright);
}
@media (max-width: 700px){
	.world-switcher{ order: 3; width: 100%; justify-content: center; margin-top: 8px; }
}

/* ===== Search form field grid (Item/Mob Database etc.) ===== */
.search-form p{
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	align-items: center;
	margin: 0 0 14px;
}
.search-form .ff{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.search-form .ff label{
	min-width: auto !important;
	margin: 0 !important;
	white-space: nowrap;
}
.search-form input[type=submit], .search-form input[type=button]{
	margin-top: 4px;
}

/* Quick-stat icon row (Bounty-style) */
.quick-stat-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin:18px 0 8px; }
.quick-stat{ display:flex; flex-direction:column; align-items:center; min-width:90px; }
.quick-stat-icon{ font-size:1.6em; line-height:1; margin-bottom:4px; }
.quick-stat-label{ font-size:0.72em; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); }
.quick-stat-value{ font-weight:700; font-size:1.05em; color:var(--gold-bright); }

/* Weekly activity strip (Midgard-style) */
.weekly-activity{ display:flex; justify-content:center; gap:36px; margin:18px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.weekly-activity-item{ display:flex; flex-direction:column; align-items:center; }
.weekly-activity-value{ font-weight:700; font-size:1.3em; }
.weekly-activity-label{ font-size:0.75em; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.05em; }

/* Hall of Fame (Midgard-style) */
.hall-of-fame{ margin-top:10px; }
.hof-heading{ text-align:center; margin-bottom:14px; }
.hof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hof-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px 10px; background:var(--panel-soft); border:1px solid var(--panel-border); border-radius:var(--radius-sm); }
.hof-title{ font-size:0.72em; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); margin-bottom:6px; }
.hof-name{ font-weight:700; font-size:1.1em; color:var(--gold-bright); }
.hof-sub{ font-size:0.82em; color:var(--ink-dim); margin-top:2px; }
@media (max-width: 640px){
	.hof-grid{ grid-template-columns:1fr; }
	.quick-stat-row{ gap:16px; }
	.weekly-activity{ gap:20px; }
}

/* ---------------------------------------------------------
   Mobile fix (2026-10-27): a wide table no longer stretches the whole page.
   The grid column and <main> may shrink below their content; wide tables scroll inside the panel.
   --------------------------------------------------------- */
.app-shell{ grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.app-main{ min-width: 0; }
@media (max-width: 980px){
	.app-shell{ grid-template-columns: minmax(0, 1fr); }
}
.content-panel{ max-width: 100%; }
@media (max-width: 980px){
	.content-panel table.vertical-table,
	.content-panel table.generic-form-table,
	.content-panel table#server_status{
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------------------------------------------------------
   Mobile background fix (2026-10-27): on phones the world art was drawn at 130-260% width and
   no-repeat, which left a bright strip of picture floating across the text, and the 40-50 s
   background animation forced a full repaint every frame. Phones now get the art once, at the
   top of the page, fading into the dark base, with no animation. Desktop is untouched.
   --------------------------------------------------------- */
@media (max-width: 780px){
	body.world-thrymora, body.world-draevor, body.world-aelgard{
		animation: none !important;
		background-attachment: scroll !important;
		background-repeat: no-repeat !important;
		background-position: center top, center top, center top !important;
		background-size: 100% calc(75vw + 3px), 100% calc(75vw + 3px), 100% auto !important;
	}
	body.world-thrymora{
		background-image:
			linear-gradient(180deg, rgba(14,4,2,0) 30%, #0e0402 100%),
			linear-gradient(180deg, rgba(10,3,1,0.35), rgba(10,3,1,0.55)),
			url('../img/hero/thrymora-bg.jpg') !important;
	}
	body.world-draevor{
		background-image:
			linear-gradient(180deg, rgba(8,7,20,0) 30%, var(--bg-deep) 100%),
			linear-gradient(180deg, rgba(10,10,25,0.40), rgba(8,7,20,0.60)),
			url('../img/hero/draevor-bg.jpg') !important;
	}
	body.world-aelgard{
		background-image:
			linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--bg-deep) 100%),
			linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.50)),
			url('../img/hero/aelgard-bg.jpg') !important;
	}
}

/* Forms on phones: label above field instead of a two-column table that scrolls sideways */
@media (max-width: 600px){
	.content-panel table.generic-form-table,
	.content-panel table.generic-form-table > tbody,
	.content-panel table.generic-form-table > tbody > tr,
	.content-panel table.generic-form-table > tbody > tr > th,
	.content-panel table.generic-form-table > tbody > tr > td{
		display: block;
		width: 100%;
		max-width: 100%;
		white-space: normal;
	}
	.content-panel table.generic-form-table > tbody > tr > th{ padding-bottom: 2px; background: none; border: 0; }
	.content-panel table.generic-form-table input[type=text],
	.content-panel table.generic-form-table input[type=password],
	.content-panel table.generic-form-table input[type=email],
	.content-panel table.generic-form-table select{ max-width: 100%; }
}

/* Brand mark (inline SVG, 2026-10-27): follows each world's colours through the CSS variables. */
.site-topbar svg#logo{ width: 46px; height: 46px; flex: 0 0 auto; filter: drop-shadow(0 0 8px rgba(255,255,255,0.12)) drop-shadow(0 0 10px var(--panel-border)); }
.site-topbar svg#logo.logo-admin{ filter: hue-rotate(-40deg) saturate(1.4) drop-shadow(0 0 8px rgba(255,60,60,0.45)); }
@media (max-width: 600px){ .site-topbar svg#logo{ width: 40px; height: 40px; } }