/*
	Legends theme (2026-10) for Znote AAC 1.6.
	Approved design: website-prototypes/2026-10-07/pages/home_A_v2.html (Stone headers, Night background).
	Colours live in the variables below. The background picture is layout/img/background.jpg.
*/

/* Cinzel (SIL Open Font License, layout/fonts/OFL.txt), one variable file per subset, self-hosted. */
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/cinzel-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Cinzel';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/cinzel-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* stone: menu bar and box headers */
	--stone1: #625d56;
	--stone2: #3c3935;
	--stone-edge: #1b1917;

	/* text and accents */
	--gold: #e2b45f;
	--gold2: #f6d992;
	--parch: #f1e4c4;
	--text: #d9d0c0;
	--muted: #9a9184;
	--ok: #5fd36b;
	--bad: #e0533d;

	/* surfaces */
	--page: #070606;
	--panel: rgba(14, 12, 11, .94);
	--line: #2c2622;
	--row: #221d1a;
	--field: #0b0908;
	--field-line: #4a3d30;

	/* main button */
	--btn1: #c25a1b;
	--btn2: #7a2f0c;
	--btn-line: #f0944a;

	--head-font: 'Cinzel', Georgia, 'Times New Roman', serif;
	--body-font: 'Segoe UI', Roboto, Arial, sans-serif;
	--side: 250px;
	--gap: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
	margin: 0;
	background: var(--page);
	color: var(--text);
	font: 14px/1.55 var(--body-font);
}
/* The Medivia effect: one picture pinned to the window while the page scrolls over it.
   A fixed layer instead of background-attachment: fixed, which phones ignore. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--page) url('../img/background.jpg') center top / cover no-repeat;
}
::selection { background: rgba(226, 180, 95, .35); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold2); }
ul { margin: 0; padding: 0; }
li { list-style: none; }
hr, .bighr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.small { font-size: 12px; color: var(--muted); }
.center { text-align: center; }
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix::after { content: ""; display: block; clear: both; }

/* ---------------------------------------------------------------- frame */
.wrap { width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 0 40px; }

.masthead {
	height: 230px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* a soft dark halo, so the logo stays crisp over a busy part of the picture */
	background: radial-gradient(ellipse 34% 46% at 50% 52%, rgba(4, 5, 10, .62), rgba(4, 5, 10, 0) 72%);
}
.logo {
	font-family: var(--head-font);
	font-weight: 900;
	font-size: 92px;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	background: linear-gradient(180deg, #fff4cf 0%, #f0cf86 38%, #c8913f 64%, #8a5a22 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 0 #1a0f05) drop-shadow(0 6px 18px rgba(0, 0, 0, .85));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.logo { background: none; color: var(--gold2); }
}
/* The logo as a picture (layout_config.php logo_image): the drop shadow above still applies. The
   alt text (site title) shows if the picture ever fails to load. */
.logo-img { display: block; font-size: 48px; line-height: 1.2; letter-spacing: .08em; background: none; color: var(--gold2); }
.logo-img picture, .logo-img img { display: block; }
.logo-img img { width: min(560px, 92vw); height: auto; }
.tagline {
	margin-top: 12px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--parch);
	text-shadow: 0 2px 6px #000, 0 0 14px #000;
}

nav.top {
	display: flex;
	background: linear-gradient(180deg, var(--stone1), var(--stone2));
	border: 1px solid var(--stone-edge);
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .55);
}
nav.top a {
	flex: 1;
	text-align: center;
	padding: 15px 6px 14px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--parch);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
	border-right: 1px solid rgba(0, 0, 0, .38);
	box-shadow: 1px 0 0 rgba(255, 255, 255, .06);
}
nav.top a:last-child { border-right: 0; box-shadow: none; }
nav.top a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
nav.top a.active { background: rgba(0, 0, 0, .2); color: var(--gold2); box-shadow: inset 0 -3px 0 var(--gold); }

