/* ==========================================================================
   Myth of Soma: modern theme
   Loaded after main.css and responsive.css, from includes/analytics.html.
   Remove that one <link> to return to the old look.

   !important appears only where main.css or responsive.css already use it,
   or where a per-element #id rule has to be neutralised across many titles.
   ========================================================================== */

:root {
	/* Sampled from the hero art */
	--black: #000;
	--panel: #0b0706;
	--panel-raised: #150d0a;
	--blood: #8e130e;
	--blood-deep: #4c0a07;
	--ember: #d6401a;
	--molten: #f08a2c;
	--bronze: #8a6a3e;
	--bronze-dim: #3b2b1d;
	--bone: #eadfc8;
	--parchment: #e3bf97;
	--muted: #c4b6a2;
	--gold: #e3ad52;
	--human: #6f9fd8;
	--devil: #d8392b;
	--online: #58c46c;

	--font-display: 'Cinzel', 'Palatino Linotype', Georgia, serif;
	--font-text: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

	/* The hero art is sized from this; every hero height follows it. */
	--hero-w: clamp(937px, 75vw, 1500px);
	--hero-h: calc(var(--hero-w) * .384);
	--hero-y: calc(var(--hero-w) * -.085); /* Inner pages crop the empty sky above the logo. */
	--gutter: clamp(12px, 2vw, 32px);
	--chamfer: 12px;

	/* Original vector button art: bevelled bronze frame, dark gap, lit inner line, plate. */
	--btn-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a3241a'/%3E%3Cstop offset='.5' stop-color='%237d1610'/%3E%3Cstop offset='1' stop-color='%23540c08'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 120,0 114.5,5.5 5.5,5.5' fill='%23f3dfb2'/%3E%3Cpolygon points='120,0 120,60 114.5,54.5 114.5,5.5' fill='%2394733f'/%3E%3Cpolygon points='120,60 0,60 5.5,54.5 114.5,54.5' fill='%233f2d19'/%3E%3Cpolygon points='0,60 0,0 5.5,5.5 5.5,54.5' fill='%23c39e64'/%3E%3Cpolygon points='5.5,5.5 114.5,5.5 114.5,54.5 5.5,54.5' fill='%23120504'/%3E%3Cpolygon points='7.5,7.5 112.5,7.5 112.5,52.5 7.5,52.5' fill='%232a0d09'/%3E%3Cpolygon points='9,9 111,9 111,51 9,51' fill='%23e2452f'/%3E%3Cpolygon points='10.5,10.5 109.5,10.5 109.5,49.5 10.5,49.5' fill='url(%23p)'/%3E%3Cpolyline points='10.5,49.5 10.5,10.5 109.5,10.5' fill='none' stroke='%23ff9a78' stroke-opacity='.55' stroke-width='.8'/%3E%3C/svg%3E");
	--btn-red-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d43a28'/%3E%3Cstop offset='.5' stop-color='%23ac2318'/%3E%3Cstop offset='1' stop-color='%237a120c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 120,0 114.5,5.5 5.5,5.5' fill='%23f3dfb2'/%3E%3Cpolygon points='120,0 120,60 114.5,54.5 114.5,5.5' fill='%2394733f'/%3E%3Cpolygon points='120,60 0,60 5.5,54.5 114.5,54.5' fill='%233f2d19'/%3E%3Cpolygon points='0,60 0,0 5.5,5.5 5.5,54.5' fill='%23c39e64'/%3E%3Cpolygon points='5.5,5.5 114.5,5.5 114.5,54.5 5.5,54.5' fill='%23120504'/%3E%3Cpolygon points='7.5,7.5 112.5,7.5 112.5,52.5 7.5,52.5' fill='%232a0d09'/%3E%3Cpolygon points='9,9 111,9 111,51 9,51' fill='%23ff6a48'/%3E%3Cpolygon points='10.5,10.5 109.5,10.5 109.5,49.5 10.5,49.5' fill='url(%23p)'/%3E%3Cpolyline points='10.5,49.5 10.5,10.5 109.5,10.5' fill='none' stroke='%23ffc4a8' stroke-opacity='.55' stroke-width='.8'/%3E%3C/svg%3E");
	--btn-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233a2a20'/%3E%3Cstop offset='.5' stop-color='%23241813'/%3E%3Cstop offset='1' stop-color='%23160e0b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 120,0 114.5,5.5 5.5,5.5' fill='%23f3dfb2'/%3E%3Cpolygon points='120,0 120,60 114.5,54.5 114.5,5.5' fill='%2394733f'/%3E%3Cpolygon points='120,60 0,60 5.5,54.5 114.5,54.5' fill='%233f2d19'/%3E%3Cpolygon points='0,60 0,0 5.5,5.5 5.5,54.5' fill='%23c39e64'/%3E%3Cpolygon points='5.5,5.5 114.5,5.5 114.5,54.5 5.5,54.5' fill='%23120504'/%3E%3Cpolygon points='7.5,7.5 112.5,7.5 112.5,52.5 7.5,52.5' fill='%232a0d09'/%3E%3Cpolygon points='9,9 111,9 111,51 9,51' fill='%23a57c45'/%3E%3Cpolygon points='10.5,10.5 109.5,10.5 109.5,49.5 10.5,49.5' fill='url(%23p)'/%3E%3Cpolyline points='10.5,49.5 10.5,10.5 109.5,10.5' fill='none' stroke='%23e6c48e' stroke-opacity='.55' stroke-width='.8'/%3E%3C/svg%3E");
	--btn-dark-hot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23574032'/%3E%3Cstop offset='.5' stop-color='%2337261d'/%3E%3Cstop offset='1' stop-color='%2322160f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 120,0 114.5,5.5 5.5,5.5' fill='%23f3dfb2'/%3E%3Cpolygon points='120,0 120,60 114.5,54.5 114.5,5.5' fill='%2394733f'/%3E%3Cpolygon points='120,60 0,60 5.5,54.5 114.5,54.5' fill='%233f2d19'/%3E%3Cpolygon points='0,60 0,0 5.5,5.5 5.5,54.5' fill='%23c39e64'/%3E%3Cpolygon points='5.5,5.5 114.5,5.5 114.5,54.5 5.5,54.5' fill='%23120504'/%3E%3Cpolygon points='7.5,7.5 112.5,7.5 112.5,52.5 7.5,52.5' fill='%232a0d09'/%3E%3Cpolygon points='9,9 111,9 111,51 9,51' fill='%23e0ad66'/%3E%3Cpolygon points='10.5,10.5 109.5,10.5 109.5,49.5 10.5,49.5' fill='url(%23p)'/%3E%3Cpolyline points='10.5,49.5 10.5,10.5 109.5,10.5' fill='none' stroke='%23ffe0ac' stroke-opacity='.55' stroke-width='.8'/%3E%3C/svg%3E");
	--btn-worn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 14,1.3 33,5.3 42,0.0 58,0.0 82,2.8 94,0.0 101,1.8 114,0.7 132,0.0 149,4.8 161,1.6 170,1.2 186,1.9 209,1.5 235,1.5 247,1.4 255,0.0 270,7.0 281,1.3 294,5.7 312,5.4 329,1.9 339,0.0 354,1.3 366,1.6 374,3.5 390,2.4 400,3.9 400,0' fill='%23ff8a6a' fill-opacity='.3'/%3E%3Cpolygon points='0,40 20,40.0 33,34.3 48,35.0 60,36.7 78,40.0 96,36.0 121,40.0 134,34.2 144,40.0 156,39.2 180,33.3 197,40.0 220,38.2 240,38.4 254,33.9 262,38.5 276,34.4 298,38.8 313,38.6 326,38.5 341,39.3 358,40.0 377,40.0 386,35.9 400,39.3 400,40' fill='%231d0403' fill-opacity='.42'/%3E%3C/svg%3E");
	--btn-worn-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 21,2.8 33,0.0 54,0.0 80,0.0 92,7.8 112,0.7 120,0.0 145,0.0 164,0.0 177,1.8 197,0.0 210,4.3 218,1.8 225,3.7 244,5.2 258,5.4 268,0.0 293,1.9 306,2.4 315,0.8 322,0.0 346,1.5 365,1.7 374,0.7 400,0.0 400,0' fill='%23d9b98a' fill-opacity='.3'/%3E%3Cpolygon points='0,40 24,39.1 49,40.0 68,38.7 91,40.0 114,40.0 124,36.9 143,38.0 168,40.0 194,37.6 204,38.6 219,36.3 235,38.7 243,40.0 267,35.2 281,40.0 295,40.0 314,36.1 338,37.4 354,39.1 369,40.0 381,38.0 391,39.4 399,34.5 400,38.3 400,40' fill='%23000000' fill-opacity='.42'/%3E%3C/svg%3E");
	/* Vector corner brackets: sharp at any screen density. */
	--c-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate%280 0%29' fill='none' stroke='%23c9a25f'%3E%3Cpath d='M.5 33V.5H33'/%3E%3Cpath d='M6.5 20V6.5H20' stroke-opacity='.45'/%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' transform='translate%280 0%29' fill='%23c9a25f' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--c-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate%2834 0%29 scale%28-1 1%29' fill='none' stroke='%23c9a25f'%3E%3Cpath d='M.5 33V.5H33'/%3E%3Cpath d='M6.5 20V6.5H20' stroke-opacity='.45'/%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' transform='translate%280 0%29' fill='%23c9a25f' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--c-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate%280 34%29 scale%281 -1%29' fill='none' stroke='%23c9a25f'%3E%3Cpath d='M.5 33V.5H33'/%3E%3Cpath d='M6.5 20V6.5H20' stroke-opacity='.45'/%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' transform='translate%280 0%29' fill='%23c9a25f' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
	--c-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg transform='translate%2834 34%29 scale%28-1 -1%29' fill='none' stroke='%23c9a25f'%3E%3Cpath d='M.5 33V.5H33'/%3E%3Cpath d='M6.5 20V6.5H20' stroke-opacity='.45'/%3E%3Cpath d='M3.5 0L7 3.5 3.5 7 0 3.5z' transform='translate%280 0%29' fill='%23c9a25f' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { background: var(--black); -webkit-text-size-adjust: 100%; }

body {
	background:
		linear-gradient(90deg, var(--black), transparent 16%, transparent 84%, var(--black)) center var(--hero-y) / var(--hero-w) var(--hero-h) no-repeat,
		url(../images/bg_soma_logo.jpg) center var(--hero-y) / var(--hero-w) auto no-repeat,
		var(--black);
	color: var(--parchment);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
}

body:has(#mainhead.is-home) { --hero-y: 0px; }

/* Inner pages use a compact banner so content starts high up. */
@media (min-width: 601px) {
	body:not(:has(#mainhead.is-home)) {
		--hero-w: clamp(640px, 46vw, 860px);
		--hero-h: calc(var(--hero-w) * .384);
		--hero-y: calc(var(--hero-w) * -.085);
	}
}

a { color: var(--gold); transition: color .15s; }
a:hover { color: var(--molten); }

:focus-visible { outline: 2px solid var(--molten); outline-offset: 2px; }

img { max-width: 100%; }
iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

#mainhead {
	height: calc(var(--hero-w) * .2) !important;
	width: 100%;
	overflow: hidden;
}

#mainhead.is-home { height: max(calc(var(--hero-w) * .265 + 90px), calc(var(--hero-w) * .33)) !important; }

/* Embers rise off the fire behind the silhouette. The only ambient motion on the site. */
#mainhead.is-home::before {
	content: '';
	position: absolute;
	inset: 25% 25% 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle, var(--molten) 0 1.5px, transparent 2.5px),
		radial-gradient(circle, var(--ember) 0 1px, transparent 2px),
		radial-gradient(circle, var(--molten) 0 1px, transparent 2px);
	background-size: 210px 260px, 140px 190px, 320px 300px;
	background-position: 30px 40px, 90px 120px, 170px 10px;
	-webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
	mask-image: radial-gradient(closest-side, #000 30%, transparent);
	animation: embers 16s linear infinite;
}

@keyframes embers {
	from { transform: translateY(40px); opacity: 0; }
	15% { opacity: .85; }
	80% { opacity: .55; }
	to { transform: translateY(-90px); opacity: 0; }
}

/* Sized and placed so the video's logo sits exactly on the logo in the still art.
   Its faded edges reveal that still, so the two read as one image. */
#mainhead .hero-video {
	position: absolute;
	top: 0;
	left: calc(50% - var(--hero-w) * .342);
	width: calc(var(--hero-w) * .684);
	aspect-ratio: 16 / 9;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s;
	/* A soft oval for the fire, plus a narrow band that keeps the logo's tips solid. */
	-webkit-mask-image: radial-gradient(ellipse 50.5% 62% at 50% 44%, #000 34%, rgba(0, 0, 0, .55) 68%, transparent 99%), radial-gradient(ellipse 50.4% 24% at 50% 46%, #000 90%, transparent 100%);
	mask-image: radial-gradient(ellipse 50.5% 62% at 50% 44%, #000 34%, rgba(0, 0, 0, .55) 68%, transparent 99%), radial-gradient(ellipse 50.4% 24% at 50% 46%, #000 90%, transparent 100%);
}
#mainhead .hero-video.is-live { opacity: 1; }
#mainhead .hero-video video, #mainhead .hero-video canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; object-fit: cover; transform-origin: 50% 52.3%; will-change: transform; }
#mainhead .hero-video canvas { z-index: 2; }
#mainhead.has-video::before { display: none; }

/* Once the video plays, the still art fades out so the video is the only hero image. */
#mainhead .hero-blackout { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s; }
#mainhead.has-video .hero-blackout { opacity: 1; }
body:has(#mainhead.has-video) { background: #000; }
#mainhead.has-video { background: #000; }

#mainhead > a { z-index: 1; }

#mainhead .hero-intro {
	position: absolute;
	z-index: 2;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

/* Kept for search engines and screen readers; the logo is the visible heading. */
#mainhead h1 {
	position: absolute;
	top: auto;
	left: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

#mainhead .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }

/* main.css stretches every header link over the whole banner. */
#mainhead .hero-actions a { display: inline-flex; position: relative; top: auto; left: auto; text-indent: 0; flex: 0 1 340px; max-width: 100%; padding: 2px 14px 0; }

/* --------------------------------------------------------------------------
   Page grid: same three columns as the old site, fluid and wider
   -------------------------------------------------------------------------- */

#wrapper {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr) 300px;
	gap: 18px;
	align-items: stretch;
	width: min(1320px, 100% - 2 * var(--gutter));
	margin: 0 auto;
	padding-top: 0;
}

.onecol, .twocol, .threecol {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-width: 0;
}

.threecol { grid-column: 2 / -1; }

.onecoltile, .twocoltile, .threecoltile {
	flex: 1;
	float: none;
	width: auto;
	min-height: 0;
	padding: 20px;
	background:
		var(--c-tl) 5px 5px no-repeat, var(--c-tr) right 5px top 5px no-repeat,
		var(--c-bl) left 5px bottom 5px no-repeat, var(--c-br) right 5px bottom 5px no-repeat,
		radial-gradient(120% 240px at 50% 0, rgba(142, 19, 14, .13), transparent 72%),
		var(--panel);
	border-inline: 1px solid var(--bronze-dim);
}

.twocoltile, .threecoltile { padding: 26px clamp(20px, 2.4vw, 40px); display: flow-root; }

/* The old image rails become a forged bar with a centre stud. */
.onecoltiletop, .onecoltilebottom,
.twocoltiletop, .twocoltilebottom,
.threecoltiletop, .threecoltilebottom {
	position: relative;
	z-index: 2; /* Keeps the centre stud above the panel below it. */
	float: none;
	flex: none;
	width: 100%;
	height: 5px;
	margin: 0;
	background: var(--panel);
	border-block: 1px solid #c9a25f;
	border-bottom-color: #4a3722;
}

.onecoltiletop::after, .onecoltilebottom::after,
.twocoltiletop::after, .twocoltilebottom::after,
.threecoltiletop::after, .threecoltilebottom::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 13px;
	height: 13px;
	background: var(--ember);
	border: 1px solid #e0bb78;
	box-shadow: inset 0 0 0 2px var(--panel);
	transform: translate(-50%, -50%) rotate(45deg);
}

.lc, .rc { display: none; }

#pagecontent { float: none; width: auto; padding: 0; line-height: 1.6; display: flow-root; }
#pagecontent p { max-width: 78ch; }
.messageForm textarea { width: 100%; }

/* --------------------------------------------------------------------------
   Headings: the old PNG titles become live text
   -------------------------------------------------------------------------- */

.title {
	display: block;
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 12px;
	padding: 0 0 8px;
	background: none !important;
	border-bottom: 1px solid var(--bronze-dim);
	color: var(--bone);
	font: 600 17px/1.25 var(--font-display);
	text-decoration: none;
	text-transform: uppercase;
}

.title a { color: inherit; text-decoration: none; }
.title a:hover, a.title:hover { color: var(--gold); }

.title span {
	position: static;
	display: inline;
	text-indent: 0;
}

#pagecontent h1.title {
	width: auto !important;
	margin-bottom: 18px;
	font-size: clamp(30px, 3vw, 44px);
	line-height: 1.1;
	border-bottom-color: var(--bronze);
}

