/* Fallen Kingdom — donkere skin (naar het CQ2-voorbeeld) */

:root {
	--fk-bg: #111419;
	--fk-panel: #10141a;
	--fk-panel-2: #0c1016;
	--fk-lijn: #3b3f45;
	--fk-goud: #d4a76a;
	--fk-titel: #e6c67b;
	--fk-tekst: #c5c9ce;
	--fk-tekst-zacht: #9aa1a9;
}

body {
	background: var(--fk-bg) url(bg.jpg) repeat;
	color: var(--fk-tekst);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	margin: 0;
}
td, th, div, span, p, li, input, textarea, select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: var(--fk-tekst);
	font-size: 8pt;
	line-height: 1.55;
}
/* CQ2 (29/10): font staat hier bewust NIET bij. Deze regel zette de kleur van elk <font>-element,
   waardoor het color-attribuut (en dus [green], [red], ... in de pub) het altijd verloor. */
font {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	line-height: 1.55;
}
a { color: var(--fk-goud); text-decoration: none; }
a:hover { color: #e6c274; text-decoration: none; }
/* koppen in de tekst (bv. creature-namen) gewoon leesbaar, niet in titelstijl */
font.head, .head{
	color: #c5c9ce;   /* CQ2 (28/10): was crème #e6dcc2 en oogde te fel naast de lichaamstekst */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	font-size: 8pt;
	text-transform: none;
}

/* alleen de paneelkoppen in goud met hoofdletters */
td.title{
	color: var(--fk-goud) !important;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: .10em;
	font-size: 8pt;
	text-transform: uppercase;
}
h1, h2, h3 { font-family: Verdana, Arial, Helvetica, sans-serif; color: var(--fk-titel); letter-spacing: .06em; }

/* kopbalk */
table.header {
	border: 1px solid var(--fk-lijn);
	border-radius: 4px;
	overflow: hidden;
	background-color: transparent;
}

/* panelen: dunne rand met kleine hoektekens, geen dikke sierlijst */
/* alleen de decoratiehoekjes van CQ2 verbergen — niet elke afbeelding met "/c_" in de URL
   (Cloudinary-links bevatten "c_limit", waardoor spelersfoto's verdwenen). (Phil 27/10) */
img[src*="c_lefttopcorner"], img[src*="c_righttopcorner"],
img[src*="c_leftbottomcorner"], img[src*="c_rightbottomcorner"] { display: none !important; }
td[background*="c_"] { background: none !important; }
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"]),
table:has(> tbody > tr > td > img[src*="/c_righttopcorner"]) {
	position: relative;
	background: linear-gradient(180deg, var(--fk-panel) 0%, var(--fk-panel-2) 100%);
	border: 1px solid var(--fk-lijn);
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(201, 162, 39, .10);
	display: block;
	padding: 8px 12px;
	margin: 0 0 10px 0;
}
/* gouden hoektekens */
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"])::before,
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"])::after {
	content: "";
	position: absolute;
	width: 8px; height: 8px;
	border: 1px solid var(--fk-goud);
	opacity: .85;
}
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"])::before {
	top: -1px; left: -1px; border-right: 0; border-bottom: 0;
}
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"])::after {
	bottom: -1px; right: -1px; border-left: 0; border-top: 0;
}
table:has(> tbody > tr > td > img[src*="/c_lefttopcorner"]) td { background: transparent; }

/* kolommen */
table.master { width: 100%; }
table.master > tbody > tr > td:first-child { width: 226px !important; }
table.master > tbody > tr > td:last-child { width: auto !important; }
table.master_menu { width: 100% !important; }
table.master_menu td { padding: 0 2px; }
table.master_menu a { font-size: 8pt; white-space: nowrap; }
table.master_menu a::before {
	content: "▪";
	color: var(--fk-goud);
	font-size: 7px;
	margin-right: 5px;
	vertical-align: 2px;
	opacity: .8;
}

