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

:root {
	--fk-bg: #0a0d12;
	--fk-panel: #10141a;
	--fk-panel-2: #0c1016;
	--fk-lijn: #7d7360;
	--fk-goud: #c9a227;
	--fk-tekst: #b8b2a4;
	--fk-tekst-zacht: #8d887c;
}

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, font, 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;
}
a { color: #c8a45a; 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: #e6dcc2;
	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-goud); 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: #ded8c9; }

/* 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; }

/* inline kleurattributen van de oude pagina's (vooral de loginpagina) niet laten winnen */
font[color], td[color], span[color] { color: #b8b2a4 !important; }
font[color="#000000"], font[color="black"], font[color="#000"] { 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 #c8a45a;
	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:#c8a45a;
	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 rgba(210,105,0,.55);
	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 rgba(210,105,0,.25);
	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: #d26900; display: inline-block; }
.fk-banner .rechts a{
	color: #e6a75a; font-size: 8pt; letter-spacing: 1.6px; text-transform: uppercase;
	text-decoration: none;
}
.fk-banner .rechts a:hover{ color: #ffc978; }
.fk-banner .pijl{
	position: absolute; right: 6px; top: 10px; width: 26px; height: 26px;
	border: 1px solid rgba(210,105,0,.5); color: #d26900; 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 rgba(210,105,0,.85); 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: #d26900; background: rgba(7,9,12,.92);
	border: 1px solid rgba(210,105,0,.55); 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: #ffc978; border-color: rgba(210,105,0,.9); }
.fk-banner.ingeklapt{ height: 15px !important; overflow: visible; margin-bottom: 10px; background: #07090c; }
.fk-banner.ingeklapt > .merk{ display: none; }
.fk-banner.ingeklapt .rechts{ display: none; }
.fk-banner.ingeklapt .fk-inklap{ bottom: auto; top: 0; border: 1px solid rgba(210,105,0,.55); border-radius: 0 0 7px 7px; background: #0b0e13; }


/* =====================  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: #cfc7b4;
	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: #ffc978; border-color: rgba(210,105,0,.7); }
#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: #c9a227; 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: #d26900 !important; }
table.master_menu a.menu:hover{ color: #f08b2a !important; }
table.master_menu font.arrow{ color: #d26900 !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: #d26900 !important; }
table.master_links a:hover, table.master_friends a:hover,
table.master_enemies a:hover{ color: #f08b2a !important; }
table.master_links font.arrow, table.master_menu font.arrow{ color: #d26900 !important; }
table.master_menu a.menu, table.master_menu a{ color: #d26900 !important; }


/* ALLE inhoudslinkS oranje (nieuws, raise, skill tree, ...) */
table.master_content a, table.master_news a{ color: #d26900 !important; }
table.master_content a:hover, table.master_news a:hover{ color: #f08b2a !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: #d26900 !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 #45402f; 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: #e6c67b; 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 #45402f; background: #1b2028;
	color: #d8d2c4; font: 13px Verdana, Arial, sans-serif; cursor: pointer; }
#fk-bevestig button.fk-ja{ border-color: #d26900; color: #d26900; }
#fk-bevestig button:hover{ border-color: #d26900; }


/* creature-kaarten (mobiel): eigen opmaak in de sitekleuren */
.crt-kaart{
	border: 1px solid #45402f; 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: #cfc7b4;
}
.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: #e6c67b; font-size: 14px; font-weight: bold; }
.crt-level{ color: #d26900; 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: #cfc7b4; font-size: 11.5px; }
.crt-acties{ display: flex; flex-wrap: wrap; gap: 8px; }
.crt-knop{
	display: inline-block; padding: 6px 12px; border: 1px solid rgba(210,105,0,.45);
	border-radius: 5px; color: #d26900; font-size: 11.5px; text-decoration: none;
}
.crt-knop:hover{ border-color: #f08b2a; color: #f08b2a; }


/* 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: #d26900; }
.crt-effect{ display: none; margin-top: 4px; color: #e6c67b; 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 rgba(210,105,0,.45);
	border-radius: 7px; overflow: hidden;
}
.fk-xpbar > span{ display: block; height: 100%; background: linear-gradient(90deg, #d26900, #e6a75a); }
/* 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: #d26900; 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 #c9a227 !important;
	color: #e6c67b !important;
	box-shadow: 0 3px 10px rgba(0,0,0,.65) !important;
}
#overDiv td, #overDiv font, #overDiv span, #overDiv div{ color: #e6c67b !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, #7a4a08 0%, #d26900 35%, #e6c67b 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;
}