/* KLUG: the site as the login's terrace at dusk. The scene (scene.js) lives behind everything; the pages are the login's own
   boards (kit/board_*.webp cut from Asseturi/panouri/login_side.png, so a board grows with its page), its red maple lacquer
   plates, its sunken wells and rows, gold and beige words in Palatino as the patcher writes them. Loaded after bootstrap,
   so the CMS's markup keeps working and only looks like KLUG. */

@font-face { font-family: "Marcellus"; src: url("../fonts/Marcellus-Regular.ttf") format("truetype"); font-display: swap; }

:root {
	--gold: #e2be78;
	--gold-deep: #b98a45;
	--beige: #d8cdb8;
	--dim: #9a8e7a;
	--line: rgba(226, 190, 120, .32);
	--red: #e86860;
	--green: #8fe08f;
	--ink: #0b0806;
	--field: #0e0b08;
	--serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
	--carved: "Marcellus", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	color-scheme: dark;
}

html { background: var(--ink); scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body.home { background-image: url("still_home.jpg"); }
body {
	margin: 0; min-height: 100vh;
	background: var(--ink) url("still_bare.jpg") center / cover no-repeat fixed;
	color: var(--beige); font: 17px/1.6 var(--serif);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	overflow-x: hidden; overflow-x: clip;
}
a { color: var(--gold); text-decoration: none; transition: color .2s, text-shadow .2s; }
a:hover, a:focus { color: #fff1cf; text-decoration: none; text-shadow: 0 0 12px rgba(255, 170, 80, .55); }
h1, h2, h3, h4, h5 { font-family: var(--carved); color: var(--gold); font-weight: 400; letter-spacing: .04em; }
::selection { background: rgba(190, 40, 30, .65); color: #fff; }
hr { border: 0; height: 22px; margin: 18px auto; background: url("kit/divider.webp") center / auto 100% no-repeat; opacity: .9; }
img { max-width: 100%; }

/* ---- the terrace behind the page -------------------------------------------------------------------------------------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.4s ease; display: block; }
#scene.on { opacity: 1; }
.veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(8, 5, 3, .35), rgba(8, 5, 3, 0) 18%, rgba(8, 5, 3, 0) 70%, rgba(8, 5, 3, .45)); }


/* ---- the beam across the top ------------------------------------------------------------------------------------------ */
.beam {
	position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 64px;
	display: flex; align-items: center; gap: 26px; padding: 0 28px;
	background: linear-gradient(to bottom, rgba(34, 21, 12, .97), rgba(16, 10, 6, .94));
	border-bottom: 1px solid rgba(226, 190, 120, .38);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .55), inset 0 -10px 18px rgba(0, 0, 0, .35);
}
.beam::after {	/* the gold inlay line, fading at both ends as the login's divider does */
	content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px;
	background: linear-gradient(to right, transparent, var(--gold), transparent); opacity: .7;
}
.beam .crest { display: block; height: 48px; flex: none; }
.beam .crest img { height: 48px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); }
.beam nav { display: flex; gap: 4px; align-items: center; flex: 1; }
.beam nav a, .beam .who a {
	font-family: var(--carved); font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--beige); padding: 8px 14px; border-radius: 3px; position: relative; white-space: nowrap;
}
.beam nav a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; transform: scaleX(0); transition: transform .25s;
	background: linear-gradient(to right, transparent, #c73a2c, transparent);
}
.beam nav a:hover::after, .beam nav a.on::after { transform: scaleX(1); }
.beam nav a.on, .beam nav a:hover { color: var(--gold); }
.beam .who { display: flex; gap: 10px; align-items: center; }
.beam .who .plate-btn { padding: 0 26px; height: 40px; line-height: 40px; font-size: 14px; }
.beam .burger { display: none; background: none; border: 0; color: var(--gold); font-size: 26px; padding: 4px 8px; cursor: pointer; }

/* ---- every page: the login screen. Its card and boards are in the terrace (scene_home.json); #stage-ui holds what the
   site writes in them, in the login's own units and places (loginwindow.py), scaled with the stage by scene.js ---- */