#pagecontent h1.title span {
	background: linear-gradient(180deg, #f6e0ae, var(--gold) 55%, #9c6a26);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

#pagecontent h2 {
	color: var(--bone);
	font: 400 clamp(23px, 2.2vw, 30px)/1.2 var(--font-display);
	letter-spacing: 0;
	padding: 8px 0;
}

#pagecontent h3 {
	color: var(--gold);
	font: 400 18px/1.3 var(--font-display);
}

.wotwInfo h2, .latestScreen h2 {
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--bronze-dim);
	color: var(--bone);
	font: 400 18px/1.25 var(--font-display);
	letter-spacing: 0;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Buttons: a scalable vector frame (border-image) with live text on top.
   --rim is the frame thickness; corners stay fixed while the edges stretch.
   -------------------------------------------------------------------------- */

.btn-css, #login .submit, a.download.title, .soma-btn, .replyButton, .bsubmit {
	--rim: 10px;
	--art: var(--btn-red);
	--art-hot: var(--btn-red-hot);
	--worn: var(--btn-worn);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	width: auto !important;
	height: auto !important;
	min-height: 46px;
	margin: 0;
	padding: 2px 16px 0;
	background: none !important;
	border-style: solid !important;
	border-width: var(--rim) !important;
	border-radius: 0;
	border-color: transparent;
	/* !important because main.css has border:none !important on .bsubmit, which also clears border-image. */
	border-image-source: var(--art) !important;
	border-image-slice: 13 fill !important;
	border-image-width: var(--rim) !important;
	border-image-repeat: stretch !important;
	box-shadow: none;
	color: #fbf3e4;
	cursor: pointer;
	font: 600 15px/1.15 var(--font-display);
	letter-spacing: .05em;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
	text-transform: uppercase;
	transition: filter .15s, transform .1s;
}

