img{ /* makes a change, noticeable [28/05/16] */
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}
body{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
div[contenteditable],span[contenteditable]{
	-webkit-touch-callout: auto;
	-webkit-user-select: auto;
	-khtml-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
}
::-webkit-scrollbar{background:transparent;}
::-webkit-scrollbar-track{
	background:transparent;
}
::-webkit-scrollbar-thumb {
  background:rgba(200,200,200,0.8);
}
.noscroll::-webkit-scrollbar{
	background:black;
}

/*  *{font-weight:normal !important;}  */
/* best to abandon all "bold" texts [12/08/16] */

html,body{
	margin:0 0 0 0;
	padding:0 0 0 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* temporary solution [16/05/16]*/
	font-family: pixel;
	color: white;
	word-wrap: break-word;

	/*text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;*/

	-webkit-font-smoothing: subpixel-antialiased;
	/* this makes safari render fonts thicker, wanted */

	/*-moz-osx-font-smoothing: grayscale;*/
	/* this makes regular fonts thinner in osx firefox, not wanted [12/08/16] */

	/*font-smooth: never;
	-webkit-font-smoothing : none; */
	/*
		NOTE: Chrome renders fonts thicker as default, it's nice, the other browsers render then reall thin ... ignoring the difference for the time being; [05/08/16]
	*/

}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #A9ACAC;
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #A9ACAC;
}
canvas { display:block; } /*replaces the overflow: hidden solution [07/07/16] */
.psuccess{
	color: #5DAC40;
}
.pfail{
	color: #AC393E;
}
.iqui{ /*item quantity ui*/
	color: white;
	border: 2px solid gray; background: black; padding: 1px 2px 1px 3px;
	position:absolute; right:-2px; bottom:-2px; text-align: center;
	line-height: 16px; font-size: 24px; height: 16px;
}
.iqhp{
	color: #F37A87;
}
.iqdbf{
	color: #343792;
}
.iqmp{
	color: #66B3F6;
}
.iuui{ /*item upgrade ui*/
	border: 2px solid gray; background: black; padding: 1px 2px 1px 3px;
	position:absolute; left:-2px; bottom:-2px; text-align: center;
	line-height: 16px; font-size: 24px; height: 16px;
	color: gray;
}
.truui{ /*item upgrade ui*/
	border: 2px solid gray; background: black; padding: 1px 2px 1px 3px;
	position:absolute; left:-2px; top:-2px; text-align: center;
	line-height: 16px; font-size: 24px; height: 16px;
	color: gray;
}
.trruui{
	border: 2px solid gray; background: black; padding: 1px 2px 1px 3px;
	position:absolute; right:-2px; top:-2px; text-align: center;
	line-height: 16px; font-size: 24px; height: 16px;
	color: gray;
}
.imu{
	color:#64B867;
}
.ivu{
	color:#D3391E;
}
.itu{
	color:gold;
	color:#E6C409;
	color:#389261;
	color:#398F2E;
	color:#FFFFFF;
	color:#398F2E;
}
.ibu{
	color:#5D688F;
	color:#808C8F;
	color:#D96C0E;
	color:#DA8F20;
}
.igu{
	color:#D96EDC;
}
.ixu{
	color:#5C5D5E;
	color:#B3AFB4;
}
.ilsu{
	color:#B3AFB4;
	color:#8C7A36;
	color:#C9AE5D;
	color:#A28D4C;
}
.iluu{
	color:#B3AFB4;
	color:#949698;
	color:#5C5D5E;
}
.ering{
	border: 2px solid gray;
	padding: 8px;
	display: inline-block;
}
.clevel4{
	color: #FFC949;
}
.clevel5{
	color: #B753C7;
}
.clevelA{
	color: #FFC949;
}
.clevelB{
	color: #4A9AFF;
}
.clevelC{
	color: #FC4546;
}
.clevelD{
	color: #9353FF;
}
.clevelE{
	color: #FD8915;
}
.clevelW{
	color: #5BAD59;
}
.clevel6{
	color: #FC2F72;
}
.clevel7{
	color: #FD6A19;
}
.clevel7{
	color: #D71D41;
}
.ulevel8{
	color: #FFC949;
}
.ulevel9{
	color: #E64D31;
}
.ulevel10{
	color: #B753C7;
}
.ulevel11{
	color: #E0DE58;
	color: #B753C7;
}
.ulevel12{
	color: #2096D8;
	color: #B753C7;
}
.infop{
	color: #9E9E9E;
}
.mw{
	color: #FFFFFF;
}
.infot{
	margin-top: 4px;
}
.itemnumi{ /* input */
	vertical-align: middle;
	width: 40px;
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	font-family: Pixel;
	margin-right: 5px;
	display: inline-block;
	border:0;
	padding-left: 5px;
	background: #7D7D7D;
	color: white;
}
.cinput{ /* code save */
	height: 48px;
	line-height: 36px;
	font-size: 36px;
	font-family: Pixel;
	display: inline-block;
	border:0;
	padding: 12px;
	background: #7D7D7D;
	background: #2D2D2E;
	border: 4px solid gray;
	color: white;
	margin-right: 4px;
	vertical-align: top;
}

/* #toprightcorner .gamebutton{ margin-left: -9px; } */

#gamelog,#chatlog,#codelog{
	/*z-index: 300;
	position: fixed;
	bottom: 0px;
	right: 0px;*/
	height: 208px;
	width: 300px;
	background: rgb(0,0,0);
	line-height: 24px;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
	padding: 10px;
	overflow-y: scroll;
	border: 5px solid gray;
	/*letter-spacing: 0.8px;*/
}
#xcodehint{
	z-index: 400;
	height: 36px;
	width: 320px; /*300+15+5*/
	right: 0px;
	position: fixed;
	border: 5px solid gray;
	bottom: 192px; /*208+15-36+5*/
	overflow: hidden;
	background: black;
	font-size: 36px;
	line-height: 36px;
	text-align: center;
}
.codesearch::placeholder {
  color: gray;
  opacity: 1;
}
.chatlog{
	line-height: 24px;
	font-size: 24px;
	text-align: left;
	vertical-align: middle;
	padding: 10px;
	overflow-y: scroll;
	height: 190px;
	width: 300px; /* .chatinput is 314+3x2 - this one is 300+10x2 */
}
#chatinput{
	position: fixed;
	z-index:99;
	bottom: 5px;
	left: 5px;
	width: 314px;
	height: 30px;
	font-size: 24px;
	font-family: Pixel;
	display: inline-block;
	background: #404040;
	color: white;
	border: none;
	padding: 3px;
}
.chatinput{
	width: 314px;
	height: 30px;
	font-size: 24px;
	font-family: Pixel;
	display: inline-block;
	background: #404040;
	color: white;
	border: none;
	padding: 3px;
}
.ccinput,.ccinput:focus{
	border: none;
	outline: none;
	background: none;
	/*background: #8653D8;*/
	padding: 5px 12px 5px 12px;
	color: white;
	font-size: 36px;
	font-family: Pixel;
}
.newmessage{
	color: green;
}
.tint{
	position: relative;
	z-index:1;
	overflow: hidden;
}
.ontint{
	position: relative;
	z-index:2;
}
.gameentry{
}
#chatlog{
	z-index:98;
	left: 0px;
	/*direction:rtl;*/
}
.chatentry{
	/*direction: ltr;*/
	margin-bottom: 30px;
}
.chatentry+.chatentry{
	margin-top: -30px;
}
#topleftcorner{
	z-index: 109;
	top: 0px;
	left: 0px;
	position: fixed;
	pointer-events: none;
}
.mimicker{
	position: fixed;
	font-size: 0px;
	display: inline-block;
	cursor: pointer;
	/* background-color: rgba(0,200,0,0.5); */
	z-index: 400;
}
/*#topleftcornerui > *{
	pointer-events: auto;
}*/
#toprightcorner{
	z-index: 100;
	top: 0px;
	right: 0px;
	position: fixed;
}
#bottomrightcorner{
	z-index: 300;
	bottom: 0px;
	right: 0px;
	position: fixed;
}
#bottomrightcodecorner{
	z-index: 300;
	bottom: 0px;
	right: 325px;
	position: fixed;
	display: none;
}
#bottomleftcorner2{
	z-index: 99;
	bottom: 0px;
	left: 0px;
	position: fixed;
}
.xclicks{
	cursor: none;
}
.bpclicks{ /* Block Parent Clicks - Only [24/07/18] */
	pointer-events: none !important; /* if !important is not set, the '> *' takes priority */
}
.bpclicks > *{
	pointer-events: auto;
}
#bottomleftcorner{
	z-index: 100;
	bottom: 0px;
	left: 0px;
	position: fixed;
}
.label,.klabel{
	padding: 0px 4px 2px 4px;
	background: #808080;
	color: white;
	border-radius: 1px;
	margin-bottom: 2px;
	display: inline-block;
	vertical-align: middle;
}
.klabel{
	margin: 1px;
	background: #E13758;
}
.clabel,.xlabel,.rlabel,.jlabel,.dlabel,.redlabel,.hlabel,.elabel{
	margin-left: -4px;
	margin-right: -2px;
	padding: 0px 2px 2px 6px;
	line-height: 22px; /* with padding's bottom adjustment, reduces the top padding, as -2px top padding doesn't work */
	display: inline-block;
	border-radius: 1px;
	color: white;
	background: #888888;
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
.clabel[onclick],.xlabel[onclick],.rlabel[onclick],.jlabel[onclick],.redlabel[onclick],.hlabel[onclick],.elabel[onclick]{
	cursor:pointer;
}
.xlabel{
	background: #77A6C3;
}
.rlabel{
	background: #E5680D;
}
.jlabel{
	background: #49BD74;
}
.hlabel{
	background: #B9AB63;
}
.elabel{
	background: #46BE2E;
}
.dlabel{
	background: #3C9BC4;
}
.redlabel{
	background: #C01941;
}
.slimbutton{
	display: inline-block;
	border: 2px solid gray;
	font-size: 24px;
	line-height: 24px;
	padding: 5px 10px 5px 10px;
	background: black;
	text-align: center;
	color: white;
}
.tinybutton{
	display: inline-block;
	border: 2px solid gray;
	font-size: 16px;
	line-height: 16px;
	padding: 4px 7px 4px 7px;
	background: black;
	text-align: center;
	color: white;
	margin: 4px;
}
.gamebutton{
	display: inline-block;
	border: 4px solid gray;
	font-size: 24px;
	line-height: 24px;
	padding: 12px;
	background: black;
	text-align: center;
	color: white;
}
.largerfont{
	font-size: 32px;
	line-height: 24px;
	vertical-align: bottom;
}
.blockbutton, .blockbutton:not(.hidden) {
	background: #1e1612 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	border-right: 2px solid #080608 !important;
	border-bottom: 2px solid #080608 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', 'Courier New', monospace !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	padding: 6px 10px !important;
	width: 100%;
	display: block;
	text-align: left;
	box-sizing: border-box;
	border-radius: 0 !important;
	transition: background 0.07s, color 0.07s;
	margin-bottom: 3px !important;
}
.blockbutton:hover {
	background: #2c2018 !important;
	color: #f0c84a !important;
	border-top-color: #7a5018 !important;
	border-left-color: #7a5018 !important;
}
.blockbutton:active {
	border-top: 2px solid #080608 !important;
	border-left: 2px solid #080608 !important;
	border-right: 2px solid #9b6e30 !important;
	border-bottom: 2px solid #9b6e30 !important;
	background: #7a5018 !important;
}
/* Original kept for reference */
.blockbutton_orig {
	display: block;
	border: 4px solid gray;
	font-size: 24px;
	line-height: 24px;
	padding: 12px;
	background: black;
	text-align: center;
}
a.textbutton{
	color: inherit;
	text-decoration:none;
}
a.gamebutton{
	color: inherit;
	text-decoration:none;
}
.redborder{
	border-color: orange;
}
.orangeborder{
	border-color: orange;
}
.gamebutton.active{
	border-color: green;
}
.gamebutton.active2{
	border-color: #FFFFFF;
}
.gamebutton.active3{
	border-color: #42AFDE;
}
.gamebutton-large{
	font-size: 36px;
	line-height: 36px;
}
.gamebutton-small{
	padding: 4px 8px 4px 8px;
	border: 2px solid gray;
	margin-bottom: 4px;
}
.gamebutton-active.gamebutton-small{
	border: 2px solid #EAF1EC;
}
#pagewrapped{
	margin-top: 400px;
	width: 400px;
	z-index:205;
	display: inline-block;
}
.loginorselection{
	text-align: center;
	-webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
#codeui{
	position: fixed;
	top: 0px;
	bottom: 0px;
	bottom: 37px;
	left: 0px;
	width: 800px;
	display: none;
	z-index: 401;
	-webkit-box-shadow: 0 0 6px #555960;
	-moz-box-shadow: 0 0 6px #555960;
	box-shadow: 0 0 6px #555960;
}
.CodeMirror{
	height: 100%;
	width: 100%;
	font-family: Pixel;
	font-size: 24px;
	letter-spacing: 1px; /* more readable */
}
.engagebutton,.dengagebutton{
	position: absolute;
	right: 5px;
	bottom: 5px;
	z-index: 200;
}
.cslotbutton{
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 200;
}
.loginorselection,#features,#codeui,.largeborder{
	background: black;
	border: 5px solid gray;
	padding: 10px;
}
#selection{
}
#pagewrapper{
	z-index:200;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	vertical-align:middle;
	text-align: center;
	/*background: rgba(0,0,0,0.3);*/
}
#features{
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: 201;
	/* padding-right: 40px; WHY?! */
}
#topui{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 202;
}
#backbutton{
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 201;
}
.pixel-menu-frame {
	position: fixed;
	top: 8px;
	right: 8px;
	padding: 14px;
	border: 3px solid #000;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03), transparent 20%),
		repeating-linear-gradient(
			0deg,
			#26180f 0px,
			#26180f 4px,
			#2c1d13 4px,
			#2c1d13 8px
		);
	box-shadow:
		0 0 0 3px #4d2e18,
		0 0 0 6px #000,
		0 10px 25px rgba(0, 0, 0, 0.55);
	z-index: 202;
}

