/* Fallen Kingdom - skin fknew: ALLEEN mobiel (<= 860px).
   Dit bestand wordt geladen met media="(max-width:860px)", dus het kan de desktopversie niet raken. */

@media (max-width: 900px) {
	.fk-banner{ height: auto !important; }
	.fk-banner .wapen{ width: 38px; height: 44px; }
	.fk-banner .naam{ font-size: 11px; letter-spacing: 2px; }
	.fk-banner .naam b{ font-size: 18px; letter-spacing: 3px; }
	.fk-banner .kasteel{ display: none; }
	.fk-banner .maan{ width: 36px; height: 36px; margin-left: -18px; top: 8px; }
}

@media (max-width: 860px) {
	html, body{ font-size: 13px; }
	body{ padding: 0 6px 18px; }
	.fk-banner{ margin: 0 -6px 10px; }
	.fk-banner .rechts{ right: 6px; bottom: 4px; gap: 6px; padding: 2px 6px; }
	.fk-banner .rechts a{ font-size: 9px; letter-spacing: .4px; }
	.fk-banner .rechts .blok{ width: 9px; height: 9px; }
	.fk-banner .fk-inklap{ width: 34px; height: 13px; font-size: 9px; }

	table.master, table.master > tbody, table.master > tbody > tr{ display: block !important; width: 100% !important; }
	table.master > tbody > tr > td{ display: block !important; width: 100% !important; padding: 0 !important; }
	table.master > tbody > tr > td[background]{ display: none !important; }
	table.master > tbody > tr > td:first-child{ width: 100% !important; flex: none; padding-right: 0 !important; }

	table.master_menu, table.master_links, table.master_friends,
	table.master_enemies{ width: 100% !important; }

	/* menu in twee kolommen, grotere tikvlakken */
	table.master_menu td{ column-count: initial; font-size: 0; }
	table.master_menu a.menu{ font-size: 12.5px !important; padding: 5px 8px !important; white-space: normal !important; }
	table.master_menu a.menu[href*="action=pub"],
	table.master_menu a.menu[href*="action=pub&type=1"],
	table.master_menu a.menu[href*="action=postoffice"],
	table.master_menu a.menu[href*="page=townhall"],
	table.master_menu a.menu[href*="page=warroom"],
	table.master_menu a.menu[href*="page=gemtemple"],
	table.master_menu a.menu[href*="page=buildings"]{ padding-left: 16px !important; }

	/* nieuws en resources onder elkaar */
	td:has(> table.master_news), td:has(> table.master_resources){
		display: block !important; width: 100% !important; padding: 0 0 10px 0 !important;
	}
	table.master_news{ margin-bottom: 10px; }
	table.master_news, table.master_resources{ min-height: 0 !important; }
	table.master_menu, table.master_links, table.master_friends,
	table.master_enemies{ min-height: 0 !important; }
	table.master_menu td, table.master_links td{ line-height: 1.45; }

	table.master_content{ width: 100% !important; }
	table.master_content > tbody > tr > td{ padding: 10px !important; overflow-x: visible; }
	table.master_content > tbody > tr > td > table{ width: 100% !important; }
	table.master_content table{ max-width: 100%; }
	table.master_content td.titleline{ padding: 8px 0 3px !important; }
	td.title{ white-space: normal !important; overflow: visible !important; width: auto !important; }
	table.master_menu td.title{ font-size: 9pt; }

	/* gastpagina: zij kolom ook volle breedte */
	body.gast table.master > tbody > tr > td:first-child{ width: 100% !important; padding-right: 0 !important; }
	body.gast table.master > tbody > tr > td:last-child > table{ width: 100% !important; }
	body.gast table.master > tbody > tr > td:last-child > table > tbody > tr > td{ padding-right: 12px !important; }

	#cq2chat-tab{ padding: 8px 4px !important; font-size: 10px; }
	#cq2chat{ width: 92vw !important; }
}

@media (max-width: 860px) {
	body.gast td.title{ padding: 7px 12px !important; }
	body.gast tr[height]{ display: none !important; }
	td[background*="/c_"]{ display: none !important; }
	body.gast table.master > tbody > tr > td:last-child > table > tbody > tr > td{ padding: 8px 12px !important; }

	/* loginvelden: label boven het veld, veld volle breedte */
	body.gast table.input, body.gast table.input tbody,
	body.gast table.input tr, body.gast table.input td{ display: block !important; width: 100% !important; }
	body.gast table.input td{ padding: 2px 0 !important; }
	body.gast table.input input[type="text"],
	body.gast table.input input[type="password"]{ width: 100% !important; box-sizing: border-box; }
	body.gast table.input input[type="submit"],
	body.gast table.input input[type="button"]{ width: auto !important; margin-top: 6px; }
}