.hero { position: relative; height: 100vh; height: 100svh; z-index: 2; pointer-events: none; }
.stage-clip { position: fixed; inset: 0; overflow: hidden; z-index: 3; pointer-events: none; }
#stage-ui { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; font-size: 12px; }
#stage-ui > * { position: absolute; pointer-events: auto; }
#stage-ui .crest-link { left: 537px; top: 182px; width: 218px; height: 175px; }
/* the card's face (LoginBoard 476,323 332 x 397, the logo over its first 38) */
#stage-ui .card-face { left: 476px; top: 323px; width: 332px; height: 397px;
	transition: opacity .3s ease, transform .34s cubic-bezier(.2, .8, .2, 1); }
#stage-ui .card-face.leaving { opacity: 0; transform: translateY(7px) scale(.985); }
#stage-ui .card-face.entering { opacity: 0; transform: translateY(-12px); transition: none; }
#stage-ui .card-face::after {	/* a warm light passing over the wood when a page settles in */
	content: ""; position: absolute; inset: 30px 30px 20px; pointer-events: none; opacity: 0;
	background: linear-gradient(100deg, rgba(255, 190, 110, 0) 35%, rgba(255, 200, 130, .16) 50%, rgba(255, 190, 110, 0) 65%) 0 0 / 250% 100% no-repeat;
}
#stage-ui .card-face.lit::after { animation: sweep 1.1s ease-out; }
@keyframes sweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }
#stage-ui .card-face > *, #stage-ui .face-form > * { position: absolute; }
#stage-ui .face-form { inset: 0; }
#stage-ui .face-title { left: 30px; right: 30px; top: 42px; text-align: center; font-family: var(--carved); font-size: 14px; letter-spacing: .2em;
	text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px #000, 0 0 10px rgba(255, 150, 60, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-ui .face-text { left: 46px; right: 46px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--beige); text-shadow: 0 1px 2px #000; }
/* the answers: a slip over the card's top that fades by itself */
#stage-ui .notes { left: 40px; right: 40px; top: 4px; z-index: 6; pointer-events: none; }
#stage-ui .notes.inline { position: static; margin-bottom: 6px; }
#stage-ui .notes .alert { pointer-events: auto; margin: 0 0 4px; padding: 6px 10px; font-size: 11px; line-height: 1.35; border-left-width: 2px;
	background: rgba(14, 9, 6, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(226, 190, 120, .22); animation: slip 9s ease forwards; }
#stage-ui .notes .alert-danger { background: rgba(48, 10, 8, .95); }
#stage-ui .notes .alert-success { background: rgba(12, 34, 12, .95); }
#stage-ui .notes .alert .close { display: none; }
@keyframes slip { 0% { opacity: 0; transform: translateY(-6px); } 5%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }
/* the wells: the login's own row art with its icons (ID_EditLine_Well 532,420 at 219 x 37) */
#stage-ui .well { left: 56px; width: 219px; height: 37px; box-sizing: border-box; margin: 0; cursor: text;
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; display: flex; align-items: center; transition: filter .2s; }
#stage-ui .well:focus-within { filter: drop-shadow(0 0 5px rgba(226, 150, 70, .6)) brightness(1.08); }
#stage-ui .well .icon { width: 17px; height: 17px; margin: 0 8px 0 9px; flex: none; background: center / contain no-repeat; opacity: .85; }
#stage-ui .well .icon.user { background-image: url("kit/icon_user.webp"); }
#stage-ui .well .icon.lock { background-image: url("kit/icon_lock.webp"); }
#stage-ui .well .icon.mail::before { content: "@"; display: block; text-align: center; line-height: 17px; font-family: var(--carved); font-size: 14px; color: #c9a86a; }
#stage-ui .well input { flex: 1; min-width: 0; height: 21px; border: 0; background: none; outline: none; padding: 0 8px 0 0; box-shadow: none;
	color: var(--beige); font: 12.5px var(--serif); border-image: none; min-height: 0; }
#stage-ui .well input::placeholder { color: rgba(200, 190, 170, .5); }
#stage-ui .well .check { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); max-width: 60%; font-size: 9.5px; color: var(--red);
	text-align: right; pointer-events: none; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage-ui .well .check:empty { display: none; }
