/* ===== Palette : 2 couleurs seulement ===== */
:root {
	--dark: #2B692C;   /* le plus foncé */
	--light: #EDF8ED;  /* le plus clair */
	--font: "VT323", "Courier New", monospace;

	/* Curseurs rétro : flèche pixel (style Mac classique), version "cliquable" inversée, croix de déplacement */
	--cur-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 12 17' shape-rendering='crispEdges'%3E%3Cpath fill='%232B692C' d='M0 0h1v1h-1z M0 1h2v1h-2z M0 2h1v1h-1z M2 2h1v1h-1z M0 3h1v1h-1z M3 3h1v1h-1z M0 4h1v1h-1z M4 4h1v1h-1z M0 5h1v1h-1z M5 5h1v1h-1z M0 6h1v1h-1z M6 6h1v1h-1z M0 7h1v1h-1z M7 7h1v1h-1z M0 8h1v1h-1z M8 8h1v1h-1z M0 9h1v1h-1z M9 9h1v1h-1z M0 10h1v1h-1z M6 10h5v1h-5z M0 11h1v1h-1z M3 11h1v1h-1z M6 11h1v1h-1z M0 12h1v1h-1z M2 12h1v1h-1z M4 12h1v1h-1z M7 12h1v1h-1z M0 13h2v1h-2z M4 13h1v1h-1z M7 13h1v1h-1z M0 14h1v1h-1z M5 14h1v1h-1z M8 14h1v1h-1z M5 15h1v1h-1z M8 15h1v1h-1z M5 16h4v1h-4z'/%3E%3Cpath fill='%23EDF8ED' d='M1 2h1v1h-1z M1 3h2v1h-2z M1 4h3v1h-3z M1 5h4v1h-4z M1 6h5v1h-5z M1 7h6v1h-6z M1 8h7v1h-7z M1 9h8v1h-8z M1 10h5v1h-5z M1 11h2v1h-2z M4 11h2v1h-2z M1 12h1v1h-1z M5 12h2v1h-2z M5 13h2v1h-2z M6 14h2v1h-2z M6 15h2v1h-2z'/%3E%3C/svg%3E") 0 0, default;
	--cur-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='34' viewBox='0 0 12 17' shape-rendering='crispEdges'%3E%3Cpath fill='%23EDF8ED' d='M0 0h1v1h-1z M0 1h2v1h-2z M0 2h1v1h-1z M2 2h1v1h-1z M0 3h1v1h-1z M3 3h1v1h-1z M0 4h1v1h-1z M4 4h1v1h-1z M0 5h1v1h-1z M5 5h1v1h-1z M0 6h1v1h-1z M6 6h1v1h-1z M0 7h1v1h-1z M7 7h1v1h-1z M0 8h1v1h-1z M8 8h1v1h-1z M0 9h1v1h-1z M9 9h1v1h-1z M0 10h1v1h-1z M6 10h5v1h-5z M0 11h1v1h-1z M3 11h1v1h-1z M6 11h1v1h-1z M0 12h1v1h-1z M2 12h1v1h-1z M4 12h1v1h-1z M7 12h1v1h-1z M0 13h2v1h-2z M4 13h1v1h-1z M7 13h1v1h-1z M0 14h1v1h-1z M5 14h1v1h-1z M8 14h1v1h-1z M5 15h1v1h-1z M8 15h1v1h-1z M5 16h4v1h-4z'/%3E%3Cpath fill='%232B692C' d='M1 2h1v1h-1z M1 3h2v1h-2z M1 4h3v1h-3z M1 5h4v1h-4z M1 6h5v1h-5z M1 7h6v1h-6z M1 8h7v1h-7z M1 9h8v1h-8z M1 10h5v1h-5z M1 11h2v1h-2z M4 11h2v1h-2z M1 12h1v1h-1z M5 12h2v1h-2z M5 13h2v1h-2z M6 14h2v1h-2z M6 15h2v1h-2z'/%3E%3C/svg%3E") 0 0, pointer;
	--cur-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpolygon points='8,0 11,3 9,3 9,7 13,7 13,5 16,8 13,11 13,9 9,9 9,13 11,13 8,16 5,13 7,13 7,9 3,9 3,11 0,8 3,5 3,7 7,7 7,3 5,3' fill='%23EDF8ED' stroke='%232B692C' stroke-width='1'/%3E%3C/svg%3E") 12 12, move;

	/* Pictos : dessinés en une seule couleur, ils prennent la couleur du texte */
	--m-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath d='M11 0h2v1h-2z M9 1h2v1h-2z M13 1h2v1h-2z M7 2h2v1h-2z M13 2h1v1h-1z M15 2h2v1h-2z M6 3h1v1h-1z M9 3h1v1h-1z M14 3h1v1h-1z M17 3h1v1h-1z M4 4h2v1h-2z M12 4h1v1h-1z M18 4h2v1h-2z M2 5h2v1h-2z M7 5h1v1h-1z M16 5h1v1h-1z M20 5h2v1h-2z M1 6h3v1h-3z M11 6h1v1h-1z M20 6h3v1h-3z M1 7h5v1h-5z M10 7h1v1h-1z M15 7h1v1h-1z M18 7h5v1h-5z M1 8h2v1h-2z M4 8h3v1h-3z M17 8h6v1h-6z M1 9h1v1h-1z M3 9h1v1h-1z M5 9h4v1h-4z M15 9h8v1h-8z M1 10h2v1h-2z M4 10h1v1h-1z M6 10h5v1h-5z M13 10h7v1h-7z M21 10h2v1h-2z M1 11h1v1h-1z M3 11h1v1h-1z M5 11h1v1h-1z M7 11h1v1h-1z M9 11h14v1h-14z M1 12h2v1h-2z M4 12h1v1h-1z M6 12h1v1h-1z M8 12h1v1h-1z M10 12h13v1h-13z M1 13h1v1h-1z M3 13h1v1h-1z M5 13h1v1h-1z M7 13h1v1h-1z M9 13h1v1h-1z M11 13h4v1h-4z M16 13h7v1h-7z M1 14h2v1h-2z M4 14h1v1h-1z M6 14h1v1h-1z M8 14h1v1h-1z M10 14h9v1h-9z M20 14h3v1h-3z M1 15h1v1h-1z M3 15h1v1h-1z M5 15h1v1h-1z M7 15h1v1h-1z M9 15h1v1h-1z M11 15h12v1h-12z M1 16h2v1h-2z M4 16h1v1h-1z M6 16h1v1h-1z M8 16h1v1h-1z M10 16h13v1h-13z M1 17h1v1h-1z M3 17h1v1h-1z M5 17h1v1h-1z M7 17h1v1h-1z M9 17h1v1h-1z M11 17h12v1h-12z M2 18h3v1h-3z M6 18h1v1h-1z M8 18h1v1h-1z M10 18h7v1h-7z M18 18h4v1h-4z M4 19h2v1h-2z M7 19h1v1h-1z M9 19h1v1h-1z M11 19h9v1h-9z M6 20h1v1h-1z M8 20h1v1h-1z M10 20h8v1h-8z M7 21h3v1h-3z M11 21h3v1h-3z M15 21h2v1h-2z M9 22h6v1h-6z M11 23h2v1h-2z'/%3E%3C/svg%3E");
}