@media (max-width: 860px) {
	.fk-mobknop{
		display: block; width: 100%; margin: 0 0 8px; padding: 10px 12px;
		background: #10141a; color: #c9a227; border: 1px solid var(--fk-lijn);
		border-radius: 4px; font: 13px Verdana, Arial, sans-serif;
		letter-spacing: 1.2px; text-transform: uppercase; text-align: left; cursor: pointer;
	}
	.fk-mobknop:active{ background: #16202a; }
}

@media (max-width: 860px) {
	table.master_menu font.arrow{ display: none !important; }
}

@media (max-width: 860px) {
	table.master_content td[width="50%"], body.gast td[width="50%"],
	table.master_content td[width="20%"], body.gast td[width="20%"],
	table.master_content td[width="30%"], body.gast td[width="30%"],
	table.master_content td[width="70%"], body.gast td[width="70%"]{ padding: 1px 6px !important; vertical-align: top; }
	table.master_content td[width="30%"], body.gast td[width="30%"]{ text-align: right !important; }
}

@media (max-width: 860px) {
	body.gast tr:has(> td[width="30%"]),
	table.master_content tr:has(> td[width="30%"]){ display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
	body.gast tr:has(> td[width="30%"]) td[width="50%"],
	body.gast tr:has(> td[width="30%"]) td[width="20%"],
	table.master_content tr:has(> td[width="30%"]) td[width="50%"],
	table.master_content tr:has(> td[width="30%"]) td[width="20%"]{ white-space: nowrap; }
	body.gast td[width="30%"],
	table.master_content td[width="30%"]{ flex: 0 0 100%; text-align: right !important; margin-left: 0; }
}

@media (max-width: 860px) {
	body.gast table:has(> tbody > tr > td > form){
		display: block !important; width: 100% !important;
	}
	body.gast table:has(> tbody > tr > td > form) > tbody{ display: block !important; width: 100% !important; }
	body.gast table:has(> tbody > tr > td > form) > tbody > tr{ display: block !important; width: 100% !important; }
	body.gast table:has(> tbody > tr > td > form) > tbody > tr > td{ display: block !important; width: 100% !important; }
	/* de lege inspringcel naast het formulier weg, anders blijft het smal */
	body.gast table:has(> tbody > tr > td > form) > tbody > tr > td:not(:has(form)){ display: none !important; }
	body.gast form{ display: block !important; width: 100% !important; }
	body.gast form > table{ width: 100% !important; }
	body.gast form > table,
	body.gast form > table > tbody,
	body.gast form > table tr{ display: block !important; width: 100% !important; }
	body.gast form > table td{
		display: block !important; width: 100% !important;
		text-align: left !important; padding: 2px 0 !important;
	}
	body.gast form input.input,
	body.gast form input[type="text"],
	body.gast form input[type="password"]{
		width: 100% !important; box-sizing: border-box; font-size: 14px;
		height: 34px; margin: 2px 0 8px;
	}
	body.gast form input[type="submit"],
	body.gast form input[type="button"]{
		width: auto !important; display: block; margin: 6px 0 10px 0;
		font-size: 13px; padding: 6px 18px;
	}
}

@media (max-width: 860px) {
	.fk-login{ max-width: none; }
	.fk-login input.input[type="text"], .fk-login input.input[type="password"]{ height: 36px; font-size: 15px; }
	.fk-login .fk-login-knop{ display: block; margin-top: 10px; padding: 8px 20px; font-size: 14px; }
}

@media (max-width: 860px) {
	body.gast table:has(> tbody > tr > td > form) > tbody > tr > td:not(:has(form)){ display: none !important; }
	body.gast table:has(> tbody > tr > td > form) > tbody > tr > td:has(form),
	body.gast table:has(> tbody > tr > td > form) > tbody > tr > td{ display: block !important; width: 100% !important; }

	body.gast form > table,
	body.gast form > table > tbody,
	body.gast form > table tr,
	body.gast form > table td{ display: block !important; width: 100% !important; }

	body.gast form > table td.flabel{
		text-align: left !important; padding: 8px 0 2px !important; color: #cfc7b4;
	}
	body.gast form > table td.fveld{ padding: 0 0 4px !important; }
	body.gast form > table td.fveld input.input,
	body.gast form > table td.fveld textarea{
		/* vaste schermbreedte i.p.v. 100%: de oude tabelcellen krimpen anders mee */
		width: calc(100vw - 84px) !important; max-width: 100% !important;
		box-sizing: border-box; height: 36px; font-size: 15px;
	}
	body.gast form > table td.fknop input{ display: block; margin: 10px 0 4px; padding: 8px 20px; font-size: 14px; }
}

@media (max-width: 860px) {
	table.master_news.fk-nieuws-kort{ height: auto !important; min-height: 0 !important; }
	table.master_news.fk-nieuws-kort > tbody > tr:nth-child(n+5){ display: none !important; }
	table.master_news.fk-nieuws-alles > tbody > tr:nth-child(n+5){ display: table-row !important; }
	.fk-nieuws-meer{
		display: block; width: 100%; margin: -8px 0 10px; padding: 9px 12px;
		background: #10141a; color: #c9a227; border: 1px solid var(--fk-lijn);
		border-radius: 4px; font: 12px Verdana, Arial, sans-serif;
		letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
	}
	.fk-nieuws-meer:active{ background: #16202a; }
}

@media (max-width: 860px) {
	table.master_news td{ padding: 3px 8px 3px 0 !important; }
	table.master_news td:first-child{ padding-left: 10px !important; white-space: nowrap; }
	table.master_resources{ margin-top: 0 !important; min-height: 0 !important; height: auto !important; }
}

@media (max-width: 860px) {
	table.master_resources .resregel{ display: inline-block; margin: 0 10px 0 0; font-size: 12px; }
	table.master_resources .resbr{ display: none; }
}

@media (max-width: 860px) {
	#fk-zijtab{ top: 40%; padding: 10px 4px; font-size: 10px; }
	#fk-zijlade{ width: 88vw; padding: 8px 8px 20px; }
	#fk-zijlade table{ margin-bottom: 8px; }
	.fk-mobknop{ display: none !important; }
}

@media (max-width: 860px) {
	#fk-zijtab{ display: none !important; }
	.fk-hamburger{
		position: fixed; bottom: 14px; top: auto; z-index: 3800;
		width: 42px; height: 42px; line-height: 40px; text-align: center;
		background: rgba(14,18,24,.96); color: #c9a227;
		border: 1px solid var(--fk-lijn); border-radius: 6px;
		font-size: 19px; cursor: pointer; user-select: none;
	}
	.fk-hamburger-links{ left: 8px; }
	.fk-hamburger-rechts{ right: 8px; }
	.fk-lade{
		position: fixed; top: 0; bottom: 0; width: 86vw; max-width: 340px;
		background: #090c11; z-index: 3790; overflow-y: auto; padding: 10px;
		transition: transform .18s ease-out;
	}
	.fk-lade-links{ left: 0; transform: translateX(-102%); border-right: 1px solid var(--fk-lijn); }
	.fk-lade-rechts{ right: 0; transform: translateX(102%); border-left: 1px solid var(--fk-lijn); }
	body.fk-open-lade-links .fk-lade-links,
	body.fk-open-lade-rechts .fk-lade-rechts{ transform: none; box-shadow: 0 0 30px rgba(0,0,0,.6); }
	.fk-lade-kop{
		display: flex; justify-content: space-between; align-items: center;
		color: #c9a227; font: 9pt Verdana, Arial, sans-serif; letter-spacing: 1.5px;
		text-transform: uppercase; padding: 4px 4px 10px; border-bottom: 1px solid var(--fk-lijn); margin-bottom: 8px;
	}
	.fk-lade-x{ cursor: pointer; font-size: 16px; padding: 0 4px; }
	.fk-lade table{ display: table !important; width: 100% !important; margin-bottom: 8px; }
	.fk-lade tbody{ display: table-row-group !important; }
	.fk-lade tr{ display: table-row !important; }
	.fk-lade 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-lade a.menu{ display: block !important; font-size: 13px !important; padding: 8px 10px !important; line-height: 1.3 !important; }
	.fk-lade br{ display: none !important; }
	.fk-lade table[class^="master_"]{
		border: 0 !important; background: transparent !important; box-shadow: none !important;
		margin-bottom: 4px !important;
	}
	.fk-lade td.title{ background: transparent !important; border-bottom: 1px solid var(--fk-lijn); font-size: 9pt !important; }
	.fk-lade .resregel{ display: block !important; margin: 0 0 3px !important; }
	.fk-lade .resbr{ display: none !important; }
}


/* chat op mobiel: schermvullend, met het invoerveld in beeld boven het toetsenbord */
body.fk-chat-vol #cq2chat.open{
	left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
	width: 100% !important; max-width: none !important;
	height: 100vh !important; height: 100dvh !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	z-index: 4200 !important;
}
body.fk-chat-vol #cq2chat-berichten{ flex: 1 1 auto !important; overflow-y: auto !important; }
body.fk-chat-vol #cq2chat-onder{ padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
body.fk-chat-vol #cq2chat-invoer{ font-size: 16px !important; padding: 8px !important; }
body.fk-chat-vol #cq2chat-tab{ display: none !important; }


/* ===== LINKERMENU IN SITESTIJL (donker paneel, goud, ruime regels) ===== */
@media (max-width: 860px){
	#lade-links{ background: linear-gradient(180deg,#0d1218 0%, #090c11 100%); }
	#lade-links .fk-lade-kop{
		background: linear-gradient(180deg,#182231,#111923);
		border: 1px solid rgba(201,162,39,.35);
		border-radius: 4px; margin: 0 0 10px; padding: 10px 12px;
		color: #e0b94a; letter-spacing: 1.6px;
	}
	#lade-links table.master_menu{
		background: transparent !important; border: 0 !important; box-shadow: none !important;
	}
	#lade-links table.master_menu td.title{ display: none !important; }
	#lade-links table.master_menu a.menu{
		display: block !important; color: #d9c37a !important;
		font-size: 14px !important; line-height: 1.2 !important;
		padding: 12px 14px !important; margin: 0 !important;
		border-bottom: 1px solid rgba(201,162,39,.12);
	}
	#lade-links table.master_menu a.menu:before{
		content: "\25AA"; color: #d26900; margin-right: 10px; font-size: 12px;
	}
	#lade-links table.master_menu a.menu:active{ background: rgba(201,162,39,.12); }
	/* sub-items van Your Kingdom iets ingesprongen en kleiner */
	#lade-links table.master_menu a.menu[href*="action=pub"],
	#lade-links table.master_menu a.menu[href*="action=pub&type=1"],
	#lade-links table.master_menu a.menu[href*="action=postoffice"],
	#lade-links table.master_menu a.menu[href*="page=townhall"],
	#lade-links table.master_menu a.menu[href*="page=warroom"],
	#lade-links table.master_menu a.menu[href*="page=gemtemple"],
	#lade-links table.master_menu a.menu[href*="page=buildings"]{
		padding-left: 32px !important; font-size: 13px !important; color: #b9a468 !important;
	}
}


/* geen uitgerekte rijen en geen loze regels in het mobiele menu */
@media (max-width: 860px){
	#lade-links, #lade-links .fk-lade-body,
	#lade-links table, #lade-links tbody, #lade-links tr, #lade-links td{
		height: auto !important; min-height: 0 !important;
	}
	#lade-links table{ display: table !important; }
	#lade-links tr{ display: table-row !important; }
	#lade-links td{ display: table-cell !important; padding: 0 !important; font-size: 0 !important; text-indent: 0 !important; }
	#lade-links br{ display: none !important; }
	#lade-links a.menu{ padding: 7px 14px !important; }
}


