/* 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;
	/* "only light" keeps a phone's forced dark mode (Chrome, Brave: "Auto Dark Theme") off the art: it dimmed the terrace
	   and greyed the dark bars (David's phone 2026-10-27: "albicios sus si jos"); the page draws its own dark, the
	   scrollbar too */
	color-scheme: only light;
	scrollbar-color: #6b5236 #120c08;
}

html { background: var(--ink); scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
/* the login's still picture in its own fixed layer under the scene, placed by scene.js as the card's fields are (iOS knows
   no background-attachment fixed: as the body's background it moved apart from them) */
body.home { background-image: none; }
#still { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: center / cover no-repeat; }		/* its picture: index.php */
body {
	margin: 0; min-height: 100vh;
	background: var(--ink) center / cover no-repeat fixed;		/* the picture: index.php */
	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; }
/* the open menu's burger turns into its close mark */
.beam:has(nav.open) .burger { font-size: 0; }
.beam:has(nav.open) .burger::after { content: "\2715"; font-size: 22px; }
.beam .burger { display: none; background: none; border: 0; color: var(--gold); font-size: 26px; padding: 4px 8px; cursor: pointer; }
/* the login screen's music and wind, on or off (theme/sound.js) */
.beam .sound { flex: none; background: none; border: 0; color: var(--gold); font-size: 22px; width: 40px; padding: 4px 0; cursor: pointer; opacity: .85; }
.beam .sound:hover { opacity: 1; }
.beam .sound.off { color: var(--dim); }
/* ---- 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 > *, #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-name { left: 30px; right: 30px; top: 62px; text-align: center; font: 13px var(--serif); color: var(--beige); text-shadow: 0 1px 2px #000;
	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 card's answer (klug_note): an inscription in the title's place - a refusal in red, what went right in gold - the
   title stepping aside while it shows; not boxes laid over the card (David 2026-10-27: "integrat in interfata") */
#stage-ui .notes { left: 34px; right: 34px; top: 34px; z-index: 6; pointer-events: none; text-align: center; }
#stage-ui .notes.inline { position: static; margin-bottom: 6px; }
#stage-ui .notes .alert { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	font-family: var(--carved); font-size: 12px; line-height: 1.3; letter-spacing: .04em; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .8); }
#stage-ui .notes .alert-danger { color: #ff8f7c; }
#stage-ui .notes .alert-success, #stage-ui .notes .alert-info { color: var(--gold); }
#stage-ui .notes .alert .close { display: none; }
#stage-ui .card-face:has(.notes .alert) .face-title { visibility: hidden; }
/* the account made: a gold mark over the words */
#stage-ui .face-mark { left: 0; right: 0; top: 78px; text-align: center; font-size: 40px; color: var(--gold);
	text-shadow: 0 0 14px rgba(255, 180, 90, .45), 0 2px 4px #000; }
#stage-ui .face-text b { color: var(--gold); font-weight: 400; }
/* 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); }
/* a browser's saved name and password: its own blue-grey box would sit inside the well (David's screenshot 2026-10-27);
   the box's colour is held off for good and the words keep the well's beige */
#stage-ui .well input:-webkit-autofill, #stage-ui .well input:-webkit-autofill:hover, #stage-ui .well input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--beige); caret-color: var(--beige); -webkit-box-shadow: 0 0 0 40px transparent inset;
	transition: background-color 600000s 0s, color 600000s 0s; font: 12.5px var(--serif); }
#stage-ui .well input:autofill { background: none; }
.form-control:-webkit-autofill { -webkit-text-fill-color: var(--beige); transition: background-color 600000s 0s, color 600000s 0s; }
/* a check's mark (a red cross, its words in the tooltip: js/register.js klugMark) at the well's end, the typed text giving
   way to it (David 2026-10-27: "textele din casute se suprapun", "pune si tu ceva de eroare un x") */