/* ===== Reset ===== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1;color:var(--dark);cursor:var(--cur-default)}
h1 {font-size: 1.5em;margin-bottom: 10px;}
p{font-size: 1em;line-height: 1.25em;margin-bottom: 10px;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:var(--dark)}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:0;border:0;border-top:1px solid var(--dark);margin:8px 0;padding:0}
input,select{vertical-align:middle}
img{image-rendering:pixelated}
::selection{background:var(--dark);color:var(--light)}

/* ===== Bureau : fond sombre avec quelques étoiles pixel (peu nombreuses) ===== */
#desktop {
	font-family: var(--font);
	font-size: 18px;
	line-height: 1.15;
	text-transform: lowercase;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	background-color: var(--dark);
	/* motif ordonné : petits carrés alignés en diagonales (tuile de 36 px) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' shape-rendering='crispEdges'%3E%3Cpath fill='%23EDF8ED' d='M0 0h3v3h-3z M9 9h3v3h-3z M18 18h3v3h-3z M27 27h3v3h-3z M18 0h3v3h-3z M27 9h3v3h-3z M0 18h3v3h-3z M9 27h3v3h-3z'/%3E%3C/svg%3E");
	background-size: 36px 36px;
	image-rendering: pixelated;
}

/* ===== Pictos (masques de couleur) ===== */
.logoBlock,
#startBtn::before {
	background-color: currentColor;
	-webkit-mask-image: var(--m);
	mask-image: var(--m);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.logoBlock,
#startBtn::before {
	--m: var(--m-block);
}