/* Crisp paint wear along the plate's top and bottom edges; the text area stays clean. */
.btn-css::after, #login .submit::after, a.download.title::after, .soma-btn::after, .replyButton::after, .bsubmit::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: -1;
	background: var(--worn) center / 100% 100% no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	pointer-events: none;
}

.btn-css:hover, #login .submit:hover, a.download.title:hover, .soma-btn:hover, .replyButton:hover, .bsubmit:hover {
	border-image-source: var(--art-hot) !important;
	color: #fff;
	filter: drop-shadow(0 0 7px rgba(240, 90, 45, .55));
}

.btn-css:active, #login .submit:active, a.download.title:active, .soma-btn:active, .replyButton:active, .bsubmit:active { transform: translateY(1px); }

.btn-css:focus-visible, #login .submit:focus-visible, a.download.title:focus-visible, .soma-btn:focus-visible, .replyButton:focus-visible, .bsubmit:focus-visible {
	border-image-source: var(--art-hot) !important;
	outline: 2px solid #ffd891;
	outline-offset: 2px;
}

.btn-css.ghost, .soma-btn.secondary, .replyButton.active {
	--art: var(--btn-dark);
	--art-hot: var(--btn-dark-hot);
	--worn: var(--btn-worn-dark);
}

.bsubmit { padding: 2px 22px 0 !important; }