#stage-ui .well .check { flex: none; margin-right: 10px; font-size: 13px; font-weight: bold; line-height: 1; color: var(--red);
	text-shadow: 0 0 6px rgba(230, 70, 50, .7), 0 1px 2px #000; cursor: help; }
#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; }
/* the card's ways on (sign in, new account, download, lost password): small plates of the wells' dark art, side by
   side, the words carved like the title and centred in them - not loose words, no gold frame (David 2026-10-27:
   "iar mi-ai pus rama aia ... cu auriu") (David 2026-10-27: "nu prea face parte din interfata", "textul din butoanele de jos e nasol") */
#stage-ui .links { left: 40px; right: 40px; display: flex; justify-content: center; gap: 10px; }
/* the sign-out is a button in a form: the same plate */
#stage-ui .links form.inline { display: contents; }
#stage-ui .links a, #stage-ui .links .link { flex: 0 1 50%; min-width: 0; height: 32px; padding: 0 12px; box-sizing: border-box; display: flex; align-items: center;
	justify-content: center; border: 0; background: none; position: relative; isolation: isolate;
	font: 10.5px/1 var(--carved); letter-spacing: .1em; text-transform: uppercase; color: var(--beige); text-decoration: none;
	text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, .7); white-space: nowrap; opacity: 1; cursor: pointer; transition: filter .2s, color .2s; }
/* the wells' art with its gold rim turned to the plate's red lacquer (David 2026-10-27: "macar modifica-i culoarea la
   ramele aurii"); on a layer of its own, so the words keep their colour */
#stage-ui .links a::before, #stage-ui .links .link::before { content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; filter: hue-rotate(-30deg) saturate(1.5) brightness(.78); }
#stage-ui .links a:hover, #stage-ui .links a:focus, #stage-ui .links .link:hover, #stage-ui .links .link:focus { color: #ffe3a8; filter: brightness(1.2) drop-shadow(0 0 5px rgba(226, 150, 70, .45)); }
/* lists that run longer than the face scroll inside it, the scrollbar a thin gold line */
#stage-ui .face-scroll { left: 56px; width: 223px; 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(170, 52, 36, .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(170, 52, 36, .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: 56px; width: 219px; 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(170, 52, 36, .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(170, 52, 36, .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(170, 52, 36, .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); flex: none; white-space: nowrap; }
#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/30px 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 admin on the card (panels/admin/): sections, fields and rows in the face's one column, no wide tables or pop-ups
   (David 2026-10-27: "aduci panoul de admin pe site ... cum trebuie") */
#stage-ui .face-scroll.adm { height: 256px; }
#stage-ui .adm-sect { margin: 12px 0 5px; font: 10.5px var(--carved); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
#stage-ui .adm > .adm-sect:first-child, #stage-ui .adm > .notes + .adm-sect { margin-top: 0; }
#stage-ui .row-btn .fa { width: 16px; margin-right: 6px; color: var(--gold-deep); }
#stage-ui .adm-f { display: block; margin: 0 0 7px; }
#stage-ui .adm-f > span { display: block; margin: 0 0 2px; font-size: 10.5px; color: var(--dim); }
#stage-ui .adm-in { display: block; width: 100%; box-sizing: border-box; height: 28px; margin: 0; padding: 0 10px; border: 0; border-radius: 0; outline: none;
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; color: var(--beige); font: 12px/28px var(--serif); box-shadow: none; }
#stage-ui textarea.adm-in { height: 58px; line-height: 1.4; padding: 6px 10px; resize: vertical; }
#stage-ui select.adm-in { -webkit-appearance: none; appearance: none; padding-right: 24px; cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b98a45'/%3E%3C/svg%3E") right 10px center / 10px 6px no-repeat, url("kit/row.webp") 0 0 / 100% 100% no-repeat; }
#stage-ui select.adm-in option { background: #17100a; color: var(--beige); }
#stage-ui .adm-in:focus { filter: drop-shadow(0 0 4px rgba(226, 150, 70, .55)) brightness(1.08); }
#stage-ui .adm-two { display: flex; gap: 6px; }
#stage-ui .adm-two > * { flex: 1; min-width: 0; }
#stage-ui .face-scroll .plate-btn { position: static; display: block; width: 190px; height: 40px; line-height: 40px; margin: 10px auto 6px; padding: 0 26px;
	font-size: 12px; border-image-width: 0 26px; }