/* plat menu in de lade: vaste, compacte regels */
@media (max-width: 860px){
	#lade-links .fk-lade-body{ padding: 0; }
	#lade-links .fk-lade-body a.menu{
		display: block !important;
		padding: 11px 14px !important; margin: 0 !important;
		color: #d26900 !important; font-size: 14px !important; line-height: 1.2 !important;
		border-bottom: 1px solid rgba(201,162,39,.12);
	}
	#lade-links .fk-lade-body a.menu:before{
		content: "\25AA"; color: #d26900; margin-right: 10px; font-size: 12px;
	}
	#lade-links .fk-lade-body a.menu:active{ background: rgba(201,162,39,.12); }
	#lade-links font.arrow{ display: none !important; }
	#lade-links .fk-lade-body a.menu[href*="action=pub"],
	#lade-links .fk-lade-body a.menu[href*="action=pub&type=1"],
	#lade-links .fk-lade-body a.menu[href*="action=postoffice"],
	#lade-links .fk-lade-body a.menu[href*="page=townhall"],
	#lade-links .fk-lade-body a.menu[href*="page=warroom"],
	#lade-links .fk-lade-body a.menu[href*="page=gemtemple"],
	#lade-links .fk-lade-body a.menu[href*="page=buildings"]{
		padding-left: 52px !important; font-size: 13px !important; color: #b35a00 !important;
	}
}


/* meldingen in het menu (bv. buildings of character klaar) blijven goud */
@media (max-width: 860px){
	#lade-links a.menu font.alert,
	#lade-links a.menu .alert{ color: #e6c67b !important; }
}


/* uitslagen van gevechten in het oranje */
font.battleuitslag, .battleuitslag{ color: #d26900 !important; }
font.battleuitslag i, .battleuitslag i{ color: inherit !important; }


/* lijstpagina's (creatures, items, amulets, battles) als kaarten op mobiel */
@media (max-width: 860px){
	body{ padding-bottom: 78px !important; }   /* ruimte voor de twee knoppen onderaan */

	table.master_content.fk-lijst-kaarten > tbody > tr > td > table{ border: 0 !important; background: transparent !important; box-shadow: none !important; }
	table.master_content.fk-lijst-kaarten > tbody > tr > td > table > tbody > tr{
		display: block !important;
		background: #10141a; border: 1px solid var(--fk-lijn); border-radius: 6px;
		margin: 0 0 8px; padding: 9px 11px;
	}
	table.master_content.fk-lijst-kaarten > tbody > tr > td > table > tbody > tr > td{
		display: block !important; width: auto !important;
		border: 0 !important; padding: 1px 0 !important;
		font-size: 13px !important; line-height: 1.4 !important;
	}
	table.master_content.fk-lijst-kaarten > tbody > tr > td > table > tbody > tr > td:empty{ display: none !important; }
	table.master_content.fk-lijst-kaarten a{ display: inline-block; padding: 2px 0; }
}


/* item-popup (overlib): donkere kaart in de sitekleuren */
#overDiv table[bgcolor], #overDiv td[bgcolor]{ background: #0f131a !important; }
#overDiv table{ border: 1px solid #7d7360 !important; border-radius: 5px !important; }
#overDiv td{ color: #e8dcc0 !important; font: 12.5px/1.45 Verdana, Arial, sans-serif !important; }
#overDiv{ max-width: 92vw !important; }


/* chat-tab op mobiel: onderaan in het midden, boven de twee menuknoppen */
@media (max-width: 860px){
	#cq2chat-tab{
		left: 50% !important; right: auto !important; top: auto !important;
		bottom: 14px !important; transform: translateX(-50%);
		writing-mode: horizontal-tb !important; text-orientation: initial !important;
		padding: 0 22px !important; height: 42px; line-height: 42px; border-radius: 8px !important;
		border: 1px solid rgba(210,105,0,.55) !important;
		background: rgba(14,18,24,.96) !important; color: #d26900 !important;
		font-size: 12px !important; letter-spacing: 1.5px;
	}
}


/* mobiel menu: tekst gecentreerd, en Your Kingdom t/m Library als eigen blok */
@media (max-width: 860px){
	#lade-links .fk-lade-body a.menu{
		text-align: center !important;
		padding-left: 14px !important; padding-right: 14px !important;
	}
	#lade-links .fk-lade-body a.menu:before{ display: none !important; }
	#lade-links .fk-lade-body a.menu.fk-groep{ background: rgba(210,105,0,.07); }
	#lade-links .fk-lade-body a.menu.fk-groep-eerste{ border-top: 1px solid rgba(210,105,0,.45); margin-top: 6px; }
	#lade-links .fk-lade-body a.menu.fk-groep-laatste{ border-bottom: 1px solid rgba(210,105,0,.45); margin-bottom: 8px; }
	/* sub-items in de groep blijven iets kleiner */
	#lade-links .fk-lade-body a.menu.fk-groep[href*="action=pub"],
	#lade-links .fk-lade-body a.menu.fk-groep[href*="action=postoffice"],
	#lade-links .fk-lade-body a.menu.fk-groep[href*="page=library"]{ font-size: 13px !important; }
}


/* geen horizontale pagina-scroll: brede blokken (wereldkaart) scrollen binnen hun paneel */
@media (max-width: 860px){
	html, body{ overflow-x: hidden !important; max-width: 100vw; }
	table.master, table.master > tbody, table.master > tbody > tr, table.master > tbody > tr > td{
		max-width: 100% !important;
	}
	table.master_content{ display: block !important; width: 100% !important; max-width: 100% !important; }
	table.master_content > tbody > tr > td{
		display: block !important; width: auto !important;
		overflow-x: visible !important;
	}
	table.master_content table{ max-width: none !important; }
	.fk-banner img, img{ max-width: 100%; }
}


/* ruimte onderaan zodat de vaste knoppen niets afdekken */
@media (max-width: 860px){
	body{ padding-bottom: 84px !important; }
}


/* inhoud bovenin uitlijnen + wereldkaart compacter op mobiel */
@media (max-width: 860px){
	table.master_content > tbody > tr > td{ vertical-align: top !important; }
	table.master_content > tbody > tr > td > table{ margin-top: 0 !important; }
	table.master_content table:has(img[src*="arrows/"]){ width: auto !important; }
	table.master_content table:has(img[src*="arrows/"]) td{
		padding: 3px 6px !important; font-size: 12px !important; line-height: 1.25 !important;
	}
	table.master_content img[src*="arrows/"]{ width: 26px !important; height: 26px !important; }
	table.master_content table:has(img[src*="arrows/"]), 
	table.master_content table:has(img[src*="arrows/"]) tr,
	table.master_content table:has(img[src*="arrows/"]) td{ height: auto !important; }
}


/* de wereldkaart gebruikt vaste celbreedtes (110/330/30) uit de markup */
@media (max-width: 860px){
	table.master_content table:has(img[src*="arrows/"]) td[width]{ width: auto !important; min-width: 0 !important; }
	table.master_content table:has(img[src*="arrows/"]) td[width="110"]{ width: 33% !important; }
	table.master_content table:has(img[src*="arrows/"]) td[width="330"]{ width: 33% !important; }
}


/* wereldkaart op mobiel: geheel verkleind, indeling blijft intact */
@media (max-width: 860px){
	table.master_content table.fk-kaart{
		zoom: .74; -moz-transform: scale(.74); transform-origin: top left;
		margin: 0 auto !important;
	}
}


/* decoratieve paneelrijen (hoek-plaatjes) nemen op mobiel geen hoogte */
@media (max-width: 860px){
	table.master_content > tbody > tr{ height: auto !important; }
	table.master_content > tbody > tr > td{ height: auto !important; }
	table.master_content > tbody > tr > td > img[src*="c_lefttopcorner"], table.master_content > tbody > tr > td > img[src*="c_righttopcorner"], table.master_content > tbody > tr > td > img[src*="c_leftbottomcorner"], table.master_content > tbody > tr > td > img[src*="c_rightbottomcorner"]{ display: none !important; }
	table.master_content > tbody > tr > td:has(> img[src*="c_lefttopcorner"]), table.master_content > tbody > tr > td:has(> img[src*="c_righttopcorner"]), table.master_content > tbody > tr > td:has(> img[src*="c_leftbottomcorner"]), table.master_content > tbody > tr > td:has(> img[src*="c_rightbottomcorner"]){ height: 0 !important; padding: 0 !important; line-height: 0 !important; }
}


/* minder inspringing op mobiel: inhoud dichter bij de rand */
@media (max-width: 860px){
	table.master_content > tbody > tr > td{ padding: 6px 8px !important; }
	table.master_content > tbody > tr > td > table > tbody > tr > td:first-child{ padding-left: 2px !important; }
	table.master_content > tbody > tr > td table td{ padding-left: 4px !important; padding-right: 4px !important; }
}