.btn-css.large { --rim: 11px; min-height: 56px; padding: 2px 22px 0; font-size: 18px; }

.soma-btn { --rim: 7px; min-height: 36px; padding: 1px 12px 0; font-size: 12px; }
.soma-btn.large { --rim: 10px; min-height: 46px; padding: 2px 16px 0; font-size: 15px; }
.soma-btn + .soma-btn { margin-left: 6px; }

a.download.title { --rim: 11px; display: flex; width: 100% !important; min-height: 60px; margin: 14px 0 22px; padding-bottom: 0; font-size: 18px; }

/* The old .download rule also hit the nav link and hid it on phones. */
#mainnav .download { display: block !important; width: auto; height: auto; margin: 0; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type=text], input[type=email], input[type=password], input[type=search],
textarea, select,
#newpost input[type=text], #newpost textarea,
.messageForm .input, .forum-nav .forum-small-search input {
	background: #070403;
	border: 1px solid var(--bronze-dim);
	border-radius: 0;
	color: var(--bone);
	font: 400 16px/1.4 var(--font-text);
	padding: 8px 10px;
}

input:focus, textarea:focus, select:focus { border-color: var(--molten); outline: 1px solid var(--molten); outline-offset: 0; }

#forgotpw, #register { display: block; width: min(440px, 100%); margin-top: 14px; padding: 18px 20px; float: none; }
#forgotpw label, #forgotpw input:not([type=checkbox]), #register label, #register input:not([type=checkbox]), #register-agreement { float: none; display: block; width: 100%; }
#forgotpw input, #register input { height: 42px; margin-bottom: 10px; border-color: var(--bronze-dim); }
#forgotpw .bsubmit, #register .btn-css { margin-top: 8px; }
#register input.formError, .formError { border-color: var(--ember); }