.cols {
	display: grid;
	grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
	gap: var(--gap);
	margin-top: var(--gap);
	align-items: start;
}
.col-left { grid-column: 1; }
.content { grid-column: 2; min-width: 0; }
.col-right { grid-column: 3; }
.cols.full { grid-template-columns: minmax(0, 1fr); }
.cols.full .content { grid-column: 1; }

footer.site {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--panel);
	font-size: 12px;
	color: var(--muted);
}

/* ---------------------------------------------------------------- boxes */
.box {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 4px;
	margin-bottom: var(--gap);
	overflow: hidden;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.box-head,
.well > .header {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 12px;
	background: linear-gradient(180deg, var(--stone1), var(--stone2));
	border-bottom: 1px solid var(--stone-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
	font-family: var(--head-font);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--parch);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
	text-align: center;
	line-height: 1.3;
}
.box-head span::before,
.box-head span::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 1px;
	margin: 0 10px;
	background: var(--gold);
	opacity: .75;
	vertical-align: middle;
}
/* The side columns are narrow: shorter dashes and spacing keep "Account panel" or
   "Administration" on one line. */
.col-left .box-head, .col-right .box-head { padding: 8px 4px; letter-spacing: .16em; }
.col-left .box-head span::before, .col-left .box-head span::after,
.col-right .box-head span::before, .col-right .box-head span::after { width: 12px; margin: 0 8px; }
.box-body { padding: 12px 14px; }
.box-body.tight { padding: 4px 0; }
.box-foot { padding: 8px 14px; border-top: 1px solid var(--row); font-size: 12px; text-align: right; }
.empty { padding: 16px 14px; color: var(--muted); font-style: italic; text-align: center; }