#stage-ui .adm-row { margin: 0 0 4px; }
#stage-ui .adm-row > summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; cursor: pointer; font-size: 11.5px;
	background: url("kit/row.webp") 0 0 / 100% 100% no-repeat; color: var(--beige); }
#stage-ui .adm-row > summary::-webkit-details-marker { display: none; }
#stage-ui .adm-row > summary span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage-ui .adm-row > summary b { flex: none; font-weight: 400; font-size: 10.5px; color: var(--dim); }
#stage-ui .adm-row[open] > summary, #stage-ui .adm-row > summary:hover { color: var(--gold); }
#stage-ui .adm-body { padding: 7px 2px 6px; }
#stage-ui .adm-kv > div { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 10.5px; border-bottom: 1px solid rgba(170, 52, 36, .18); }
#stage-ui .adm-kv span { flex: none; color: var(--dim); }
#stage-ui .adm-kv b { font-weight: 400; color: var(--beige); text-align: right; overflow-wrap: anywhere; }
#stage-ui .ok { color: #9fd38f; }
#stage-ui .bad { color: #ff8f7c; }
#stage-ui .adm-acts { display: flex; gap: 6px; margin-top: 6px; }
#stage-ui .adm-acts > * { flex: 1; }
#stage-ui .adm-btn { display: block; width: 100%; height: 26px; line-height: 26px; padding: 0 8px; border: 0; text-align: center; cursor: pointer;
	font: 10.5px/26px var(--carved); letter-spacing: .08em; text-transform: uppercase; color: var(--beige); background: none; position: relative; isolation: isolate; }
#stage-ui .adm-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("kit/row.webp") 0 0 / 100% 100% no-repeat;
	filter: hue-rotate(-30deg) saturate(1.5) brightness(.78); }
#stage-ui .adm-btn:hover { color: #ffe3a8; filter: brightness(1.2); }
#stage-ui .adm-btn.bad { color: #ffb3a6; }
#stage-ui details.adm-more { margin: 4px 0 8px; }
#stage-ui details.adm-more > summary { list-style: none; cursor: pointer; font-size: 10.5px; color: var(--gold-deep); padding: 3px 0; }
#stage-ui details.adm-more > summary::-webkit-details-marker { display: none; }
#stage-ui details.adm-more > summary::before { content: "+ "; }
#stage-ui details.adm-more[open] > summary::before { content: "\2212  "; }
/* 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; }

/* 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; }
/* nor does the window: the login screen holds still on a phone, so the browser's bars never fold away under the finger
   and resize the card (a screen recording, 2026-10-27); scene.js sets .stage, not on a phone on its side, which scrolls */
html.stage { overflow: hidden; overscroll-behavior: none; }
@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(170, 52, 36, .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(170, 52, 36, .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); }
/* the download's note for a phone or a tablet (touch only, no mouse): the game is for a Windows PC (David 2026-10-27) */
#stage-ui .face-text.pc-only { display: none; color: var(--gold); }
@media (hover: none) and (pointer: coarse) { #stage-ui .face-text.pc-only { display: block; } }
/* a phone on its side (scene.js toggles .sideways): too low for the card at a size one can read, so the card keeps an
   upright phone's size without the side boards and the page scrolls down it; the art and the fields scroll together
   (David 2026-10-27: only the big window, "fara sa intoarca telefonul") */
body.home.sideways { overflow-y: auto; height: auto; }
body.sideways .hero { height: var(--stage-h); }
body.sideways .stage-clip, body.sideways #still { position: absolute; bottom: auto; height: var(--stage-h); }
body.sideways #stage-ui .side { display: none; }