/* ===== Icônes du bureau : intérieur clair + gros contour de la couleur du fond ===== */
#desktopIcons {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	max-height: calc(100% - 60px);
	gap: 12px;
	column-gap: 10px;
}
.desktopIcon {
	width: 92px;
	text-align: center;
	color: var(--light);
	cursor: var(--cur-pointer);
	user-select: none;
}
/* le contour est porté par le conteneur, le dessin par ::before (le masque ne coupe pas le contour) */
.iconImg {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 6px;
	filter: drop-shadow(4px 0 0 var(--dark)) drop-shadow(-4px 0 0 var(--dark)) drop-shadow(0 4px 0 var(--dark)) drop-shadow(0 -4px 0 var(--dark));
}
.iconImg::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--light);
	-webkit-mask-image: var(--m);
	mask-image: var(--m);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.desktopIcon:hover .iconImg {
	transform: translateY(-3px);
}
.iconLabel {
	display: inline-block;
	padding: 0 4px;
	font-size: 18px;
	line-height: 18px;
	text-shadow: 2px 0 0 var(--dark), -2px 0 0 var(--dark), 0 2px 0 var(--dark), 0 -2px 0 var(--dark), 2px 2px 0 var(--dark), -2px -2px 0 var(--dark), 2px -2px 0 var(--dark), -2px 2px 0 var(--dark);
}
.desktopIcon:hover .iconLabel {
	background: var(--light);
	color: var(--dark);
	text-shadow: none;
}
.iconHome { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h-2z M6 2h4v1h-4z M5 3h6v1h-6z M4 4h8v1h-8z M3 5h10v1h-10z M2 6h12v1h-12z M1 7h14v1h-14z M3 8h10v1h-10z M3 9h10v1h-10z M3 10h4v1h-4z M9 10h4v1h-4z M3 11h4v1h-4z M9 11h4v1h-4z M3 12h4v1h-4z M9 12h4v1h-4z M3 13h4v1h-4z M9 13h4v1h-4z'/%3E%3C/svg%3E"); }
.iconFolder { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 3h5v1h-5z M1 4h7v1h-7z M1 5h14v1h-14z M1 7h14v1h-14z M1 8h14v1h-14z M1 9h14v1h-14z M1 10h14v1h-14z M1 11h14v1h-14z M1 12h14v1h-14z M1 13h14v1h-14z'/%3E%3C/svg%3E"); }
.iconMonitor { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h14v1h-14z M1 3h14v1h-14z M1 4h2v1h-2z M13 4h2v1h-2z M1 5h2v1h-2z M13 5h2v1h-2z M1 6h2v1h-2z M4 6h3v1h-3z M13 6h2v1h-2z M1 7h2v1h-2z M13 7h2v1h-2z M1 8h2v1h-2z M13 8h2v1h-2z M1 9h14v1h-14z M1 10h14v1h-14z M7 11h4v1h-4z M7 12h4v1h-4z M4 13h8v1h-8z M4 14h8v1h-8z'/%3E%3C/svg%3E"); }
.iconInfo { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 1h6v1h-6z M3 2h10v1h-10z M2 3h12v1h-12z M1 4h6v1h-6z M9 4h6v1h-6z M1 5h14v1h-14z M1 6h6v1h-6z M9 6h6v1h-6z M1 7h6v1h-6z M9 7h6v1h-6z M1 8h6v1h-6z M9 8h6v1h-6z M1 9h6v1h-6z M9 9h6v1h-6z M1 10h6v1h-6z M9 10h6v1h-6z M1 11h14v1h-14z M2 12h12v1h-12z M3 13h10v1h-10z M5 14h6v1h-6z'/%3E%3C/svg%3E"); }
.iconMap { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h4v1h-4z M11 2h4v1h-4z M1 3h4v1h-4z M6 3h4v1h-4z M11 3h4v1h-4z M1 4h4v1h-4z M6 4h4v1h-4z M11 4h4v1h-4z M1 5h4v1h-4z M6 5h4v1h-4z M11 5h4v1h-4z M1 6h4v1h-4z M6 6h1v1h-1z M9 6h1v1h-1z M11 6h4v1h-4z M1 7h4v1h-4z M6 7h1v1h-1z M9 7h1v1h-1z M11 7h4v1h-4z M1 8h4v1h-4z M6 8h4v1h-4z M11 8h4v1h-4z M1 9h4v1h-4z M6 9h4v1h-4z M11 9h4v1h-4z M1 10h4v1h-4z M6 10h4v1h-4z M11 10h4v1h-4z M1 11h4v1h-4z M6 11h4v1h-4z M11 11h4v1h-4z M1 12h4v1h-4z M6 12h4v1h-4z M11 12h4v1h-4z M6 13h4v1h-4z'/%3E%3C/svg%3E"); }
.iconChat { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 1h12v1h-12z M1 2h14v1h-14z M1 3h14v1h-14z M1 4h3v1h-3z M6 4h1v1h-1z M9 4h1v1h-1z M12 4h3v1h-3z M1 5h3v1h-3z M6 5h1v1h-1z M9 5h1v1h-1z M12 5h3v1h-3z M1 6h14v1h-14z M1 7h14v1h-14z M1 8h14v1h-14z M2 9h12v1h-12z M3 10h4v1h-4z M3 11h3v1h-3z M3 12h2v1h-2z M3 13h1v1h-1z'/%3E%3C/svg%3E"); }
.iconCreeper { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h14v1h-14z M1 2h14v1h-14z M1 3h14v1h-14z M1 4h2v1h-2z M6 4h4v1h-4z M13 4h2v1h-2z M1 5h2v1h-2z M6 5h4v1h-4z M13 5h2v1h-2z M1 6h2v1h-2z M6 6h4v1h-4z M13 6h2v1h-2z M1 7h5v1h-5z M10 7h5v1h-5z M1 8h5v1h-5z M10 8h5v1h-5z M1 9h4v1h-4z M11 9h4v1h-4z M1 10h4v1h-4z M11 10h4v1h-4z M1 11h4v1h-4z M7 11h2v1h-2z M11 11h4v1h-4z M1 12h4v1h-4z M7 12h2v1h-2z M11 12h4v1h-4z M1 13h14v1h-14z M1 14h14v1h-14z'/%3E%3C/svg%3E"); }

/* ===== Fenêtres : plates, un simple trait ===== */
.window {
	position: absolute;
	background: var(--light);
	color: var(--dark);
	border: 1px solid var(--dark);
	outline: 2px solid var(--light);
	z-index: 1000;
}
.window.closed,
.window.minimizedWindow {
	display: none;
}

/* Barre de titre : inactive = claire, active = foncée */
.windowHeader {
	display: flex;
	align-items: center;
	height: 24px;
	padding: 0 4px 0 10px;
	background: var(--light);
	color: var(--dark);
	border-bottom: 1px solid var(--dark);
	cursor: var(--cur-move);
	user-select: none;
}
.activeWindow .windowHeader {
	background: var(--dark);
	color: var(--light);
}
.windowHeader > strong {
	flex: 1;
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Boutons de la barre de titre */
.windowHeader > span {
	position: relative;
	box-sizing: border-box;
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: 4px;
	overflow: hidden;
	cursor: var(--cur-pointer);
	background: var(--light);
	color: var(--dark);
	border: 1px solid currentColor;
	font: 22px/13px var(--font);
	text-align: center;
}
.activeWindow .windowHeader > span {
	background: var(--dark);
	color: var(--light);
}
.windowHeader > span:hover {
	background: var(--dark);
	color: var(--light);
}
.activeWindow .windowHeader > span:hover {
	background: var(--light);
	color: var(--dark);
}
.windowHeader > span > span {
	position: absolute;
	display: block;
}
/* Réduire : un trait en bas */
.winminimize > span {
	left: 4px;
	top: 10px;
	width: 8px;
	height: 2px;
	background: currentColor;
}

/* Zone de contenu */
.wincontent {
	padding: 12px;
	min-width: 200px;
	min-height: 140px;
	margin: 0;
	background: var(--light);
	color: var(--dark);
	border: none;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--dark) var(--light);
}

/* ===== Boutons ===== */
.btn98 {
	font-family: var(--font);
	font-size: 20px;
	text-transform: lowercase;
	color: var(--dark);
	background: var(--light);
	padding: 4px 18px;
	cursor: var(--cur-pointer);
	border: 2px solid var(--dark);
	border-radius: 0;
}
.btn98:hover {
	background: var(--dark);
	color: var(--light);
}
.btn98:active {
	transform: translate(1px, 1px);
}
.btn98:focus {
	outline: 1px dotted currentColor;
	outline-offset: -5px;
}

/* ===== Barre des tâches ===== */
#taskbar {
	position: absolute;
	box-sizing: border-box;
	height: 32px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2200;
	overflow: hidden;
	background: var(--light);
	border-top: 1px solid var(--dark);
	box-shadow: 0 -2px 0 var(--light);
}
#startBtn,
.taskbarPanel {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	max-width: 170px;
	height: 24px;
	margin: 3px 0 0 4px;
	padding: 0 12px;
	line-height: 22px;
	font-size: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: var(--cur-pointer);
	user-select: none;
	background: var(--light);
	color: var(--dark);
	border: 1px solid var(--dark);
}
#startBtn::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin: -4px 8px 0 -2px;
}
#startBtn:hover,
.taskbarPanel:hover,
#startBtn.pressed,
.taskbarPanel.activeTab {
	background: var(--dark);
	color: var(--light);
}

/* Fenêtre fermée : son raccourci disparaît de la barre (comme sous Windows) */
.taskbarPanel.closedTab {
	display: none;
}

#clock {
	position: absolute;
	top: 0;
	right: 10px;
	line-height: 30px;
	font-size: 20px;
}

/* ===== Menu Démarrer ===== */
#startMenu {
	display: none;
	position: absolute;
	left: 4px;
	bottom: 36px;
	z-index: 2500;
	min-width: 240px;
	padding: 4px;
	background: var(--light);
	color: var(--dark);
	border: 1px solid var(--dark);
	outline: 2px solid var(--light);
}
.startItem {
	padding: 4px 12px;
	font-size: 20px;
	white-space: nowrap;
	cursor: var(--cur-pointer);
	user-select: none;
}
.startItem:hover {
	background: var(--dark);
	color: var(--light);
}

/* ===== Mascotte ===== */
#mascot {
	position: absolute;
	z-index: 2000;
	width: 80px;
	cursor: var(--cur-move);
	user-select: none;
}
.mascotSvg {
	display: block;
	filter: drop-shadow(3px 0 0 #EDF8ED) drop-shadow(-3px 0 0 #EDF8ED) drop-shadow(0 3px 0 #EDF8ED) drop-shadow(0 -3px 0 #EDF8ED);
	animation: mBob 1.2s steps(1) infinite;
}
.mascotSvg .d { fill: var(--dark); }
.mascotSvg .l { fill: var(--light); }
.mEyes {
	transform-box: fill-box;
	transform-origin: center;
	animation: mBlink 4s steps(1) infinite;
}
#mascot.react .mascotSvg { animation: mHop 0.7s steps(1) 1; }
#mascot.react .mEyes { animation: none; transform: scaleY(0.25); }

@keyframes mBob   { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mBlink { 0% { transform: scaleY(1); } 92% { transform: scaleY(0.2); } 96% { transform: scaleY(1); } }
@keyframes mHop   { 0% { transform: translateY(0); } 15% { transform: translateY(-18px); } 35% { transform: translateY(0); } 50% { transform: translateY(-9px); } 65% { transform: translateY(0); } 80% { transform: translateY(-3px); } 100% { transform: translateY(0); } }

/* Creeper attrapé : il se balance et ses pattes battent dans le vide */
.mLeg { transform-box: fill-box; transform-origin: 50% 0; }
#mascot.held .mascotSvg {
	transform-origin: 50% 0;
	animation: mDangle 0.36s steps(1) infinite;
}
#mascot.held .mLegL { animation: mKickL 0.24s steps(1) infinite; }
#mascot.held .mLegR { animation: mKickR 0.24s steps(1) infinite; }
#mascot.held .mEyes { animation: none; transform: scale(1.3); }
@keyframes mDangle {
	0%   { transform: translateY(-6px) rotate(-8deg); }
	25%  { transform: translateY(-9px) rotate(0deg); }
	50%  { transform: translateY(-6px) rotate(8deg); }
	75%  { transform: translateY(-9px) rotate(0deg); }
}
@keyframes mKickL { 0% { transform: rotate(24deg); } 50% { transform: rotate(-16deg) translateY(-1px); } }
@keyframes mKickR { 0% { transform: rotate(-16deg) translateY(-1px); } 50% { transform: rotate(24deg); } }

/* Explosion du Creeper : il gonfle en clignotant (couleurs inversées), puis boum */
#mascot.fuse .mascotSvg {
	transform-origin: 50% 100%;
	animation: mSwell 0.9s steps(6) 1 forwards;
}
#mascot.fuse .mascotSvg .l { animation: mInvL 0.3s steps(1) infinite; }
#mascot.fuse .mascotSvg .d { animation: mInvD 0.3s steps(1) infinite; }
#mascot.fuse .mEyes { animation: none; }
@keyframes mSwell { 0% { transform: scale(1); } 100% { transform: scale(1.7); } }
@keyframes mInvL  { 0% { fill: #EDF8ED; } 50% { fill: #2B692C; } }
@keyframes mInvD  { 0% { fill: #2B692C; } 50% { fill: #EDF8ED; } }

.debris {
	position: absolute;
	box-sizing: border-box;
	z-index: 2100;
	transition: transform 0.9s steps(8), opacity 0.9s steps(8);
	pointer-events: none;
}
.debris.lt { background: var(--light); border: 2px solid var(--dark); }
.debris.dk { background: var(--dark);  border: 2px solid var(--light); }

.boomFlash {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2900;
	background: var(--light);
	pointer-events: none;
	animation: boomFade 0.4s steps(4) forwards;
}
@keyframes boomFade { 0% { opacity: 1; } 100% { opacity: 0; } }

#desktop.shake { animation: shake 0.45s steps(1) 1; }
@keyframes shake {
	0%   { transform: translate(6px, -4px); }
	20%  { transform: translate(-6px, 4px); }
	40%  { transform: translate(4px, 5px); }
	60%  { transform: translate(-4px, -5px); }
	80%  { transform: translate(2px, 2px); }
	100% { transform: translate(0, 0); }
}

#mascotBubble {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 14px;
	width: max-content;
	max-width: 190px;
	padding: 6px 10px;
	background: var(--light);
	color: var(--dark);
	border: 2px solid var(--dark);
	outline: 2px solid var(--light);
	font-size: 22px;
	line-height: 19px;
	pointer-events: none;
}
#mascotBubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top-color: var(--dark);
}
#mascotBubble.below { bottom: auto; top: 100%; margin: 14px 0 0; }
#mascotBubble.below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dark); }
#mascotBubble.bl { left: 0; transform: none; }
#mascotBubble.bl::after { left: 22px; }
#mascotBubble.br { left: auto; right: 0; transform: none; }
#mascotBubble.br::after { left: auto; right: 22px; margin-left: 0; }

/* ===== Fenêtre Bienvenue ===== */
.welcome .wincontent {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Fond : trame de points. Pour une image, remplace par :
	   background: url("images/bienvenue.png") center / cover no-repeat; */
	background-color: var(--light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%232B692C' d='M0 0h1v1h-1z M4 4h1v1h-1z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	image-rendering: pixelated;
}
.welcomeBox {
	padding: 18px 28px;
	background: var(--light);
	border: 2px solid var(--dark);
	outline: 2px solid var(--light);
}
.logoBlock {
	display: block;
	width: 72px;
	height: 72px;
	margin: 0 auto 6px;
}
.welcomeBox h1 {
	font-size: 52px;
	line-height: 1;
	letter-spacing: 2px;
	margin-bottom: 4px;
}
.welcomeBox p {
	margin-bottom: 14px;
}

/* ===== Fenêtre Les amis : têtes 3D, sans filtre ===== */
.friends .wincontent {
	display: flex;
	flex-direction: column;
}
.friends h2 {
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 8px;
}
.bento {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 6px;
}
.bentoItem {
	position: relative;
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%232B692C' d='M0 0h1v1h-1z M4 4h1v1h-1z'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	border: 1px solid var(--dark);
}
.bentoItem img {
	flex: none;
	width: 62%;
	height: 62%;
	object-fit: contain;
	image-rendering: pixelated;
	filter: drop-shadow(3px 3px 0 var(--dark));   /* ombre dure = effet de volume rétro */
	transition: transform 0.15s steps(2);
}
.bentoItem:hover img {
	transform: translateY(-4px);
}
/* Pseudo : bandeau qui apparaît au survol */
.bentoItem span {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2px 4px;
	background: var(--dark);
	color: var(--light);
	font-size: 18px;
	line-height: 18px;
	text-align: center;
}
.bentoItem:hover span {
	display: block;
}

/* ===== Notification ===== */
#toast {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 48px;
	transform: translateX(-50%);
	z-index: 3000;
	min-width: 210px;
	background: var(--light);
	border: 1px solid var(--dark);
	outline: 2px solid var(--light);
}
#toast .toastTitle {
	padding: 2px 10px;
	background: var(--dark);
	color: var(--light);
	font-size: 20px;
}
#toast .toastBody {
	padding: 10px 14px;
	text-align: center;
	color: var(--dark);
}

/* ===== Fenêtre Neo Batstopia ===== */
.neo .wincontent {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	min-height: 0;
	padding: 12px;
}

/* En-tête : même trame de points que la fenêtre Bienvenue */
.neoHero {
	flex: none;
	padding: 14px 12px;
	text-align: center;
	background-color: var(--light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%232B692C' d='M0 0h1v1h-1z M4 4h1v1h-1z'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	border: 2px solid var(--dark);
	outline: 2px solid var(--light);
}
.neoHero h2 {
	display: inline-block;
	padding: 2px 14px;
	background: var(--light);
	font-size: 40px;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 2px;
}
.neoHero p {
	display: inline-block;
	margin: 8px 0 0;
	padding: 0 8px;
	background: var(--light);
	font-size: 20px;
}

/* Rubriques : bandeau foncé + corps clair, comme les barres de titre */
.neoSection {
	flex: none;
	border: 2px solid var(--dark);
	background: var(--light);
}
.neoSection > h3 {
	margin: 0;
	padding: 2px 10px;
	background: var(--dark);
	color: var(--light);
	font-size: 22px;
	font-weight: normal;
}
.neoBody {
	padding: 10px 12px;
}
.neoBody p {
	margin-bottom: 8px;
	font-size: 20px;
	line-height: 1.1;
}
.neoBody p:last-child {
	margin-bottom: 0;
}

/* Version : gros numéro inversé */
.neoVersion {
	display: flex;
	align-items: center;
	gap: 14px;
}
.neoVersion p {
	flex: 1;
}
.neoVerNum {
	flex: none;
	padding: 4px 14px;
	background: var(--dark);
	color: var(--light);
	font-size: 48px;
	line-height: 1;
	letter-spacing: 2px;
}

/* Boutons-liens */
.neoBtn {
	display: inline-block;
	margin-top: 4px;
	text-decoration: none;
}
.neoBtn:visited {
	color: var(--dark);
}
.neoBtn:visited:hover {
	color: var(--light);
}

/* Classes : 2 colonnes, étiquette de rôle inversée */
.neoClasses {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
	margin-top: 6px;
}
.neoTag {
	display: inline-block;
	margin-bottom: 4px;
	padding: 0 6px;
	background: var(--dark);
	color: var(--light);
	font-style: normal;
	font-size: 17px;
	line-height: 18px;
}
.neoClass span {
	margin-bottom: 4px;
}
.neoGear {
	display: block;
	padding-top: 3px;
	background: var(--light);
	border-top: 1px dotted var(--dark);
	font-size: 16px;
	line-height: 1;
}
.neoBody p.neoNote {
	margin-top: 10px;
	font-size: 16px;
}
.neoClass {
	padding: 6px 8px;
	border: 1px solid var(--dark);
	background-color: var(--light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%232B692C' d='M0 0h1v1h-1z M4 4h1v1h-1z'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}
.neoClass strong {
	display: block;
	margin-bottom: 4px;
	padding-bottom: 2px;
	background: var(--light);
	border-bottom: 1px dotted var(--dark);
	font-weight: normal;
	font-size: 22px;
}
.neoClass span {
	display: block;
	background: var(--light);
	font-size: 18px;
	line-height: 1;
}

/* Contact : tout sur une ligne */
.neoBody p.neoContact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.neoContact .neoBtn {
	margin-top: 0;
}

/* ===== Fenêtre Carte : image déplaçable et zoomable ===== */
.map .wincontent {
	padding: 0;
	overflow: hidden;
}
#mapView {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: var(--dark);
	cursor: var(--cur-move);
	touch-action: none;
	user-select: none;
}
#mapView.grabbing { cursor: var(--cur-move); }
#mapImg {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	max-width: none;
	transform-origin: 0 0;
	image-rendering: pixelated;
}
#mapImg.rawMap { filter: url(#mapBlackToBg); }
#mapMsg {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 8px 12px;
	text-align: center;
	background: var(--light);
	border: 2px solid var(--dark);
	outline: 2px solid var(--light);
}
#mapControls {
	position: absolute;
	right: 8px;
	top: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.mapBtn {
	width: 36px;
	height: 30px;
	padding: 0;
	line-height: 26px;
	outline: 2px solid var(--light);
}
#mapInfo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	padding: 2px 8px;
	background: var(--light);
	color: var(--dark);
	border-top: 1px solid var(--dark);
	pointer-events: none;
}

/* ===== Fenêtre Chat ===== */
.chat .wincontent {
	padding: 0;
	overflow: hidden;
}

/* ===== Chat : avatars (tuiles à pictos Minecraft) ===== */
.av {
	position: relative;
	display: inline-block;
	flex: none;
	box-sizing: border-box;
	width: var(--s, 40px);
	height: var(--s, 40px);
	padding: 0;
	background: var(--light);
	border: 2px solid var(--dark);
}
.av::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	right: 2px;
	bottom: 2px;
	background: var(--dark);
	-webkit-mask: var(--m) center / 100% 100% no-repeat;
	mask: var(--m) center / 100% 100% no-repeat;
}
.avS { --s: 24px; }
.avBtn { --s: 56px; cursor: var(--cur-pointer); }
.avBtn:hover,
.av.sel { background: var(--dark); }
.avBtn:hover::before,
.av.sel::before { background: var(--light); }
.avBtn.sel { outline: 2px solid var(--dark); outline-offset: 2px; }
/* numéros 2 (épée) et 3 (pioche) retirés des choix d'avatar */
.av0 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h14v1h-14z M1 2h14v1h-14z M1 3h14v1h-14z M1 4h2v1h-2z M6 4h4v1h-4z M13 4h2v1h-2z M1 5h2v1h-2z M6 5h4v1h-4z M13 5h2v1h-2z M1 6h2v1h-2z M6 6h4v1h-4z M13 6h2v1h-2z M1 7h5v1h-5z M10 7h5v1h-5z M1 8h5v1h-5z M10 8h5v1h-5z M1 9h4v1h-4z M11 9h4v1h-4z M1 10h4v1h-4z M11 10h4v1h-4z M1 11h4v1h-4z M7 11h2v1h-2z M11 11h4v1h-4z M1 12h4v1h-4z M7 12h2v1h-2z M11 12h4v1h-4z M1 13h14v1h-14z M1 14h14v1h-14z'/%3E%3C/svg%3E"); }
.av1 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 0h2v1h-2z M5 1h2v1h-2z M9 1h2v1h-2z M3 2h2v1h-2z M7 2h1v1h-1z M11 2h2v1h-2z M1 3h2v1h-2z M5 3h1v1h-1z M10 3h1v1h-1z M13 3h2v1h-2z M1 4h4v1h-4z M6 4h1v1h-1z M8 4h1v1h-1z M11 4h4v1h-4z M1 5h1v1h-1z M3 5h4v1h-4z M9 5h6v1h-6z M1 6h2v1h-2z M4 6h11v1h-11z M1 7h1v1h-1z M3 7h1v1h-1z M5 7h1v1h-1z M7 7h8v1h-8z M1 8h2v1h-2z M4 8h1v1h-1z M6 8h9v1h-9z M1 9h1v1h-1z M3 9h1v1h-1z M5 9h1v1h-1z M7 9h3v1h-3z M11 9h4v1h-4z M1 10h2v1h-2z M4 10h1v1h-1z M6 10h6v1h-6z M13 10h2v1h-2z M1 11h3v1h-3z M5 11h1v1h-1z M7 11h8v1h-8z M3 12h2v1h-2z M6 12h4v1h-4z M11 12h2v1h-2z M5 13h6v1h-6z M7 14h2v1h-2z'/%3E%3C/svg%3E"); }
.av4 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 3h8v1h-8z M2 4h4v1h-4z M7 4h2v1h-2z M10 4h4v1h-4z M1 5h5v1h-5z M7 5h2v1h-2z M10 5h5v1h-5z M0 6h3v1h-3z M13 6h3v1h-3z M1 7h14v1h-14z M2 8h3v1h-3z M6 8h4v1h-4z M11 8h3v1h-3z M3 9h3v1h-3z M7 9h2v1h-2z M10 9h3v1h-3z M4 10h3v1h-3z M9 10h3v1h-3z M5 11h6v1h-6z M6 12h4v1h-4z M7 13h2v1h-2z'/%3E%3C/svg%3E"); }
.av5 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M0 1h16v1h-16z M0 2h16v1h-16z M0 3h16v1h-16z M0 4h1v1h-1z M15 4h1v1h-1z M0 5h1v1h-1z M2 5h3v1h-3z M6 5h1v1h-1z M8 5h1v1h-1z M10 5h3v1h-3z M15 5h1v1h-1z M0 6h1v1h-1z M3 6h1v1h-1z M6 6h3v1h-3z M11 6h1v1h-1z M15 6h1v1h-1z M0 7h1v1h-1z M3 7h1v1h-1z M6 7h3v1h-3z M11 7h1v1h-1z M15 7h1v1h-1z M0 8h1v1h-1z M3 8h1v1h-1z M6 8h1v1h-1z M8 8h1v1h-1z M11 8h1v1h-1z M15 8h1v1h-1z M0 9h1v1h-1z M3 9h1v1h-1z M6 9h1v1h-1z M8 9h1v1h-1z M11 9h1v1h-1z M15 9h1v1h-1z M0 10h1v1h-1z M15 10h1v1h-1z M0 11h1v1h-1z M15 11h1v1h-1z M0 12h16v1h-16z M0 13h16v1h-16z M0 14h16v1h-16z'/%3E%3C/svg%3E"); }
.av6 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M8 1h2v1h-2z M7 2h2v1h-2z M11 2h2v1h-2z M7 3h2v1h-2z M10 3h3v1h-3z M3 4h4v1h-4z M9 4h4v1h-4z M2 5h12v1h-12z M1 6h2v1h-2z M5 6h10v1h-10z M1 7h2v1h-2z M4 7h11v1h-11z M1 8h14v1h-14z M1 9h14v1h-14z M2 10h12v1h-12z M2 11h12v1h-12z M3 12h4v1h-4z M9 12h4v1h-4z M4 13h3v1h-3z M9 13h3v1h-3z'/%3E%3C/svg%3E"); }
.av7 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h2v1h-2z M13 1h2v1h-2z M1 2h14v1h-14z M1 3h14v1h-14z M1 4h14v1h-14z M1 5h2v1h-2z M5 5h6v1h-6z M13 5h2v1h-2z M1 6h2v1h-2z M5 6h6v1h-6z M13 6h2v1h-2z M1 7h14v1h-14z M1 8h4v1h-4z M11 8h4v1h-4z M1 9h4v1h-4z M6 9h1v1h-1z M9 9h1v1h-1z M11 9h4v1h-4z M1 10h4v1h-4z M6 10h1v1h-1z M9 10h1v1h-1z M11 10h4v1h-4z M1 11h4v1h-4z M11 11h4v1h-4z M1 12h14v1h-14z M1 13h14v1h-14z'/%3E%3C/svg%3E"); }
.av8 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M7 1h2v1h-2z M6 2h4v1h-4z M6 3h1v1h-1z M9 3h1v1h-1z M5 4h2v1h-2z M9 4h2v1h-2z M6 5h4v1h-4z M6 6h4v1h-4z M6 7h4v1h-4z M7 8h2v1h-2z M7 9h2v1h-2z M7 10h2v1h-2z M7 11h2v1h-2z M7 12h2v1h-2z M7 13h2v1h-2z M7 14h2v1h-2z'/%3E%3C/svg%3E"); }
.av9 { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 2h4v1h-4z M10 2h4v1h-4z M1 3h6v1h-6z M9 3h6v1h-6z M1 4h2v1h-2z M4 4h11v1h-11z M1 5h1v1h-1z M4 5h11v1h-11z M1 6h14v1h-14z M2 7h12v1h-12z M3 8h10v1h-10z M4 9h8v1h-8z M5 10h6v1h-6z M6 11h4v1h-4z M7 12h2v1h-2z'/%3E%3C/svg%3E"); }

/* ===== Chat : écrans ===== */
#chatApp { height: 100%; }
.chatScreen { height: 100%; box-sizing: border-box; }
#chatJoin {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 18px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--dark) var(--light);
}
#chatJoin h2 { font-size: 28px; font-weight: normal; }
.chatLabel { font-size: 20px; }
.chatField {
	box-sizing: border-box;
	font-family: var(--font);
	font-size: 20px;
	color: var(--dark);
	background: var(--light);
	border: 2px solid var(--dark);
	border-radius: 0;
	padding: 4px 8px;
	text-transform: none;
	outline: none;
}
.chatField:focus { outline: 1px dotted var(--dark); outline-offset: -5px; }
.chatField::placeholder { color: var(--dark); text-transform: lowercase; }
#chatAvatars {
	display: grid;
	grid-template-columns: repeat(4, 56px);
	gap: 12px 14px;
	padding: 4px;
}
#chatJoinErr { min-height: 22px; font-size: 18px; }
#chatJoinErr:not(:empty) { background: var(--dark); color: var(--light); padding: 2px 8px; }
.chatRow { display: flex; gap: 8px; }