#stage-ui .captcha { left: 56px; width: 219px; height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#stage-ui .captcha img { width: 92px; height: 33px; object-fit: cover; border-radius: 3px; flex: none; }
#stage-ui .well.small { position: relative; left: auto; width: auto; flex: 1; height: 33px; }
#stage-ui .well.small input { padding-left: 10px; font-size: 12px; }
/* the plates (LoginButton 527,562 at its own size) */
#stage-ui .card-face .plate-btn { left: 51px; width: 230px; height: 44px; line-height: 44px; padding: 0 30px; font-size: 13px; border-image-width: 0 28px; }
#stage-ui .card-face .plate-btn.big { height: 49px; line-height: 49px; font-size: 14.5px; border-image-width: 0 32px; }
#stage-ui .links { left: 34px; right: 34px; display: flex; justify-content: space-between; font-size: 11.5px; }
#stage-ui .links a { color: var(--beige); opacity: .85; text-shadow: 0 1px 2px #000; }
#stage-ui .links a:hover { color: var(--gold); opacity: 1; }
/* lists that run longer than the face scroll inside it, the scrollbar a thin gold line */
#stage-ui .face-scroll { left: 44px; width: 244px; top: 72px; height: 262px; overflow-y: auto; overflow-x: hidden; padding-right: 4px;
	scrollbar-width: thin; scrollbar-color: rgba(226, 190, 120, .5) transparent; overscroll-behavior: contain; }
#stage-ui .face-scroll::-webkit-scrollbar { width: 4px; }
#stage-ui .face-scroll::-webkit-scrollbar-thumb { background: rgba(226, 190, 120, .45); border-radius: 2px; }
#stage-ui .face-scroll.ranks { top: 136px; height: 180px; }
#stage-ui .empty { text-align: center; color: var(--dim); font-style: italic; margin: 30px 0; font-size: 12px; }
#stage-ui .meta { color: var(--dim); font-size: 10.5px; margin: 0 0 8px; }
#stage-ui .article { display: block; padding: 7px 10px 8px; margin: 0 0 6px; border-radius: 3px; background: rgba(10, 7, 4, .5);
	box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .14); color: var(--beige); transition: background .2s, box-shadow .2s; }
#stage-ui .article:hover { background: rgba(110, 28, 18, .45); box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .35); text-shadow: none; }
#stage-ui .article b { display: block; font-family: var(--carved); font-weight: 400; color: var(--gold); font-size: 13px; }
#stage-ui .article em { display: block; font-style: normal; color: var(--dim); font-size: 10px; margin: 1px 0 3px; }
#stage-ui .article span { display: block; font-size: 11px; line-height: 1.45; }
#stage-ui .copy { font-size: 11.5px; line-height: 1.55; color: var(--beige); }
#stage-ui .copy img { max-width: 100%; height: auto; border-radius: 3px; }
#stage-ui .back { display: inline-block; margin-top: 10px; font-size: 11px; }
#stage-ui .face-scroll .form-control, #stage-ui .face-scroll textarea { font-size: 11px; min-height: 28px; margin-bottom: 6px; }
#stage-ui .face-scroll .btn { height: 32px; line-height: 32px; font-size: 11px; padding: 0 24px; border-image-width: 0 22px; }
/* the ranking: two small plates, the search well, ten rows */
#stage-ui .tabs { left: 46px; right: 46px; top: 66px; display: flex; gap: 8px; justify-content: center; }
#stage-ui .tabs a { flex: 1; text-align: center; height: 26px; line-height: 26px; font-family: var(--carved); font-size: 11.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--beige); border-radius: 3px; background: rgba(10, 7, 4, .55); box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .2); transition: background .2s; }
#stage-ui .tabs a.on, #stage-ui .tabs a:hover { background: rgba(130, 30, 20, .75); color: #fff1d4; box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .45); text-shadow: none; }
#stage-ui .search { left: 56px; width: 219px; top: 98px; display: flex; }
#stage-ui .search .well.small { height: 32px; }
#stage-ui .rank-row { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; margin-bottom: 3px; font-size: 11.5px;
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; }
#stage-ui .rank-row i { font-style: normal; font-family: var(--carved); color: var(--gold-deep); min-width: 18px; text-align: right; font-size: 11px; }
#stage-ui .rank-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-ui .rank-row img { width: 22px; height: 14px; border-radius: 2px; }
#stage-ui .rank-row img.job { width: 18px; height: 18px; }
#stage-ui .rank-row b { font-weight: 400; color: var(--gold); font-family: var(--carved); font-size: 11px; min-width: 40px; text-align: right; }
#stage-ui .rank-row form { margin: 0; }
#stage-ui .mini { background: none; border: 0; color: var(--gold); cursor: pointer; font-size: 12px; padding: 0 2px; }
#stage-ui .pager { left: 46px; right: 46px; top: 324px; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 11.5px; color: var(--dim); }
#stage-ui .face-scroll .pager { position: static; margin: 8px 0 2px; }
#stage-ui .pager a { min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 3px; background: rgba(10, 7, 4, .55);
	box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .22); color: var(--beige); font-family: var(--carved); }