/* creature-rijen als kaart op mobiel (alleen rijen met een sacrifice-link) */
@media (max-width: 860px){
	.fk-page-creatures table.master_content tr:has(a[href*="sacrifice"]){
		display: block !important;
		border: 1px solid #45402f !important; border-radius: 6px !important;
		padding: 8px 10px !important; margin: 0 0 8px !important;
		background: rgba(255,255,255,.02) !important;
	}
	.fk-page-creatures table.master_content tr:has(a[href*="sacrifice"]) td{
		display: block !important; width: auto !important;
		border: 0 !important; padding: 1px 0 !important;
		text-align: left !important;
	}
	.fk-page-creatures table.master_content tr:has(a[href*="sacrifice"]) td br{ display: none !important; }
}


/* verdedigerslijst in het gevechtsscherm op mobiel: één regel per creature */
@media (max-width: 860px){
	.fk-defenders #defendersframe, .fk-defenders #defendersframe > tbody{ display: block !important; width: 100% !important; }
	.fk-defenders #defendersframe tr{ display: block !important; border-bottom: 1px solid #2b2a24 !important; padding: 6px 0 !important; }
	.fk-defenders #defendersframe td{ display: block !important; width: auto !important; padding: 1px 0 !important; text-align: left !important; }
	.fk-defenders #defendersframe td br{ display: none !important; }
	iframe[name="defenders"]{ height: 340px !important; }
}


/* "equip new item." hoort bij de kaart erboven */
@media (max-width: 860px){
	.fk-page-creatures table.master_content tr:has(a[href*="sacrifice"]){
		margin-bottom: 0 !important; border-radius: 6px 6px 0 0 !important;
	}
	.fk-page-creatures table.master_content tr:has(a[href*="equip"]){
		display: block !important;
		border: 1px solid #45402f !important; border-top: 0 !important;
		border-radius: 0 0 6px 6px !important;
		margin: -1px 0 10px !important; padding: 0 10px 8px !important;
		background: rgba(255,255,255,.02) !important;
	}
	.fk-page-creatures table.master_content tr:has(a[href*="equip"]) td{
		display: block !important; width: auto !important; border: 0 !important; padding: 0 !important;
	}
}


/* mobiel: geen dubbele/open kaders binnen de panelen; alleen het paneel zelf */
@media (max-width: 860px){
	table.master_content table[border="1"],
	table.master_content table[border="1"] > tbody > tr > td,
	table.master_content td[border="1"],
	table.master_content .iframeline{ border: 0 !important; }
}


/* panelen dichter bij elkaar op mobiel (minder lege banden) */
@media (max-width: 860px){
	table.master_content{ margin-bottom: 8px !important; }
	table.master_content + table.master_content{ margin-top: 0 !important; }
	body{ padding-bottom: 96px !important; }
}


/* inhoud vult het paneel: geen ingesprongen binnenkaders */
@media (max-width: 860px){
	table.master_content table{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	table.master_content > tbody > tr > td{ padding: 4px !important; }
}


/* geen tweede (geneste) paneelrand binnen een pagina */
@media (max-width: 860px){
	table.master_content table.master_content{ border: 0 !important; background: none !important; box-shadow: none !important; width: 100% !important; }
	table.master_content table.master_content > tbody > tr > td{ padding: 0 !important; }
}


/* de skin tekent een extra kader met outline binnen de panelen: weg op mobiel */
@media (max-width: 860px){
	table.master_content, table.master_content *{ outline: 0 none !important; }
}


/* spellbook (ghouls / powerspells): alles links onder elkaar i.p.v. uitgesmeerd */
@media (max-width: 860px){
	.fk-page-spellbook table.master_content tr{ display: block !important; padding: 6px 0 !important; }
	.fk-page-spellbook table.master_content td{
		display: block !important; width: auto !important;
		text-align: left !important; padding: 1px 0 !important;
	}
	.fk-page-spellbook table.master_content tr + tr{ border-top: 1px solid #2b2a24 !important; }
}


/* vaste hoogtes uit de markup (height="..") op mobiel negeren */
@media (max-width: 860px){
	table.master_content tr[height], table.master_content td[height]{ height: auto !important; }
}


/* geen smalle kolommen: inhoudstabellen vullen het paneel */
@media (max-width: 860px){
	table.master_content table,
	table.master_content table > tbody,
	table.master_content table > tbody > tr,
	table.master table,
	table.master table > tbody,
	table.master table > tbody > tr{ width: 100% !important; }
	table.master_content td[width],
	table.master_content th[width]{ width: auto !important; }
	table.master_content td{ max-width: 100% !important; }
}


/* resources op mobiel: paneel groeit mee met de inhoud (niets buiten het kader) */
@media (max-width: 860px){
	table.master_resources, table.master_resources > tbody,
	table.master_resources > tbody > tr,
	table.master_resources > tbody > tr > td{ height: auto !important; }
	table.master_resources .resregel{ margin: 0 6px !important; line-height: 1.3 !important; }
}


/* nieuws: alleen de eerste 3 berichten op mobiel */
@media (max-width: 860px){
	table.master_news.fk-nieuws-inkort tr.fk-nieuws-extra{ display: none !important; }
	table.master_news.fk-nieuws-alles tr.fk-nieuws-extra{ display: table-row !important; }
}


/* alleen de reiskaart mag horizontaal schuiven */
@media (max-width: 860px){
	.fk-page-travel table.master_content > tbody > tr > td{ overflow-x: auto !important; }
}


/* geen horizontale scrollbalken in de panelen (behalve de reiskaart) */
@media (max-width: 860px){
	table.master_content td{ overflow-x: visible !important; }
	.fk-page-travel table.master_content td{ overflow-x: auto !important; }
	table.master_content table{ max-width: 100% !important; }
}


/* CQ2 zet overflow:auto op cellen; op mobiel liever geen scrollbalken */
@media (max-width: 860px){
	td{ overflow-x: visible !important; }
	.fk-page-travel table td, .fk-page-travel table.master_content td{ overflow-x: auto !important; }
}

/* CQ2: pagina's die hun eigen kaarten tekenen (div.crt-kaart, bv. de creaturelijst) mogen
   van de oude lijstregels geen kader meer krijgen. Die twee stelsels samen gaven dubbele,
   elkaar kruisende kaders (paneel + rij + kaart). Alleen het paneel en de kaarten blijven.
   Alles behalve kader/achtergrond blijft staan: de inspringing van die rijen bepaalt namelijk
   de breedte van de kaarten (zonder die padding krimpen ze van 321 naar 277 px). */
@media (max-width: 860px){
	table.master_content:has(.crt-kaart) > tbody > tr > td > table > tbody > tr,
	table.master_content:has(.crt-kaart) tr:has(a[href*="sacrifice"]),
	table.master_content:has(.crt-kaart) tr:has(a[href*="equip"]){
		border: 0 !important; border-radius: 0 !important; background: transparent !important;
	}
}

/* CQ2: mobiel spelmenu in de vorm van een app-menu: icoon + label op één regel, dunne lijnen
   tussen de groepen, oranje tekst. (Phil 25/10) */
@media (max-width: 860px){
	#lade-links .fk-lade-body{ background: #16191e; padding: 4px 0 24px; }
	#lade-links .fk-lade-body a.menu{
		display: flex !important; align-items: center; gap: 14px;
		margin: 0 !important; padding: 12px 18px !important;
		border: 0 !important; border-radius: 0 !important;
		background: transparent !important;
		color: #e6a75a !important; font-size: 14px !important; line-height: 1.25 !important;
		letter-spacing: .2px; text-decoration: none !important;
	}
	#lade-links .fk-lade-body a.menu:before{
		content: "" !important; display: block !important; flex: 0 0 20px; width: 20px; height: 20px;
		margin: 0 !important; font-size: 0 !important;
		background-color: #d26900;
		-webkit-mask: var(--fk-icoon) center / contain no-repeat;
		mask: var(--fk-icoon) center / contain no-repeat;
	}
	#lade-links .fk-lade-body a.menu:active{ background: rgba(210,105,0,.14) !important; }
	/* scheidingslijnen tussen de groepen, niet tussen elke regel */
	#lade-links .fk-lade-body a.menu.fk-groep-eerste,
	#lade-links .fk-lade-body a.menu[href*="page=playersinfo"]{
		border-top: 1px solid rgba(210,105,0,.28) !important;
		margin-top: 8px !important;
	}
	/* de vaste onderdelen van het koninkrijk iets inspringen en dieper oranje */
	#lade-links .fk-lade-body a.menu.fk-groep:not(.fk-groep-eerste){
		padding-left: 46px !important; color: #d26900 !important; font-size: 13px !important;
	}
	/* de oude regels duwden deze items 52 px in en maakten ze donkerder: terug naar normaal */
	#lade-links .fk-lade-body a.menu[href*="page=buildings"],
	#lade-links .fk-lade-body a.menu[href*="page=townhall"],
	#lade-links .fk-lade-body a.menu[href*="page=warroom"],
	#lade-links .fk-lade-body a.menu[href*="page=gemtemple"]{
		padding-left: 18px !important; color: #e6a75a !important; font-size: 14px !important;
	}
	#lade-links .fk-lade-body a.menu[href*="page=news"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%205h13v14H4z%22%2F%3E%3Cpath%20d%3D%22M17%208h3v9a2%202%200%200%201-2%202%22%2F%3E%3Cpath%20d%3D%22M7%209h7M7%2012h7M7%2015h4%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=adminconsole"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6z%22%2F%3E%3Cpath%20d%3D%22M9%2011l2%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=tickets"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%207h16v4a2%202%200%200%200%200%202v4H4v-4a2%202%200%200%200%200-2z%22%2F%3E%3Cpath%20d%3D%22M10%207v10%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=battles"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2020L20%204%22%2F%3E%3Cpath%20d%3D%22M14%204h6v6%22%2F%3E%3Cpath%20d%3D%22M20%2020L4%204%22%2F%3E%3Cpath%20d%3D%22M10%2020H4v-6%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=character"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020c1.5-4%204-5.5%207-5.5s5.5%201.5%207%205.5%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=creatures"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%227%22%20cy%3D%229%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M12%2012c3%200%205%202%205%204s-2%203-5%203-5-1-5-3%202-4%205-4z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=items"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%209h14l-1%2011H6z%22%2F%3E%3Cpath%20d%3D%22M9%209V7a3%203%200%200%201%206%200v2%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=amulets"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l6%206-6%2012L6%209z%22%2F%3E%3Cpath%20d%3D%22M6%209h12%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=spellbook"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%204h11v16H6z%22%2F%3E%3Cpath%20d%3D%22M9%204v16%22%2F%3E%3Cpath%20d%3D%22M12%209h3M12%2013h3%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=buildings"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2011l8-6%208%206%22%2F%3E%3Cpath%20d%3D%22M6%2010v10h12V10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=defense"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l7%203v6c0%204.5-3%207.5-7%209-4-1.5-7-4.5-7-9V6z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=kingdom"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2017l1-9%204%204%203-6%203%206%204-4%201%209z%22%2F%3E%3Cpath%20d%3D%22M4%2020h16%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=kingdom&action=pub&type=0"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%208h9v11a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M14%2010h3a2%202%200%200%201%200%204h-3%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=kingdom&action=pub&type=1"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%208h13l-3-3%22%2F%3E%3Cpath%20d%3D%22M20%2016H7l3%203%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=kingdom&action=postoffice"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M3%206h18v12H3z%22%2F%3E%3Cpath%20d%3D%22M3%207l9%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=library"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M5%204h3v16H5z%22%2F%3E%3Cpath%20d%3D%22M9.5%204h3v16h-3z%22%2F%3E%3Cpath%20d%3D%22M15%205l3%201-2%2013-3-1z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=playersinfo"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c1-3.5%203-5%206-5s5%201.5%206%205%22%2F%3E%3Cpath%20d%3D%22M16%206.5a3%203%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M18%2020c-.3-2-1-3.4-2-4.3%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=kingdominfo"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%203v18%22%2F%3E%3Cpath%20d%3D%22M6%204h11l-2%204%202%204H6%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=rodia"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M12%204c2.5%202.5%203.5%205.5%203.5%208s-1%205.5-3.5%208c-2.5-2.5-3.5-5.5-3.5-8s1-5.5%203.5-8z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="page=travel"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5l-2%205-5%202%202-5z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-links .fk-lade-body a.menu[href*="action=teleport"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%203l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%22%2F%3E%3C%2Fsvg%3E"); }
}