input, textarea, select {
	background: #0b0f14; color: #d8d3c6; border: 1px solid #33322b;
	border-radius: 2px; padding: 2px 4px; font-size: 8pt;
}
input[type=submit], input[type=button], button {
	background: #1a1f27; color: #d9c07a; border: 1px solid #4a4230;
	border-radius: 2px; padding: 3px 10px; font-size: 8pt; cursor: pointer;
}
input[type=submit]:hover, button:hover { background: #232a34; border-color: var(--fk-goud); }
hr { border: 0; border-top: 1px solid var(--fk-lijn); }
font.small, .small { color: var(--fk-tekst-zacht); }
b, strong { color: #c5c9ce; }   /* CQ2 (28/10): was warm crème #ded8c9; nu gelijk aan de lichaamstekst, vetheid geeft de nadruk */

/* pagina smaller en gecentreerd: niet meer tegen de schermranden */
html {
	background: #0a0d12 url(bg.jpg) repeat;
	min-height: 100%;
}
body {
	max-width: 1680px;
	margin: 0 auto;
	padding: 8px 14px 30px 14px;
	background: transparent !important;
}
table.master, table.header, body > table, body > center > table {
	width: 100% !important;
	max-width: 1680px;
	margin-left: auto;
	margin-right: auto;
}

/* de vaste celbreedtes van de oude opmaak laten meerekken,
   anders blijft het nieuws-/ inhoudspaneel op 806 px staan */
table.master_news td[width] { width: auto !important; }
table.master_news td[width="806"] { width: 100% !important; }
table[width] td[width="100%"] { width: 100% !important; }

/* CQ2 (29/10): alleen écht donkere kleuren naar de lichaamstekst. De oude regel pakte ELKE
   font[color], waardoor [green], [red] enz. in de pub allemaal grijs werden (Phil 29/10). */
font[color="#000000"], font[color="black"], font[color="#000"],
td[color="#000000"], td[color="black"], td[color="#000"],
span[color="#000000"], span[color="black"], span[color="#000"],
font[color="#000080"], td[color="#000080"], span[color="#000080"],
font[color="#111111"], font[color="#1a1a1a"], font[color="#222222"],
font[color="#333333"], td[color="#333333"], span[color="#333333"] { color: #b8b2a4 !important; }

/* CQ2: velden zonder opmaak kregen de witte browserstandaard en staken fel af
   tegen het thema (Phil 19/10). Kleuren passen bij dit thema. */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
	background-color: #0f1620;
	color: #d8d2c4;
	border: 1px solid #6b5a2e;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	padding: 2px;
}

/* CQ2: het vorige bericht van een mail in een quote-kader, in de kleur van dit thema */
.cq2quote{
	border:1px solid rgba(200,164,90,.38);
	border-left:3px solid var(--fk-goud);
	border-radius:6px;
	background:rgba(200,164,90,.07);
	padding:8px 11px 10px;
	margin:10px 0 4px;
}
.cq2quote-kop{
	font-size:9px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--fk-goud);
	margin-bottom:4px;
}


/* ALLE LINKERPANELEN EVEN BREED (menu, donation, friends, enemies) */
table.master_links, table.master_friends, table.master_enemies,
table.master_menu{ width: 100% !important; }
table.master_links td[width], table.master_friends td[width],
table.master_enemies td[width], table.master_menu td[width]{ width: auto !important; }
table.master_links a, table.master_friends a, table.master_enemies a{ white-space: nowrap; }


/* RUIMTE TUSSEN DE KOLOMMEN + NEWS EN RESOURCES EVEN BREED */
table.master > tbody > tr > td:first-child{ padding-right: 20px !important; }
td:has(> table.master_news){ width: 82% !important; padding-right: 18px !important; vertical-align: top !important; }
td:has(> table.master_resources){ width: 18% !important; vertical-align: top !important; }
table.master_news, table.master_resources{ width: 100% !important; min-height: 0 !important; }
/* nieuws even hoog als resources: de cel bepaalt de hoogte, het paneel volgt */
/* CQ2: height:1px liet het NEWS-paneel niet meegroeien met de lijst, waardoor de
   nieuwsregels over de panelen eronder vielen. (Phil 27/10) */
td:has(> table.master_news){ height: auto; vertical-align: top; }
table.master_news{ height: auto !important; }
table.master_news{ height: 100% !important; }
td:has(> table.master_resources){ height: 1px; vertical-align: top; }
table.master_resources{ height: 100% !important; }


/* INHOUDS-PANEEL EXPLICIET: de kaartstijl van de andere panelen, ook als de
   hoek-afbeeldingen ontbreken (content-paneel heeft ze niet altijd) */
table.master_content, table.master_links, table.master_friends, table.master_enemies{
	background: linear-gradient(180deg, var(--fk-panel) 0%, var(--fk-panel-2) 100%) !important;
	border: 1px solid var(--fk-lijn) !important;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(201, 162, 39, .10);
	display: block;
	padding: 8px 12px;
	margin: 0 0 10px 0;
}


/* SCHEIDINGSLIJNEN zoals in CQ2: geen gevulde balk, maar een dunne lijn
   onder de sectiekop (Character Development, Skill Tree, Private Notes, ...) */
table.master_content td.titleline{
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--fk-lijn) !important;
	padding: 10px 0 3px !important;
	color: var(--fk-tekst) !important;
	font-size: 8pt;
	letter-spacing: 0;
	text-transform: none;
}
table.master_content td.titleline font.head,
table.master_content td.titleline .head{ color: var(--fk-tekst) !important; }