#stage-ui .pager a.on, #stage-ui .pager a:hover { background: rgba(130, 30, 20, .75); color: #fff; text-shadow: none; }
/* the account: facts, then one row per thing to ask */
#stage-ui .facts { margin-bottom: 10px; }
#stage-ui .facts > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 4px; font-size: 11.5px; border-bottom: 1px solid rgba(226, 190, 120, .12); }
#stage-ui .facts span { color: var(--dim); }
#stage-ui .facts b { font-weight: 400; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-ui .face-scroll form { margin: 0; }
#stage-ui .row-btn { display: block; width: 100%; box-sizing: border-box; height: 30px; line-height: 30px; margin: 0 0 5px; padding: 0 12px; border: 0;
	text-align: left; font: 11.5px var(--serif); color: var(--beige); background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; cursor: pointer; transition: filter .2s, color .2s; }
#stage-ui .row-btn:hover { color: var(--gold); filter: brightness(1.15) drop-shadow(0 0 4px rgba(226, 150, 70, .4)); text-shadow: none; }
#stage-ui .row-btn.danger { color: #f0a69e; }
/* the side boards (SavedBoard / ChannelBoard 241 x 284): the label where the login writes it, rows where it lists */
#stage-ui .side { top: 436px; width: 241px; height: 284px; }
#stage-ui .side > * { position: absolute; left: 15px; right: 15px; }
#stage-ui .side .label { top: 58px; text-align: center; font-family: var(--carved); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 3px #000; }
#stage-ui .side .row { height: 33px; box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--beige);
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; }
#stage-ui .side > :nth-child(2) { top: 88px; }
#stage-ui .side > :nth-child(3) { top: 126px; }
#stage-ui .side > :nth-child(4) { top: 164px; }
#stage-ui .side > :nth-child(5) { top: 202px; }
#stage-ui .side > :nth-child(6) { top: 240px; }
#stage-ui .side .row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-ui .side .row .gem { flex: none; }
#stage-ui .side .row b { font-weight: 400; color: var(--gold); font-family: var(--carved); font-size: 12.5px; }
#stage-ui .side .row.head { justify-content: center; color: var(--dim); background: none; font-size: 11.5px; }
#stage-ui .side .row.rank i { font-style: normal; font-family: var(--carved); color: var(--gold-deep); width: 12px; text-align: right; }
#stage-ui .side .row.rank:nth-child(3) i { color: #ffd680; text-shadow: 0 0 8px rgba(255, 190, 80, .8); }
/* the menu's rows: the login's row, the selected row's art where the page is */
#stage-ui .menu .row { font-family: var(--carved); letter-spacing: .08em; justify-content: center; text-align: center; transition: filter .2s, color .2s; }
#stage-ui .menu .row span { flex: none; }
#stage-ui .menu .row:hover { color: var(--gold); filter: brightness(1.18) drop-shadow(0 0 5px rgba(226, 150, 70, .45)); text-shadow: none; }
#stage-ui .menu .row.on { background-image: url("kit/row_sel.webp"); color: #ffe3a8; text-shadow: 0 0 8px rgba(255, 170, 70, .55); }
#stage-ui .side .foot-links { top: 246px; display: flex; justify-content: center; gap: 16px; font-size: 11px; }
#stage-ui .side .foot-links a { color: var(--beige); opacity: .85; }
#stage-ui .side .foot-links a:hover { color: var(--gold); opacity: 1; }
.gem { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; flex: none;
	background: radial-gradient(circle at 35% 35%, #d8ffd0, #3fb04a 55%, #12401a); box-shadow: 0 0 8px rgba(110, 230, 120, .8); }
.gem.off { background: radial-gradient(circle at 35% 35%, #ffd0c8, #b03a2f 55%, #3e0f0b); box-shadow: 0 0 8px rgba(230, 90, 70, .8); }
/* the bar shows only for the classic pages and on phones (there the side boards, with the menu, do not show) */
/* the brown bars frame the login screen, top and foot (David 2026-10-27: "erau faine"); scene.js keeps the card and the
   boards clear of both */
.foot-beam { top: auto; bottom: 0; height: 44px; justify-content: space-between; font-size: 13px; color: var(--dim);
	background: linear-gradient(to top, rgba(34, 21, 12, .97), rgba(16, 10, 6, .94)); border-bottom: 0; border-top: 1px solid rgba(226, 190, 120, .38);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .55), inset 0 10px 18px rgba(0, 0, 0, .35); }
.foot-beam::after { bottom: auto; top: -1px; }
.foot-beam a { color: var(--beige); }
.foot-beam a:hover { color: var(--gold); }
.foot-beam .state { display: flex; align-items: center; font-family: var(--carved); letter-spacing: .08em; }
.foot-beam .lang a { font-family: var(--carved); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }

/* the login screen is the whole site: nothing under it to scroll to (David 2026-10-27) */
body.home { overflow: hidden; height: 100vh; height: 100svh; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { #stage-ui .side { display: none; } .foot-beam .credits { display: none; } .foot-beam { height: 38px; font-size: 12px; } }

/* ---- the hall: the pages' boards ---------------------------------------------------------------------------------------- */
.hall {
	position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 120px 24px 40px;
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: stretch;
}
/* the page's board reaches down as far as the side boards: no short board floating over the background */
.hall > main { display: flex; flex-direction: column; }
.hall > main > .board { flex: 1; }
.hall > aside { align-self: start; }
.hall > main, .hall > aside > ul { container-type: inline-size; }
.hall > aside > ul { list-style: none; margin: 0; padding: 0; }

/* the board: posts, planks and the beam (border-image, sliced as make_theme.py cut it), the roof above it */
.board, .hall > aside li.widget-container {
	--u: calc(100cqw / 1425);
	position: relative; box-sizing: border-box; display: block;
	margin: calc(370 * var(--u)) 0 30px;
	border-style: solid; border-width: 0 calc(170 * var(--u)) calc(190 * var(--u));
	border-image: url("kit/board_body.webp") 0 170 190 fill / 0 calc(170 * var(--u)) calc(190 * var(--u)) / 0 stretch;
	border-image-repeat: stretch round;
	padding: 4px calc(36px - 60 * var(--u) + 60 * var(--u)) 14px;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.board::before, .hall > aside li.widget-container::before {
	content: ""; position: absolute; pointer-events: none;
	left: calc(-170 * var(--u) - 120 * var(--u)); width: calc(1664 * var(--u));
	top: calc(-400 * var(--u)); height: calc(400 * var(--u));
	background: url("kit/board_roof.webp") 0 0 / 100% 100% no-repeat;
}
.board > *:first-child { margin-top: 0; }
.board-title {
	text-align: center; font-size: clamp(22px, 3.2cqw, 34px); margin: 0 0 14px; letter-spacing: .12em;
	text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 160, 60, .35);
}
.board-title::after { content: ""; display: block; height: 18px; margin: 6px auto 0; max-width: 420px; background: url("kit/divider.webp") center / auto 100% no-repeat; }

/* the side boards hold the CMS's sidebar */
.hall > aside li.widget-container { padding: 2px 18px 12px; font-size: 15px; }
.hall > aside .top-sidebar h4 { text-align: center; margin: 0 0 4px; font-size: 18px; letter-spacing: .14em; text-transform: uppercase !important; }
.hall > aside hr { margin: 6px auto 10px; height: 14px; }
.hall > aside .mod, .hall > aside .bd { background: none; padding: 0; }

/* ---- the CMS's markup, in the kit ------------------------------------------------------------------------------------- */
.page-hd { background: none !important; min-height: 0; padding: 0; margin: 0 0 12px; }
.page-hd .bd-c { padding: 0; }
.page-hd h2, .pre-social { text-align: center; font-size: clamp(22px, 3.2cqw, 34px); margin: 0; letter-spacing: .12em; text-shadow: 0 2px 0 #000, 0 0 18px rgba(255, 160, 60, .35); }
.page-hd h2::after { content: ""; display: block; height: 18px; margin: 6px auto 4px; max-width: 420px; background: url("kit/divider.webp") center / auto 100% no-repeat; }
.container, .container-fluid { width: auto; max-width: none; padding: 0; }
.row { margin-left: 0; margin-right: 0; }
.col-xs-12, .col-sm-11, .col-md-12, .col-md-8, .col-md-4, .col-md-10, .col-md-1 { padding-left: 0; padding-right: 0; }
[class*="col-sm-offset"], [class*="col-md-offset"] { margin-left: 0 !important; }
.blogroll { list-style: none; padding: 0; margin: 0; }

/* wells: the login's sunken fields */
.form-control, select.form-control, textarea.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"] {
	background: none; color: var(--beige); font: 16px var(--serif); box-shadow: none;
	border: 0; border-radius: 0; border-image: url("kit/input.webp") 30 fill / 9px stretch;
	min-height: 44px; padding: 8px 16px; transition: filter .2s;
}
textarea.form-control { border-image-width: 12px; padding: 12px 18px; }
.form-control:focus { background: none; color: #fff3da; outline: none; box-shadow: none; filter: drop-shadow(0 0 6px rgba(226, 150, 70, .55)); }
.form-control::placeholder { color: rgba(200, 190, 170, .42); }
select.form-control option { background: #17100a; color: var(--beige); }
.form-group { margin-bottom: 14px; }
label, .col-form-label { color: var(--gold); font-family: var(--carved); letter-spacing: .05em; }

/* plates: the red maple lacquer of the login's Conectare button, its ornate ends kept */
.plate-btn, .btn {
	display: inline-block; box-sizing: border-box; cursor: pointer; text-align: center; vertical-align: middle; user-select: none;
	height: 48px; line-height: 48px; padding: 0 44px; white-space: nowrap;
	border: 0; border-radius: 0; border-image: url("kit/btn.webp") 0 150 fill / 0 34px stretch; background: none;
	font-family: var(--carved); font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
	color: #fbe8c6 !important; text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .6);
	transition: filter .2s, transform .1s;
}
.plate-btn:hover, .btn:hover, .plate-btn:focus, .btn:focus {
	border-image-source: url("kit/btn_hover.webp"); background: none; color: #fff !important;
	filter: drop-shadow(0 0 10px rgba(255, 90, 50, .45)); text-shadow: 0 1px 2px #000, 0 0 12px rgba(255, 200, 140, .7);
}
.plate-btn:active, .btn:active { transform: translateY(1px); filter: brightness(.92); }
.btn-block { display: block; width: 100%; }
.btn-lg { height: 56px; line-height: 56px; font-size: 17px; }
.btn-sm { height: 36px; line-height: 36px; font-size: 12px; padding: 0 30px; border-image-width: 0 26px; }
.btn:disabled, .btn.disabled { filter: grayscale(.8) brightness(.6); cursor: not-allowed; }
.btn-secondary, .btn-default, .btn-outline-secondary { border-image-source: url("kit/plate.webp"); border-image-slice: 30 fill; border-image-width: 9px; }

/* tables: rows on the planks, a sunken lit row under the pointer */
.table { color: var(--beige); background: none; margin-bottom: 12px; border-collapse: separate; border-spacing: 0 4px; }
.table th, .table td { border: 0; vertical-align: middle; padding: 9px 12px; }
.table thead th { font-family: var(--carved); color: var(--gold); font-weight: 400; letter-spacing: .08em; border-bottom: 1px solid var(--line); background: none; }
.table tbody tr { background: rgba(10, 7, 4, .42); }
.table tbody tr td:first-child, .table tbody tr th:first-child { border-radius: 4px 0 0 4px; }
.table tbody tr td:last-child { border-radius: 0 4px 4px 0; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(10, 7, 4, .55); }
.table-hover tbody tr:hover { background: rgba(120, 30, 20, .35); box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .25); }
.table-sm th, .table-sm td { padding: 5px 8px; font-size: 14px; }
.table img { vertical-align: middle; border-radius: 2px; }
.table-responsive { border: 0; }

/* notes: alerts as slips of paper on the board, the seal's red for trouble */
.alert { border: 0; border-left: 3px solid var(--gold); border-radius: 3px; background: rgba(12, 8, 5, .72); color: var(--beige); padding: 12px 16px; box-shadow: inset 0 0 0 1px rgba(226, 190, 120, .16); }
.alert-danger { border-left-color: #d0453a; background: rgba(60, 10, 8, .62); }
.alert-success { border-left-color: #6fc46f; background: rgba(14, 40, 14, .55); }
.alert-warning { border-left-color: #e2a84a; }
.alert-info { border-left-color: #c9a96a; }
.alert strong { color: var(--gold); font-weight: 400; font-family: var(--carved); }
.alert .close { color: var(--beige); text-shadow: none; opacity: .7; }
.text-danger { color: var(--red) !important; }
.text-success { color: var(--green) !important; }
.text-muted { color: var(--dim) !important; }

/* list groups (the user menu, the admin's lists) as rows of the login's channel board */
.list-group { padding: 0; margin: 0 0 10px; }
.list-group-item {
	background: none; border: 0; border-radius: 0 !important; margin: 0 0 6px; padding: 9px 18px; color: var(--beige);
	border-image: url("kit/row.webp") 30 fill / 9px stretch; display: block; transition: filter .2s, color .2s;
}
a.list-group-item:hover, a.list-group-item:focus { background: none; color: var(--gold); border-image-source: url("kit/row_sel.webp"); filter: drop-shadow(0 0 6px rgba(226, 150, 70, .4)); }
.list-group-item.active { background: none; color: var(--gold); font-family: var(--carved); letter-spacing: .1em; border-image-source: url("kit/plate.webp"); }
.list-group-item-danger { color: #f0a69e; }
.list-group-item.disabled { color: var(--dim); }
.list-group-item-heading { color: var(--gold); margin: 0 0 2px; font-size: 16px; }
.list-group-item-text { color: var(--dim); margin: 0; font-size: 14px; }

/* tags and pills */
.tag, .badge { display: inline-block; padding: 2px 10px; border-radius: 2px; background: rgba(120, 30, 20, .7); color: #fbe8c6; font-weight: 400; font-size: 12.5px; letter-spacing: .05em; border: 1px solid rgba(226, 190, 120, .3); }
.tag-success { background: rgba(30, 90, 30, .7); }
.tag-info, .tag-default { background: rgba(60, 45, 25, .8); }

/* tabs (the sidebar's players / guilds) */
.nav-tabs { border: 0; display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.nav-tabs .nav-link { border: 1px solid rgba(226, 190, 120, .25); border-radius: 3px; background: rgba(10, 7, 4, .45); padding: 4px 12px; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { background: rgba(120, 30, 20, .55); border-color: var(--gold-deep); }

/* pages */
.pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; }
.pagination li a, .pagination li span, .page-link {
	background: rgba(10, 7, 4, .55) !important; border: 1px solid rgba(226, 190, 120, .25) !important; color: var(--beige) !important;
	border-radius: 3px !important; min-width: 36px; text-align: center; font-family: var(--carved);
}
.pagination li.active a, .pagination li a:hover, .page-item.active .page-link { background: rgba(140, 32, 22, .8) !important; color: #fff !important; border-color: var(--gold-deep) !important; }

/* the news */
.blogroll > li, .blogroll article, .blogroll .post { margin-bottom: 26px; }
.blogroll h3, .blogroll h2 { font-size: 24px; margin: 0 0 4px; }
.blogroll .meta, .blogroll small, .blogroll time { color: var(--dim); font-size: 13px; letter-spacing: .05em; }
.blogroll p { margin: 8px 0; }

/* modals (the admin) */
.modal-content { background: #150e09; color: var(--beige); border: 1px solid var(--gold-deep); border-radius: 4px; box-shadow: 0 20px 60px #000; }
.modal-header, .modal-footer { border-color: var(--line); }
.close { color: var(--beige); opacity: .8; }

/* ---- the foot of the page ------------------------------------------------------------------------------------------------ */
.foot {
	position: relative; z-index: 2; text-align: center; padding: 28px 20px 34px; font-size: 13px; color: var(--dim);
	background: linear-gradient(to bottom, rgba(8, 5, 3, 0), rgba(8, 5, 3, .92) 40%);
}
.foot .seal { width: 54px; height: 54px; display: block; margin: 0 auto 10px; opacity: .85; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--gold); }
.foot .social { list-style: none; padding: 0; margin: 0 0 10px; display: flex; justify-content: center; gap: 14px; }

/* ---- narrow screens: one column, the side boards' contents under the card ------------------------------------------------- */
@media (max-width: 980px) {
	.hall { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
	.beam { gap: 10px; padding: 0 14px; }
	.beam .burger { display: block; margin-left: auto; }
	.beam nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 14px 16px;
		background: rgba(16, 10, 6, .97); border-bottom: 1px solid var(--line); }
	.beam nav.open { display: flex; }
	.beam nav a { padding: 12px; text-align: center; }
	.beam .who .plate-btn { display: none; }
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
	body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* the side boards are narrow: smaller plates and wells */
.hall > aside .btn, .hall > aside .plate-btn { height: 40px; line-height: 40px; padding: 0 26px; font-size: 12.5px; letter-spacing: .1em; border-image-width: 0 28px; }
.hall > aside .form-control { font-size: 14px; min-height: 38px; padding: 6px 12px; }
.hall > aside .col-md-1 { display: none; }
.hall > aside .col-md-10 { width: 100%; max-width: 100%; flex: 0 0 100%; }

/* the captcha on dark paper, framed in gold */
img[src*="captcha/simple.php"] { filter: invert(1) hue-rotate(180deg) sepia(.55) brightness(.9) contrast(1.1); border: 1px solid var(--gold-deep); border-radius: 3px; box-shadow: 0 0 0 3px rgba(0, 0, 0, .45); }
.empty { text-align: center; color: var(--dim); font-style: italic; margin: 18px 0; }

/* the CMS's search boxes and the table heads bootstrap paints light */
.jumbotron { background: rgba(10, 7, 4, .45); border: 1px solid rgba(226, 190, 120, .16); border-radius: 4px; margin-bottom: 18px; }
.jumbotron .row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 0; }
.thead-inverse th, .thead-default th { background: none !important; color: var(--gold) !important; }
.page-hd h6 { text-align: center; color: var(--dim); font-family: var(--carved); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 6px; }
.input-group .form-control { border-image-width: 9px; }
.input-group-btn .btn { margin-left: 8px; }
.card, .card-block { background: rgba(10, 7, 4, .45); border: 1px solid rgba(226, 190, 120, .16); color: var(--beige); }


/* the CMS's page numbers (wp-pagenavi) as the kit's small plates, centred */
.wp-pagenavi { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.wp-pagenavi a, .wp-pagenavi span {
	min-width: 36px; padding: 4px 10px; text-align: center; font-family: var(--carved); color: var(--beige) !important;
	background: rgba(10, 7, 4, .55); border: 1px solid rgba(226, 190, 120, .25); border-radius: 3px;
}
.wp-pagenavi a.current, .wp-pagenavi a:hover { background: rgba(140, 32, 22, .8); color: #fff !important; border-color: var(--gold-deep); }
.table .form-control { width: 100%; }

/* phones: tables scroll inside their board, the search box takes the board's width, less padding inside the posts */
@media (max-width: 760px) {
	.board { padding-left: 4px; padding-right: 4px; }
	.board .table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
	.jumbotron { padding: 12px !important; }
	.jumbotron .row > div { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
	.jumbotron .btn { width: 100%; }
	.page-hd h2, .pre-social { font-size: 24px; }
}

/* the boards in the terrace's light: dusk falling warm on their upper planks from the moon and the lanterns, their feet
   in the evening's shade, as the login's card and boards are lit */
.hall .board::after, .hall > aside li.widget-container::after {
	content: ""; position: absolute; pointer-events: none;
	left: calc(-170 * var(--u)); right: calc(-170 * var(--u)); top: 0; bottom: calc(-190 * var(--u));
	background:
		radial-gradient(ellipse 70% 40% at 78% 0%, rgba(255, 176, 96, .16), rgba(255, 176, 96, 0) 70%),
		radial-gradient(ellipse 45% 60% at 0% 30%, rgba(255, 140, 60, .10), rgba(255, 140, 60, 0) 70%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(6, 3, 2, .32));
}

/* the field only scripts fill (include/functions/guard.php klug_human_field) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* no white focus frame after a click (bootstrap's a:focus outline framed the logo, David 2026-10-27); the keyboard's
   focus shows as a gold glow instead */
a:focus, button:focus, .btn:focus, .plate-btn:focus { outline: none; }
#stage-ui a:focus-visible, #stage-ui button:focus-visible, .beam a:focus-visible {
	outline: none; filter: drop-shadow(0 0 6px rgba(255, 180, 90, .8)); }
/* forms that are only one button (logout, delete) sit in a line of text like a link */
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--beige); cursor: pointer; opacity: .85; text-shadow: 0 1px 2px #000; }
button.link:hover { color: var(--gold); opacity: 1; }
.beam nav button.link { font-family: var(--carved); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; }
#stage-ui .face-text.small { font-size: 10.5px; color: var(--dim); }