#chatRoom { display: flex; flex-direction: column; }
#chatBar {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	background: var(--dark);
	color: var(--light);
}
#chatMe { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
#chatMe .av { border-color: var(--light); }
.chatMeName { text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chatOnline { font-size: 18px; white-space: nowrap; }
.chatBtn {
	font-family: var(--font);
	font-size: 18px;
	text-transform: lowercase;
	color: var(--light);
	background: transparent;
	border: 1px solid var(--light);
	border-radius: 0;
	padding: 0 8px;
	cursor: var(--cur-pointer);
}
.chatBtn:hover { background: var(--light); color: var(--dark); }

#chatLog {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background: var(--light);
	scrollbar-width: thin;
	scrollbar-color: var(--dark) var(--light);
}
#chatLog:empty::before {
	content: "Aucun message pour l'instant. Écris le premier !";
	display: block;
	padding: 18px;
	text-align: center;
}
.cmsg {
	display: flex;
	gap: 8px;
	padding: 6px 8px;
	border-bottom: 1px dotted var(--dark);
}
.cmain { flex: 1; min-width: 0; }
.chead { display: flex; align-items: baseline; gap: 8px; }
.cname { font-weight: normal; font-size: 20px; line-height: 20px; text-transform: none; }
.ctime { font-size: 16px; line-height: 20px; }
.ctext { font-size: 20px; line-height: 18px; text-transform: none; overflow-wrap: anywhere; }
.cmsg.mine { background: var(--dark); color: var(--light); border-bottom-color: var(--light); }
.cmsg.mine .av { border-color: var(--light); }
.csys { padding: 4px 8px; text-align: center; font-size: 18px; border-bottom: 1px dotted var(--dark); }
#chatForm {
	flex: none;
	display: flex;
	gap: 6px;
	padding: 6px;
	background: var(--light);
	border-top: 1px solid var(--dark);
}
#chatInput { flex: 1; min-width: 0; }