/* CQ2: labeltekst in het mobiele menu even groot als de rest (Battles zat in font.alert) */
@media (max-width: 860px){
	#lade-links .fk-lade-body a.menu font,
	#lade-links .fk-lade-body a.menu font.alert{ font-size: inherit !important; }
}

/* CQ2: labeltekst blijft op dezelfde regel als het icoon (Battles zat in een blok-font)
   en de kop van de lade is een gewone titelregel, geen kader. */
@media (max-width: 860px){
	#lade-links .fk-lade-body a.menu font,
	#lade-links .fk-lade-body a.menu font.alert{ font-size: inherit !important; display: inline !important; }
	#lade-links .fk-lade-kop{
		background: transparent !important; border: 0 !important; border-radius: 0 !important;
		border-bottom: 1px solid rgba(210,105,0,.28) !important;
		padding: 16px 18px 12px !important; margin: 0 !important;
		color: #d26900 !important; font-size: 11px !important; letter-spacing: 2.4px !important;
		text-transform: uppercase !important;
	}
	#lade-links .fk-lade-x{ color: #d26900 !important; font-size: 18px !important; }
}

/* CQ2: het pijltje voor de labels blijft verborgen (het icoon neemt die plek in) */
@media (max-width: 860px){
	#lade-links .fk-lade-body a.menu font.arrow{ display: none !important; }
}

/* CQ2: 'Battles' zit in een font.alert dat zich als blok gedroeg en daardoor op een eigen
   regel begon; tekst terug op de regel van het icoon. De spatie na het verborgen pijltje
   vult de ruimte tussen icoon en label, dus de gap mag klein zijn. */
@media (max-width: 860px){
	body #lade-links .fk-lade-body a.menu > font.alert{ display: inline !important; }
	body #lade-links .fk-lade-body a.menu{ gap: 4px !important; }
}

/* CQ2: de rechterlade (vrienden, vijanden, donatie, server, links) in dezelfde app-stijl
   als het spelmenu: sectiekopjes, icoon + label, oranje tekst. (Phil 25/10) */