.pixel-menu-buttons {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* Remove old top-menu-buttons style */
.top-menu-buttons {
	display: none;
}
.selection-mode .top-menu-buttons,
.selection-mode .settings,
.selection-mode #topmid,
.selection-mode #toprightcorner,
.selection-mode #bottommid,
.selection-mode #bottomleftcorner,
.selection-mode #bottomleftcorner2,
.selection-mode #bottomrightcorner,
.selection-mode #bottomrightcodecorner,
.selection-mode #targetframe,
.selection-mode #cooldown-tracker,
.selection-mode #action-notice-anchor,
.selection-mode .medieval-chat,
.selection-mode .chat-toggle-btn {
	display: none !important;
}
.selection-mode #pagewrapper {
	background:
		radial-gradient(circle at top, rgba(176, 118, 54, 0.18), transparent 34%),
		linear-gradient(180deg, rgba(15, 11, 8, 0.95) 0%, rgba(7, 5, 4, 0.98) 100%);
}
.selection-mode #pagewrapped {
	width: min(1180px, calc(100vw - 40px));
	margin-top: 84px;
}
.selection-title {
	font-size: 38px;
	line-height: 42px;
	color: #f3cb76;
	letter-spacing: 1px;
	margin-bottom: 8px;
}
.selection-subtitle {
	font-size: 16px;
	line-height: 22px;
	color: #cbb493;
	max-width: 920px;
	margin: 0 auto 18px;
}
.selection-character-browser {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.selection-browser-topline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.selection-browser-chip {
	padding: 8px 14px;
	font-size: 13px;
	line-height: 13px;
	color: #f0dab0;
	background: rgba(23, 16, 11, 0.85);
	border: 2px solid #6b4828;
	box-shadow: 0 0 0 2px rgba(20, 12, 8, 0.7);
}
.selection-browser-shell {
	display: flex;
	align-items: center;
	gap: 12px;
}
.selection-rail-nav {
	width: 54px;
	height: 162px;
	border: 3px solid #2a1509;
	background: linear-gradient(180deg, #7b5129 0%, #442615 100%);
	color: #f5ddb2;
	font-family: pixel, "Courier New", monospace;
	font-size: 30px;
	cursor: pointer;
	box-shadow: 0 0 0 3px #8d5826, 0 8px 18px rgba(0,0,0,0.35);
}
.selection-rail-nav:hover {
	filter: brightness(1.08);
}
.selection-character-rail {
	flex: 1;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding: 6px 4px 16px;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: #8d5826 #170f0a;
}
.selection-character-rail::-webkit-scrollbar {
	height: 10px;
}
.selection-character-rail::-webkit-scrollbar-track {
	background: #170f0a;
}
.selection-character-rail::-webkit-scrollbar-thumb {
	background: #8d5826;
	border: 2px solid #170f0a;
}
.character-slot-card {
	min-width: 250px;
	max-width: 250px;
	padding: 14px !important;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	background:
		linear-gradient(180deg, rgba(34, 23, 15, 0.98) 0%, rgba(15, 10, 7, 0.98) 100%) !important;
	border: 3px solid #3b2314 !important;
	box-shadow: 0 0 0 3px #8d5826, 0 14px 26px rgba(0,0,0,0.35);
	scroll-snap-align: start;
}
.character-slot-card:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
}
.character-slot-card .cskin {
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	width: 96px;
	height: 88px;
}
.character-slot-preview {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 96px;
	background: linear-gradient(180deg, rgba(91, 58, 32, 0.32) 0%, rgba(18, 11, 7, 0.1) 100%);
	border: 2px solid rgba(155, 110, 48, 0.45);
}
.character-slot-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 84px;
}
.slot-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.slot-name {
	font-size: 20px;
	line-height: 20px;
	color: #f5ddb2;
}
.slot-meta {
	font-size: 13px;
	line-height: 17px;
	color: #bca58a;
}
.slot-meta-strong {
	color: #e2c98d;
}
.slot-private {
	text-decoration: underline #c7baff;
}
.slot-launch-indicator {
	padding-top: 10px;
	border-top: 1px solid rgba(157, 94, 39, 0.45);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #8fd25c;
}
.character-slot-card-free .slot-launch-indicator {
	color: #f0c84a;
}
.selection-rail-hint {
	font-size: 13px;
	line-height: 18px;
	color: #978166;
}
.selection-actions {
	margin-top: 10px;
}
.selection-actions .gamebutton {
	min-width: 220px;
}
.inventory-shell {
	background: linear-gradient(180deg, rgba(23, 16, 11, 0.98) 0%, rgba(8, 6, 4, 0.98) 100%) !important;
	border: 3px solid #3b2314 !important;
	box-shadow: 0 0 0 3px #8d5826, 0 12px 24px rgba(0,0,0,0.35);
}
.inventory-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 10px 10px;
	border-bottom: 2px solid rgba(157, 94, 39, 0.45);
	margin-bottom: 8px;
}
.inventory-toolbar-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}
.inventory-title {
	font-size: 19px;
	line-height: 19px;
	color: #f3cb76;
}
.inventory-subtitle {
	font-size: 12px;
	line-height: 16px;
	color: #bca58a;
}
.inventory-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.inventory-gear-shell {
	margin: 0 8px 10px;
	padding: 10px;
	border: 2px solid rgba(157, 94, 39, 0.42);
	background: linear-gradient(180deg, rgba(15, 10, 7, 0.9) 0%, rgba(7, 5, 3, 0.92) 100%);
}
.inventory-gear-title {
	font-size: 13px;
	line-height: 13px;
	letter-spacing: 1px;
	color: #f0cb7a;
	margin-bottom: 8px;
}
.inventory-gear-grid .slots {
	margin-left: 0 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.inventory-cosmetics-shell {
	background: linear-gradient(180deg, rgba(24, 17, 11, 0.98) 0%, rgba(8, 6, 4, 0.98) 100%) !important;
	border: 3px solid #3b2314 !important;
	box-shadow: 0 0 0 3px #8d5826, 0 16px 30px rgba(0,0,0,0.35) !important;
}
.inventory-cosmetics-btn {
	font-size: 12px !important;
	padding: 8px 10px !important;
	min-width: 120px;
}
.medieval-character-panel.self-character-shell {
	min-width: 330px;
	max-width: 380px;
	background: linear-gradient(180deg, rgba(27, 18, 10, 0.98) 0%, rgba(11, 7, 4, 0.98) 100%) !important;
	border: 3px solid #402616 !important;
	box-shadow: 0 0 0 3px #8d5826, 0 16px 32px rgba(0,0,0,0.38) !important;
}
.self-character-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(157, 94, 39, 0.38);
	margin-bottom: 10px;
}
.self-character-name-btn {
	padding: 0;
	border: none;
	background: transparent;
	color: #f5d48d;
	font-family: pixel, "Courier New", monospace;
	font-size: 24px;
	line-height: 26px;
	cursor: pointer;
	text-align: left;
}
.self-character-name-btn:hover {
	color: #fff1bd;
}
.self-character-sub {
	font-size: 12px;
	line-height: 16px;
	color: #bfa88a;
}
.self-character-pillbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
}
.self-character-pill {
	padding: 4px 8px;
	font-size: 11px;
	line-height: 11px;
	border: 1px solid rgba(157, 94, 39, 0.5);
	background: rgba(0,0,0,0.24);
	color: #e6d3ab;
}
.self-character-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}
.self-character-stat-card {
	padding: 8px 10px;
	border: 1px solid rgba(157, 94, 39, 0.45);
	background: rgba(0,0,0,0.22);
}
.self-character-stat-label {
	font-size: 11px;
	line-height: 11px;
	color: #a89378;
	margin-bottom: 5px;
}
.self-character-stat-value {
	font-size: 15px;
	line-height: 16px;
	color: #f2ddb2;
}
.self-character-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.self-character-action {
	padding: 8px 10px;
	border: 2px solid #3e2617;
	background: linear-gradient(180deg, #714822 0%, #3e2514 100%);
	color: #f5ddb2;
	font-family: pixel, "Courier New", monospace;
	font-size: 12px;
	line-height: 12px;
	cursor: pointer;
	box-shadow: 0 0 0 2px #8d5826;
	clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.self-character-action:hover {
	filter: brightness(1.07);
}
.self-character-action.secondary {
	background: linear-gradient(180deg, #5b3a22 0%, #2d1c10 100%);
}
.self-character-action.support {
	background: linear-gradient(180deg, #4c5f2a 0%, #253014 100%);
}
.deploy-companion-modal {
	min-width: min(520px, calc(100vw - 48px));
	padding: 18px;
	background: linear-gradient(180deg, rgba(23, 16, 11, 0.98) 0%, rgba(8, 6, 4, 0.98) 100%);
	border: 3px solid #3b2314;
	box-shadow: 0 0 0 3px #8d5826, 0 14px 28px rgba(0,0,0,0.35);
}
.deploy-companion-title {
	font-size: 24px;
	line-height: 26px;
	color: #f3cb76;
	margin-bottom: 6px;
}
.deploy-companion-subtitle {
	font-size: 13px;
	line-height: 18px;
	color: #bca58a;
	margin-bottom: 14px;
}
.deploy-companion-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}
.deploy-companion-card {
	padding: 12px;
	text-align: left;
	border: 2px solid #3b2314;
	background: linear-gradient(180deg, rgba(33, 22, 14, 0.98) 0%, rgba(14, 9, 6, 0.98) 100%);
	color: #f2ddb2;
	font-family: pixel, "Courier New", monospace;
	cursor: pointer;
}
.deploy-companion-card:hover {
	filter: brightness(1.06);
}
.deploy-companion-card.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.deploy-companion-name {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 6px;
	color: #f3cb76;
}
.deploy-companion-meta {
	font-size: 12px;
	line-height: 16px;
	color: #bca58a;
}
@media only screen and (max-width: 980px) {
	.selection-mode #pagewrapped {
		width: calc(100vw - 20px);
		margin-top: 26px;
	}
	.selection-browser-shell {
		gap: 8px;
	}
	.selection-rail-nav {
		width: 42px;
		height: 136px;
		font-size: 22px;
	}
	.character-slot-card {
		min-width: 220px;
		max-width: 220px;
	}
	.selection-title {
		font-size: 30px;
		line-height: 34px;
	}
}
.input{
	padding: 20px;
	font-size: 18px;
}
.button{
	background: #4C3634;
	padding: 20px;
	font-size: 18px;
	font-weight: bold;
	border:none;
}
.button.disable{
	background: #2E4C28;
}
.textbutton,.whiteheader{
	font-size: 24px;
}
.textbutton.disable{
	color: #3A783E;
}
.logout.disable{
	color: #787878;
}
.textheader{
	font-size: 32px;
	padding: 4px;
	margin-bottom: 2px;
	font-family: pixel;
	text-align: center;
}
.input,.button{
	/*font-family: pixel;*/
	border:none !important;
}
.selectioninput{
	font-size: 24px;
	padding: 2px;
	font-family: pixel;
	text-align: center;
}
.selectiontextarea{
	font-size: 24px;
	padding: 2px;
	font-family: pixel;
	text-align: left;
}
.chartype{
	border: 2px solid black;
	display: inline-block;
	padding: 4px 6px 4px 8px;
	margin: 3px 0px 2px 3px;
}
.chartype.selected{
	border: 2px solid gray;
}
.gendertype{
	border: 2px solid black;
	display: inline-block;
	padding: 4px 6px 4px 8px;
	margin: 3px 0px 2px 3px;
}
.gendertype.selected{
	border: 2px solid gray;
}
.lookstype{
	border: 2px solid black;
	display: inline-block;
	padding: 4px 6px 4px 8px;
	margin: 3px 0px 2px 3px;
}
.lookstype.selected{
	border: 2px solid gray;
}
input:focus, button:focus, div:focus {
	outline: none !important;
	box-shadow: none !important;
}
.block{
	box-sizing: border-box;
	width: 100%;
}
li{
	font-size: 24px;
}

.vtopx{
	margin-bottom: 0px;
	margin-top: 0px;
	vertical-align: top;
}

.glow8{
	-webkit-box-shadow: 0 0 3px orange;
	-moz-box-shadow: 0 0 3px orange;
	box-shadow: 0 0 3px orange;
}
.glow9{
	-webkit-box-shadow: 0 0 5px #E6434B;
	-moz-box-shadow: 0 0 5px #E6434B;
	box-shadow: 0 0 5px #E6434B;
}
.glow10{
	-webkit-box-shadow: 0 0 7px #ffe000;
	-moz-box-shadow: 0 0 7px #ffe000;
	box-shadow: 0 0 7px #ffe000;
}

.textglow{
	animation: textglow 4s infinite alternate;
}

@keyframes textglow {
	to {
		text-shadow: 0 0 2px orange;
	}
}

.boxglow{
	animation: boxglow 3s infinite alternate;
}

@keyframes boxglow {
	from {
		box-shadow: 0 0 1px orange;
	}
	to {
		box-shadow: 0 0 4px orange;
	}
}

@keyframes boxglow2 {
	from {
		box-shadow: 0 0 12px #E3C410;
		background-color: #000000;
	}
	50% {
		box-shadow: 0 0 1px #E3C410;
		background-color: #8B8C96;
	}
	to {
		box-shadow: 0 0 12px #E3C410;
		background-color: #000000;
	}
}

@keyframes bg1 {
	from {
		background-color: #000000;
	}
	50% {
		background-color: #599BC3;
	}
	to {
		background-color: #000000;
	}
}

@keyframes flashpa {
	from {
		background-color: #3A968E;
	}
	50% {
		background-color: #56F0E7;
	}
	to {
		background-color: #3A968E;
	}
}

.flashp{
	animation: flashpa 5s infinite linear;
}

@keyframes flashta {
	from {
		background-color: #3D386C;
	}
	50% {
		background-color: #746AD9;
	}
	to {
		background-color: #3D386C;
	}
}

.flasht{
	animation: flashta 3s infinite linear;
}


.loading{
	animation: boxglow2 2s infinite ease-in-out;
}

@media only screen and (max-height: 640px) {
	.loginfeatures{
		top: 59px;
		overflow: auto;
	}
}
.mailsubject + .mailsubject{
	border-top: 1px dashed gray;
	padding-top: 4px;
	margin-top: 4px;
}

/* ========== MEDIEVAL PIXEL CHAT & UI STYLES ========== */
:root {
  --medieval-gold-1: #f2c26b;
  --medieval-gold-2: #cf8c35;
  --medieval-gold-3: #7c4a18;
  --medieval-wood-1: #5a2f16;
  --medieval-wood-2: #7d431b;
  --medieval-wood-3: #31170b;
  --medieval-panel-1: #4a2412;
  --medieval-panel-2: #6b3218;
  --medieval-panel-3: #2a140b;
  --medieval-ink: #1c0d07;
  --medieval-text: #ffe7b1;
  --medieval-text-soft: #f7d58d;
  --medieval-line: #9d5e27;
  --medieval-blue: #2f66b8;
  --medieval-green: #8fd25c;
  --medieval-orange: #e0a33d;
  --medieval-white: #fff5db;
  --medieval-shadow: rgba(0, 0, 0, 0.45);
}

/* Medieval Chat Container Principal - PURE PIXEL STYLE */
.medieval-chat {
	position: fixed;
	bottom: 6px;
	left: 6px;
	width: 380px;
	background: linear-gradient(180deg, #6b4423 0%, #4a2e1a 100%);
	border: 4px solid #2a1a10;
	box-shadow:
		0 0 0 4px #8b5a3a,
		0 0 0 8px #3d2818,
		0 12px 24px rgba(0,0,0,0.5);
	z-index: 99;
	font-family: pixel, "Courier New", monospace;
	image-rendering: pixelated;
	color: #ffe7b1;
}

/* Coins pixel art décoratifs */
.medieval-chat::before,
.medieval-chat::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	background: #d4a34a;
	border: 3px solid #2a1a10;
	box-shadow: 0 0 0 3px #8b5a3a;
	z-index: 2;
	pointer-events: none;
}

.medieval-chat::before {
	top: -7px;
	left: -7px;
}

.medieval-chat::after {
	bottom: -7px;
	right: -7px;
}

.medieval-chat.collapsed {
	display: none;
}

/* Header du chat avec Serveur et Heure */
.medieval-chat-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	background: linear-gradient(180deg, #5c3a22 0%, #3d2616 100%);
	border-bottom: 3px solid #2a1a10;
}

.medieval-chat-server {
	color: #f4c46a;
	font-weight: 700;
	font-size: 15px;
	text-shadow: 2px 2px 0 #2a1a10;
	letter-spacing: 0.5px;
	margin-right: auto;
}

.medieval-chat-time {
	color: #e8c88a;
	font-size: 14px;
	text-shadow: 2px 2px 0 #2a1a10;
}

/* Zone de messages unifiée (chat + logs ensemble) - NO GRAY */
.medieval-chat-messages {
	margin: 6px;
	padding: 6px;
	border: 3px solid #2a1a10;
	background: linear-gradient(180deg, #3d2616 0%, #2a1a10 100%);
	box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
	height: 120px;
	overflow-y: scroll;
	font-size: 15px;
	line-height: 18px;
	scrollbar-width: thin;
	scrollbar-color: #8b5a3a #2a1a10;
	color: #ffe7b1;
}

.medieval-chat-messages::-webkit-scrollbar { width: 8px; }
.medieval-chat-messages::-webkit-scrollbar-track { background: #2a1a10; }
.medieval-chat-messages::-webkit-scrollbar-thumb { background: #8b5a3a; border: 2px solid #2a1a10; }

/* Quest button in header */
.medieval-chat-quest-btn {
	cursor: pointer;
	font-size: 18px;
	padding: 2px 6px;
	background: linear-gradient(180deg, #5c3a22 0%, #3d2616 100%);
	border: 2px solid #2a1a10;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	transition: all 0.1s;
}

.medieval-chat-quest-btn:hover {
	filter: brightness(1.2);
	transform: scale(1.1);
}

/* Quest Panel inside chat */
.medieval-quest-panel {
	position: absolute;
	top: 36px;
	left: 6px;
	right: 6px;
	bottom: 46px;
	background: linear-gradient(180deg, #4a2e1a 0%, #2a1a10 100%);
	border: 3px solid #2a1a10;
	box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
	z-index: 100;
	overflow-y: auto;
	padding: 8px;
}

.medieval-quest-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px;
	background: linear-gradient(180deg, #6b4423 0%, #4a2e1a 100%);
	border: 2px solid #2a1a10;
	font-size: 14px;
	font-weight: 700;
	color: #f4c46a;
	text-shadow: 1px 1px 0 #2a1a10;
	margin-bottom: 8px;
}

.medieval-quest-close {
	cursor: pointer;
	padding: 2px 6px;
	background: #8b2323;
	border: 1px solid #2a1a10;
	font-size: 12px;
	transition: all 0.1s;
}

.medieval-quest-close:hover {
	background: #c73e3e;
}

.medieval-quest-item {
	background: linear-gradient(180deg, #3d2616 0%, #2a1a10 100%);
	border: 2px solid #2a1a10;
	padding: 8px;
	margin-bottom: 6px;
}

.medieval-quest-title {
	font-size: 13px;
	font-weight: 700;
	color: #ffe7b1;
	text-shadow: 1px 1px 0 #2a1a10;
	margin-bottom: 4px;
}

.medieval-quest-progress {
	font-size: 11px;
	color: #e8c88a;
	text-align: right;
	margin-bottom: 4px;
}

.medieval-quest-bar {
	height: 8px;
	background: #1a1008;
	border: 1px solid #2a1a10;
	overflow: hidden;
}

.medieval-quest-bar > div {
	height: 100%;
	background: linear-gradient(180deg, #f4c46a 0%, #d4a34a 100%);
	transition: width 0.3s ease;
}

/* Entrées de message */
.medieval-chat-entry {
	padding: 6px 8px;
	margin-bottom: 4px;
	border-bottom: 1px dashed rgba(157, 94, 39, 0.3);
	color: var(--medieval-white);
	text-shadow: 1px 1px 0 var(--medieval-ink);
}

.medieval-chat-entry:last-child {
	border-bottom: none;
}

.medieval-chat-entry.server {
	color: var(--medieval-gold-1);
	font-style: italic;
}

.medieval-chat-entry.server::before {
	content: "[SERVEUR] : ";
	font-weight: 700;
	color: var(--medieval-orange);
}

.medieval-chat-entry.chat {
	color: var(--medieval-white);
}

.medieval-chat-entry .chat-name {
	font-weight: 700;
	color: var(--medieval-gold-1);
}

.medieval-chat-entry .chat-name::after {
	content: ": ";
}

/* Input row médiévale - FIXED ALIGNMENT */
.medieval-input-row {
	display: flex;
	gap: 6px;
	margin: 0 6px 6px 6px;
	height: 32px;
}

.medieval-chat-input {
	flex: 1;
	height: 32px;
	border: 3px solid #2a1a10;
	font-family: pixel, "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	padding: 0 8px;
	background: #2a1a10;
	color: #ffe7b1;
	outline: none;
	box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

.medieval-chat-input::placeholder {
	color: #8b6a4a;
}

.medieval-send-btn {
	height: 32px;
	width: 70px;
	border: 3px solid #2a1a10;
	font-family: pixel, "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	background: linear-gradient(180deg, #8b6a4a 0%, #5c4a32 100%);
	color: #ffe7b1;
	cursor: pointer;
	padding: 0;
	text-shadow: 1px 1px 0 #2a1a10;
}

.medieval-send-btn:hover {
	filter: brightness(1.1);
}

.medieval-send-btn:active {
	transform: translateY(1px);
}

/* Bouton Toggle CHAT - visible seulement quand chat caché */
.chat-toggle-btn {
	display: none;
	position: fixed;
	top: 8px;
	right: 180px;
	border: 4px solid var(--medieval-ink);
	background: linear-gradient(180deg, #f7d89a 0%, #d49a41 100%);
	box-shadow:
		0 0 0 3px var(--medieval-gold-3),
		0 4px 12px rgba(0,0,0,0.4);
	font-size: 18px;
	line-height: 20px;
	padding: 8px 16px;
	color: #2a1208;
	cursor: pointer;
	font-family: pixel, "Courier New", monospace;
	font-weight: 700;
	z-index: 100;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
}

.chat-toggle-btn.visible {
	display: inline-block;
}

.chat-toggle-btn:hover {
	filter: brightness(1.1);
}

.chat-toggle-btn:active {
	transform: translateY(2px);
}

/* Barres de vie et mana médiévales - VERTICALES A DROITE - NOUVEAU LAYOUT */
.medieval-stats-vertical {
	position: fixed;
	right: 6px;
	top: 80px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 98;
	width: 220px;
}

.medieval-stats-row {
	display: flex;
	gap: 6px;
}

.medieval-stat-bar {
	background: linear-gradient(180deg, #5c3a22 0%, #3d2616 100%);
	border: 3px solid #2a1a10;
	box-shadow:
		0 0 0 2px #8b5a3a,
		0 4px 8px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

.medieval-stat-bar.full-width {
	width: 100%;
}

.medieval-stat-bar.half {
	flex: 1;
}

.medieval-stat-header {
	background: linear-gradient(180deg, #4a2e1a 0%, #2a1a10 100%);
	border-bottom: 2px solid #2a1a10;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 700;
	color: #f4c46a;
	text-align: center;
	text-shadow: 1px 1px 0 #2a1a10;
}

.medieval-stat-fill {
	height: 16px;
	transition: width 0.3s ease;
	position: relative;
}

.medieval-stat-bar .medieval-stat-fill {
	border: 1px solid #2a1a10;
}

/* Boutons d'action médiévaux (ATT, NAME, INV) */
.medieval-action-btn {
	display: inline-block;
	border: 4px solid var(--medieval-ink);
	background: linear-gradient(180deg, #7a431e 0%, #5c2c12 100%);
	box-shadow:
		inset 0 0 0 3px var(--medieval-line),
		0 2px 4px rgba(0,0,0,0.3);
	font-size: 20px;
	line-height: 28px;
	padding: 6px 18px;
	color: var(--medieval-text);
	cursor: pointer;
	font-family: pixel, "Courier New", monospace;
	font-weight: 700;
	text-shadow: 2px 2px 0 var(--medieval-ink);
	transition: all 0.1s;
	margin: 0 -2px;
}

.medieval-action-btn:hover {
	filter: brightness(1.15);
}

.medieval-action-btn:active {
	transform: translateY(2px);
}

.medieval-action-btn.attack {
	background: linear-gradient(180deg, #8b3a3a 0%, #5c2020 100%);
	color: #ffd4d4;
}

.medieval-action-btn.inventory {
	background: linear-gradient(180deg, #3a6b3a 0%, #204020 100%);
	color: #d4ffd4;
}

/* Tutorial bar médiévale */
.medieval-tutorial-bar {
	width: 180px;
	background: linear-gradient(180deg, #7a431e 0%, #5c2c12 100%);
	border: 4px solid var(--medieval-ink);
	box-shadow:
		0 0 0 3px var(--medieval-gold-3),
		0 4px 12px var(--medieval-shadow);
	margin-bottom: 8px;
}

.medieval-tutorial-header {
	background: linear-gradient(180deg, #6b3317 0%, #482111 100%);
	border-bottom: 3px solid var(--medieval-ink);
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--medieval-gold-1);
	text-align: center;
	text-shadow: 2px 2px 0 var(--medieval-ink);
}

.medieval-tutorial-fill {
	height: 20px;
	background: linear-gradient(180deg, #6b4a9c 0%, #4a2f7a 100%);
	border: 2px solid var(--medieval-ink);
	transition: width 0.3s ease;
}

.medieval-tutorial-text {
	padding: 4px;
	text-align: center;
	font-size: 14px;
	color: var(--medieval-text);
	text-shadow: 1px 1px 0 var(--medieval-ink);
}

/* Responsive */
@media only screen and (max-width: 900px) {
	.medieval-chat {
		width: 340px;
	}
	
	.medieval-chat-messages {
		height: 160px;
	}
	
	.medieval-stats-vertical {
		right: 4px;
		transform: translateY(-50%) scale(0.9);
	}
	
	.medieval-stat-bar,
	.medieval-tutorial-bar {
		width: 150px;
	}
}

@media only screen and (max-width: 600px) {
	.medieval-chat {
		width: 280px;
		left: 4px;
		bottom: 4px;
	}
	
	.medieval-input-row {
		grid-template-columns: 1fr;
	}
	
	.medieval-send-btn {
		display: none;
	}
}

/* ========== NEW PIXEL BUTTON STYLES ========== */

/* Top menu icon buttons - small and clean */
.top-icon-btn {
	width: 38px;
	height: 38px;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 34px;
	text-align: center;
	margin: 0 2px !important;
}

.pixel-btn {
	position: relative;
	border: 0;
	padding: 12px 14px;
	cursor: pointer;
	color: #fff2c8;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 13px;
	font-family: pixel, "Courier New", monospace;
	background:
		linear-gradient(180deg, #7a4a22 0%, #6b3f1c 16%, #5c3417 58%, #3b1f0d 100%);
	box-shadow:
		0 -3px 0 #9f6931 inset,
		0 3px 0 #2b1508 inset,
		3px 0 0 #2b1508 inset,
		-3px 0 0 #9f6931 inset,
		0 0 0 2px #d39a44,
		0 0 0 4px #3c1f0d,
		0 4px 0 #130904,
		0 6px 10px rgba(0,0,0,0.35);
	text-shadow:
		2px 2px 0 #552b11;
	transition: transform 0.08s steps(2, end), filter 0.08s steps(2, end);
	clip-path: polygon(
		4px 0,
		calc(100% - 4px) 0,
		100% 4px,
		100% calc(100% - 4px),
		calc(100% - 4px) 100%,
		4px 100%,
		0 calc(100% - 4px),
		0 4px
	);
	image-rendering: pixelated;
	display: inline-block;
	margin: 0 3px;
}

.pixel-btn::before {
	content: "";
	position: absolute;
	inset: 4px;
	background: linear-gradient(180deg, rgba(255, 225, 145, 0.15), rgba(255,255,255,0) 40%);
	pointer-events: none;
	clip-path: inherit;
}

.pixel-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-2px);
}

.pixel-btn:active {
	transform: translateY(2px);
	box-shadow:
		0 -3px 0 #9f6931 inset,
		0 3px 0 #2b1508 inset,
		3px 0 0 #2b1508 inset,
		-3px 0 0 #9f6931 inset,
		0 0 0 2px #d39a44,
		0 0 0 4px #3c1f0d,
		0 2px 0 #130904,
		0 3px 6px rgba(0,0,0,0.28);
}

.pixel-btn.active {
	background:
		linear-gradient(180deg, #a36629 0%, #875221 22%, #6a3d19 60%, #4a280f 100%);
	box-shadow:
		0 -3px 0 #d3a861 inset,
		0 3px 0 #2b1508 inset,
		3px 0 0 #2b1508 inset,
		-3px 0 0 #d3a861 inset,
		0 0 0 2px #f4ce76,
		0 0 0 4px #3c1f0d,
		0 4px 0 #130904,
		0 6px 10px rgba(0,0,0,0.35);
	color: #fff7d4;
}

/* Action buttons row at bottom center - cleaner */
.medieval-action-btns-row {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
	padding: 4px 8px;
	background: linear-gradient(180deg, rgba(90, 61, 37, 0.9) 0%, rgba(58, 36, 13, 0.9) 100%);
	border: 2px solid #2a140b;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}

.medieval-action-btns-row .pixel-btn {
	padding: 8px 16px;
	font-size: 12px;
	min-width: 70px;
	text-align: center;
}

/* Pixel Art Frame for bottom action buttons */
.pixel-bottom-frame {
	position: relative;
	padding: 14px;
	border: 3px solid #000;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03), transparent 20%),
		repeating-linear-gradient(
			0deg,
			#26180f 0px,
			#26180f 4px,
			#2c1d13 4px,
			#2c1d13 8px
		);
	box-shadow:
		0 0 0 3px #4d2e18,
		0 0 0 6px #000,
		0 10px 25px rgba(0, 0, 0, 0.55);
	display: inline-block;
	margin-bottom: 8px;
}

/* Ensure action buttons row inside frame has proper layout */
.pixel-bottom-frame .medieval-action-btns-row {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
}

/* Special styles for action buttons */
.pixel-btn.attack {
	background:
		linear-gradient(180deg, #9a4a3a 0%, #7b3f2c 16%, #5c2c20 58%, #3b1f15 100%);
	color: #ffd4c8;
}

.pixel-btn.inventory {
	background:
		linear-gradient(180deg, #3a7a4a 0%, #2c5c3a 16%, #1d3d28 58%, #122818 100%);
	color: #d4ffd8;
}

.pixel-btn.name-btn {
	background:
		linear-gradient(180deg, #5a4a8a 0%, #4a3a6a 16%, #3a2a4a 58%, #1f1528 100%);
	color: #e8d8ff;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Separator between action buttons and skill buttons */
.medieval-buttons-separator {
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, transparent 0%, var(--medieval-gold-3) 50%, transparent 100%);
	margin: 4px 0;
}

#targetframe {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: min(520px, calc(100vw - 40px));
	z-index: 115;
	display: none;
	text-align: center;
	pointer-events: none;
}

#targetframe.visible {
	display: block;
}

#targetframe-content {
	pointer-events: auto;
}

.target-frame-card {
	background: linear-gradient(180deg, rgba(33, 20, 12, 0.96) 0%, rgba(16, 9, 5, 0.96) 100%);
	border: 3px solid #2a1509;
	box-shadow:
		0 0 0 3px #8d5826,
		0 10px 24px rgba(0,0,0,0.45);
	position: relative;
	overflow: hidden;
	padding: 10px 14px 12px;
	color: #f5ddb2;
	font-family: pixel, "Courier New", monospace;
	text-shadow: 1px 1px 0 #2a1509;
	clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.target-frame-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.target-frame-name {
	font-size: 18px;
	color: #f6c86f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.target-frame-subtitle {
	font-size: 11px;
	color: #d0b48b;
	text-align: right;
}

.target-frame-bar {
	position: relative;
	height: 20px;
	border: 2px solid #2a1509;
	background: rgba(0,0,0,0.42);
	overflow: hidden;
	margin-bottom: 8px;
}

.target-frame-fill {
	height: 100%;
	background: linear-gradient(90deg, #7b1d1d 0%, #d4443a 55%, #ff9a58 100%);
	transition: width 0.18s linear;
}

.target-frame-bar-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: #fff2d1;
	text-shadow: 1px 1px 0 #1b0d05;
}

.target-frame-meta,
.target-frame-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	font-size: 11px;
}

.target-frame-meta {
	color: #d8c59e;
	margin-bottom: 6px;
}

.target-frame-tag {
	display: inline-block;
	padding: 2px 6px;
	border: 1px solid currentColor;
	background: rgba(0,0,0,0.2);
	font-size: 10px;
	letter-spacing: 0.5px;
}

.target-frame-statuses {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.target-frame-status-card {
	text-align: left;
	padding: 9px 10px;
	border: 1px solid rgba(186, 142, 77, 0.6);
	background: linear-gradient(180deg, rgba(54, 33, 19, 0.92) 0%, rgba(25, 15, 8, 0.92) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 226, 163, 0.06);
}

.target-frame-status-card.poison {
	border-color: rgba(108, 182, 84, 0.75);
	background: linear-gradient(180deg, rgba(26, 56, 24, 0.95) 0%, rgba(15, 30, 13, 0.95) 100%);
	box-shadow: inset 0 0 0 1px rgba(196, 255, 174, 0.1), 0 0 18px rgba(52, 126, 48, 0.15);
}

.target-frame-status-card.inactive {
	opacity: 0.82;
	filter: saturate(0.85);
}

.target-frame-status-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 7px;
}

.target-frame-status-name {
	font-size: 12px;
	letter-spacing: 0.8px;
	color: #d8ffba;
}

.target-frame-status-time {
	font-size: 10px;
	color: #f4f6cf;
}

.target-frame-status-values {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.target-frame-status-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 6px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(0,0,0,0.22);
	font-size: 10px;
	color: #eef3d7;
}

.target-frame-status-chip b {
	color: #ffffff;
	font-weight: normal;
}

.target-frame-status-chip.dim {
	color: #c8d3c1;
	border-color: rgba(206, 220, 201, 0.15);
}

.target-frame-status-chip.accent {
	color: #173211;
	background: linear-gradient(180deg, #b7ff8e 0%, #7fdb64 100%);
	border-color: rgba(205, 255, 188, 0.7);
	text-shadow: none;
}

.target-frame-status-chip.accent b {
	color: #173211;
}

#cooldown-tracker {
	position: fixed;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 210px;
	display: none;
	flex-direction: column;
	gap: 8px;
	z-index: 112;
	pointer-events: none;
}

#cooldown-tracker.visible {
	display: flex;
}

.cooldown-chip {
	background: linear-gradient(180deg, rgba(39, 24, 14, 0.95) 0%, rgba(20, 10, 6, 0.95) 100%);
	border: 2px solid #2a1509;
	box-shadow: 0 0 0 2px #8d5826, 0 6px 12px rgba(0,0,0,0.35);
	padding: 8px 10px;
	color: #f3ddb4;
	font-family: pixel, "Courier New", monospace;
	text-shadow: 1px 1px 0 #2a1509;
}

.cooldown-chip-header {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
	margin-bottom: 6px;
}

.cooldown-chip-bar {
	height: 8px;
	border: 1px solid #2a1509;
	background: rgba(0,0,0,0.4);
	overflow: hidden;
}

.cooldown-chip-fill {
	height: 100%;
	background: linear-gradient(90deg, #cc7b32 0%, #f3c56f 100%);
	transition: width 0.12s linear;
}

#action-notice-anchor {
	position: fixed;
	left: 50%;
	bottom: 220px;
	transform: translateX(-50%);
	width: min(520px, calc(100vw - 40px));
	z-index: 118;
	text-align: center;
	pointer-events: none;
}

#action-notice {
	display: inline-block;
	max-width: 100%;
	padding: 12px 22px;
	background: rgba(20, 10, 6, 0.92);
	border: 3px solid #d4a832;
	box-shadow: 0 0 0 3px #5e3517, 0 10px 28px rgba(0,0,0,0.45);
	color: #fff8e8;
	font-family: pixel, "Courier New", monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-shadow: 2px 2px 0 #2a1509;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.14s ease, transform 0.14s ease;
}

#action-notice.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Skill slot button - BIGGER NUMBERS */
.pixel-skill-btn {
	position: relative;
	width: 56px;
	height: 56px;
	border: 0;
	cursor: pointer;
	background:
		linear-gradient(180deg, #5a3d25 0%, #4a3018 50%, #3a240d 100%);
	box-shadow:
		0 -3px 0 #8d5a3a inset,
		0 3px 0 #2a1808 inset,
		3px 0 0 #2a1808 inset,
		-3px 0 0 #8d5a3a inset,
		0 0 0 2px #a67a4a,
		0 0 0 4px #3d2412,
		0 3px 0 #1a0f05,
		0 5px 8px rgba(0,0,0,0.4);
	clip-path: polygon(
		4px 0,
		calc(100% - 4px) 0,
		100% 4px,
		100% calc(100% - 4px),
		calc(100% - 4px) 100%,
		4px 100%,
		0 calc(100% - 4px),
		0 4px
	);
	image-rendering: pixelated;
	transition: transform 0.08s steps(2, end), filter 0.08s steps(2, end);
	font-family: pixel, "Courier New", monospace;
	font-size: 18px;
	font-weight: 700;
	color: #f2d4a8;
	text-shadow: 2px 2px 0 #3d2412;
	margin: 0 2px;
	overflow: hidden;
}

.pixel-skill-btn:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.pixel-skill-btn:active {
	transform: translateY(2px);
	box-shadow:
		0 -3px 0 #8d5a3a inset,
		0 3px 0 #2a1808 inset,
		3px 0 0 #2a1808 inset,
		-3px 0 0 #8d5a3a inset,
		0 0 0 2px #a67a4a,
		0 0 0 4px #3d2412,
		0 2px 0 #1a0f05,
		0 3px 6px rgba(0,0,0,0.3);
}

/* BIG KEY NUMBER */
.pixel-skill-btn .skill-key {
	position: absolute;
	top: 3px;
	left: 5px;
	transform: none;
	font-size: 12px;
	font-weight: 700;
	color: #f2d4a8;
	text-shadow: 
		2px 2px 0 #2a1808,
		-1px -1px 0 #5a4a3a;
	z-index: 5;
}

.pixel-skill-btn .skill-label {
	display: none;
}

.pixel-skill-btn .skill-icon-wrap {
	position: absolute;
	inset: 8px 6px 10px 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	pointer-events: none;
}

.pixel-skill-btn .hotbar-icon-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	overflow: hidden;
	image-rendering: pixelated;
	filter: drop-shadow(0 2px 0 rgba(0,0,0,0.45));
}

.pixel-skill-btn .hotbar-icon-frame img,
.pixel-skill-btn .hotbar-icon-frame .技能精灵图 {
	transform: scale(1.6);
	transform-origin: center;
	image-rendering: pixelated;
}

.pixel-skill-btn .skill-cooldown-time {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: #fff6de;
	text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0,0,0,0.7);
	z-index: 6;
	opacity: 0;
}

.pixel-skill-btn.cooldown .skill-cooldown-time {
	opacity: 1;
}

/* COOLDOWN EFFECT */
.pixel-skill-btn.cooldown {
	filter: grayscale(0.7) brightness(0.5);
	cursor: not-allowed;
}

.pixel-skill-btn.cooldown::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		0deg,
		rgba(0,0,0,0.6) var(--cooldown-percent, 0%),
		transparent var(--cooldown-percent, 0%)
	);
	clip-path: inherit;
	z-index: 3;
}

/* Cooldown sweep animation */
@keyframes cooldown-sweep {
	from { --cooldown-percent: 0%; }
	to { --cooldown-percent: 100%; }
}

.pixel-skill-btn.cooldown-anim {
	animation: cooldown-sweep linear forwards;
}

/* Skill bar row with item_container */
.medieval-skillbar-row {
	display: flex;
	justify-content: center;
	gap: 4px;
	padding: 8px;
	background: linear-gradient(180deg, #5a3d25 0%, #3a240d 100%);
	border: 3px solid #2a140b;
	box-shadow:
		0 0 0 3px #8d5826,
		0 0 0 6px #2a1509,
		0 8px 16px rgba(0,0,0,0.4);
	position: relative;
}

.medieval-skillbar-row > div {
	margin: 0 !important;
}

.medieval-skillbar-row .truui {
	font-size: 10px !important;
	padding: 2px 4px !important;
	border-width: 1px !important;
}

.medieval-skillbar-row::before,
.medieval-skillbar-row::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #f3cf7a;
	border: 3px solid #2a1509;
	box-shadow: 0 0 0 3px #8d5826;
	z-index: 2;
}

.medieval-skillbar-row::before {
	top: -5px;
	left: -5px;
}

.medieval-skillbar-row::after {
	bottom: -5px;
	right: -5px;
}

/* ═══════════════════════════════════════════════════════════
   SLIME IDLE — PIXEL ART MEDIEVAL OVERRIDES (Browser)
   Applique le thème pixel art médiéval sur tout le jeu
   ═══════════════════════════════════════════════════════════ */

/* ── LOGIN / SELECTION PANELS ── */
.loginorselection, #features, .largeborder {
	background: #110e0c !important;
	border: 2px solid #6b4828 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', 'Courier New', monospace !important;
	box-shadow: 4px 4px 0 rgba(0,0,0,0.8) !important;
	border-radius: 0 !important;
}

/* Titre login */
.loginorselection .textheader, .loginorselection h1, .loginorselection h2 {
	color: #f0c84a !important;
	letter-spacing: 3px;
	text-shadow: 0 0 10px #7a5018;
	font-family: 'Pixel', monospace !important;
}

/* Zone info feature à gauche */
#features {
	background: #0d0b08 !important;
	border: 2px solid #4a3020 !important;
	color: #8a7a58 !important;
	font-size: 14px !important;
	line-height: 1.6;
}

#features div[style*="border-bottom"] {
	color: #d4a832 !important;
	border-bottom-color: #4a3020 !important;
}

/* Serveurs panel */
#pagewrapper div[style*="border: 5px solid gray"],
.menu div[style*="border: 5px solid gray"] {
	background: #110e0c !important;
	border: 2px solid #6b4828 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	color: #e0d0a8 !important;
}

#pagewrapper div[style*="border-bottom: 2px dashed gray"],
div[style*="border-bottom: 2px dashed gray"] {
	color: #d4a832 !important;
	border-bottom-color: #4a3020 !important;
}

/* ── TEXTBUTTON = liens navigation ── */
.textbutton, a.textbutton {
	display: block;
	color: #e0d0a8 !important;
	font-family: 'Pixel', 'Courier New', monospace !important;
	font-size: 14px !important;
	padding: 5px 2px !important;
	cursor: pointer;
	text-decoration: none !important;
	letter-spacing: 1px;
	border-bottom: 1px solid transparent;
	transition: color 0.07s;
}

.textbutton:hover, a.textbutton:hover {
	color: #f0c84a !important;
	border-bottom-color: #4a3020 !important;
}

.textbutton.disable, .logout.disable {
	color: #4a3020 !important;
}

/* ── WHITEHEADER ── */
.whiteheader {
	color: #d4a832 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 13px !important;
	letter-spacing: 1px;
}

/* ── SELECTIONINPUT ── */
.selectioninput, .selectiontextarea {
	background: #080608 !important;
	border: 1px solid #6b4828 !important;
	border-top-color: #080608 !important;
	border-left-color: #080608 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 14px !important;
	padding: 4px 8px !important;
	border-radius: 0 !important;
}

/* ── CHARTYPE / LOOKS ── */
.chartype, .gendertype, .lookstype {
	background: #1e1612 !important;
	border: 1px solid #4a3020 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 13px !important;
	padding: 4px 8px !important;
	cursor: pointer;
	margin: 3px !important;
	transition: background 0.07s;
}

.chartype:hover, .gendertype:hover, .lookstype:hover {
	background: #2c2018 !important;
	border-color: #9b6e30 !important;
}

.chartype.selected, .gendertype.selected, .lookstype.selected {
	background: #7a5018 !important;
	border-color: #d4a832 !important;
	color: #f0c84a !important;
}

/* ── TOPUI MENU ── */
#topui {
	z-index: 202;
}

#topui .largeborder {
	background: #110e0c !important;
	border: 2px solid #6b4828 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	padding: 10px 16px !important;
}

/* ── INFOP (texte info login) ── */
.infop {
	color: #8a7a58 !important;
	font-size: 13px !important;
	line-height: 1.6;
}

/* ── GAMEBUTTON OVERRIDES PIXEL ART ── */
.gamebutton {
	background: #1e1612 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	border-right: 2px solid #080608 !important;
	border-bottom: 2px solid #080608 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', 'Courier New', monospace !important;
	font-size: 13px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: 1px 1px 0 #000 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 6px 10px !important;
	cursor: pointer;
	display: inline-block;
	transition: background 0.07s, color 0.07s;
	position: relative;
}

.gamebutton:hover {
	background: #2c2018 !important;
	color: #f0c84a !important;
	border-top-color: #7a5018 !important;
	border-left-color: #7a5018 !important;
}

.gamebutton:active {
	border-top: 2px solid #080608 !important;
	border-left: 2px solid #080608 !important;
	border-right: 2px solid #9b6e30 !important;
	border-bottom: 2px solid #9b6e30 !important;
	background: #7a5018 !important;
	transform: translate(1px,1px);
}

.gamebutton-large {
	font-size: 15px !important;
	padding: 8px 14px !important;
}

.gamebutton-small {
	font-size: 11px !important;
	padding: 4px 7px !important;
}

/* ── SLIMBUTTON ── */
.slimbutton {
	background: #1e1612 !important;
	border-top: 2px solid #9b6e30 !important;
	border-left: 2px solid #9b6e30 !important;
	border-right: 2px solid #080608 !important;
	border-bottom: 2px solid #080608 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 12px !important;
	border-radius: 0 !important;
	padding: 5px 8px !important;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	box-shadow: 0 4px 0 rgba(0,0,0,0.35) !important;
	transition: transform 0.12s, box-shadow 0.12s, background 0.07s, color 0.07s;
}

.slimbutton:hover {
	background: #2c2018 !important;
	color: #f0c84a !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 0 rgba(0,0,0,0.45) !important;
}

.slimbutton:active {
	border-top: 2px solid #080608 !important;
	border-left: 2px solid #080608 !important;
	border-right: 2px solid #9b6e30 !important;
	border-bottom: 2px solid #9b6e30 !important;
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(0,0,0,0.35) !important;
	background: #7a5018 !important;
}

/* ── TINYBUTTON ── */
.tinybutton {
	background: #1e1612 !important;
	border-top: 1px solid #9b6e30 !important;
	border-left: 1px solid #9b6e30 !important;
	border-right: 1px solid #080608 !important;
	border-bottom: 1px solid #080608 !important;
	color: #e0d0a8 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 11px !important;
	border-radius: 0 !important;
	padding: 3px 6px !important;
	cursor: pointer;
}

.tinybutton:hover {
	color: #f0c84a !important;
}

/* ── ONLINE COUNTER ── */
.gamebutton.menu[style*="border-color: green"],
.gamebutton.menu[style*="border-color:green"] {
	border-color: #38a028 !important;
	color: #5ad050 !important;
}

/* ── LOADING / PROGRESS ── */
#progressui.gamebutton.loading {
	border-color: #d4a832 !important;
	color: #d4a832 !important;
}

/* ── SERVER LIST ITEMS ── */
.clickable.enableclicks {
	color: #e0d0a8 !important;
	padding: 3px 0 !important;
	cursor: pointer;
	font-family: 'Pixel', monospace !important;
	font-size: 13px !important;
	border-bottom: 1px solid #1e1612;
}

.clickable.enableclicks:hover {
	color: #f0c84a !important;
}

.disconnected {
	color: #c03030 !important;
	font-family: 'Pixel', monospace !important;
}

/* ── BACKBUTTON ── */
#backbutton .gamebutton {
	background: #1e1612 !important;
}

/* ── TOPLEFTCORNER / TOPRIGHTCORNER BUTTONS ── */
#topleftcorner .gamebutton,
#toprightcorner .gamebutton {
	margin: 1px !important;
}

/* ── BOTTOMLEFTCORNER (CHAT BLOCK) ── */
#bottomleftcorner2 .block {
	background: #110e0c !important;
	border: 2px solid #4a3020 !important;
}

#bottomleftcorner2 .block_title {
	background: #2c2018 !important;
	color: #d4a832 !important;
	border-bottom: 1px solid #4a3020 !important;
	font-size: 13px !important;
	padding: 4px 8px !important;
}

/* ── CODEUR EDITOR BLOCK ── */
#codeui, #bottomrightcodecorner .block {
	background: #0a0808 !important;
	border-color: #4a3020 !important;
}

/* ── MODAL OVERLAY ── */
#modal {
	background: rgba(4,3,2,0.9) !important;
	z-index: 500 !important;
}

/* ── LABELS (guide, doc) ── */
.clabel { color: #50c8e8 !important; }
.xlabel { color: #e85050 !important; }
.rlabel { color: #e87050 !important; cursor: pointer; }
.rlabel:hover { color: #f0c84a !important; text-decoration: underline; }
.jlabel { color: #50e890 !important; cursor: pointer; }
.jlabel:hover { color: #f0c84a !important; }
.dlabel { color: #a88060 !important; }
.hlabel { color: #d4a832 !important; font-weight: bold; }
.elabel { color: #50a8f0 !important; cursor: pointer; }

/* ── GLOW/SHADOW OVERRIDES ── */
.glow8  { box-shadow: 0 0 4px #d4a832 !important; }
.glow9  { box-shadow: 0 0 6px #f0c84a !important; }
.glow10 { box-shadow: 0 0 8px #f0c84a !important; }

/* ── SUCCESSS / FAIL ── */
.psuccess { color: #38a028 !important; }
.pfail    { color: #c03030 !important; }

/* ── MISC COLORS ── */
div[style*="color: gray"], span[style*="color: gray"] {
	color: #6b4828 !important;
}

/* ── DISCORD SPECIAL ── */
a[href*="discord"] {
	color: #8888ff !important;
}
a[href*="discord"]:hover {
	color: #f0c84a !important;
}

/* ── CONNECTED / SERVER COLOR TAGS ── */
span[style*="color: #85c76b"] { color: #5ad050 !important; }
span[style*="color: #5de376"] { color: #5ad050 !important; }
span[style*="color: gold"] { color: #d4a832 !important; }
span[style*="color: #4b9dde"] { color: #5888d8 !important; }

/* ═══════════════════════════════════════════════════════════
   INVENTORY MEDIEVAL REDESIGN
   ═══════════════════════════════════════════════════════════ */

.theimventory {
	background: linear-gradient(180deg, #1a1208 0%, #0d0804 100%) !important;
	border: 3px solid #4a3020 !important;
	box-shadow:
		0 0 0 3px #8d5826,
		0 10px 24px rgba(0,0,0,0.5) !important;
	padding: 8px !important;
	clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.theimventory .pixel-btn {
	font-size: 11px !important;
	padding: 6px 10px !important;
	margin-bottom: 6px !important;
}

/* ═══════════════════════════════════════════════════════════
   CHAT INPUT FIX - Clean and centered
   ═══════════════════════════════════════════════════════════ */

.medieval-chat {
	background: linear-gradient(180deg, rgba(26, 18, 8, 0.98) 0%, rgba(13, 9, 4, 0.98) 100%) !important;
	border: 3px solid #4a3020 !important;
	box-shadow:
		0 0 0 3px #8d5826,
		0 12px 32px rgba(0,0,0,0.6) !important;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.medieval-chat-header {
	background: linear-gradient(90deg, #2a1f15 0%, #3d2e1a 50%, #2a1f15 100%) !important;
	border-bottom: 2px solid #4a3020 !important;
	color: #f0c84a !important;
	font-family: 'Pixel', monospace !important;
	letter-spacing: 1px;
	text-shadow: 1px 1px 0 #2a1509;
	padding: 6px 10px;
}

.medieval-chat-messages {
	background: rgba(8, 6, 3, 0.7) !important;
	border: 2px solid #3d2412 !important;
	margin: 6px !important;
	min-height: 146px;
	padding: 8px !important;
	box-shadow: inset 0 0 0 1px rgba(141, 88, 38, 0.28), inset 0 10px 18px rgba(0,0,0,0.28) !important;
}

.medieval-chat-entry {
	font-family: 'Pixel', 'Courier New', monospace !important;
	font-size: 13px !important;
	padding: 4px 8px !important;
	border-bottom: 1px solid rgba(74, 48, 32, 0.3) !important;
}

.medieval-chat-entry.server {
	color: #f4c46a !important;
	text-shadow: 1px 1px 0 #2a1509;
}

/* FIXED CHAT INPUT - Clean single row */
.medieval-input-row {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 6px 6px !important;
	padding: 6px;
	background: linear-gradient(180deg, rgba(17, 12, 8, 0.96) 0%, rgba(7, 5, 3, 0.92) 100%);
	border-top: 1px solid rgba(141, 88, 38, 0.42);
	box-shadow: inset 0 1px 0 rgba(255, 225, 177, 0.05);
}

.medieval-chat-input {
	flex: 1;
	height: 36px !important;
	padding: 0 12px !important;
	background: linear-gradient(180deg, rgba(12, 8, 5, 0.98) 0%, rgba(25, 16, 10, 0.98) 100%) !important;
	border: 2px solid #6c4525 !important;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 4px 8px rgba(0,0,0,0.34) !important;
	color: #f6e1b4 !important;
	font-family: 'Pixel', monospace !important;
	font-size: 14px;
	border-radius: 0;
	outline: none;
}

.medieval-chat-input:focus {
	border-color: #d09b54 !important;
	box-shadow: 0 0 0 1px #2a1509, inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 4px 8px rgba(0,0,0,0.34) !important;
}

.medieval-chat-input::placeholder {
	color: #6b4828 !important;
}

.medieval-send-btn {
	width: 50px !important;
	height: 36px !important;
	border: 2px solid #8d5826 !important;
	box-shadow: 0 0 0 1px #2a1509, inset 0 1px 0 rgba(255, 231, 177, 0.12);
	background: linear-gradient(180deg, #7a4a22 0%, #4a3018 100%) !important;
	color: #f0c84a !important;
	font-family: 'Pixel', monospace !important;
	font-size: 12px;
	cursor: pointer;
	clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.medieval-send-btn:hover {
	filter: brightness(1.1);
}

/* ═══════════════════════════════════════════════════════════
   TOP LEFT CORNER UI - HP/MP/XP BARS MEDIEVAL
   ═══════════════════════════════════════════════════════════ */

#topleftcornerui .renderedinfo {
	background: linear-gradient(180deg, rgba(26, 18, 8, 0.98) 0%, rgba(13, 9, 4, 0.98) 100%) !important;
	border: 3px solid #4a3020 !important;
	box-shadow:
		0 0 0 3px #8d5826,
		0 12px 32px rgba(0,0,0,0.6) !important;
	padding: 12px 16px !important;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

#topleftcornerui .cbold {
	font-family: 'Pixel', 'Courier New', monospace !important;
	font-size: 13px !important;
	letter-spacing: 0.5px;
}

/* Barres de stat en style médiéval */
.hp-fill {
	background: linear-gradient(90deg, #7b1d1d 0%, #d4443a 55%, #ff9a58 100%) !important;
	box-shadow: 0 0 8px rgba(212, 68, 58, 0.4) !important;
}

.mp-fill {
	background: linear-gradient(90deg, #1d3d7b 0%, #3a6bd4 55%, #589aff 100%) !important;
	box-shadow: 0 0 8px rgba(58, 107, 212, 0.4) !important;
}

.xp-fill {
	background: linear-gradient(90deg, #7b6b1d 0%, #d4a83a 55%, #ffe958 100%) !important;
	box-shadow: 0 0 8px rgba(212, 168, 58, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   FANTASY PIXEL ART BUTTONS - Exact User Design (48px)
   ═══════════════════════════════════════════════════════════ */

:root {
  --wood-1: #5c3a22;
  --wood-2: #7f5230;
  --wood-3: #9f6a3b;
  --gold-3: #f2cf63;
  --stone-1: #4e4b57;
  --stone-2: #767180;
  --stone-3: #a69fb0;
  --red-1: #6d1f1f;
  --red-2: #9f2f2f;
  --red-3: #e35a4e;
  --blue-1: #1d355d;
  --blue-2: #2d5898;
  --blue-3: #74b7ff;
  --green-1: #284920;
  --green-2: #45753a;
  --green-3: #8fdc70;
  --purple-1: #402058;
  --purple-2: #6a2f91;
  --purple-3: #b278ff;
}

.pixel-art-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.35));
  transition: transform 0.12s steps(2), filter 0.12s steps(2);
  image-rendering: pixelated;
  flex-shrink: 0;
}

.pixel-art-btn:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,0.45)) brightness(1.08);
}

.pixel-art-btn:active {
  transform: translateY(2px);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35));
}

.btn-face {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 3px solid #000;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.15),
    inset 0 -4px 0 rgba(0,0,0,0.28);
  clip-path: polygon(
    6px 0, calc(100% - 6px) 0,
    100% 6px, 100% calc(100% - 6px),
    calc(100% - 6px) 100%, 6px 100%,
    0 calc(100% - 6px), 0 6px
  );
}

/* Corner accents */
.pixel-art-btn::before,
.pixel-art-btn::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold-3);
  border: 2px solid #000;
  pointer-events: none;
  z-index: 3;
}

.pixel-art-btn::before { top: 4px; left: 4px; }
.pixel-art-btn::after { bottom: 4px; right: 4px; }

/* Wood theme */
.wood .btn-face {
  background:
    linear-gradient(180deg, var(--wood-3) 0 18%, var(--wood-2) 18% 76%, var(--wood-1) 76% 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,240,200,0.17),
    inset 0 -5px 0 rgba(0,0,0,0.25),
    inset 12px 0 0 rgba(0,0,0,0.1),
    inset -12px 0 0 rgba(255,255,255,0.04);
}

/* Stone theme */
.stone .btn-face {
  background:
    linear-gradient(180deg, var(--stone-3) 0 18%, var(--stone-2) 18% 76%, var(--stone-1) 76% 100%);
}

/* Ruby theme */
.ruby .btn-face {
  background:
    linear-gradient(180deg, #d07d5f 0 10%, var(--red-3) 10% 30%, var(--red-2) 30% 78%, var(--red-1) 78% 100%);
}

/* Emerald theme */
.emerald .btn-face {
  background:
    linear-gradient(180deg, #b4f0a1 0 10%, var(--green-3) 10% 30%, var(--green-2) 30% 78%, var(--green-1) 78% 100%);
}

/* Sapphire theme */
.sapphire .btn-face {
  background:
    linear-gradient(180deg, #b4d9ff 0 10%, var(--blue-3) 10% 30%, var(--blue-2) 30% 78%, var(--blue-1) 78% 100%);
}

/* Arcane theme */
.arcane .btn-face {
  background:
    linear-gradient(180deg, #d8b8ff 0 10%, var(--purple-3) 10% 30%, var(--purple-2) 30% 78%, var(--purple-1) 78% 100%);
}

/* Icon container */
.btn-icon {
  position: absolute;
  pointer-events: none;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

/* Pixel icons */
.pixel-icon {
  display: grid;
  gap: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

.pixel-icon i {
  display: block;
  width: 6px;
  height: 6px;
  pointer-events: none;
}

/* Spark animation */
.btn-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  background: var(--gold-3);
  border: 2px solid #000;
  opacity: 0.8;
  animation: twinkle 1.8s steps(2) infinite;
  z-index: 4;
}

.btn-spark.a { top: 6px; right: 16px; }
.btn-spark.b { bottom: 12px; left: 12px; animation-delay: 0.7s; }

@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* Hotbar pixel art background */
.medieval-skillbar-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	background:
		linear-gradient(180deg, rgba(60,40,25,0.98) 0%, rgba(40,25,15,0.98) 100%),
		repeating-linear-gradient(
			0deg,
			#3a2818 0px,
			#3a2818 4px,
			#4a3420 4px,
			#4a3420 8px
		);
	border: 4px solid #2a140b;
	box-shadow:
		0 0 0 4px #5c3a22,
		0 0 0 8px #2a1509,
		0 8px 24px rgba(0,0,0,0.6),
		inset 0 2px 0 rgba(255,255,255,0.05);
	clip-path: polygon(
		12px 0, calc(100% - 12px) 0,
		100% 12px, 100% calc(100% - 12px),
		calc(100% - 12px) 100%, 12px 100%,
		0 calc(100% - 12px), 0 12px
	);
}

/* Action buttons row */
.medieval-action-btns-row {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 12px;
	padding: 8px;
	background: none;
	border: none;
	box-shadow: none;
}

/* Hide old skillbar styles */
.pixel-skill-btn {
	display: none;
}

/* Hotbar icons inside pixel buttons */
.pixel-art-btn .hotbar-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
}

.pixel-art-btn .hotbar-icon .hotbar-icon-frame {
	width: 32px;
	height: 32px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pixel-art-btn .hotbar-icon .hotbar-icon-frame img,
.pixel-art-btn .hotbar-icon .hotbar-icon-frame .技能精灵图 {
	transform: scale(1.8);
	transform-origin: center;
	image-rendering: pixelated;
}

.pixel-art-btn .hotbar-icon .hotbar-fallback {
	font-size: 14px;
	color: #f3e9d2;
	text-shadow: 2px 2px 0 #000;
	font-weight: bold;
}

/* Key label for empty slots */
.pixel-art-btn .btn-icon.key-label {
	font-size: 20px;
	font-weight: bold;
	color: rgba(243, 233, 210, 0.4);
}

/* Cooldown overlay for pixel buttons */
.pixel-art-btn.cooldown {
	filter: grayscale(0.7) brightness(0.6);
}

.pixel-art-btn.cooldown::after {
	content: attr(data-cooldown);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #fff;
	text-shadow: 2px 2px 0 #000;
	z-index: 10;
	background: rgba(0,0,0,0.3);
}

/* Pressed animation */
.pixel-art-btn.pressed {
	transform: translateY(2px);
	filter: drop-shadow(0 2px 0 rgba(0,0,0,0.35)) brightness(0.9);
}

/* ═══════════════════════════════════════════════════════════
   CHARACTER PANEL MEDIEVAL
   ═══════════════════════════════════════════════════════════ */

.medieval-character-panel {
	background: linear-gradient(180deg, rgba(26, 18, 8, 0.98) 0%, rgba(13, 9, 4, 0.98) 100%) !important;
	border: 3px solid #4a3020 !important;
	box-shadow:
		0 0 0 3px #8d5826,
		0 12px 32px rgba(0,0,0,0.6) !important;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

/* Bouton cosmétique style médiéval amélioré */
button[onclick*="render_cosmetics"] {
	background: linear-gradient(180deg, #7a4a22 0%, #5c3a1c 50%, #3d2412 100%) !important;
	border: 2px solid #8d5826 !important;
	box-shadow:
		0 -2px 0 #a67a4a inset,
		0 2px 0 #2a1509 inset,
		0 0 0 2px #3d2412,
		0 4px 8px rgba(0,0,0,0.4) !important;
	color: #f0c84a !important;
	font-family: 'Pixel', monospace !important;
	font-weight: 700 !important;
	text-shadow: 1px 1px 0 #2a1509;
	clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
	transition: transform 0.08s, filter 0.08s !important;
}

button[onclick*="render_cosmetics"]:hover {
	filter: brightness(1.15) !important;
	transform: translateY(-1px) !important;
}

button[onclick*="render_cosmetics"]:active {
	transform: translateY(1px) !important;
}

.theinventory.inventory-shell > div[style*="text-align: center; margin-bottom: 4px;"] {
	display: none !important;
}

.chat-toggle-btn,
.chat-toggle-btn.visible {
	display: none !important;
}

.medieval-chat-messages {
	min-height: 146px;
	padding: 8px !important;
	box-shadow: inset 0 0 0 1px rgba(141, 88, 38, 0.28), inset 0 10px 18px rgba(0,0,0,0.28) !important;
}

.medieval-input-row {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 58px !important;
	align-items: center;
	gap: 8px;
	margin: 0 6px 6px !important;
	padding: 8px;
	min-height: 58px;
	background: linear-gradient(180deg, rgba(17, 12, 8, 0.96) 0%, rgba(7, 5, 3, 0.92) 100%);
	border-top: 1px solid rgba(141, 88, 38, 0.42);
	box-shadow: inset 0 1px 0 rgba(255, 225, 177, 0.05);
}

.medieval-chat-input {
	height: 42px !important;
	padding: 0 14px !important;
	background: linear-gradient(180deg, rgba(12, 8, 5, 0.98) 0%, rgba(25, 16, 10, 0.98) 100%) !important;
	border: 2px solid #6c4525 !important;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), inset 0 8px 14px rgba(0,0,0,0.34) !important;
	color: #f6e1b4 !important;
}

.medieval-chat-input:focus {
	border-color: #d09b54 !important;
	box-shadow: 0 0 0 1px #2a1509, inset 0 0 0 1px rgba(255,255,255,0.05), inset 0 8px 14px rgba(0,0,0,0.34) !important;
}

.medieval-send-btn {
	width: 58px !important;
	height: 42px !important;
	border: 2px solid #8d5826 !important;
	box-shadow: 0 0 0 1px #2a1509, inset 0 1px 0 rgba(255, 231, 177, 0.12);
}

.pixel-skill-btn .skill-icon-wrap .hotbar-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: none;
	transform-origin: center;
	filter: drop-shadow(0 2px 0 rgba(0,0,0,0.45));
}

.pixel-skill-btn .skill-icon-wrap .hotbar-item-icon > div {
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border-color: #d09b54 !important;
	background: rgba(4, 3, 2, 0.95) !important;
	box-shadow: 0 0 0 1px #2a1808;
}

.pixel-skill-btn .skill-icon-wrap .hotbar-item-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	image-rendering: pixelated;
}

#bottomleftcorner,
#bottomrightcodecorner {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS AREA - Friend Requests & Party Invites
   ═══════════════════════════════════════════════════════════ */

.medieval-notifications {
	position: fixed;
	bottom: 140px;
	left: 50%;
	transform: translateX(-50%);
	width: min(500px, calc(100vw - 40px));
	z-index: 150;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
}

.medieval-notification {
	background: linear-gradient(180deg, rgba(26, 18, 8, 0.98) 0%, rgba(13, 9, 4, 0.98) 100%);
	border: 2px solid #4a3020;
	box-shadow:
		0 0 0 2px #8d5826,
		0 8px 20px rgba(0,0,0,0.5);
	padding: 10px 14px;
	color: #f5ddb2;
	font-family: pixel, "Courier New", monospace;
	font-size: 13px;
	text-shadow: 1px 1px 0 #2a1509;
	clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	animation: notification-slide-in 0.3s ease-out;
}

@keyframes notification-slide-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.medieval-notification.friend-request {
	border-color: #6b4a8a;
	box-shadow: 0 0 0 2px #9b7ab8, 0 8px 20px rgba(0,0,0,0.5);
}

.medieval-notification.party-invite {
	border-color: #4a7a5a;
	box-shadow: 0 0 0 2px #6ab88a, 0 8px 20px rgba(0,0,0,0.5);
}

.medieval-notification-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.medieval-notification-name {
	color: #f0c84a;
	font-weight: 700;
}

.medieval-notification-actions {
	display: flex;
	gap: 6px;
}

.medieval-notification-btn {
	padding: 4px 10px;
	font-size: 11px;
	font-family: pixel, "Courier New", monospace;
	cursor: pointer;
	border: 2px solid #3d2412;
	background: linear-gradient(180deg, #5a3d25 0%, #3a240d 100%);
	color: #f2d4a8;
	text-shadow: 1px 1px 0 #2a1509;
	clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
	transition: filter 0.08s;
}

.medieval-notification-btn:hover {
	filter: brightness(1.2);
}

.medieval-notification-btn.accept {
	background: linear-gradient(180deg, #3a7a4a 0%, #1d3d28 100%);
	border-color: #2c5c3a;
}

.medieval-notification-btn.decline {
	background: linear-gradient(180deg, #7a3a3a 0%, #3d1d1d 100%);
	border-color: #5c2c2c;
}

/* ═══════════════════════════════════════════════════════════
   PARTY MEMBERS DISPLAY - Bottom Right (max 4)
   ═══════════════════════════════════════════════════════════ */

.medieval-party-display {
	position: static;
	bottom: auto;
	right: auto;
	width: 100%;
	max-width: 320px;
	z-index: 99;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 8px 0;
}

.medieval-party-member {
	background: linear-gradient(180deg, rgba(26, 18, 8, 0.95) 0%, rgba(13, 9, 4, 0.95) 100%);
	border: 2px solid #4a3020;
	box-shadow: 0 0 0 2px #8d5826, 0 4px 12px rgba(0,0,0,0.4);
	padding: 5px 6px;
	clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
}

.medieval-party-member.leader {
	border-color: #d4a832;
	box-shadow: 0 0 0 2px #f0c84a, 0 4px 12px rgba(0,0,0,0.4);
}

.medieval-party-member-name {
	font-family: pixel, "Courier New", monospace;
	font-size: 10px;
	color: #f0c84a;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.medieval-party-member-bars {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.medieval-party-bar {
	height: 5px;
	background: rgba(0,0,0,0.5);
	border: 1px solid #2a1509;
	position: relative;
	overflow: hidden;
}

.medieval-party-bar-fill {
	height: 100%;
	transition: width 0.3s ease;
}

.medieval-party-bar-fill.hp {
	background: linear-gradient(90deg, #5a1a1a 0%, #c4342a 100%);
}

.medieval-party-bar-fill.mp {
	background: linear-gradient(90deg, #1a3a6a 0%, #3a6bc4 100%);
}

.target-character-slots {
	margin-top: 10px;
}

.target-character-slots-title {
	font-family: pixel, "Courier New", monospace;
	font-size: 12px;
	line-height: 12px;
	color: #f0c84a;
	margin-bottom: 10px;
	letter-spacing: 1px;
}

@media only screen and (max-width: 600px) {
	.medieval-input-row {
		grid-template-columns: 1fr !important;
	}
	
	.medieval-notifications {
		width: calc(100vw - 20px);
		bottom: 160px;
	}
	
	.medieval-party-display {
		width: 100%;
		max-width: calc(100vw - 32px);
		bottom: auto;
	}
}

body.auto-mode-active #medieval-skillbar,
body.auto-mode-active .medieval-buttons-separator {
	display: none !important;
}

body.auto-mode-active .pixel-bottom-frame {
	padding: 10px 14px 8px;
}

body.auto-mode-active #action-notice-anchor {
	bottom: 152px;
}

#auto-panel-btn.active {
	filter: brightness(1.12) saturate(1.08);
	box-shadow:
		0 0 0 2px rgba(124, 90, 168, 0.45),
		0 0 18px rgba(185, 142, 255, 0.28);
}

.slimefox-auto-panel {
	position: fixed;
	top: 72px;
	right: 20px;
	z-index: 8502;
	width: min(440px, calc(100vw - 24px));
	max-height: calc(100vh - 110px);
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(24, 17, 12, 0.98) 0%, rgba(15, 10, 7, 0.98) 100%);
	border: 3px solid #2a1509;
	box-shadow:
		0 0 0 3px #8d5826,
		0 0 0 6px #120905,
		0 18px 36px rgba(0,0,0,0.5);
	color: #f4e1b7;
	font-family: pixel, "Courier New", monospace;
}

.slimefox-auto-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 14px 10px;
	border-bottom: 2px solid rgba(133, 95, 50, 0.45);
}

.slimefox-auto-panel-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.slimefox-auto-panel-title {
	font-size: 22px;
	letter-spacing: 1px;
	color: #f2cf63;
}

.slimefox-auto-panel-subtitle {
	font-size: 13px;
	line-height: 1.55;
	color: #d3c09a;
}

.slimefox-auto-close {
	flex: 0 0 auto;
}

.slimefox-auto-close .btn-icon {
	font-size: 13px;
}

.slimefox-auto-panel-status {
	padding: 12px 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slimefox-auto-status-btn,
.slimefox-auto-tab-btn,
.slimefox-auto-mini-btn {
	width: 100%;
}

.slimefox-auto-status-btn .btn-icon,
.slimefox-auto-tab-btn .btn-icon,
.slimefox-auto-mini-btn .btn-icon {
	font-size: 13px;
}

.slimefox-auto-tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	padding: 0 14px 10px;
}

.slimefox-auto-panel-body {
	padding: 0 14px 14px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.slimefox-auto-section {
	border: 2px solid #3c2a1a;
	background: linear-gradient(180deg, rgba(37, 24, 15, 0.94) 0%, rgba(20, 13, 9, 0.96) 100%);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.slimefox-auto-section-head {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.slimefox-auto-section-title {
	font-size: 15px;
	letter-spacing: 0.8px;
	color: #f2cf63;
}

.slimefox-auto-section-subtitle {
	font-size: 12px;
	line-height: 1.55;
	color: #ccb892;
}

.slimefox-auto-option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 226, 163, 0.06);
}

.slimefox-auto-option:first-of-type {
	border-top: 0;
	padding-top: 2px;
}

.slimefox-auto-option-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.slimefox-auto-option-title {
	font-size: 13px;
	color: #f0dbb2;
}

.slimefox-auto-option-desc {
	font-size: 12px;
	line-height: 1.5;
	color: #baa98b;
}

.slimefox-auto-checkbox {
	width: 22px;
	height: 22px;
	accent-color: #5b93df;
}

.slimefox-auto-number-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.slimefox-auto-number-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	background: rgba(0,0,0,0.18);
	border: 1px solid rgba(255, 226, 163, 0.08);
}

.slimefox-auto-number-title {
	font-size: 12px;
	color: #d8c49f;
}

.slimefox-auto-number-input-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.slimefox-auto-number-input {
	width: 100%;
	min-width: 0;
	font-size: 13px;
	min-height: 34px;
}

.slimefox-auto-number-suffix {
	font-size: 12px;
	color: #f2cf63;
}

.slimefox-auto-inline-actions {
	display: flex;
	gap: 8px;
}

.slimefox-auto-monster-list {
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 4px;
}

.slimefox-auto-monster-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	padding: 6px 8px;
	background: rgba(0,0,0,0.2);
	border: 1px solid rgba(255, 226, 163, 0.05);
}

.slimefox-auto-monster-name {
	color: #f1ddb3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slimefox-auto-monster-id {
	color: #a88f6e;
	font-size: 11px;
}

.slimefox-auto-panel-note {
	font-size: 12px;
	line-height: 1.55;
	color: #d3c09a;
}

.slimefox-auto-target-summary {
	padding: 12px;
	border: 1px solid rgba(255, 226, 163, 0.08);
	background: rgba(0,0,0,0.2);
	color: #f5e2bd;
	font-size: 13px;
	line-height: 1.55;
}

.slimefox-auto-target-count {
	color: #f2cf63;
	font-size: 12px;
	letter-spacing: 0.4px;
}

.slimefox-auto-select-row,
.slimefox-auto-tool-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slimefox-auto-select {
	width: 100%;
}

.slimefox-auto-tool-name {
	font-size: 13px;
	color: #f1ddb3;
}

.slimefox-auto-tool-picker-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slimefox-auto-tool-picker-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border: 1px solid rgba(255, 226, 163, 0.08);
	background: rgba(0,0,0,0.18);
}

.slimefox-auto-tool-picker-copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.slimefox-auto-tool-picker-name {
	font-size: 13px;
	color: #f1ddb3;
}

.slimefox-auto-tool-picker-meta {
	font-size: 12px;
	color: #aa916e;
}

.slimefox-auto-target-shell {
	width: 1080px;
	max-width: calc(100vw - 40px);
}

.slimefox-auto-target-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.slimefox-auto-target-actions .slimefox-auto-mini-btn {
	flex: 1 1 200px;
}

.slimefox-auto-target-card {
	text-align: left;
}

.slimefox-auto-target-card.is-selected {
	border-color: #4f8f48;
	box-shadow: inset 0 0 0 2px #173015, 0 0 0 1px rgba(130, 212, 116, 0.24);
}

.slimefox-auto-target-card.is-inactive {
	border-color: #6e2f29;
	box-shadow: inset 0 0 0 2px #2b120e;
}

.slimefox-auto-target-card.is-selected .slimefox-travel-card-action {
	background: linear-gradient(180deg, #9cff8f 0%, #3f9a33 100%);
	color: #0c1708;
}

.slimefox-auto-target-card.is-inactive .slimefox-travel-card-action {
	background: linear-gradient(180deg, #ffb5a9 0%, #ba4130 100%);
	color: #250d09;
}

.slimefox-patch-notes-list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slimefox-patch-note-entry {
	padding: 10px 12px;
	border: 1px solid rgba(255, 226, 163, 0.08);
	background: rgba(0,0,0,0.18);
	color: #f3ddb4;
	font-size: 11px;
	line-height: 1.45;
}

@media only screen and (max-width: 900px) {
	.slimefox-auto-panel {
		right: 12px;
		top: 64px;
		width: min(420px, calc(100vw - 24px));
	}
}

@media only screen and (max-width: 720px) {
	.inventory-tool-grid,
	.slimefox-auto-number-grid,
	.slimefox-auto-tabs {
		grid-template-columns: 1fr;
	}

	.slimefox-auto-inline-actions {
		flex-direction: column;
	}

	.slimefox-auto-tool-picker-row {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.slimefox-auto-target-actions {
		flex-direction: column;
	}
}