/* ===== Chat : smileys ===== */
.emo {
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0 1px;
	vertical-align: -4px;
	background-color: currentColor;
	-webkit-mask: var(--m) center / 100% 100% no-repeat;
	mask: var(--m) center / 100% 100% no-repeat;
}
#chatRoom { position: relative; }
#chatEmoBtn {
	display: flex;
	align-items: center;
	padding: 0 8px;
}
#chatEmoBtn .emo {
	width: 22px;
	height: 22px;
	margin: 0;
	vertical-align: baseline;
}
#chatEmoPanel {
	position: absolute;
	left: 6px;
	bottom: 52px;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(4, 44px);
	gap: 4px;
	padding: 6px;
	background: var(--light);
	border: 2px solid var(--dark);
	outline: 2px solid var(--light);
}
.emoBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--dark);
	background: var(--light);
	border: 2px solid var(--dark);
	border-radius: 0;
	cursor: var(--cur-pointer);
}
.emoBtn:hover {
	background: var(--dark);
	color: var(--light);
}
.emoBtn .emo {
	width: 32px;
	height: 32px;
	margin: 0;
	vertical-align: baseline;
}

/* ===== Effet CRT : désactivé par défaut (menu Démarrer) ===== */
#crt {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	pointer-events: none;
	background:
		repeating-linear-gradient(to bottom, rgba(43,105,44,0) 0, rgba(43,105,44,0) 2px, rgba(43,105,44,0.16) 2px, rgba(43,105,44,0.16) 4px),
		radial-gradient(ellipse at center, rgba(43,105,44,0) 55%, rgba(43,105,44,0.4) 100%);
}

   .windowHeader, #mascot { touch-action: none; }