@media (max-width: 860px){
	#lade-rechts .fk-lade-body{ background: #16191e; padding: 2px 0 24px; }
	#lade-rechts .fk-lade-body td.title{
		padding: 16px 18px 4px !important;
		border: 0 !important; border-top: 1px solid rgba(210,105,0,.28) !important;
		background: transparent !important;
		color: #d26900 !important; font-size: 11px !important; letter-spacing: 2.2px !important;
		text-transform: uppercase !important; text-align: left !important;
	}
	#lade-rechts .fk-lade-body table:first-of-type td.title{ border-top: 0 !important; padding-top: 10px !important; }
	#lade-rechts .fk-lade-body a.menu{
		display: flex !important; align-items: center; gap: 4px;
		margin: 0 !important; padding: 12px 18px !important;
		border: 0 !important; background: transparent !important;
		color: #e6a75a !important; font-size: 14px !important; line-height: 1.25 !important;
		text-decoration: none !important;
	}
	#lade-rechts .fk-lade-body a.menu:before{
		content: "" !important; display: block !important; flex: 0 0 20px; width: 20px; height: 20px;
		margin: 0 !important; font-size: 0 !important;
		background-color: #d26900;
		-webkit-mask: var(--fk-icoon) center / contain no-repeat;
		mask: var(--fk-icoon) center / contain no-repeat;
	}
	#lade-rechts .fk-lade-body a.menu:active{ background: rgba(210,105,0,.14) !important; }
	#lade-rechts .fk-lade-body font.arrow{ display: none !important; }
	/* de kleine hulplinkjes (Add, «, ?) blijven bescheiden */
	#lade-rechts .fk-lade-body a:not(.menu){ color: #b35a00 !important; font-size: 11px !important; }
	/* 'Nobody online.' e.d. als rustige regel onder het kopje */
	#lade-rechts .fk-lade-body td:not(.title){ color: #9c9184 !important; font-size: 12px !important; }
	#lade-rechts .fk-lade-body a.menu font:not(.arrow){ font-size: inherit !important; display: inline !important; }
	#lade-rechts .fk-lade-body a.menu[href*="page=donation"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2020s-7-4.3-7-9a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2011c0%204.7-7%209-7%209z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=polls"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%2010v4l10%204V6z%22%2F%3E%3Cpath%20d%3D%22M14%208h3a3%203%200%200%201%200%206h-3%22%2F%3E%3Cpath%20d%3D%22M6%2014v4%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=vote"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M8.5%2012.5l2.5%202.5%204.5-5%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=players"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c1-3.5%203-5%206-5s5%201.5%206%205%22%2F%3E%3Cpath%20d%3D%22M16%206.5a3%203%200%200%201%200%205%22%2F%3E%3Cpath%20d%3D%22M18%2020c-.3-2-1-3.4-2-4.3%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=playerinfo"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M5%2020c1.5-4%204-5.5%207-5.5s5.5%201.5%207%205.5%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=tickets"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M4%207h16v4a2%202%200%200%200%200%202v4H4v-4a2%202%200%200%200%200-2z%22%2F%3E%3Cpath%20d%3D%22M10%207v10%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=home"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%2016V11a6%206%200%200%201%2012%200v5l2%202H4z%22%2F%3E%3Cpath%20d%3D%22M10%2020a2%202%200%200%200%204%200%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=spellinfo"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%204h11v16H6z%22%2F%3E%3Cpath%20d%3D%22M9%204v16%22%2F%3E%3Cpath%20d%3D%22M12%209h3M12%2013h3%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=battlecalc"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%207h8%22%2F%3E%3Cpath%20d%3D%22M8%2012h2M12%2012h2M16%2012h0M8%2016h2M12%2016h2M16%2016h0%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=options"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%203v2.5M12%2018.5V21M3%2012h2.5M18.5%2012H21M5.6%205.6l1.8%201.8M16.6%2016.6l1.8%201.8M18.4%205.6l-1.8%201.8M7.4%2016.6l-1.8%201.8%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="docs/"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4%22%2F%3E%3Cpath%20d%3D%22M9%2012h6M9%2016h6%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=credits"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%204l2.4%205%205.6.8-4%204%201%205.5L12%2016.7%207%2019.3l1-5.5-4-4%205.6-.8z%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=help"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22M9.7%209.5a2.4%202.4%200%201%201%203.3%202.2c-.7.3-1%20.9-1%201.6v.4%22%2F%3E%3Cpath%20d%3D%22M12%2017.2h.01%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="page=rules"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M6%203h8l4%204v14H6z%22%2F%3E%3Cpath%20d%3D%22M14%203v4h4%22%2F%3E%3Cpath%20d%3D%22M9%2012h6M9%2016h6%22%2F%3E%3C%2Fsvg%3E"); }
	#lade-rechts .fk-lade-body a.menu[href*="action=logout"]{ --fk-icoon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M14%204h4v16h-4%22%2F%3E%3Cpath%20d%3D%22M10%208l-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22M6%2012h9%22%2F%3E%3C%2Fsvg%3E"); }
}

/* CQ2: de rechterlade is één kolom (geen tabelnesting), sierhoekjes en lege rijen weg */
@media (max-width: 860px){
	#lade-rechts .fk-lade-body table{ display: block !important; width: 100% !important; margin: 0 !important; }
	#lade-rechts .fk-lade-body tbody,
	#lade-rechts .fk-lade-body tr,
	#lade-rechts .fk-lade-body td{
		display: block !important; width: auto !important; height: auto !important;
		padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important;
	}
	#lade-rechts .fk-lade-body img{ display: none !important; }
	#lade-rechts .fk-lade-body br{ display: none !important; }
	#lade-rechts .fk-lade-body td:not(.title){ padding: 2px 18px 8px !important; }
	#lade-rechts .fk-lade-body a:not(.menu){ display: inline-block; margin-right: 8px; padding: 3px 0; }
}

/* CQ2: sierrijen met hoekplaatjes in de rechterlade leveren alleen lege hoogte op */
@media (max-width: 860px){
	#lade-rechts .fk-lade-body tr:has(img){ display: none !important; }
	#lade-rechts .fk-lade-body td:empty{ display: none !important; }
}

/* CQ2: de tabelnesting gaf dubbele inspringing; alles hangt nu aan de link zelf */
@media (max-width: 860px){
	#lade-rechts .fk-lade-body td{ padding: 0 !important; }
	#lade-rechts .fk-lade-body td.title{ padding: 16px 18px 4px !important; }
	#lade-rechts .fk-lade-body td:not(.title){ padding: 0 0 6px !important; }
}

/* CQ2: 'Add' en de andere hulplinkjes in de rechterlade links uitlijnen, niet gecentreerd */
@media (max-width: 860px){
	#lade-rechts .fk-lade-body td{ text-align: left !important; }
	#lade-rechts .fk-lade-body a:not(.menu){ text-align: left !important; }
	#lade-rechts .fk-lade-body td.title{ text-align: left !important; }
}

/* CQ2: wereldkaart op mobiel groter en zonder lege banden (Phil 25/10: "mag groter, veel open ruimte").
   De kaart is een ring van pijlen om een geneste grid-tabel met vaste hoogtes (330/110); die hoogtes
   maakten banden van 250-340 px. Alles op auto, pijlen 38 px, cellen 33% en de kaart over de volle
   paneelbreedte. Zoom blijft 1 (de oude regel zette .74 en liet 150 px leeg). */
@media (max-width: 860px){
	table.master_content table.fk-kaart{
		zoom: 1 !important; width: 100% !important; height: auto !important; margin: 0 !important;
	}
	table.master_content table.fk-kaart tr{ height: auto !important; }
	table.master_content table.fk-kaart td{
		height: auto !important; padding: 2px !important; text-align: center !important;
		vertical-align: middle !important; line-height: 1.3 !important;
	}
	table.master_content table.fk-kaart td.fk-pijlcel{ width: 52px !important; }
	table.master_content table.fk-kaart td.fk-middencel{ width: auto !important; }
	table.master_content table.fk-kaart-grid{ width: 100% !important; height: auto !important; }
	table.master_content table.fk-kaart-grid tr{ height: auto !important; }
	table.master_content table.fk-kaart-grid td.fk-kaartcel{
		width: 33% !important; height: auto !important; padding: 10px 2px !important;
	}
	table.master_content table.fk-kaart img[src*="arrows/"]{ width: 38px !important; height: 38px !important; }
}

/* CQ2: voortgangsbalk op de Character-pagina als CSS-balk (de pipe-balk was 550 px breed
   en duwde de hele tabel buiten het scherm). Alleen mobiel; desktop houdt de oude balk. */
@media (max-width: 860px){
	.fk-xpbar{
		width: 100%; height: 13px; margin: 2px 0 6px;
		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 tabel waar de balk in zat hoeft niet meer breder te worden dan het paneel */
	.fk-page-character table.master_content table{ max-width: 100% !important; }
}

/* CQ2: de xp-balk hoort op mobiel op een eigen regel over de volle breedte
   (in de tabel stond hij in een 50%-cel en kromp hij tot een paar pixels) */
@media (max-width: 860px){
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar){ display: block !important; }
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar) > td{
		display: block !important; width: auto !important; text-align: left !important; padding: 3px 0 !important;
	}
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar) table,
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar) tbody{ display: block !important; width: 100% !important; }
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar) table td{ display: block !important; width: auto !important; }
	.fk-page-character .fk-xpbar{ width: 100% !important; margin: 4px 0 8px; }
}

/* CQ2: op mobiel is de rechtercel van de Experience-rij nu leeg (de balk staat onder
   Experience); die lege cel gaf een gat van ~90 px tussen Power Balance en de magielijst. */
@media (max-width: 860px){
	.fk-page-character table.master_content td:empty{ display: none !important; height: 0 !important; padding: 0 !important; }
}

/* CQ2: op mobiel blijven van de Experience-rij alleen de eerste cel over (de balk zit daar nu in);
   de lege cellen ernaast gaven een gat van ~90 px onder Power Balance. */
@media (max-width: 860px){
	.fk-page-character table.master_content tr:has(> td > .fk-xpbar) > td:nth-child(n+2){
		display: none !important;
	}
}


/* CQ2: iets meer lucht in het mobiele menu (Phil, 25/10) */
@media (max-width: 860px){
	.fk-lade{ padding: 14px 14px calc(26px + env(safe-area-inset-bottom)); padding-left: 16px; }
	#lade-links .fk-lade-kop{ margin-bottom: 12px; margin-left: 8px; }
	#lade-links .fk-lade-body a.menu{ padding: 15px 20px 15px 34px !important; }
	#lade-links .fk-lade-body a.menu[href*="action=pub"],
	#lade-links .fk-lade-body a.menu[href*="action=pub&type=1"],
	#lade-links .fk-lade-body a.menu[href*="action=postoffice"],
	#lade-links .fk-lade-body a.menu[href*="page=townhall"],
	#lade-links .fk-lade-body a.menu[href*="page=warroom"],
	#lade-links .fk-lade-body a.menu[href*="page=gemtemple"],
	#lade-links .fk-lade-body a.menu[href*="page=buildings"]{ padding-left: 60px !important; }
}