.regerror, .regsuccess { float: none; width: 100%; padding: 10px 12px; color: var(--bone); border-radius: 0; }
.regerror:empty, .regsuccess:empty { display: none; }
.regerror { background: var(--blood-deep); border: 1px solid var(--ember); }
.regsuccess { background: #123317; border: 1px solid var(--online); }

/* --------------------------------------------------------------------------
   Login panel
   -------------------------------------------------------------------------- */

#login { float: none; padding: 0; color: var(--parchment); }
#login a { color: var(--gold); }
#login .error { float: none; color: #ff8c7a; line-height: 1.3; }
#login .error:empty { display: none; }

#login .formSection { float: none; width: 100%; height: 44px; margin-bottom: 8px; }
#login .formSection input {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var(--bronze-dim);
	color: var(--bone);
	font-size: 16px;
}
#login .formSection input:focus { border-color: var(--molten); }
#login .formSection .active { background: #070403; }
#login .formSection label {
	width: 100%;
	height: 44px;
	padding: 0 11px;
	border: 1px solid transparent;
	background: #070403;
	color: var(--muted);
	font-size: 16px;
	line-height: 42px;
}

#login input[type=checkbox] { width: 18px; height: 18px; margin: 0 8px 0 0; float: none; vertical-align: -3px; accent-color: var(--ember); }
#login .checkboxlabel { float: none; margin: 0; display: inline; }
#login small { font-size: 14px; line-height: 1.4; color: var(--muted); }
#login .forgot { float: none; width: auto; padding: 3px 0; color: var(--parchment); }
#login .submit { width: 100% !important; margin: 10px 0 12px; }

#login ul { margin-top: 8px; padding: 0; }
#login li { float: none; height: auto; line-height: 1.3; padding: 4px 0; }

@media (min-width: 601px) {
	/* The phone Menu buttons leave inline display styles behind; these must not hide the sidebar on a wider screen. */
	#mainnav, div#login { display: block !important; }
	form#login { display: flex !important; flex-direction: column; }
	form#login .title { order: 1; }
	form#login .error { order: 2; }
	form#login .formSection { order: 3; }
	form#login .remember { order: 4; }
	form#login .submit { order: 5; }
	form#login small { order: 6; }
	form#login .forgot { order: 7; }
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

#mainnav { float: none; margin-top: 22px; }
#mainnav ul { float: none; padding: 0; }
#mainnav li { float: none; width: auto; height: auto; line-height: 1.3; }
#mainnav li a {
	float: none;
	display: block;
	width: auto;
	height: auto;
	padding: 8px 12px 8px 26px;
	border-bottom: 1px solid rgba(138, 106, 62, .14);
	color: var(--parchment);
	font-size: 16px;
	-webkit-transition: none;
	transition: color .15s, background-color .15s;
}
#mainnav li a:hover { color: var(--molten); background-color: rgba(214, 64, 26, .08); }

#mainnav .parent {
	width: auto;
	height: auto;
	padding: 0;
	background: none;
	margin-top: 6px;
}
#mainnav .parent:first-child { margin-top: 0; }

#mainnav .parent a {
	position: relative;
	width: auto;
	padding: 11px 14px 11px 34px;
	background: var(--panel-raised) !important;
	border: 1px solid var(--bronze-dim);
	color: var(--bone);
	font: 400 16px/1.2 var(--font-display);
	text-transform: uppercase;
}
#mainnav .parent a::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: var(--bronze);
	transform: rotate(45deg);
	transition: background-color .15s, box-shadow .15s;
}
#mainnav .parent a:hover { background: #5e0d08 !important; border-color: var(--bronze); color: #fff; }
#mainnav .parent a:hover::before { background: var(--molten); box-shadow: 0 0 8px var(--molten); }
#mainnav .parent span { position: static; text-indent: 0; display: inline; }

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */

#homenews { float: none; padding: 0; color: var(--parchment); line-height: 1.6; }
#homenews .newsarticles,
#news .newsarticles {
	float: none;
	left: 0;
	width: auto;
	padding: 20px 0;
	background: none;
	border-bottom: 1px solid var(--bronze-dim);
	color: var(--parchment);
	display: flow-root;
}
#homenews .newsarticles h2,
#news .newsarticles h2 {
	padding: 0 0 4px;
	color: var(--bone);
	font: 400 clamp(23px, 2vw, 28px)/1.2 var(--font-display);
	letter-spacing: 0;
}
#homenews .newsarticles h2 a, #news .newsarticles h2 a { color: var(--bone); }
#homenews .newsarticles h2 a:hover, #news .newsarticles h2 a:hover { color: var(--gold); text-decoration: none; }
#homenews .newsarticles .author, #news .newsarticles .author { float: none; color: var(--muted); font-size: 14px; padding-bottom: 10px; }
#homenews .newsarticles .author a, #news .newsarticles .author a { color: var(--gold); }

#homenews .newsarticles .newscontent, #news .newsarticles .newscontent { float: none; display: flex; gap: 16px; align-items: flex-start; }
#homenews .newsarticles .newscontent .imglink, #news .newsarticles .newscontent .imglink { flex: none; float: none; width: 90px; height: 90px; padding: 0; }
#homenews .newsarticles .newscontent img, #news .newsarticles .newscontent img { float: none; display: block; width: 90px; height: 90px; padding: 0; border: 1px solid var(--bronze); border-radius: 0; box-shadow: none; object-fit: cover; }
#homenews .newsarticles .newscontent .imglink:hover img, #news .newsarticles .newscontent .imglink:hover img { border-color: var(--molten); }
#homenews .newsarticles .newscontent div, #news .newsarticles .newscontent div { flex: 1; float: none; width: auto; min-width: 0; max-width: 68ch; }
#homenews .newsarticles .newscontent div a, #news .newsarticles .newscontent div a { color: var(--gold); }

.more-news { display: flex; justify-content: center; margin: 22px 0; }
.discord-embed { margin: 20px 0 4px; }
.discord-embed iframe { display: block; width: 100%; height: 300px; border: 1px solid var(--bronze-dim); }

#news { float: none; width: auto; }

.newsarticle, #newsshare, #newscomments, #chatpanel, #chatform,
#newscomments .comment, #newscomments .comment #postnewscomment,
.pMessageFull, #pagecontent .pMessage {
	float: none;
	width: 100%;
	display: flow-root;
	background: rgba(0, 0, 0, .28);
	border-radius: 0;
	box-shadow: none;
	color: var(--parchment);
	font-size: inherit;
}
.newsarticle { padding: 20px; border: 0; border-bottom: 1px solid var(--bronze-dim); }
.newsarticle h2 { color: var(--bone); font: 400 clamp(28px, 3vw, 38px)/1.15 var(--font-display); letter-spacing: 0; }
.newsarticle .author { float: none; color: var(--muted) !important; }
.newsarticle .newscontent { float: none; width: auto; max-width: 74ch; }
.newsarticle .newscontent img { max-width: 100%; height: auto; }

#newscomments { padding-top: 8px; background: none; }
#newscomments .comment { margin-top: 6px; padding: 14px; }
#newscomments .comment .commentcontent { float: none; width: auto; margin-left: 74px; min-height: 40px; text-shadow: none; }
#newscomments .comment div .playerlink, #chatpanel .playerlink { color: var(--gold) !important; }
#newscomments .comment #postnewscomment { padding: 0; background: none; color: var(--parchment); }
#newscomments .comment #postnewscomment textarea { width: 100%; min-height: 90px; font-size: 16px; color: var(--bone); background: #070403; border-color: var(--bronze-dim); border-radius: 0; font-family: var(--font-text); }

/* Post buttons that follow a textarea sit on their own line. */
#postnewscomment .btn-css, #playercomments form .btn-css, .messageForm .btn-css { float: none; margin-top: 10px; }

/* --------------------------------------------------------------------------
   Right column
   -------------------------------------------------------------------------- */

#serverstatus {
	float: none;
	width: auto;
	height: auto;
	margin: 0 0 4px;
	background: none;
}

.server-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 9px 12px;
	background: rgba(0, 0, 0, .4);
	border: 1px solid var(--bronze-dim);
	color: var(--bone);
	font: 400 15px/1.2 var(--font-display);
	text-transform: uppercase;
}
.server-state::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--muted);
}
.server-online::before { background: var(--online); box-shadow: 0 0 9px var(--online); }
.server-offline::before { background: var(--devil); box-shadow: 0 0 9px var(--devil); }

.wotwInfo { float: none; padding-bottom: 22px; }
#wotwinfolist { float: none; }
#wotwinfolist li {
	float: none;
	width: auto;
	padding: 4px 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	color: var(--parchment);
}
#wotwinfolist strong { color: var(--bone); font-weight: 500; }

#wotwinfolist li.war-side { display: grid; grid-template-columns: 56px 1fr 44px; gap: 8px; align-items: center; margin-top: 6px; }
.war-side b { font-weight: 500; }
.war-side i { font-style: normal; text-align: right; color: var(--bone); }
.war-bar { display: block; height: 10px; background: #070403; border: 1px solid var(--bronze-dim); }
.war-bar span { display: block; height: 100%; }
.war-human .war-bar span { background: var(--human); }
.war-devil .war-bar span { background: var(--devil); }

#playerfeedlist, #playerfeedlisthis { float: none; width: 100%; }
#playerfeedlist li, #playerfeedlisthis li {
	float: none;
	width: auto;
	margin: 0;
	padding: 8px 0;
	background: none;
	border-radius: 0;
	border-top: 0;
	border-bottom: 1px solid rgba(138, 106, 62, .16);
	box-shadow: none;
	color: var(--parchment);
}
#playerfeedlist li .feeditem, #playerfeedlisthis li .feeditem {
	float: none;
	width: auto;
	height: auto;
	padding: 0 0 0 42px;
	background-position: 0 3px;
	line-height: 1.4;
	font-size: 15px;
}
#playerfeedlist li a, #playerfeedlisthis li a { color: var(--gold); }