/* CQ2: kruisje om een eigen nieuwsbericht te wissen */
a.nieuwswis{ color:#9a9384; font-weight:700; text-decoration:none; padding:0 4px; }
a.nieuwswis:hover{ color:#e05a4a; }


/* GASTPAGINA (login): dezelfde kolombreedtes en panelen als het spel,
   zodat menu, donation en het loginvak even breed en netjes uitgelijnd staan */
body.gast table.master > tbody > tr > td:first-child{ width: 258px !important; padding-right: 18px !important; vertical-align: top; }
body.gast table.master > tbody > tr > td:last-child{ width: auto !important; vertical-align: top; }
body.gast table.master > tbody > tr > td[background]{ display: none !important; }
body.gast table.master > tbody > tr > td:first-child > table,
body.gast table.master > tbody > tr > td:last-child > table{ width: 100% !important; }
body.gast table.master > tbody > tr > td table td[width]{ width: auto !important; }
body.gast table.master > tbody > tr > td > table > tbody > tr > td > table{ width: 100% !important; }
body.gast td.title{ padding: 9px 12px !important; }
body.gast table.master{ max-width: 1680px; margin: 0 auto; }
body.gast .header{ margin-bottom: 6px; }


/* loginvak: leesbare breedte i.p.v. één lange regel over het hele scherm */
body.gast table.master > tbody > tr > td:last-child > table{ width: 100% !important; max-width: none; }
body.gast table.master > tbody > tr > td:last-child > table > tbody > tr > td{padding-right: 26%; }
body.gast table.master > tbody > tr > td:last-child > table > tbody > tr > td{ padding: 14px 18px; }
body.gast table.master > tbody > tr > td:last-child td.title{ padding: 9px 18px !important; }
body.gast table.master > tbody > tr > td:last-child input[type="text"],
body.gast table.master > tbody > tr > td:last-child input[type="password"]{ width: 210px; }
body.gast center{ text-align: left; }


/* =====================  FK-BANNER (kop van de site)  ===================== */
.fk-banner{
	position: relative; margin: 0 -14px 14px; max-width: none; line-height: 0;
	background:
		radial-gradient(460px 170px at 50% 100%, rgba(196,178,132,.20), transparent 72%),
		radial-gradient(320px 130px at 50% 6%, rgba(233,215,155,.10), transparent 75%),
		linear-gradient(180deg, #0d1117 0%, #0a0d12 60%, #090b0e 100%);
	border-bottom: 2px solid color-mix(in srgb, var(--fk-goud) 55%, transparent);
	overflow: hidden;
}
.fk-banner .merk{
	position: absolute; left: 4px; top: 28px;
	display: flex; align-items: center; gap: 14px;
	text-decoration: none !important;
}
.fk-banner .wapen{
	width: 54px; height: 62px; display: block;
	background: no-repeat center/contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'><path d='M20 2 37 8.5v13.8C37 33.4 29.2 40.6 20 44 10.8 40.6 3 33.4 3 22.3V8.5z' fill='none' stroke='%23c9a227' stroke-width='1.6'/><path d='M9 16h3l2-6 3 8 3-11 3 11 3-8 2 6h3v3H9z' fill='%23c9a227'/><path d='M11 24h18v3H11z' fill='%23c9a227' opacity='.85'/></svg>");
}
.fk-banner .naam{
	font-family: Georgia, "Times New Roman", serif;
	color: #d8b45a; text-transform: uppercase; line-height: 1.02;
	letter-spacing: 3px; font-size: 15px;
}
.fk-banner .naam b{ display: block; font-size: 27px; letter-spacing: 4px; font-weight: 400; color: #e2bf63; }
.fk-banner .maan{
	position: absolute; left: 50%; top: 12px; width: 54px; height: 54px; margin-left: -27px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #f6ecc9 0%, #e9d79b 55%, #cdb877 100%);
	box-shadow: 0 0 42px 14px rgba(233,215,155,.22);
}
.fk-banner .kasteel{
	position: absolute; left: 50%; bottom: 6px; width: 190px; height: 92px; margin-left: -95px;
	background: linear-gradient(180deg, #06080b 0%, #05070a 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--fk-goud) 25%, transparent);
	clip-path: polygon(0% 100%, 0% 62%, 9% 62%, 9% 46%, 17% 46%, 17% 62%, 26% 62%, 26% 30%, 33% 30%, 33% 18%, 39% 18%, 39% 30%, 47% 30%, 47% 62%, 53% 62%, 53% 30%, 61% 30%, 61% 18%, 67% 18%, 67% 30%, 74% 30%, 74% 62%, 83% 62%, 83% 46%, 91% 46%, 91% 62%, 100% 62%, 100% 100%);
	filter: drop-shadow(0 0 12px rgba(233,215,155,.10));
}
.fk-banner .rechts{
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px;
}
.fk-banner .rechts .blok{ width: 13px; height: 13px; background: var(--fk-goud); display: inline-block; }
.fk-banner .rechts a{
	color: var(--fk-titel); font-size: 8pt; letter-spacing: 1.6px; text-transform: uppercase;
	text-decoration: none;
}
.fk-banner .rechts a:hover{ color: var(--fk-titel); }
.fk-banner .pijl{
	position: absolute; right: 6px; top: 10px; width: 26px; height: 26px;
	border: 1px solid color-mix(in srgb, var(--fk-goud) 50%, transparent); color: var(--fk-goud); text-align: center;
	line-height: 24px; font-size: 11px; cursor: pointer;
}
.fk-banner .ruit{
	position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
	background: #0a0d11; border: 1px solid color-mix(in srgb, var(--fk-goud) 85%, transparent); transform: rotate(45deg);
}



/* banner-afbeelding: de volledige tekening, meeschalend met de breedte */
.fk-banner > .merk{ position: static; display: block; }
.fk-banner > .merk img{ display: block; width: 100%; height: auto; }
.fk-banner .wapen, .fk-banner .naam, .fk-banner .maan,
.fk-banner .kasteel, .fk-banner .ruit{ display: none !important; }
.fk-banner .rechts{
	position: absolute; right: 18px; bottom: 14px; top: auto; transform: none;
	display: flex; align-items: center; gap: 10px;
	background: rgba(6,8,11,.55); padding: 3px 10px 3px 8px; border-radius: 3px;
}


/* knop op de banner om hem in/uit te klappen (bewaard per browser) */
.fk-banner .fk-inklap{
	position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
	width: 40px; height: 15px; z-index: 6; cursor: pointer;
	color: var(--fk-goud); background: rgba(7,9,12,.92);
	border: 1px solid color-mix(in srgb, var(--fk-goud) 55%, transparent); border-top: 0; border-radius: 0 0 7px 7px;
	font: 10px/13px Verdana, Arial, sans-serif; text-align: center; user-select: none;
}
.fk-banner .fk-inklap:hover{ color: var(--fk-titel); border-color: color-mix(in srgb, var(--fk-goud) 90%, transparent); }
/* Ingeklapt: alleen de afbeelding verdwijnt. De vaste links (Messages, My account, Logout)
   blijven staan, anders kon je nergens meer bij. (Phil 27/10) */
.fk-banner.ingeklapt{ height: 30px !important; overflow: visible; margin-bottom: 10px; background: #07090c; }
.fk-banner.ingeklapt > .merk{ display: none; }
.fk-banner.ingeklapt .rechts{
	display: flex; bottom: auto; top: 50%; transform: translateY(-50%);
	background: transparent; padding: 0; right: 14px;
}
.fk-banner.ingeklapt .fk-inklap{
	bottom: auto; top: 50%; transform: translateY(-50%) translateX(-50%);
	border: 1px solid color-mix(in srgb, var(--fk-goud) 55%, transparent); border-radius: 7px; background: #0b0e13;
	height: 20px; line-height: 18px;
}
/* de klok in de banner */
.fk-banner .fk-servertijd{
	color: #9fb4c4; font-size: 8pt; letter-spacing: 1.4px; font-variant-numeric: tabular-nums;
	padding-right: 4px; border-right: 1px solid rgba(200,164,90,.35); margin-right: 2px;
}


/* =====================  MOBIELE INDELING (<= 860 px)  ===================== */



/* MOBIEL: gastlogin compacter en het formulier onder elkaar */



/* mobiel menu: knop i.p.v. de lange menulijst */
.fk-mobknop{ display: none; }



/* mobiel menu: geen dubbele pijltjes naast de bullets */



/* mobiel: aankondiging-kop (titel / auteur / datum) niet aan elkaar geplakt,
   en de datum tegen de rechterkant */



/* mobiel: de datum in de aankondiging-kop echt tegen de rechterkant */



/* loginformulier mobiel: label links boven het veld, veld volle breedte,
   knop links onder het laatste veld */



/* eigen loginformulier: label boven het veld, veld volle breedte, knop links */
.fk-login{ display: block; max-width: 360px; margin: 6px 0 12px; }
.fk-login .fk-label{
	display: block; margin: 0 0 8px; color: #c5c9ce;
	font-size: 8pt; letter-spacing: .3px;
}
.fk-login input.input[type="text"], .fk-login input.input[type="password"]{
	display: block; width: 100%; box-sizing: border-box;
	margin-top: 3px; height: 30px; font-size: 13px;
}
.fk-login .fk-login-knop{ display: inline-block; margin-top: 6px; }



/* ===== ALLE fTEXT-FORMULIEREN OP MOBIEL: label boven, veld volle breedte, knop links ===== */



/* mobiel: nieuws bovenaan met drie berichten en een "meer"-knop */



/* mobiel: ruimte tussen datum en titel in het nieuwspaneel, resources eronder netjes */



/* resources: op desktop onder elkaar, op mobiel op één rij */
table.master_resources .resregel{ display: block; padding: 2px 0; margin: 0; white-space: nowrap; }
table.master_resources .resbr{ display: none; }
@media (min-width: 861px){
	table.master_resources .resregel{ display: block; margin: 0; }
}



/* ===== rechter zijmenu (lade) voor friends, enemies, donation, server, other links ===== */
#fk-zijtab{
	position: fixed; right: 0; top: 58%; z-index: 3600;
	background: #0e1218; color: #cdb684;
	border: 1px solid var(--fk-lijn); border-right: none; border-radius: 4px 0 0 4px;
	padding: 12px 5px; writing-mode: vertical-rl; text-orientation: mixed;
	font: 11px Verdana, Arial, sans-serif; letter-spacing: 2px; line-height: 1;
	cursor: pointer; user-select: none;
}
#fk-zijtab:hover{ color: var(--fk-titel); border-color: color-mix(in srgb, var(--fk-goud) 70%, transparent); }
#fk-zijlade{
	position: fixed; top: 0; right: 0; height: 100vh; width: 300px; max-width: 86vw;
	background: #090c11; border-left: 1px solid var(--fk-lijn);
	transform: translateX(101%); transition: transform .18s ease-out;
	z-index: 3700; overflow-y: auto; padding: 10px 10px 24px;
}
body.fk-zijlade-open #fk-zijlade{ transform: none; box-shadow: -12px 0 30px rgba(0,0,0,.55); }
#fk-zijlade .fk-zijlade-kop{
	display: flex; justify-content: space-between; align-items: center;
	color: var(--fk-goud); font: 8pt Verdana, Arial, sans-serif; letter-spacing: 1.5px;
	text-transform: uppercase; padding: 6px 4px 10px; border-bottom: 1px solid var(--fk-lijn);
	margin-bottom: 10px;
}
#fk-zijlade .fk-zijlade-x{ cursor: pointer; font-size: 14px; padding: 0 4px; }
#fk-zijlade table{ width: 100% !important; margin-bottom: 10px; }



/* panelen in de lade: normale tabelopmaak, anders klappen ze dicht op mobiel */
#fk-zijlade table{ display: table !important; width: 100% !important; }
#fk-zijlade tbody{ display: table-row-group !important; }
#fk-zijlade tr{ display: table-row !important; }
#fk-zijlade td{
	display: table-cell !important; width: auto !important;
	padding: 5px 8px !important; font-size: 13px !important;
	white-space: normal !important; text-align: left !important;
}
#fk-zijlade td.title{ font-size: 9pt !important; letter-spacing: 1.4px !important; }
#fk-zijlade a.menu{ display: block !important; font-size: 13px !important; padding: 5px 6px !important; }
#fk-zijlade .resregel{ display: block !important; margin: 0 0 3px !important; }
#fk-zijlade .resbr{ display: none !important; }


/* mobiel: GAME MENU als dropdown */



/* ===== mobiele menu's: hamburger links (spelmenu) en rechts (friends/donation/server/links) ===== */



/* resources compact onder elkaar (desktop) */
table.master_resources{ min-height: 0 !important; height: auto !important; }
table.master_resources td{ padding: 1px 12px !important; line-height: 1.25 !important; }
table.master_resources .resregel{ display: block; padding: 0; margin: 0; line-height: 1.35; }
table.master_resources .resbr{ display: none; }

/* nieuws: datumkolom niet zo breed, titel dichterbij */
table.master_news td[width="19%"]{ width: 92px !important; }
table.master_news td[width="79%"]{ width: auto !important; }


/* resources: geen lege frame-rijen en geen loze ruimte */
table.master_resources > tbody > tr:not(:has(td.title)):not(:has(.resregel)){ display: none !important; }
table.master_resources{ min-height: 0 !important; height: auto !important; }
table.master_resources td{ padding: 3px 10px !important; font-size: 8pt; }
table.master_resources td.title{ padding: 8px 12px !important; }


/* menu-items in het oranje van het blokje */
table.master_menu a.menu{ color: var(--fk-goud) !important; }
table.master_menu a.menu:hover{ color: var(--fk-goud) !important; }
table.master_menu font.arrow{ color: var(--fk-goud) !important; }


/* ALLE zijlinks oranje: donation, other links, friends/enemies */
table.master_links a, table.master_links a.menu,
table.master_friends a, table.master_enemies a{ color: var(--fk-goud) !important; }
table.master_links a:hover, table.master_friends a:hover,
table.master_enemies a:hover{ color: var(--fk-goud) !important; }
table.master_links font.arrow, table.master_menu font.arrow{ color: var(--fk-goud) !important; }
table.master_menu a.menu, table.master_menu a{ color: var(--fk-goud) !important; }

/* CQ2 (29/10): een menu-item met een melding (Battles bij inkomende aanvallen, Character met
   skillpunten, Spellbook met workers, Buildings bij een volle arcane kamer, Post Office) wordt
   weer vet gezet. Vroeger viel dat op door een afwijkende kleur; in dit thema is alles goud,
   dus zonder vet zie je geen verschil meer (Phil 29/10). */
table.master_menu a font.alert,
table.master_menu a.menu font.alert{ font-weight: 700 !important; color: var(--fk-titel) !important; }


/* ALLE inhoudslinkS oranje (nieuws, raise, skill tree, ...) */
table.master_content a, table.master_news a{ color: var(--fk-goud) !important; }
table.master_content a:hover, table.master_news a:hover{ color: var(--fk-goud) !important; }
table.master_content a.nieuwswis{ color: #8b8578 !important; }
table.master_content font.alert a, table.master_content a font.alert{ color: #d9584a !important; }


/* desktop: nieuws en resources exact even hoog */
@media (min-width: 861px){
	table.master_news, table.master_resources{ height: 156px !important; min-height: 156px !important; }
}


/* uitslagen van gevechten in het oranje */
font.battleuitslag, .battleuitslag{ color: var(--fk-goud) !important; }
font.battleuitslag i, .battleuitslag i{ color: inherit !important; }


/* eigen bevestigingsvenster (flee) in de sitekleuren */
#fk-bevestig{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72);
	display: flex; align-items: center; justify-content: center; z-index: 99999; }
#fk-bevestig .fk-bevestig-vak{ background: #12161d; border: 1px solid #3b3f45; border-radius: 10px;
	padding: 20px 24px; width: calc(100% - 48px); max-width: 340px;
	box-shadow: 0 18px 50px rgba(0,0,0,.7); font-family: Verdana, Arial, Helvetica, sans-serif; }
#fk-bevestig .fk-bevestig-tekst{ color: var(--fk-titel); font-size: 14px; line-height: 1.4; margin-bottom: 16px; text-align: center; }
#fk-bevestig .fk-bevestig-knoppen{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#fk-bevestig button{ padding: 10px; border-radius: 6px; border: 1px solid #3b3f45; background: #1b2028;
	color: #d8d2c4; font: 13px Verdana, Arial, sans-serif; cursor: pointer; }
#fk-bevestig button.fk-ja{ border-color: var(--fk-goud); color: var(--fk-goud); }
#fk-bevestig button:hover{ border-color: var(--fk-goud); }


/* creature-kaarten (mobiel): eigen opmaak in de sitekleuren */
.crt-kaart{
	border: 1px solid #3b3f45; border-radius: 8px; margin: 0 0 10px;
	padding: 12px 14px; background: linear-gradient(180deg, #161a21 0%, #11151b 100%);
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #c5c9ce;
}
.crt-kaart.crt-dood{ opacity: .55; }
.crt-kop{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.crt-naam{ color: var(--fk-titel); font-size: 14px; font-weight: bold; }
.crt-level{ color: var(--fk-goud); font-size: 11px; letter-spacing: .5px; }
.crt-ras{ color: #9aa3ad; font-size: 11.5px; margin-bottom: 8px; }
.crt-cijfers{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; }
.crt-cijfers span{ color: #c5c9ce; font-size: 11.5px; }
.crt-acties{ display: flex; flex-wrap: wrap; gap: 8px; }
.crt-knop{
	display: inline-block; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--fk-goud) 45%, transparent);
	border-radius: 5px; color: var(--fk-goud); font-size: 11.5px; text-decoration: none;
}
.crt-knop:hover{ border-color: var(--fk-goud); color: var(--fk-goud); }


/* resources op één rij (desktop), zoals op mobiel */
@media (min-width: 861px){
	table.master_resources .resregel{
		display: inline-block !important; margin: 0 14px 0 0 !important;
		padding: 0 !important; white-space: nowrap;
	}
	table.master_resources .resbr{ display: none !important; }
}


/* resources links uitlijnen (stonden gecentreerd in het paneel) */
table.master_resources td{ text-align: left !important; }
table.master_resources .resregel{ text-align: left !important; padding-left: 0 !important; }


/* resources: gelijke ruimte boven en onder, en gelijk met de titel */
table.master_resources .resregel{ padding: 2px 0 !important; margin: 0 !important; }
table.master_resources .resregel:first-of-type{ margin-top: 4px !important; }
table.master_resources .resregel:last-of-type{ margin-bottom: 2px !important; }
table.master_resources td > .resregel{ padding-left: 0 !important; }
table.master_resources td{ padding-left: 0 !important; text-align: left !important; }


/* resources: desktop compactere regels, mobiel gecentreerd */
@media (min-width: 861px){
	table.master_resources .resregel{
		padding: 1px 0 !important; margin: 0 !important; line-height: 1.35 !important;
	}
}
@media (max-width: 860px){
	table.master_resources td{ text-align: center !important; }
	table.master_resources .resregel{ margin: 0 7px !important; }
}


/* resources: kader sluit altijd om de inhoud, op elke breedte */
table.master_resources, table.master_resources > tbody,
table.master_resources > tbody > tr,
table.master_resources > tbody > tr > td{ height: auto !important; }


/* minder ruimte tussen de titel en de eerste resource (desktop) */
@media (min-width: 861px){
	table.master_resources td:has(.resregel){ padding-top: 0 !important; }
	table.master_resources .resregel:first-of-type{ margin-top: -1px !important; }
}


/* titel + resources 5 px naar links */
table.master_resources .resregel{ margin-left: -10px !important; position: relative; top: -10px; }
table.master_resources td.title{ padding-left: 0 !important; position: relative; top: -10px; left: -10px; }


/* desktop: onderkant van resources gelijk met het nieuwsvak */
@media (min-width: 861px){
	table.master_news, table.master_resources{ height: 156px !important; }
}


.crt-item{ color: #9aa3ad; font-size: 11.5px; margin: 0 0 8px; }
.crt-item:empty{ display: none; }


.crt-item-btn{
	background: none; border: 0; padding: 0; cursor: pointer;
	color: #9aa3ad; font: 11.5px Verdana, Arial, sans-serif; text-decoration: underline dotted;
}
.crt-item-btn:hover{ color: var(--fk-goud); }
.crt-effect{ display: none; margin-top: 4px; color: var(--fk-titel); font-size: 11.5px; }
.crt-effect.open{ display: block; }


.crt-def{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 8px; }
.crt-def span{ color: #9aa3ad; font-size: 11.5px; }

/* CQ2: de xp-balk van de Character-pagina kan ook als div binnenkomen (mobiele variant uit
   character.php). Zonder deze basisregels is die div op desktop onzichtbaar. */
.fk-xpbar{
	height: 13px; width: 100%; max-width: 340px; margin: 2px 0 0;
	background: rgba(255,255,255,.07); border: 1px solid color-mix(in srgb, var(--fk-goud) 45%, transparent);
	border-radius: 7px; overflow: hidden;
}
.fk-xpbar > span{ display: block; height: 100%; background: linear-gradient(90deg, var(--fk-goud), var(--fk-titel)); }
/* de cel waar de xp-balk in zit is 100 px breed; laat de balk de celbreedte gebruiken */
.fk-page-character td:has(.fk-xpbar){ width: 340px !important; }


/* ===== CQ2 25/10: creaturekaarten, gevechtslijsten op mobiel en de xp-tooltip ===== */

/* creaturekaart: naam + level, ras/class, band met schade/maxhealth en F/D/A/E, item, knoppen */
.crt-kop{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 2px; }
.crt-band{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: rgba(0,0,0,.35); border-radius: 4px; padding: 4px 9px; margin: 0 0 5px;
}
.crt-hp{ font-size: 12px; letter-spacing: .5px; white-space: nowrap; }
.crt-def{ display: block; margin: 0; color: #9aa3ad; font-size: 10.5px; letter-spacing: .3px; white-space: nowrap; }
.crt-ras{ margin-bottom: 3px; }
.crt-item{ color: var(--fk-goud); font-size: 12px; margin: 0 0 5px; }
.crt-item-leeg{ color: #9aa3ad; }

/* xp-tooltip (overlib) in de spelkleuren: donker met goud, in plaats van lavendel */
.overDiv, #overDiv div, #overDiv table{
	background: #10141a !important;
	background-image: none !important;
	border: 1px solid var(--fk-goud) !important;
	color: var(--fk-titel) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,.65) !important;
}
#overDiv td, #overDiv font, #overDiv span, #overDiv div{ color: var(--fk-titel) !important; background: transparent !important; }

@media (max-width: 860px){
	/* kaart volgt de schermbreedte, met dezelfde marge als het paneel */
	/* de kaart volgt de breedte van het paneel (dat zelf bijna het hele scherm is) */
	.crt-kaart{ width: calc(100vw - 58px) !important; max-width: calc(100vw - 58px) !important; box-sizing: border-box; }

	/* niets breder dan het scherm (o.a. het gevechtsverslag) */
	body table{ max-width: 100% !important; }
	body td, body div{ overflow-wrap: break-word; }

	/* verdedigings-/aanvallerslijst: vaste twee regels per creature, zodat de getallen
	   altijd op dezelfde plaats staan:
	     regel 1: naam · ras/class ................................. L
	     regel 2: schade/health   F/D/A/E
	   Alleen de binnenste rij (niet de omhullende tabelrij). */
	#defendersframe tr:has(> td > font.head),
	#attackersframe tr:has(> td > font.head){
		display: grid !important;
		grid-template-columns: auto auto minmax(0, 1fr) auto !important;
		column-gap: 10px !important;
		row-gap: 2px !important;
		align-items: baseline !important;
		padding: 7px 4px !important;
		border-bottom: 1px solid rgba(255,255,255,.07) !important;
	}
	#defendersframe tr:has(> td > font.head) > td,
	#attackersframe tr:has(> td > font.head) > td{
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left !important;
		white-space: normal !important;
		font-size: 12.5px !important;
	}
	#defendersframe tr:has(> td > font.head) > td:nth-child(1),
	#attackersframe tr:has(> td > font.head) > td:nth-child(1){ grid-area: 1 / 1 / 2 / 2 !important; }
	#defendersframe tr:has(> td > font.head) > td:nth-child(2),
	#attackersframe tr:has(> td > font.head) > td:nth-child(2){ grid-area: 1 / 2 / 2 / 4 !important; white-space: nowrap !important; }
	#defendersframe tr:has(> td > font.head) > td:nth-child(3),
	#attackersframe tr:has(> td > font.head) > td:nth-child(3){ grid-area: 1 / 4 / 2 / 5 !important; justify-self: end !important; text-align: right !important; }
	#defendersframe tr:has(> td > font.head) > td:nth-child(4),
	#attackersframe tr:has(> td > font.head) > td:nth-child(4){ grid-area: 2 / 1 / 3 / 2 !important; justify-self: start !important; }
	#defendersframe tr:has(> td > font.head) > td:nth-child(5),
	#attackersframe tr:has(> td > font.head) > td:nth-child(5){ grid-area: 2 / 2 / 3 / 5 !important; justify-self: start !important; }
	#defendersframe tr:has(> td > font.head) > td:empty,
	#attackersframe tr:has(> td > font.head) > td:empty{ display: none !important; }

	/* tabellen in de iframes niet breder dan het scherm */
	#defendersframe, #defendersframe table,
	#attackersframe, #attackersframe table{ width: 100% !important; max-width: 100% !important; }

	/* de twee lijsten krijgen exact de omkadering van een BATTLES-vak:
	   achtergrond #10141a, rand 1px #7d7360, radius 6px, padding 9px 11px */
	/* alleen de achtergrond van het BATTLES-vak; het kader zelf komt van het paneel eromheen,
	   anders werd de inhoud dubbel ingesprongen en dus te smal */
	body.fk-defenders, body.fk-attackers{
		background: #10141a !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

@media (max-width: 860px){
	/* CQ2: de omkaderde sectieboxen zijn tabelrijen met display:block en padding; zonder
	   border-box wordt 100% + padding breder dan het paneel (rechts viel het kader buiten).
	   De binnenste rijen/cellen hebben geen padding meer nodig. */
	body table tr, body table td, body table{ box-sizing: border-box !important; }
	body table.master_content > tbody > tr{ max-width: 100% !important; }
}

@media (max-width: 860px){
	/* de vakken met de creatures/aanvallers (td.iframeline) waren smaller dan het paneel:
	   de td met width=97% eromheen kromp mee. Alles op 100% zodat de divs even breed zijn
	   als het BATTLES-vak. */
	td.iframeline{ width: 100% !important; }
	iframe[name="defenders"], iframe[name="attackers"]{ width: 100% !important; }
	table.master_content td[width="97%"], table.master_content td[width="95%"],
	table.master_content table[width="100%"]{ width: 100% !important; }
}

@media (max-width: 860px){
	/* de creature-/aanvallersvakken werden door de tabelketen smaller dan het BATTLES-vak
	   (td width=97% + td width=100% met eigen padding). Alles op 100%, zodat de divs
	   de volle breedte hebben. */
	body td[width="97%"], body td[width="95%"]{ width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
	body td.iframeline{ width: 100% !important; }
	body td[width="100%"] > table[width="100%"]{ width: 100% !important; }
}

@media (max-width: 860px){
	/* minder binnenmarge rond de creature-/aanvallersvakken, zodat die divs de volle
	   breedte van het BATTLES-vak gebruiken */
	tr:has(td.iframeline){ padding-left: 4px !important; padding-right: 4px !important; }
	td[width="97%"], td.iframeline{ padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 860px){
	/* de cel om de iframe had nog 2px padding; die eraf zodat de div de volle breedte pakt */
	tr:has(td.iframeline) > td{ padding-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width: 860px){
	/* het CQ2-formulier zet 3%-spacercellen naast de creature-/aanvallerslijst; op mobiel
	   vreten die de breedte op. Op 0 zetten, dan vullen de divs het hele vak. */
	td[width="3%"]{ width: 0 !important; padding: 0 !important; }
}

@media (max-width: 860px){
	/* een iframe in een auto-brede tabel blijft op zijn intrinsieke 300px staan; met
	   table-layout:fixed neemt de tabel de volle breedte en vult de iframe die. */
	table:has(td.iframeline){ table-layout: fixed !important; width: 100% !important; }
	iframe[name="defenders"], iframe[name="attackers"]{ width: 100% !important; display: block !important; }
	td.iframeline{ width: auto !important; }
}

@media (max-width: 860px){
	/* cellen met width=100% in een block-getoonde rij krompen naar hun inhoud in
	   (formulieren zoals het ticketformulier stonden daardoor maar half breed). */
	table.master_content tr{ width: 100% !important; }
	table.master_content tr > td[width="100%"]{ width: 100% !important; }
	table.master_content tr > td[width="97%"], table.master_content tr > td[width="95%"]{ width: 100% !important; }
}

@media (max-width: 860px){
	/* ticketformulier: de CQ2-tabel eromheen krimpt naar zijn inhoud, waardoor de velden
	   maar half breed stonden. De velden volgen nu de breedte van het scherm. */
	body.fk-page-tickets form{ width: 100% !important; }
	body.fk-page-tickets input[name="subject"],
	body.fk-page-tickets textarea[name="text"]{
		width: calc(100vw - 70px) !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Melding inkomend gevecht: alleen op mobiel zichtbaar (cq-mobile.css zet hem daar aan). */
#fk-aanval-toast { display: none; }

/* xp-popup: alleen op mobiel zichtbaar */
#fk-xp-popup { display: none; }

/* De vier magics op de spelersinfo: 2x2 en gecentreerd (Phil 26/10) */
.fk-magic-grid { margin: 4px auto 2px; }
.fk-magic-grid td { padding: 2px 14px; text-align: left; white-space: nowrap; }

/* De aanvals-/verdedigingsframes: transparante achtergrond, maar wel een kader zoals de
   andere blokken in het paneel (Phil 26/10). */
iframe[name="attackers"], iframe[name="defenders"] {
	background: transparent;
	border: 1px solid var(--fk-lijn, rgba(230, 198, 123, 0.25));
	border-radius: 6px;
	padding: 2px;
}

/* Resources-paneel is maar ~180 px breed: de "alles op één rij"-regel hierboven liet de
   gegevens over elkaar vallen. Op desktop dus elk gegeven op zijn eigen regel (Phil 26/10). */
@media (min-width: 861px) {
	table.master_resources .resregel {
		display: block !important;
		margin: 0 !important;
		white-space: normal !important;
	}
}

/* Voortgangsbalk (Character): afgeronde baan met een gouden verloop, een bewegende glans en
   het percentage in de balk. (Phil 26/10, "een andere progressbar") */
.fk-xpbar {
	position: relative;
	height: 15px;
	margin: 7px 0 9px;
	border-radius: 999px;
	background: linear-gradient(180deg, #0a0e13, #161d25);
	border: 1px solid rgba(230, 198, 123, 0.38);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.04);
	overflow: hidden;
}
.fk-xpbar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #0A4A6E 0%, var(--fk-goud) 35%, var(--fk-titel) 75%, #f7e6b8 100%);
	box-shadow: 0 0 10px rgba(230, 198, 123, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	position: relative;
	overflow: hidden;
}
.fk-xpbar > span:after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 45%;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
	animation: fk-xp-glans 2.6s linear infinite;
}
.fk-xpbar:after {
	content: attr(title);
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	font: bold 10px/1 Verdana, Arial, sans-serif;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
	pointer-events: none;
}
@keyframes fk-xp-glans {
	from { left: -50%; }
	to   { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
	.fk-xpbar > span:after { animation: none; display: none; }
}

/* NEWS-paneel: laat het meegroeien met de nieuwslijst. Met een vaste hoogte van 156 px
   liepen de nieuwsregels over de panelen eronder (nieuwspost, filter). (Phil 27/10) */
table.master_news{
	height: auto !important;
	min-height: 156px !important;
}
table.master_news > tbody,
table.master_news > tbody > tr,
table.master_news > tbody > tr > td{
	height: auto !important;
}

/* Battle-lijsten (Your Creatures / Attacking Creatures): wat lucht links en rechts, anders
   staat de nummering tegen de rand van het frame. (Phil 27/10) */
body.fk-defenders,
body.fk-attackers,
body.fk-ch-attackers{
	padding-left: 14px !important;
	padding-right: 14px !important;
}

/* Inwonerslijst: online = opgelicht, offline = gedimd. */
font.fk-online, .fk-online{ color: #7ee08a !important; font-weight: 700 !important; }
font.fk-offline, .fk-offline{ color: #8b98a9 !important; font-weight: 400 !important; }

/* CQ2: scheidingslijn tussen de berichten in pub & marketplace. De oude thema's deden dat
   met een algemene .titleline-regel; in deze layout ontbrak die, waardoor de replies aan
   elkaar plakten. (Phil 27/10) */
table.titleline {
	border-bottom: 1px solid rgba(200,164,90,0.18);
}
table.titleline > tbody > tr > td {
	padding-top: 7px;
	padding-bottom: 7px;
}

/* CQ2: knop "terug naar de gevechten" — alleen op mobiel zichtbaar (Phil 27/10). */
a.fk-back-battles { display: none !important; }

/* =====================  WERELDKAART (CSS-grid)  ===================== */
/* CQ2 (Phil 27/10): de kaart was een geneste tabel; tussen de kolommen scheen een kier door
   (grijze streepjes) en links/rechts stond niet gelijk. Nu een grid met de pijlen rondom. */
.fk-kaart{
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 46px;
	grid-template-rows: 46px auto 46px;
	gap: 6px 8px;
	max-width: 430px;
	margin: 2px auto 4px;
	align-items: center;
	justify-items: center;
}
.fk-kaart > .fk-pijl-a{ display: flex; align-items: center; justify-content: center; padding: 2px; }
.fk-kaart > .fk-pijl-a:hover{ filter: brightness(1.15); }
.fk-kaart > .pijl-nw{ grid-area: 1 / 1; justify-self: start; }
.fk-kaart > .pijl-n { grid-area: 1 / 2; }
.fk-kaart > .pijl-no{ grid-area: 1 / 3; justify-self: end; }
.fk-kaart > .pijl-w { grid-area: 2 / 1; justify-self: start; }
.fk-kaart > .pijl-o { grid-area: 2 / 3; justify-self: end; }
.fk-kaart > .pijl-zw{ grid-area: 3 / 1; justify-self: start; }
.fk-kaart > .pijl-z { grid-area: 3 / 2; }
.fk-kaart > .pijl-zo{ grid-area: 3 / 3; justify-self: end; }
.fk-kaart > .fk-kaart-grid{
	grid-area: 2 / 2;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%; border: 1px solid rgba(200,164,90,.18); border-radius: 4px;
	background: #0e1219;
}
.fk-kaart > .fk-kaart-grid > .fk-kaartcel{
	padding: 8px 3px; text-align: center; line-height: 1.35;
	min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fk-kaart > .fk-kaart-grid > .fk-kaartcel.heeft-kd{ background: rgba(200,164,90,.05); }

/* CQ2: kleine hint bij de travel-keuze (A = accept, F = flee) */
.fk-toetshulp{ color: #8b98a9; font-size: 8pt; letter-spacing: .04em; }

/* =====================  CREATURE-LIJST OP DESKTOP (als in CQ2)  ===================== */
/* Phil 27/10: op desktop weer één regel per creature zoals in het klassieke CQ2
   (naam/level | ras | schade-hp + F/D/A/E | item | knoppen). Op mobiel blijft de kaart. */
@media (min-width: 861px){
	body.fk-page-creatures tr:has(> td > .crt-kaart) > td{ padding: 0 !important; border: 0 !important; }

	.crt-kaart{
		display: grid;
		grid-template-columns: minmax(190px, 1.3fr) minmax(120px, .8fr) minmax(190px, 1.1fr) minmax(150px, 1fr) auto;
		grid-template-areas: "kop ras band item acties";
		align-items: center; column-gap: 18px; row-gap: 0;
		margin: 0; padding: 7px 10px; border: 0; border-radius: 0;
		border-bottom: 1px solid rgba(200,164,90,.14);
		background: transparent; background-image: none;
		font-size: 12px;
	}
	.crt-kaart:first-of-type{ border-top: 1px solid rgba(200,164,90,.14); }

	.crt-kop{ grid-area: kop; display: flex; align-items: baseline; gap: 10px; margin: 0; }
	.crt-naam{ font-size: 12.5px; }
	.crt-level{ margin-left: auto; font-size: 11px; }

	.crt-ras{ grid-area: ras; margin: 0; font-size: 11.5px; color: #a9b2bc; }

	.crt-band{
		grid-area: band; display: flex; align-items: center; justify-content: space-between; gap: 12px;
		margin: 0; padding: 2px 8px; background: rgba(0,0,0,.28); border-radius: 3px;
	}
	.crt-hp{ font-size: 11.5px; }
	.crt-def{ font-size: 10px; }

	.crt-item{ grid-area: item; margin: 0; font-size: 11.5px; }

	.crt-acties{ grid-area: acties; display: flex; flex-wrap: nowrap; gap: 6px; }
	.crt-knop{ padding: 4px 9px; font-size: 11px; }
}

/* =====================  XP/INFO-VENSTER OOK OP DESKTOP  ===================== */
/* Phil 27/10: de opmaak van dit venster stond alleen in cq-mobile.css (media <=860px), dus op
   desktop opende het wel maar bleef het onzichtbaar. Hier dezelfde stijl voor alle breedtes. */
#fk-xp-popup.open{
	display: block; position: fixed; left: 50%; top: 50%; z-index: 99999;
	transform: translate(-50%, -50%);
	width: min(340px, 86vw); padding: 16px 18px 20px; border-radius: 12px;
	background: #101418; border: 1px solid rgba(230,198,123,.45);
	box-shadow: 0 18px 40px rgba(0,0,0,.65); color: #e8ebef;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#fk-xp-popup .fk-xp-kop{ font: bold 13px/1.3 Verdana, Arial, sans-serif; color: var(--fk-titel); }
#fk-xp-popup .fk-xp-tekst{ margin-top: 6px; font: 14px/1.35 Verdana, Arial, sans-serif; color: #ffffff; }
#fk-xp-popup .fk-xp-bar{ margin-top: 12px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
#fk-xp-popup .fk-xp-bar i{ display: block; height: 100%; width: 0; background: var(--fk-titel); transition: width .25s ease-out; }


/* CQ2 (29/10, testkopie): avatar in het vak General Information, links van de tekst. */
/* De cel krijgt ruimte links, de avatar staat daar absoluut in. Zo blijft ALLE tekst rechts
   van de avatar staan in plaats van eronder door te lopen. */
.fk-avatar{ float: left; max-width: 220px; max-height: 220px; margin: 2px 18px 12px 0; border-radius: 10px; border: 1px solid #3b3f45; }
.fk-avatar-tekst{ overflow: hidden; }

.fk-avatar-tekst .fk-magic-grid{ margin: 12px 0 0; }
/* Zonder deze regel begint "Forest Magic" 14 px verder dan de regels erboven (padding van
   de cellen in .fk-magic-grid); hier dus gelijk met de tekst. */
.fk-avatar-tekst .fk-magic-grid td{ padding-left: 0; padding-right: 44px; }
.fk-avatar-tekst .fk-magic-grid td:last-child{ padding-right: 0; }