/* CQ2: creaturekaarten breder — de rij-padding van de lijst kleiner (Phil, 25/10/2026) */
@media (max-width: 860px){
	/* de oude 'equip new item'-rij gaf de kaart een tweede kader en 10px padding;
	   bij de kaartindeling moet die rij volledig ongestyled blijven */
	body.fk-page-creatures.fk-page-creatures table.master_content tr:has(.crt-kaart){
		display: block !important;
		width: 100% !important;
		padding: 0 2px !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
	}
	body.fk-page-creatures.fk-page-creatures table.master_content tr:has(.crt-kaart) > td{
		display: block !important;
		width: auto !important;
		padding: 0 !important;
	}
}

/* CQ2: de binnentabel van de creaturelijst even breed als het paneel, zodat de kaarten breder worden */
@media (max-width: 860px){
	body.fk-page-creatures table.master_content:has(.crt-kaart) table{
		width: 100% !important;
	}
	body.fk-page-creatures table.master_content:has(.crt-kaart) tr:has(.crt-kaart) > td{
		width: 100% !important;
	}
}

/* Postkantoor / nieuw bericht (26/10): de formuliertabel van CQ2 heeft vaste breedtes en liep op
   een telefoon ruim 250 px buiten het scherm. Op mobiel zetten we de tabel om naar blokken:
   label boven, veld eronder over de volle breedte. Zo past elk formulier op de kingdom-pagina. */
@media (max-width: 860px) {
	body.fk-page-kingdom form table,
	body.fk-page-kingdom form tbody,
	body.fk-page-kingdom form tr,
	body.fk-page-kingdom form td {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	body.fk-page-kingdom form td:first-child {
		padding: 8px 0 2px !important;
		text-align: left !important;
		white-space: normal !important;
	}
	body.fk-page-kingdom form input[type="text"],
	body.fk-page-kingdom form input[type="password"],
	body.fk-page-kingdom form input[type="email"],
	body.fk-page-kingdom form textarea,
	body.fk-page-kingdom form select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	body.fk-page-kingdom form textarea {
		min-height: 220px;
	}
	body.fk-page-kingdom form input[type="submit"] {
		margin-top: 10px;
	}
}

/* Items-pagina (26/10): de panelen en de vakjes erin zijn geneste CQ2-tabellen die naar hun inhoud
   krompen, waardoor ze op een telefoon maar de halve breedte vulden. Met table-layout:fixed krijgen
   de cellen echte breedtes en vullen alle lagen het paneel. */
@media (max-width: 860px) {
	body.fk-page-items table,
	body.fk-page-items tbody,
	body.fk-page-items tr,
	body.fk-page-items td {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	body.fk-page-items table {
		table-layout: fixed;
	}
}

/* Menu-lade: minder lucht tussen de regels (Phil 26/10). De rijen waren 50 px hoog; nu 38 px,
   zodat er meer items tegelijk zichtbaar zijn. De scheiding tussen groepen blijft. */
@media (max-width: 860px) {
	#lade-links .fk-lade-body a.menu {
		/* alleen de hoogte verkleinen; de linkse inspringing blijft zoals ze was (34 px,
		   sub-items 46 px) zodat de labels niet voor de menu-icoontjes schuiven */
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		padding-left: 34px !important;
		padding-right: 20px !important;
		min-height: 38px;
		height: 38px;
		box-sizing: border-box !important;
	}
	#lade-links .fk-lade-body a.menu.fk-groep {
		min-height: 34px;
		height: 34px;
	}
	#lade-links .fk-lade-body a.menu.fk-groep:not(.fk-groep-eerste) {
		padding-left: 46px !important;
	}
	#lade-links .fk-lade-body a.menu[href*="page=buildings"] {
		padding-left: 60px !important;
	}
	#lade-links .fk-lade-body a.menu.fk-groep-eerste,
	#lade-links .fk-lade-body a.menu[href*="page=playersinfo"] {
		margin-top: 4px !important;
	}
}

/* Melding bij een inkomend gevecht (Phil 26/10):_popup onderaan zoals de "You're in the crew"-melding,
   maar met de juiste tekst en een gekruist zwaard. Alleen op mobiel; tikken opent Battles. */
#fk-aanval-toast { display: none; }

@media (max-width: 860px) {
	#fk-aanval-toast {
		position: fixed; left: 12px; right: 12px; top: 10px; z-index: 4000;
		display: flex !important; align-items: center; gap: 12px;
		padding: 12px 14px 16px; border-radius: 12px;
		background: #101418; border: 1px solid rgba(232, 112, 92, 0.45);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
		cursor: pointer;
		animation: fk-toast-in 0.3s ease-out, fk-toast-uit 0.5s ease-in 9s forwards;
	}
	#fk-aanval-toast .fk-at-icoon {
		flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: rgba(232, 112, 92, 0.16); border: 1px solid rgba(232, 112, 92, 0.5);
	}
	#fk-aanval-toast .fk-at-icoon svg {
		width: 18px; height: 18px; fill: none; stroke: #e8705c; stroke-width: 1.9;
		stroke-linecap: round; stroke-linejoin: round;
	}
	#fk-aanval-toast .fk-at-tekst { min-width: 0; }
	#fk-aanval-toast .fk-at-tekst b {
		display: block; font-size: 14px; line-height: 1.25; color: #ffffff;
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	#fk-aanval-toast .fk-at-tekst .sub {
		display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.25; color: #9aa3ad;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	#fk-aanval-toast .fk-at-bar {
		position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px;
		background: rgba(255, 255, 255, 0.10); border-radius: 2px; overflow: hidden;
	}
	#fk-aanval-toast .fk-at-bar i {
		display: block; height: 100%; width: 100%; background: #e8705c;
		animation: fk-toast-bar 9s linear forwards;
	}
}

@keyframes fk-toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fk-toast-uit { to { opacity: 0; transform: translateY(-14px); visibility: hidden; } }
@keyframes fk-toast-bar { from { width: 100%; } to { width: 0%; } }

/* xp-popup bij het level (Phil 26/10): tik op "level 2" of "L2" en je ziet de xp van die creature. */
#fk-xp-popup { display: none; }

@media (max-width: 860px) {
	#fk-xp-popup {
		position: fixed; left: 50%; top: 50%; z-index: 4100;
		transform: translate(-50%, -50%);
		width: min(320px, 84vw); padding: 16px 18px 20px; border-radius: 12px;
		background: #101418; border: 1px solid rgba(230, 198, 123, 0.45);
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); color: #e8ebef;
	}
	#fk-xp-popup.open { display: block; animation: fk-xp-in 0.18s ease-out; }
	#fk-xp-popup .fk-xp-kop { font: bold 13px/1.3 Verdana, Arial, sans-serif; color: #e6c67b; }
	#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, 0.12); overflow: hidden; }
	#fk-xp-popup .fk-xp-bar i { display: block; height: 100%; width: 0; background: #e6c67b; transition: width 0.25s ease-out; }

	/* Battle-lijsten (Your Creatures / Attacking Creatures): vaste hoogtes uit de oude markup
	   lieten de regels over elkaar vallen. Alles op automatiche hoogte en een leesbare regelafstand. */
	body.fk-page-battles table,
	body.fk-page-battles tbody,
	body.fk-page-battles tr,
	body.fk-page-battles td { height: auto !important; }
	body.fk-page-battles td { line-height: 1.45 !important; vertical-align: top !important; }
}