.latestScreen { float: none; padding: 22px 0 0; }
.latestScreen .galimage { float: none; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.latestScreen .galimage img { display: block; width: 100%; padding: 0 !important; border: 1px solid var(--bronze-dim); border-radius: 0; }
.latestScreen .galimage:hover { background: none; color: inherit; }
.latestScreen .galimage:hover a { color: var(--molten); }
.latestScreen .galimage span { font-size: 14px; }
.latestScreen .galimage span a, .latestScreen .galimage:hover span a { color: var(--gold); }

/* --------------------------------------------------------------------------
   Forum, tables and listings
   -------------------------------------------------------------------------- */

.forum-table thead th { color: var(--muted); font: 400 14px/1.2 var(--font-display); }
.forum-table tbody tr td { background: rgba(0, 0, 0, .3); border-bottom: 1px solid var(--bronze-dim); color: var(--parchment); padding: 14px 12px; }
.forum-table tbody tr:hover td { background: rgba(142, 19, 14, .16); }
.forum-table tbody td h4 { color: var(--bone); font: 400 19px/1.25 var(--font-display); }
.forum-table tbody td h4 a { color: var(--gold); text-decoration: none; }
.forum-table tbody td h4 a:hover { color: var(--molten); }
.forum-table tbody .read a { color: #b58a43; }
.forum-table tbody .thread-name { max-width: none; }
.forum-table .post-row .post-content { max-width: none; }
#pagecontent .forum-table .post-row .post-data img { max-width: 100%; }
.forum-table .post-row .post-content blockquote { border-radius: 0; border: 0; border-left: 3px solid var(--bronze); background: rgba(0, 0, 0, .3); }
.forum-nav { overflow: visible; }

.threadnav a, .galnav a, #subnav li a, #playeritemnav li a {
	background: var(--panel-raised);
	border: 1px solid var(--bronze-dim);
	border-radius: 0;
	box-shadow: none;
	color: var(--parchment) !important;
}
.threadnav a:hover, .threadnav .active, .galnav a:hover, .galnav .active,
#subnav li a:hover, #subnav .active, #playeritemnav li a:hover, #playeritemnav .active {
	background: var(--blood);
	border-color: var(--gold);
	color: var(--bone) !important;
}
.galnav { width: 100%; background: none; padding: 8px 0; }
.galnav .prev, .galnav .next { color: var(--parchment); }