.links a { display: block; padding: 7px 14px; border-bottom: 1px solid var(--row); color: #d5c8ad; }
.links a:last-child { border-bottom: 0; }
.links a::before { content: "\203A"; color: var(--gold); margin-right: 8px; font-weight: 700; }
.links a:hover { background: rgba(226, 180, 95, .06); color: var(--gold2); }
.links .tag { float: right; font-size: 11px; color: var(--muted); }

/* Znote's own boxes inside pages (.well / .header / .body) get the same look. */
.well { background: rgba(255, 255, 255, .02); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; overflow: hidden; }
.well > .header { min-height: 34px; font-size: 12px; letter-spacing: .16em; }
.well > .body { padding: 10px 12px; }

/* ---------------------------------------------------------------- pages */
/* Every page except the homepage sits on one panel, so text stays readable over the picture. */
.content.is-page {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 18px 20px 20px;
	margin-bottom: var(--gap);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
	overflow-x: auto;
}
.content h1 {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .04em;
	color: var(--gold2);
}
.content h1:not(:first-child) { margin-top: 24px; }
.content h2 { margin: 18px 0 8px; font-family: var(--head-font); font-weight: 700; font-size: 17px; color: var(--gold2); }
.content h3 { margin: 14px 0 6px; font-size: 15px; color: var(--parch); }
.content p { margin: 0 0 10px; }
.content img { max-width: 100%; }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--row); text-align: left; vertical-align: middle; }
th,
tr.yellow td,
tr.yellow th {
	background: rgba(0, 0, 0, .25);
	border-bottom: 1px solid var(--field-line);
	font-family: var(--head-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}
tr:nth-child(even) > td { background: rgba(255, 255, 255, .025); }
.table-hover tr:hover > td { background: rgba(226, 180, 95, .06); }
td.r, th.r { text-align: right; }
/* Long words (a folder path, a long link) wrap instead of pushing the page sideways (sweep 2026-10-12). */
.content p, .content li { overflow-wrap: break-word; }
/* Numbered steps and bullet lists in page text (the Download page). */
.content ol.steps, .content ul.bullets { margin: 6px 0 14px; padding-left: 22px; }
.content ol.steps > li { list-style: decimal; margin-bottom: 8px; }
.content ul.bullets > li { list-style: disc; margin-bottom: 6px; }
/* Sortable column names (the house list, later the wiki): a link in the table head, the active one brighter. */
th a.sort { color: inherit; white-space: nowrap; }
th a.sort:hover, th a.sort.on { color: var(--gold2); }

/* ---------------------------------------------------------------- forms */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=file],
select,
textarea,
.form-control {
	max-width: 100%;
	padding: 7px 10px;
	background: var(--field);
	border: 1px solid var(--field-line);
	border-radius: 3px;
	color: #f1e6d0;
	font: 13px var(--body-font);
}
input:focus, select:focus, textarea:focus, .form-control:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 2px rgba(226, 180, 95, .18);
}
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }
/* List-style forms (register, create character, change password, ...): every box the same width. */
.content li > input[type=text], .content li > input[type=password], .content li > input[type=email],
.content li > input[type=number], .content li > select { width: 100%; max-width: 360px; }
/* The register page's rules (2026-10-12) and its "I have read the rules" line. */
.rules ol { margin: 4px 0 12px; padding-left: 20px; }
.rules ol li { list-style: decimal; margin-bottom: 6px; }
label.agree { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
label.agree input { margin-top: 3px; }
input[type=submit],
input[type=button],
button,
.btn {
	display: inline-block;
	padding: 8px 14px;
	background: linear-gradient(#5b3a16, #3a230c);
	border: 1px solid #8a5f2a;
	border-radius: 3px;
	color: #ffe2a8;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover, button:hover, .btn:hover { filter: brightness(1.12); color: #fff; }
.btn.primary, .btn-primary { background: linear-gradient(var(--btn1), var(--btn2)); border-color: var(--btn-line); color: #fff3dc; box-shadow: 0 0 18px rgba(240, 120, 40, .25); }
.btn-success { background: linear-gradient(#2f7a3a, #1c4d24); border-color: #4caf62; color: #e8ffe9; }
.btn-warning { background: linear-gradient(#9a6b12, #5e4108); border-color: #d6a43a; color: #fff3d0; }
.btn-danger  { background: linear-gradient(#9c2b1f, #5c160f); border-color: #d9573f; color: #ffe6e0; }
.btn-info    { background: linear-gradient(#2d5f86, #1b3a54); border-color: #4f8fc0; color: #e6f3ff; }
.btn.ghost   { background: transparent; border-color: #5c4529; color: var(--gold); }
.btn.discord { background: linear-gradient(#6b77f5, #4752c4); border-color: #8e97ff; color: #fff; }
.btn.block   { display: block; width: 100%; }
/* The My account page's action buttons (round 19): one row that wraps, Log out pushed to the end. */
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 16px; }
.acct-actions .btn { padding: 7px 10px; font-size: 11px; letter-spacing: .05em; }
.acct-actions .acct-logout { margin-left: auto; background: linear-gradient(#6e2a1d, #43170f); border-color: #a5513c; color: #ffe2a8; }
.acct-admin { margin-top: -6px; padding-top: 10px; border-top: 1px solid var(--row); }
.acct-admin .btn { padding: 6px 10px; font-size: 11px; }
.acct-admin-label { width: 100%; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* The side box's Log out button next to "Logged in as". */
.ma-who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btn.small-btn { padding: 4px 9px; font-size: 10px; }

/* One error box for every form (engine/function/general.php output_errors()). */
.errors {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: rgba(120, 30, 20, .18);
	border: 1px solid #7a2a1f;
	border-left: 4px solid var(--bad);
	border-radius: 3px;
	color: #ff8a78; /* red and a little bigger (the owner, 2026-10-14): an error must not be missed */
	font-size: 1.05em;
	font-weight: 400;
}
.errors strong { display: block; margin-bottom: 4px; color: #ffb4a6; font-weight: 700; }
.errors ul { margin: 0; padding-left: 18px; }
.errors li { list-style: disc; margin: 2px 0; }

/* Notice (gold) and success (green) boxes, the one-time key display, stacked forms. */
/* My account: a character waiting to be deleted (owner, round 21) - the warning in red, the cancel link as a link. */
.delete-warn { margin: 0 0 12px; padding: 10px 14px; border: 1px solid rgba(224, 83, 61, .55); border-left: 4px solid var(--bad); border-radius: 3px; background: rgba(224, 83, 61, .1); }
.delete-warn .dw-text { color: #ff6f5a; }
.delete-warn .dw-text b { color: #ff8a78; }

.notice, .success {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 3px;
	border: 1px solid #7a5a17;
	border-left: 4px solid var(--gold);
	background: rgba(150, 110, 20, .14);
	color: #f3e6c8;
}
/* Legends (the owner, 2026-10-14): what went through is green, what was refused is red (.errors). */
.success {
	border-color: #2f6b3a;
	border-left-color: var(--ok);
	background: rgba(40, 120, 60, .16);
	color: #d9f3dc;
	font-size: 1.05em;
}
.legends-charinfo td:first-child { font-weight: 700; white-space: nowrap; }
.legends-flag-inline img { vertical-align: middle; margin-right: 2px; }
.success { border-color: #2f6b38; border-left-color: var(--ok); background: rgba(40, 120, 50, .15); color: #dff3e0; }
.keybox {
	margin: 0 0 14px;
	padding: 16px 18px;
	border: 1px solid #6b5a2a;
	border-radius: 4px;
	background: rgba(226, 180, 95, .07);
}
.keybox .key {
	margin: 10px 0 12px;
	padding: 12px 14px;
	background: var(--field);
	border: 1px dashed var(--gold);
	border-radius: 3px;
	font: 700 22px/1.2 Consolas, 'Courier New', monospace;
	letter-spacing: .12em;
	color: var(--gold2);
	text-align: center;
	user-select: all;
	overflow-wrap: anywhere;
}
/* Server information (serverinfo.php): the almanac's Server Info sections. */
.si-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.si-toc a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .03); font-size: 12px; }
.si-toc a:hover { border-color: var(--field-line); background: rgba(226, 180, 95, .06); }
.si-section { margin: 0 0 18px; padding: 0 0 8px; border-bottom: 1px solid var(--row); scroll-margin-top: 12px; }
.si-section:last-child { border-bottom: 0; }
.si-section p b { color: var(--gold2); font-weight: 700; }
.si-kvs, .si-cmds { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: 7px 18px; margin: 0 0 12px; }
.si-cmds { grid-template-columns: 200px minmax(0, 1fr); }   /* one width, so split command lists line up */
.si-kvs .k { color: var(--muted); }
.si-kvs .v, .si-cmds .v { color: var(--text); }
.si-cmds code { font: 13px Consolas, 'Courier New', monospace; color: var(--gold2); background: var(--field); border: 1px solid var(--field-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.si-sub { display: grid; grid-template-columns: max-content max-content; gap: 2px 16px; margin: 4px 0 2px; }
.si-sub li { display: contents; }
.si-sub span { color: var(--muted); }
.si-sub b { color: var(--parch); font-weight: 600; }
@media (max-width: 560px) {
	.si-kvs, .si-cmds { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	.si-kvs .k, .si-cmds .k { margin-top: 8px; }
	.si-cmds code { white-space: normal; }
}
/* Country flags (layout/img/flags, legends_flag_img(); owner 2026-10-12): 16 x 12 beside a name, 32 x 24 on a
   profile. The thin light edge keeps a dark flag (Pirate, the black stripe of Germany) visible on the dark page. */
.flag-img { display: inline-block; width: 16px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
.flag-img.big { width: 32px; height: 24px; margin-right: 0; vertical-align: middle; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
/* Staff names stay plain text (forum, support page): there is no profile to open. */
.staff-name { color: var(--parch); }
/* Support ("How to get help"): the numbered ways, a title line each. */
.help-ways { counter-reset: way; margin: 6px 0 14px; padding: 0; }
.help-ways li { position: relative; padding: 10px 14px 10px 48px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .025); }
.help-ways li::before { counter-increment: way; content: counter(way); position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(var(--stone1), var(--stone2)); border: 1px solid var(--stone-edge); color: var(--gold2); font: 700 13px/24px var(--head-font); text-align: center; }
.help-ways b { display: block; color: var(--gold2); margin-bottom: 2px; }
kbd { font: 12px Consolas, 'Courier New', monospace; padding: 1px 5px; border: 1px solid var(--field-line); border-radius: 3px; background: var(--field); color: var(--parch); }
/* My account: the recovery key line (layout/widgets/recoverykey_panel.php). Owner 2026-10-08:
   the label in gold, the state in green, "last used" in plain text, the link stays gold. */
.rk-line { font-size: 13px; }
.rk-label { color: var(--gold); font-weight: 700; }
.rk-state.ok { color: var(--ok); }
.rk-last { color: var(--text); }
.rk-sep { color: var(--muted); }
/* Tabs (Lost account): plain links, the active one in stone like the menu. */
nav.tabs { display: flex; gap: 4px; margin: 4px 0 0; border-bottom: 1px solid var(--stone-edge); }
nav.tabs a {
	padding: 10px 20px 9px;
	font-family: var(--head-font);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--line);
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}
nav.tabs a:hover { color: var(--gold2); background: rgba(255, 255, 255, .06); }
nav.tabs a.active {
	color: var(--gold2);
	background: linear-gradient(180deg, var(--stone1), var(--stone2));
	border-color: var(--stone-edge);
	text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
	box-shadow: inset 0 -3px 0 var(--gold);
}
.tab-panel { padding: 16px 0 0; }
form.stack { display: grid; gap: 10px; max-width: 380px; margin: 0 0 12px; }
form.stack label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
form.stack button { justify-self: start; }

.alert, .alert-box { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .03); }
.alert-success { border-color: #2f6b38; background: rgba(40, 120, 50, .15); }
.alert-warning { border-color: #7a5a17; background: rgba(150, 110, 20, .15); }
.alert-danger  { border-color: #7a2a1f; background: rgba(120, 30, 20, .18); }
.alert-info    { border-color: #2d4f6b; background: rgba(40, 90, 140, .15); }

/* ---------------------------------------------------------------- side boxes */
/* The Discord banner (right column, under the Server box): Discord's own blurple and logo, so
   players recognise it without reading (owner, 2026-10-08). */
.discord-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--gap);
	padding: 14px 14px 14px 16px;
	border: 1px solid #8e97ff;
	border-radius: 4px;
	background: linear-gradient(180deg, #6b77f5, #4752c4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 26px rgba(0, 0, 0, .5);
	color: #fff;
}
.discord-banner:hover { filter: brightness(1.1); color: #fff; }
.discord-banner .dc-logo { flex: none; width: 46px; height: 46px; fill: #fff; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.discord-banner .dc-text { display: grid; gap: 3px; min-width: 0; }
.discord-banner .dc-title { font-family: var(--head-font); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.discord-banner .dc-sub { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.login input[type=text], .login input[type=password] { display: block; width: 100%; margin-bottom: 8px; }
.login .row2 { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; }
/* The Account page of a visitor (login.php, round 19): Log in and Create account side by side, stacked on phones. */
.login-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.login-card { padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, .18); }
.login-card h2 { margin-top: 0; }

.status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--head-font);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.dot.off { background: var(--bad); box-shadow: 0 0 10px var(--bad); }
.countdown {
	margin-top: 8px;
	font-family: var(--head-font);
	font-size: 26px;
	letter-spacing: .06em;
	text-align: center;
	color: #ffd27a;
	text-shadow: 0 0 14px rgba(255, 160, 60, .35);
}
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; font-size: 13px; }
.kv b { color: var(--muted); font-weight: 500; }

table.list td, table.list th { padding: 7px 10px; }
table.list .sub { display: block; font-size: 12px; color: var(--muted); }

/* Highscores tabs (Characters | Dungeons) and the dungeon boards (dungeons.php, the Dungeon records box; owner
   2026-10-12). Medal colours = the in-game Almanac's. */
nav.hs-tabs { margin: 0 0 16px; }
.medal { font-weight: 600; white-space: nowrap; }
.medal.m3 { color: #ffd700; }
.medal.m2 { color: #c0c0c0; }
.medal.m1 { color: #cd7f32; }
.medal.m0 { color: var(--muted); }
.dg-board .dg-time { font-family: Consolas, 'Courier New', monospace; font-size: 14px; color: var(--gold2); }
.dg-note { margin-top: 12px; }
/* The party (owner, round 16): the leader in bold with a small tag, then the others; in the box a fold-out. */
.dg-names .dg-leader a, .dg-names .dg-leader { font-weight: 700; }
.dg-lead-tag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* A name never breaks in the middle (owner, round 17): the line breaks between names; the date stays on one line. */
.dg-pm { white-space: nowrap; }
.dg-leader { white-space: nowrap; }
.dg-board .dg-date { white-space: nowrap; }
.dg-party-fold { margin-top: 2px; font-size: 12px; color: var(--muted); }
.dg-party-fold summary { cursor: pointer; color: var(--gold); }
.dg-party-fold summary:hover { color: var(--gold2); }
.dg-party-fold[open] summary { margin-bottom: 2px; }
table.list.dg-records th { padding: 6px 10px 4px; background: none; border-bottom: 0; color: var(--muted); letter-spacing: .1em; }
table.list.dg-records .dg-diff { color: var(--gold); font-weight: 700; white-space: nowrap; }
table.list.dg-records .dg-time { font-family: Consolas, 'Courier New', monospace; color: var(--gold2); white-space: nowrap; }

/* ---------------------------------------------------------------- homepage */
.ticker-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--row); font-size: 13px; }
.ticker-row:last-child { border-bottom: 0; }
.ticker-row .date { color: var(--muted); font-size: 12px; white-space: nowrap; }

.post { padding: 14px 16px; border-bottom: 1px solid var(--row); }
.post:last-child { border-bottom: 0; }
.post h3 { margin: 0 0 4px; font-family: var(--head-font); font-weight: 700; font-size: 20px; color: var(--gold2); }
.post h3 a { color: inherit; }
.post .meta { margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.post .text { overflow-wrap: anywhere; }
.post .text img { max-width: 100%; height: auto; }
.post .text li { list-style: disc; margin-left: 18px; }
.youtube .aspectratio { position: relative; padding-top: 56.25%; }
.youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--row); font-size: 13px; }
.pager .pages { text-align: center; }
.pager .pages a, .pager .pages b { margin: 0 3px; }
.pager .pages b { color: var(--gold); }
/* "Back to the house list" (house.php) and the row it returns to (houses_list.php, #h<id>; owner 2026-10-12). */
.backlink { margin: 0 0 6px; font-size: 13px; }
.backlink.bottom { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--row); }
#housetable tr { scroll-margin-top: 16px; }
#housetable tr:target td { background: rgba(226, 180, 95, .14); }

/* ---------------------------------------------------------------- filter rows (houses) */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 10px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
/* My account: General information (layout/widgets/accountinfo_panel.php). */
.ai-table { margin: 0 0 16px; }
.ai-table td:first-child { width: 34%; color: var(--muted); white-space: nowrap; }
.ai-free, .ai-off { color: var(--bad); font-weight: 700; }
.ai-prem { color: var(--gold); font-weight: 700; }
.ai-on { color: var(--ok); font-weight: 700; }
.ai-link { margin-left: 8px; font-size: 12px; }

/* House page: the gold bid form and the "Buy now for points" form; My account: the house purchases. */
.house-bid, .house-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.house-bid input[type=text] { width: 150px; }
.house-buy {
	padding: 10px 14px;
	border: 1px solid #6b5a2a;
	border-left: 4px solid var(--gold);
	border-radius: 3px;
	background: rgba(150, 110, 20, .10);
}
.house-buy p { flex-basis: 100%; margin: 0 0 2px; }
.house-buy button[disabled] { opacity: .5; cursor: not-allowed; }
.house-orders { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--row); border-radius: 3px; }
.house-orders ul { margin: 6px 0 0; padding-left: 18px; }
.house-orders li { list-style: disc; margin: 2px 0; }
.house-orders .ho-ok { color: var(--ok); }
.house-orders .ho-back, .house-orders .ho-wait { color: var(--gold); }
.pill {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid #6b5a2a;
	border-radius: 9px;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
	vertical-align: 1px;
}

/* ---------------------------------------------------------------- characters */
.charsearch { max-width: 460px; margin: 6px 0 4px; }
.charsearch label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.charsearch .field-row { display: flex; gap: 8px; }
.charsearch input[type=text] { flex: 1; min-width: 0; }

/* Kept from the old layout: character profile and forum details. */
.page_characterprofile #characterProfileTable thead th:first-of-type { position: relative; width: 28%; }
.page_characterprofile #characterProfileTable thead th:last-of-type { text-align: left; padding-left: 16px; }
.page_characterprofile .outfit { position: absolute; top: 0; left: 0; }
.page_characterprofile .flag { position: absolute; top: 16px; right: 16px; }
.postHolder { margin-bottom: 12px; }
.postHolder iframe { display: block; margin: auto; }
ul.linkbuttons::after { content: ""; display: block; clear: both; }

/* The house list on phones: town and rent move under the name (owner, round 19: the rent never changes; Beds
   stays a column you can sort by). Nothing is hidden. */
#housetable .hl-sub { display: none; }
/* My account's character list on phones: level and vocation under the name (owner, round 20). */
#myaccountTable .mc-sub { display: none; }

/* The menu stays at the top while the page scrolls on computers and tablets too (owner, round 20: "if I do not
   like it on the computer we change it back" - this block alone; the phone rule sits in the 560 px block). */
@media (min-width: 561px) {
	nav.top { position: sticky; top: 0; z-index: 50; }
	html { scroll-padding-top: 64px; }
}
/* Tablets and small laptops (561-1240 px): the menu wraps into two rows, so a jump to a spot stops lower. */
@media (min-width: 561px) and (max-width: 1240px) {
	html { scroll-padding-top: 112px; }
}

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1240px) {
	.wrap { padding: 0 12px 30px; }
	.masthead { height: 170px; }
	.logo { font-size: 60px; }
	nav.top { flex-wrap: wrap; }
	nav.top a { flex: 1 1 25%; border-bottom: 1px solid rgba(0, 0, 0, .3); }
	/* One column: the page itself first, then the left boxes, then the right boxes. */
	.cols { grid-template-columns: minmax(0, 1fr); }
	.content { grid-column: 1; grid-row: 1; }
	.col-left { grid-column: 1; grid-row: 2; }
	.col-right { grid-column: 1; grid-row: 3; }
}
@media (max-width: 560px) {
	.masthead { height: 140px; }
	.logo { font-size: 44px; }
	.tagline { font-size: 10px; letter-spacing: .24em; }
	/* The menu stays at the top while the page scrolls (owner, round 20, phones); the logo scrolls away. A link to
	   a spot on a page (#h123 on the house list) stops under the menu, not behind it. */
	nav.top { position: sticky; top: 0; z-index: 50; box-shadow: 0 6px 18px rgba(0, 0, 0, .7); }
	html { scroll-padding-top: 96px; }
	/* The menu in rows of four (owner, B20 item 1: 4 + 3 today, 4 + 4 with the Wiki); the last row's buttons
	   stretch to the full width, so no button stands alone. */
	nav.top a { flex: 1 1 25%; padding: 12px 2px; font-size: 10px; letter-spacing: .04em; }
	.content.is-page { padding: 14px 12px 16px; }
	/* Side boxes on phones (owner, B20 item 6 and round 19). The two columns become one list (display: contents) so
	   the boxes can be ordered across them; the grid's gap spaces them, so their own margin goes. Never on a phone:
	   Play now (the client and the map files are for Windows) and the account boxes (login / My account /
	   Administration - the Account button at the top leads to all of it). Homepage, after the news: Discord,
	   Community, Top players, Dungeon records, Server. Other pages: Discord and Community. */
	.cols .col-left, .cols .col-right { display: contents; }
	.cols .box, .cols .discord-banner { margin-bottom: 0; }
	.cols .w-playnow, .cols .w-login, .cols .w-myaccount, .cols .w-admin { display: none; }
	.cols .w-discord { order: 1; }
	.cols .w-community { order: 2; }
	.cols.home .w-topplayers { order: 3; }
	.cols.home .w-dungeons { order: 4; }
	.cols.home .w-server { order: 5; }
	.cols.page .w-server, .cols.page .w-topplayers { display: none; }
	.ticker-row { grid-template-columns: 1fr; gap: 2px; }
	footer.site { flex-direction: column; }
	/* Tables on phones: tighter cells, so one more column fits before a table scrolls sideways (B20). */
	.content th, .content td { padding: 6px 5px; }
	/* Highscores: the Experience column goes on phones (owner, B20 item 3) - the level says it, and the room
	   lets the flag and the name share one line. Skill boards keep their value column. */
	#highscoresTable .hs-exp { display: none; }
	/* Character profile, "other characters on this account": no Last login column on phones (B20 item 4). */
	#characterprofileTable th:nth-child(4), #characterprofileTable td:nth-child(4) { display: none; }
	/* My account's character list: no Last login column on phones either (owner, round 19). */
	#myaccountTable th:nth-child(5), #myaccountTable td:nth-child(5) { display: none; }
	/* Forms (register, create character, change password, ...): every box as wide as the page (B20 item 5). */
	.content li > input[type=text], .content li > input[type=password], .content li > input[type=email],
	.content li > input[type=number], .content li > select, .content li > textarea { width: 100%; max-width: none; }
	#housetable .hl-sub { display: block; font-size: 12px; color: var(--muted); }
	#housetable th:nth-child(4), #housetable td:nth-child(4), #housetable th:nth-child(6), #housetable td:nth-child(6) { display: none; }
	/* The dungeon board: tighter cells, so the date stays on one line (owner, 2026-10-12). */
	.dg-board td { padding: 7px 5px; }
	/* One name per line; a name longer than the column wraps with a small indent. */
	.dg-board .dg-pm { display: block; white-space: normal; padding-left: 10px; text-indent: -10px; }
	.dg-board .dg-sep { display: none; }
	/* Credits: three developer cards per row on phones (sweep 2026-10-12). */
	.page_credits .developer { width: calc(33.333% - 16px); }
	/* My account's buttons on phones: a two-by-two grid (rounds 19-20). */
	.acct-actions { display: grid; grid-template-columns: 1fr 1fr; }
	.acct-actions .acct-logout { margin-left: 0; }
	.acct-admin-label { grid-column: 1 / -1; }
	/* My account on phones: the character list shows Name (level and vocation under it), Town, Status, Hide and the
	   character-action form stacks its three parts (sweep 2026-10-12). Smaller table heads everywhere. */
	.content tr.yellow th, .content tr.yellow td, .content th { letter-spacing: .05em; font-size: 10px; }
	#myaccountTable .mc-sub { display: block; font-size: 12px; color: var(--muted); }
	#myaccountTable th:nth-child(2), #myaccountTable td:nth-child(2), #myaccountTable th:nth-child(3), #myaccountTable td:nth-child(3) { display: none; }
	#myaccount form table.table td { display: block; width: 100%; padding: 4px 0; border: 0; }
	#myaccount form table.table select { width: 100%; }
}