@keyframes fk-xp-in {
	from { opacity: 0; transform: translate(-50%, -46%); }
	to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* De xp staat niet meer onder de creatuurnaam (die zit nu in het xp-venster als je op het level
   tikt). De cel blijft in de markup staan, maar is op mobiel verborgen. (Phil 26/10) */
@media (max-width: 860px) {
	.fk-xp-cel { display: none !important; }
}

/* Battle-pagina: het laatste frame mag niet achter de vaste CHAT-balk verdwijnen (Phil 26/10) */
@media (max-width: 860px) {
	body.fk-page-battles table.master_content { margin-bottom: 104px !important; }
	body.fk-page-battles iframe { margin-bottom: 10px; }
	body.fk-page-battles iframe { max-width: 100%; }
}

@media (max-width: 860px) {
	/* de mobiele regels zetten cellen soms als blokken; dit raster blijft een tabel */
	.fk-magic-grid { display: table !important; width: auto !important; margin-left: auto !important; margin-right: auto !important; }
	.fk-magic-grid tbody { display: table-row-group !important; }
	.fk-magic-grid tr { display: table-row !important; }
	.fk-magic-grid td { display: table-cell !important; text-align: left !important; padding: 3px 12px !important; }
}

/* Smalle weergave (de aanvals-/verdedigingsframes op een telefoon): de creature-regel wordt
   blokken in plaats van een tabel met vaste kolommen. Op desktop is dat frame breder dan 860 px,
   dus daar verandert niets. (Phil 26/10) */
@media (max-width: 860px) {
	table.crttitel, table.crttitel tbody, table.crttitel tr,
	table.crtstats, table.crtstats tbody, table.crtstats tr { display: block !important; width: auto !important; }
	table.crttitel td { display: block !important; width: auto !important; text-align: left !important; line-height: 1.5 !important; padding: 0 6px 0 0 !important; }
	table.crtstats td { display: inline-block !important; vertical-align: top !important; width: auto !important; line-height: 1.5 !important; padding: 0 6px 0 0 !important; }
	table.crtstats td:nth-child(1) { width: 44% !important; }
	table.crtstats td:nth-child(2) { width: 27% !important; }
	table.crtstats td:nth-child(3) { width: 27% !important; }
	table.crtstats td:nth-child(4) { display: block !important; width: auto !important; }
	.fk-xp-cel { display: none !important; }
}

/* Battle Calculator op mobiel: de twee kolommen (Attacking / Defending) onder elkaar zetten,
   zodat de rechterkolom niet buiten het scherm valt. (Phil 26/10) */
@media (max-width: 860px) {
	table.fk-bc-kolommen, table.fk-bc-kolommen tbody, table.fk-bc-kolommen tr { display: block !important; width: auto !important; }
	table.fk-bc-kolommen > tbody > tr > td.fk-bc-kolom {
		display: block !important; width: auto !important;
		margin: 0 0 16px !important; padding: 0 !important;
	}
	table.fk-bc-kolommen > tbody > tr > td.fk-bc-kolom > table { width: 100% !important; }
}

/* Character-pagina: het blok "Character Development" zat in een 49%-kolom waardoor alles
   samengeperst werd naast een lege rechterkolom. Op mobiel gebruikt het de volle breedte. */
@media (max-width: 860px) {
	body.fk-page-character table td[width="3%"],
	body.fk-page-character table td[width="97%"],
	body.fk-page-character table td[width="49%"],
	body.fk-page-character table td[width="50%"],
	body.fk-page-character table td[width="1%"] {
		display: block !important;
		width: auto !important;
		max-width: 100% !important;
	}
	body.fk-page-character table td[width="49%"] { line-height: 1.5; }
}

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

/* Spellbook: de uitleg stond in een halve kolom naast een lege cel, waardoor de rechterhelft
   van het paneel leeg bleef. Op mobiel gebruiken alle tabellen daar de volle breedte. */
@media (max-width: 860px) {
	body.fk-page-spellbook table { width: 100% !important; max-width: 100% !important; }
	body.fk-page-spellbook td { width: auto !important; max-width: 100% !important; }
}

/* Spellbook: korte creature-gegevens per twee op één regel (Phil 26/10) */
.sb-stats { margin: 2px 0 4px; line-height: 1.5; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px; }
.sb-stats span { display: block; white-space: normal; }

/* De defenses (fk-magic-grid) in de spellbook mogen niet meegerekend worden in de
   volle-breedteregel hierboven: dat raster blijft compact en gecentreerd. (Phil 26/10) */
@media (max-width: 860px) {
	body.fk-page-spellbook table.fk-magic-grid { width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
	body.fk-page-spellbook table.fk-magic-grid td { width: auto !important; text-align: left !important; padding: 2px 14px !important; }
}

/* De vier defenses in de spellbook: 2x2 raster, gecentreerd, compact. (Phil 26/10) */
.fk-def-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 18px;
	max-width: 340px;
	margin: 6px auto 2px;
	line-height: 1.55;
}
.fk-def-grid span { white-space: nowrap; }

/* Aantikbare gegevens in een creature-regel (level, item): stippellijn als hint. (Phil 26/10) */
.fk-tap { border-bottom: 1px dotted rgba(230, 198, 123, 0.6); cursor: pointer; }

/* Beveiligingscode bij het verdedigen: vraag, cijfers en knoppen elk op een eigen regel. (Phil 26/10) */
#cq2defendbar .cq2-rij { flex: 0 0 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#cq2defendbar .cq2-rij + .cq2-rij { margin-top: 6px; }

/* Bevestiging bij "Flee from this battle?": die had helemaal geen stijl, waardoor het venster
   transparant over de lijst viel. (Phil 26/10) */
#fk-bevestig {
	position: fixed; inset: 0; z-index: 9500;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.6);
}
#fk-bevestig .fk-bevestig-vak {
	width: min(320px, 88vw); padding: 18px 18px 14px;
	border-radius: 12px; background: #101418;
	border: 1px solid rgba(230, 198, 123, 0.5);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}
#fk-bevestig .fk-bevestig-tekst {
	color: #ffffff; font: 15px/1.4 Verdana, Arial, sans-serif;
	text-align: center; margin-bottom: 14px;
}
/* de knoppen zelf houden hun eigen (spel)stijl; alleen het kader krijgt een achtergrond */
#fk-bevestig .fk-bevestig-knoppen { display: flex; gap: 10px; justify-content: center; }
#fk-bevestig button { flex: 1 1 0; }

/* Ruimte onderaan op mobiel: de vaste CHAT-knop en de twee hamburgers liggen over de
   voettekst. Met deze marge kan je de footer helemaal naar boven scrollen. (Phil 26/10) */
@media (max-width: 860px) {
	body { padding-bottom: 140px !important; }
}

/* Chat open op mobiel: de pagina erachter mag niet meescrollen (anders scrolt de kop met de
   sluitknop uit beeld en lijkt de chat niet dicht te gaan). (Phil 27/10) */
body.fk-chat-vol{
	overflow: hidden !important;
	height: 100dvh !important;
	overscroll-behavior: none;
}
body.fk-chat-vol #cq2chat.open{
	position: fixed !important;
	inset: 0 !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
}
body.fk-chat-vol #cq2chat-kop{
	position: sticky; top: 0; z-index: 3;
	padding: 10px 12px !important;
}
body.fk-chat-vol #cq2chat-kop a{
	font-size: 20px !important; padding: 6px 10px !important; line-height: 1 !important;
}
body.fk-chat-vol #cq2chat-berichten{ overscroll-behavior: contain; }

/* Chat open op een telefoon: altijd schermvullend, ook als de JS-klasse (fk-chat-vol) er niet
   is. Zo blijft de sluitknop bovenaan staan en scrolt de pagina er niet onderdoor. (Phil 27/10) */
@media (max-width: 860px) {
	#cq2chat.open{
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: none !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		z-index: 4200 !important;
	}
	#cq2chat.open #cq2chat-kop{
		position: sticky; top: 0; z-index: 3;
		padding: 10px 12px !important;
	}
	#cq2chat.open #cq2chat-kop a{
		font-size: 20px !important; line-height: 1 !important; padding: 6px 12px !important;
	}
	#cq2chat.open #cq2chat-berichten{
		flex: 1 1 auto !important; overflow-y: auto !important; overscroll-behavior: contain;
	}
}

/* CQ2: in pub & marketplace kreeg de linkerkolom (naam, class, level, kingdom) op een
   telefoon te weinig breedte, waardoor "Earth Mage" en "Level 37" afbraken. De kolom
   krimpt nu tot de breedte van de langste regel en breekt niet meer af. (Phil 27/10) */
@media (max-width: 860px){
	table.titleline > tbody > tr:nth-child(2) > td:first-child{
		width: 1% !important;
		white-space: nowrap;
		padding-right: 10px !important;
	}
	table.titleline > tbody > tr:nth-child(2) > td:last-child{
		width: auto !important;
	}
	/* de knoppen onderaan het bericht niet midden in een link afbreken */
	table.titleline a{ white-space: nowrap; }
}