/* Section art dissolves into the textured panel through a mask. */
.discover, .shop, .mage { position: relative; isolation: isolate; background: none; }
.discover::before, .shop::before, .mage::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
	width: min(694px, 100%);
	height: 500px;
	background: center top / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 55%, transparent 98%);
	mask-image: linear-gradient(90deg, transparent, #000 50%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 55%, transparent 98%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.discover::before { background-image: url(../images/bg_discover.jpg); }
.shop::before { background-image: url(../images/bg_shop.jpg); }
.mage::before { background-image: url(../images/bg_mage.jpg); }

.sectional-items { float: none; clear: both; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.sectional-items .item { float: none; width: auto; margin: 0 !important; border-radius: 0; border-color: var(--bronze-dim); background-size: cover; opacity: 1; -webkit-transition: none; transition: border-color .15s; }
.sectional-items .item .name { color: var(--bone); font-family: var(--font-display); text-shadow: 0 1px 3px #000; }
.sectional-items .item .desc { background: rgba(0, 0, 0, .65); width: auto; right: 10px; line-height: 1.25; }
.sectional-items .item:hover { border-color: var(--molten); }

.managebox { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze-dim); border-radius: 0; color: var(--parchment); }
#RandomFact { float: none; width: 100%; height: auto; background: rgba(0, 0, 0, .3); border-block: 1px solid var(--bronze-dim); color: var(--parchment); }
#RandomFact span { color: var(--bone); }

#searchform { clear: both; display: flow-root; float: none; width: 100%; height: auto; padding: 20px; background: rgba(0, 0, 0, .35); border: 1px solid var(--bronze-dim); color: var(--parchment); }
#searchform label { width: 100%; }
#searchform .searchinput { width: 100%; height: 46px; padding: 0 240px 0 12px; background: #070403; border: 1px solid var(--bronze-dim); color: var(--bone); line-height: 46px; font-size: 18px; }
#searchform #searchnav { top: 62px; right: 28px; }
#searchform #searchnav li a { background: var(--panel-raised); border-color: var(--bronze-dim); border-radius: 0; color: var(--parchment); }
#searchform #searchnav li a:hover, #searchform #searchnav .active { background: var(--blood); color: var(--bone); }
#searchform #suggestions { left: 20px; right: 20px; width: auto; background: #070403; border-color: var(--bronze-dim); }
#searchresults { float: none; width: 100%; }
#searchresults li { float: none; width: auto; display: flow-root; border-bottom-color: var(--bronze-dim); }

#guildchars, #poschars { width: 100%; background: none; color: var(--parchment); }

#playercommentslist, #playercommentslist ul { float: none; width: 100%; }
#playercommentslist ul li { float: none; width: auto; display: flow-root; background: rgba(0, 0, 0, .3); border-radius: 0; box-shadow: none; color: var(--parchment); font-size: inherit; }
#playercommentslist ul li .commentcontent { float: none; width: auto; margin-left: 70px; text-shadow: none; }

#playermodel, #monstermodel { outline: 1px solid var(--bronze-dim); }

.iteminfo { font-size: 14px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

#mainfooter {
	grid-column: 1 / -1;
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 28px;
	width: auto;
	margin-top: 10px;
	padding: 18px 0 26px;
	border-top: 1px solid var(--bronze-dim);
}
#mainfooter #sdlogo { float: none; }
#mainfooter #sharethis:not(:has(a, img, iframe)) { display: none; }
#mainfooter ul { float: none; display: flex; flex-wrap: wrap; gap: 4px 20px; width: auto; margin: 0; text-align: left; }
#mainfooter ul li { float: none; border: 0; padding: 0; }
#mainfooter ul li a { float: none; color: var(--parchment); text-decoration: none; }
#mainfooter ul li a:hover { color: var(--molten); }

.advert { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1320px) {
	#wrapper { grid-template-columns: 250px minmax(0, 1fr) 280px; }
}

@media (max-width: 1100px) {
	#wrapper { grid-template-columns: 260px minmax(0, 1fr); }
	.twocol + .onecol { grid-column: 1 / -1; }
	.twocol + .onecol .onecoltile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
	.twocol + .onecol #serverstatus, .twocol + .onecol a.download.title { grid-column: span 1; }
	.threecol { grid-column: 2; }
}

/* Same 600px switch as responsive.css, so its mobile menu keeps working. */
@media (max-width: 600px) {
	:root { --hero-w: max(405px, 75vw); --gutter: 10px; }

	body { font-size: 16px; }

	#mainhead.is-home { height: calc(var(--hero-w) * .265 + 130px) !important; }
	#mainhead .hero-intro { gap: 10px; bottom: 10px; }
	.btn-css.large { --rim: 10px; min-height: 48px; padding: 2px 14px 0; font-size: 15px; }
	#mainhead { height: calc(var(--hero-w) * .2) !important; }

	#wrapper { display: block; width: calc(100% - 2 * var(--gutter)); }

	.onecol, .twocol, .threecol { margin-top: 14px; }
	.onecoltiletop, .onecoltilebottom { display: block; }
	.onecoltile { padding: 14px; min-height: 0; }

	/* The login/nav column holds only the mobile buttons until one is tapped. */
	#wrapper > .onecol:first-child .onecoltiletop,
	#wrapper > .onecol:first-child .onecoltilebottom { display: none; }
	#wrapper > .onecol:first-child .onecoltile { padding: 0; background: none; border: 0; }
	#wrapper > .onecol:first-child #login,
	#wrapper > .onecol:first-child #mainnav { margin: 0; padding: 14px; background: var(--panel-raised); border: 1px solid var(--bronze-dim); }
	.onecoltile, .twocoltile, .threecoltile { padding-top: 24px; }
	.twocoltile, .threecoltile { padding-inline: 14px; padding-bottom: 16px; }
	.twocol + .onecol .onecoltile { display: block; }

	.mobile_nav { display: flex; gap: 6px; float: none; padding: 0; margin: 0 0 10px; }
	.mobile_nav button, .mobile_nav a {
		flex: 1;
		min-height: 44px;
		margin: 0 !important;
		padding: 8px;
		background: #420a06;
		border: 1px solid var(--bronze);
		color: var(--bone);
		font: 400 14px/1.2 var(--font-display);
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Collapsed until the Menu or My Account buttons open them. */
	#login, #mainnav { display: none; float: none; width: 100%; padding: 0; }
	form#login[style*="block"] { display: flex !important; flex-direction: column; }
	form#login .title { order: 1; }
	form#login .error { order: 2; }
	form#login .formSection { order: 3; }
	form#login .remember { order: 4; }
	form#login .submit { order: 5; }
	form#login small { order: 6; }
	form#login .forgot { order: 7; }
	#login .formSection { width: 100%; }
	#mainnav ul { padding-bottom: 0; }
	#mainnav li a { font-size: 16px; }

	#slider { display: none; }

	#homenews .newsarticles .newscontent { gap: 12px; }
	#homenews .newsarticles .newscontent .imglink, #homenews .newsarticles .newscontent img { width: 64px; height: 64px; }
	#homenews .newsarticles .newscontent div { width: auto; }

	#serverstatus { margin: 0 0 12px; }
	a.download.title { display: none; }

	.discover::before, .shop::before, .mage::before { height: 260px; }

	.forum-table tbody tr { background: rgba(0, 0, 0, .3); border: 1px solid var(--bronze-dim); }
	.forum-table tbody tr td { border: 0; background: none; padding: 0 0 4px 40px; }

	#searchform { background: rgba(0, 0, 0, .35); }
	#searchform .searchinput { background: #070403; padding-right: 12px; }

	#mainfooter { flex-direction: column; align-items: flex-start; }
	#mainfooter ul li { margin: 0; font-size: 1em; clear: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	#mainhead.is-home::before { opacity: .5; }
}