/* ################################################## */
/* FONTS */

/* Windows 95 Font */
@font-face {
	font-family: 'windows-95';
	src: url('media/fonts/Windows-95.otf');
	font-display: swap;
	font-weight: 100 1000;
}

/* Minesweeper & LCD-Font */
@font-face {
	font-family: 'minesweeper';
	src: url('media/fonts/Minesweeper.ttf');
	font-display: swap;
	font-weight: 100 1000;
}
@font-face {
	font-family: 'lcd';
	src: url('media/fonts/LCD.otf');
	font-display: swap;
	font-weight: 100 1000;
}

/* ################################################## */
/* ROOT VARIABLEN */
:root {
	/* Farben */
	--c1: rgb(18,16,16);
	--c2: rgb(27,25,25);
	--c3: rgb(55,50,50);
	--c4: rgb(95,90,90);
	
	--ca: #fcba03;
	--ctxt: rgb(245,245,255);
	
	--c-success: rgb(0,255,0);
	--c-error: 	 rgb(255,0,0);
	
	/* Größen */
	--d1: 5px;
	--d2: 10px;
	--d3: 20px;
	--d4: 40px;
	--dh: 100vh; /* Document Height */
	
	--header-height: 50px; /* Höhe des Headers */
	
	/* Timing */
	--t1: 0.15s;
	--t2: 0.3s;
	--t3: 0.6s;
	
	/* Sonstiges */
	--bs: 0 0 10px var(--c1); /* Box-Shadow */
	--ts: 0 0 10px var(--c1); /* Text-Shadow */
	--br: 10px; /* Border-Radius */
}

/* ################################################## */
/* GRUNDLEGENDES MARKUP */

/* ################################################## */
/* GRUNDLEGENDES MARKUP */
body {
	margin: 0; padding: 0;
	background-color: var(--c1);
	
	font-family: 'cabin-regular';
}
*, *:before, *:after {
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
	
	font-style: normal; font-weight: normal;
	font-size: 12pt;
	
	margin: 0; padding: 0;
	color: var(--ctxt);
	line-height: 1.15em;
	font-variant-ligatures: none;
	hyphens: auto;
}

/* Scrollbars */
html, html * {
	scrollbar-width: thin;
	scrollbar-color: var(--ca) var(--c1);
}
::-webkit-scrollbar {
	background-color: var(--c1);
	width: 20px; height: 20px;
}
::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 10px 10px var(--ca);
    border: solid 7px transparent;
	border-radius: 10px;
}
::-webkit-scrollbar-track { background-color: var(--c1); }
::-webkit-scrollbar-corner { background: var(--c1); }

/* Titel & Fließtext */
h1, h1 * { font-size: 48pt; font-family: 'windows-95'; }
h2, h2 * { font-size: 36pt; font-family: 'windows-95'; 	font-weight: 300; }
h3, h3 * { font-size: 24pt; font-family: 'windows-95'; 	font-weight: 400; }
h4, h4 * { font-size: 14pt; font-family: 'windows-95'; 	font-weight: 600; }
h5, h5 * { font-size: 12pt; font-family: 'windows-95'; 	font-weight: 400; }
h6, h6 * { font-size: 11pt; font-family: 'windows-95'; 	font-weight: 400; }

b, b * { font-weight: bold; }
i, i * { font-family: 'windows-95'; }

h1 b, h1 b * { font-weight: 800; }
h2 b, h2 b * { font-weight: 800; }
h3 b, h3 b * { font-weight: 800; }
h4 b, h4 b * { font-weight: 800; }
h5 b, h5 b * { font-weight: 800; }
h6 b, h6 b * { font-weight: 800; }

c, c * { color: var(--ca); }

/* Spezielle Elemente */
img {
	user-select: none;
	pointer-events: none;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* COMPUTER-SEITE */

/* Computer-Style-Variablen */
:root {
	--c-desktop-1: rgb(50,50,50);
	--c-desktop-2: rgb(170,170,170);
	--c-desktop-3: rgb(200,200,200);
	--c-desktop-4: rgb(240,240,240);
	--c-desktop-5: rgb(0,0,100); /* Blau */
	
	--desktop-border-color-1: /* Herausragend */
		var(--c-desktop-4)
		var(--c-desktop-1)
		var(--c-desktop-1)
		var(--c-desktop-4);
	
	--desktop-border-color-2: /* Inset */
		var(--c-desktop-1)
		var(--c-desktop-4)
		var(--c-desktop-4)
		var(--c-desktop-1);
	
	--icon-big-dim: 56px; 		/* Desktop-Programm Icon */
	--icon-medium-dim: 31px; 	/* Start-Menü Level 1 Icons */
	--icon-small-dim: 25px; 	/* Window-Head, Taskbar-Item, etc. */
}

#main {
	width: 100%; height: var(--dh);
}

#computer {
	width: 100%; height: 100%;
	position: relative;
	display: flex; flex-direction: column;
	z-index: 0;
	font-family: 'windows-95';
	font-size: 11pt;
	overflow: hidden;
}
#computer hr {
	width: 100%;
	border: 1px solid;
	border-color: var(--desktop-border-color-2);
}

/* Scrollbars */
#computer * {
	scrollbar-width: thin;
	scrollbar-color: var(--ca) var(--c1);
}
#computer::-webkit-scrollbar {
	background-color: var(--c1);
	width: 20px; height: 20px;
}
#computer::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 10px 10px var(--ca);
    border: solid 7px transparent;
	border-radius: 10px;
}
#computer::-webkit-scrollbar-track { background-color: var(--c1); }
#computer::-webkit-scrollbar-corner { background: var(--c1); }

/* Computer Z-Index */
#shutdown 				{ z-index: 3; }
#taskbar 				{ z-index: 2; }
#desktop 				{ z-index: 1; }

#desktop-window-cont 	{ z-index: 3; }
#desktop-ctx-menu 		{ z-index: 2; }
#desktop-program-cont 	{ z-index: 1; }

/* ---------------------------------------- */
/* Shutdown-Element */
#shutdown {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}
#shutdown > * {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: var(--d2);
	
	background-color: var(--c-desktop-5);
	
	visibility: hidden;
	opacity: 0;
	
	transition: var(--t2);
	pointer-events: auto;
	z-index: 0;
}
#shutdown > * [name='background'] {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
}
#shutdown > * [name='background'] img {
	width: 100%; height: 100%;
	object-fit: cover;
}
#shutdown > * [name='logo'] {
	width: 50%; height: 50%;
}
#shutdown > * [name='logo'] img {
	width: 100%; height: 100%;
	object-fit: contain;
}
#shutdown[class] > * p {
	font-size: 22pt;
}
#shutdown[class] > * [name='msg']::after {
	content: '';
	font-size: inherit;
	font-family: inherit;
	animation: shutdown-msg 2s infinite;
}
@keyframes shutdown-msg {
	0% { content: ''; }
	25% { content: '.'; }
	50% { content: '..'; }
	75% { content: '...'; }
}

#shutdown > * * { text-shadow: var(--ts); }

#shutdown.shutdown 	#shutdown-progress 	{ visibility: visible; opacity: 1; }
#shutdown.startup 	#startup-progress 	{ visibility: visible; opacity: 1; }
#shutdown.off 		#off-screen 		{ visibility: visible; opacity: 1; }

#startup-progress 	{ z-index: 2; cursor: wait; }
#off-screen 		{ z-index: 1; }
#shutdown-progress 	{ z-index: 0; cursor: wait; }

#startup-btn {
	position: relative;
	width: 80px; height: 80px;
	border-radius: 50%;
	
	background-color: var(--c-desktop-3);
	border: 4px solid;
	border-color: var(--desktop-border-color-1);
	cursor: pointer;
}
#startup-btn:active {
	border-color: var(--desktop-border-color-2);
	background-color: var(--c-desktop-2);
}
#startup-btn img {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 60%; height: 60%;
}

/* ---------------------------------------- */
/* Overlay-Element */
#overlay {
	/* Zwischen Shutdown & Desktop/Taskbar
		z.B. für Luftballons und Flugzeuge */
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	pointer-events: none;
}
.luftballon {
	pointer-events: auto;
	cursor: pointer;
}
.flugzeug {
	pointer-events: auto;
	cursor: pointer;
}

/* ---------------------------------------- */
/* Desktop */
#desktop {
	position: relative;
	flex: 1 0 0;
}
#desktop [name='background'] {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
}
#desktop [name='background'] img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Desktop-Context-Menu (Rechtsklick) */
#desktop-ctx-menu {
	position: absolute;
	display: flex; flex-direction: column;
	
	background-color: var(--c-desktop-2);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
	
	/* transition: opacity var(--t1), visibility var(--t1); */
	visibility: hidden;
	opacity: 0;
}
#desktop-ctx-menu.active {
	visibility: visible;
	opacity: 1;
}
.desktop-ctx-menu-item {
	padding: 2px 40px 2px 20px;
	cursor: pointer;
}
.desktop-ctx-menu-item [name='title'] {
	color: var(--c1);
}

#desktop-program-cont {
	/* Container für Desktop-Programm-Icons */
	position: absolute;
	top: 40px; left: 40px;
	width: calc(100% - 80px); 
	height: calc(100% - 80px);
}
#desktop-window-cont {
	/* Container für Fenster */
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	
	pointer-events: none;
}

/* ---------------------------------------- */
/* Desktop-Programme */
.desktop-program {
	position: absolute;
	width: 120px; height: 100px;
	
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 2px;
	
	padding: 8px;
	border: 2px solid transparent;
	
	cursor: pointer;
	user-select: none;
}
.desktop-program.active {
	border: 2px dashed var(--c-desktop-5);
}
.desktop-program.ghost {
	/* Element, das beim Verschieben von Icons per JS erstellt wird */
	position: absolute;
	border: 2px solid transparent;
	opacity: 0.8;
	pointer-events: none;
}
.desktop-program [name='icon'] {
	width: var(--icon-big-dim); 
	height: var(--icon-big-dim);
	min-height: 0;
}
.desktop-program [name='icon'] img {
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
.desktop-program [name='title'] {}
.desktop-program [name='title'] * {
	width: 104px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	hyphens: none;
	overflow: hidden;
}

/* ---------------------------------------- */
/* Desktop-Windows */
.desktop-window {
	position: absolute;
	
	display: flex; flex-direction: column;
	
	min-width: 250px;
	min-height: 250px;
	
	opacity: 1;
	visibility: visible;
	
	padding: 2px;
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
	background-color: var(--c-desktop-3);
	
	pointer-events: auto;
	user-select: none;
	resize: both;
}
.desktop-window.min {
	min-width: 0;
	min-height: 0;
	
	visibility: hidden;
	opacity: 0;
}
.desktop-window.closed {
	transform: scale(0.8);
	opacity: 0;
	visibility: hidden;
}

/* Window-Head */
.win-head {
	display: flex; gap: var(--d1);
	align-items: center;
	
	height: 26px;
	padding: 2px;
	
	background-color: var(--c-desktop-2);
}
.win-head [name='icon'] {
	width: var(--icon-small-dim); 
	height: var(--icon-small-dim);
}
.win-head [name='icon'] img {
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
.win-head [name='title'] * {
	color: var(--c1);
}
.desktop-window.active .win-head {
	background-color: var(--c-desktop-5);
}
.desktop-window.active .win-head [name='title'] * {
	color: var(--ctxt);
}
.win-head-btn-cont {
	display: flex; gap: 2px;
	margin-left: auto;
}
.win-head-btn {
	position: relative;
	height: 22px; width: 22px;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
}
.win-head-btn.disabled { cursor: not-allowed; }
.win-head-btn.disabled::before,
.win-head-btn.disabled::after { opacity: 0.3; }
.win-head-btn:not(.disabled):active {
	border-color: var(--desktop-border-color-2);
}
.win-head-btn.minimize-btn::after {
	content: ''; position: absolute;
	left: 50%; bottom: 2px;
	transform: translateX(-50%);
	width: 85%; height: 2px;
	background-color: var(--c1);
}
.win-head-btn.fullscreen-btn::after {
	content: ''; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: 80%; height: 80%;
	border: 2px solid var(--c1);
}

.desktop-window.fullscreen .win-head-btn.fullscreen-btn::after,
.desktop-window.fullscreen .win-head-btn.fullscreen-btn::before {
	content: ''; position: absolute;
	top: auto; bottom: 10%;
	left: 10%; right: auto;
	transform: translate(0,0);
	
	width: 60%; height: 60%;
	
	border: 2px solid var(--c1);
	background-color: var(--c-desktop-3);
}
.desktop-window.fullscreen .win-head-btn.fullscreen-btn::before {
	top: 10%; bottom: auto;
	left: auto; right: 10%;
}

.win-head-btn.close-btn::after {
	content: '✖'; position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	color: var(--c1);
}

/* Window-Task-Leiste */
.win-task {
	display: flex; gap: 4px;
	padding: 2px;
	background-color: var(--c-desktop-3);
}
.win-task-item {
	position: relative;
	padding: 4px;
	cursor: pointer;
}
.win-task > * .win-task-item {
	/* Padding für schwarzen Pfeil nur bei Items NICHT auf erster Stufe */
	padding-right: 20px;
}
.win-task-item [name='name'] { 
	color: var(--c1); 
	white-space: nowrap;
	
	/* Wichtig für Aktivierung & Deaktivierung der Items via JS */
	pointer-events: none; 
}
.win-task-item [name='name']:first-letter {
	text-decoration: underline;
}
.win-task-item:not(.top-level).has-submenu::after {
	/* Schwarzer Pfeil für Start-Menu-Items mit Untermenü */
	content: '';
	position: absolute;
	
	right: 8px; top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid var(--c1);
}
.win-task-item-submenu {
	/* Standard Task-Item-Submenu */
	position: absolute;
	top: -4px; /* Border von submenu + Padding von Parent */
	left: 100%;
	
	display: none; 
	flex-direction: column;
	
	padding: 2px;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
	
	z-index: 1;
}
.win-task-item.top-level > .win-task-item-submenu {
	/* Task-Item-Submenu auf erster Stufe */
	top: 100%; left: 0;
}

/* Aktive Task-Items & Untermenüs nur anzeigen, wenn .desktop-window im .task Modus ist */
.desktop-window.task .win-task-item.active { background-color: var(--c-desktop-2); }
.desktop-window.task .win-task-item.active > .win-task-item-submenu { display: flex; }

/* Window-Body */
.win-body {
	height: 100%; width: 100%;
	max-height: 100%; max-width: 100%;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
	
	user-select: auto;
	overflow: hidden;
}

/* Data-Container */
.win-data {
	/* Für Bild-, Video-, Audiodateien, etc. */
	display: none;
	visibility: hidden;
	opacity: 0;
	user-select: none;
	pointer-events: none;
}

/* Window-Resizer */
:root {
	--rd: -2px; /* Resizer Distance */
}
.win-resizer { 
	position: absolute; 
	width: 10px; height: 10px;
}
.win-resizer[name='T'] { width: 100%; 	top: var(--rd); 	left: var(--rd);	}
.win-resizer[name='B'] { width: 100%; 	bottom: var(--rd); 	left: var(--rd);	}
.win-resizer[name='L'] { height: 100%; 	left: var(--rd); 	top: var(--rd);		}
.win-resizer[name='R'] { height: 100%; 	right: var(--rd); 	top: var(--rd);		}

.win-resizer[name='TL'] { top: var(--rd); 		left: var(--rd); 	}
.win-resizer[name='TR'] { top: var(--rd); 		right: var(--rd); 	}
.win-resizer[name='BL'] { bottom: var(--rd); 	left: var(--rd); 	}
.win-resizer[name='BR'] { bottom: var(--rd); 	right: var(--rd); 	}

.desktop-window:not(.fullscreen) .win-resizer[name='T'] 	{ cursor: ns-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='B'] 	{ cursor: ns-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='L'] 	{ cursor: ew-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='R'] 	{ cursor: ew-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='TL'] 	{ cursor: nwse-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='TR'] 	{ cursor: nesw-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='BL'] 	{ cursor: nesw-resize; 	}
.desktop-window:not(.fullscreen) .win-resizer[name='BR'] 	{ cursor: nwse-resize; 	}

/* ---------------------------------------- */
/* Taskbar */
#taskbar {
	position: relative;
	
	display: flex; gap: var(--d1);
	justify-content: start;
	align-items: center;
	
	height: 40px;
	padding: 2px;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
}
#taskbar * { color: var(--c1); }

/* Start-Button (= .taskbar-item) */
#start-btn {
	border-color: var(--desktop-border-color-1);
}
#start-btn.active {
	border-color: var(--desktop-border-color-2);
}

/* Start-Menü */
#start-menu {
	display: none;
	position: absolute;
	left: 0; bottom: 100%;
	
	flex-direction: row;
	align-items: stretch;
	
	background-color: var(--c-desktop-3);
	
	border: solid 2px;
	border-color: var(--desktop-border-color-1);
}
#start-menu.active { display: flex; }
#start-menu-banner {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 5px;
	
	/* Writing-Mode & Flex verstehen sich nicht, deshalb feste Breite */
	width: 50px;
	padding: 10px 2px 10px 4px;
	background-color: var(--c-desktop-5);
}
#start-menu-banner > * {
	font-size: 40px;
	color: var(--ctxt);
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}
#start-menu-item-cont {
	display: flex; flex-direction: column;
}
.start-menu-item {
	position: relative;
	display: flex; align-items: center;
	justify-content: start; gap: var(--d1);
	
	padding: 4px;
	padding-right: 22px; /* Platz für schwarzen Pfeil */
	cursor: pointer;
}
.start-menu-item * {
	color: var(--c1);
}
.start-menu-item [name='icon'] {
	width: var(--icon-small-dim); 
	height: var(--icon-small-dim);
}
#start-menu-item-cont > .start-menu-item > [name='icon'] {
	/* Top-Level bekommen mittelgroße Icons */
	width: var(--icon-medium-dim); 
	height: var(--icon-medium-dim);
}
.start-menu-item [name='icon'] img {
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
.start-menu-item [name='name'] {
	white-space: nowrap;
}
.start-menu-item.has-submenu::after {
	/* Schwarzer Pfeil für Start-Menu-Items mit Untermenü */
	content: '';
	position: absolute;
	
	right: 8px; top: 50%;
	transform: translateY(-50%);
	width: 0; height: 0;
	
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid var(--c1);
}
.start-menu-item-submenu {
	display: none; 
	flex-direction: column;
	position: absolute;
	top: -2px; /* Border-Width von Parent-Element */
	left: 100%;
	
	background-color: var(--c-desktop-3);
	
	border: solid 2px;
	border-color: var(--desktop-border-color-1);
}

#taskbar-program-cont {
	flex-grow: 1;
	display: flex; gap: var(--d1);
	justify-content: start;
	align-items: center;
}
.taskbar-item {
	display: flex; gap: var(--d1);
	justify-content: center; 
	align-items: center;
	
	height: 34px;
	padding: 2px 4px;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
	
	user-select: none;
	cursor: pointer;
}
.taskbar-item * { color: var(--c1); }
.taskbar-item.active {
	background-color: var(--ctxt);
	border-color: var(--desktop-border-color-2);
}
.taskbar-item.min {
	border-color: var(--desktop-border-color-1);
}
.taskbar-item.closed {
	display: none;
}
.taskbar-item:active {
	border-color: var(--desktop-border-color-2);
}
.taskbar-item [name='icon'] {
	width: var(--icon-small-dim); 
	height: var(--icon-small-dim);
}
.taskbar-item [name='icon'] img {
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}

#taskbar-clock {
	height: 34px;
	padding: 2px;
	margin-left: auto;
	
	display: flex; align-items: center;
	justify-content: center;
	
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
}
#taskbar-clock * { color: var(--c1); }

/* ---------------------------------------- */
/* Einzelne Computer-Programme */

/* Minesweeper */
.desktop-window[name='Minesweeper'] {
	min-width: 0;
	min-height: 0;
}
#minesweeper { /* = .win-body-Element */
	display: flex; flex-direction: column;
	gap: 4px;
	
	padding: 4px;
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
}
#ms-top-row {
	display: flex;
	justify-content: space-between;
	
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
}
#ms-face {
	position: relative;
	height: 23px; width: 23px;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
	z-index: 0;
}
#ms-face:active {
	border-color: var(--desktop-border-color-2);
}
#ms-face img {
	display: none;
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
	z-index: -1;
}

#ms-flags, #ms-time {
	/* Zeit & Flaggen Anzeige */
	display: flex; align-items: center;
	justify-content: center;
	
	height: 100%;
	
	background-color: rgb(0,0,0);
	color: rgb(255,0,0);
	font-family: 'lcd';
}
#ms-field {
	display: flex; flex-wrap: wrap;

	/* Wichtig für richtige Größe des Spielfelds */
	box-sizing: content-box !important; 
	
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
}
.ms-btn {
	width: 20px; height: 20px;
	
	display: flex; align-items: center;
	justify-content: center;
	
	background-color: var(--c-desktop-3);
	border: 2px solid;
	border-color: var(--desktop-border-color-1);
}
.ms-btn:active {
	border-color: var(--desktop-border-color-2);
}
.ms-btn.revealed {
	border: 1px solid;
	border-color: var(--c-desktop-2);
}
.ms-btn img {
	width: 100%; height: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}
.ms-btn-num {
	font-family: 'minesweeper';
	font-size: 12px;
}
.ms-btn-num.n0 { display: none; }
.ms-btn-num.n1 { color: rgb(0,0,255); 		}
.ms-btn-num.n2 { color: rgb(0,150,0); 		}
.ms-btn-num.n3 { color: rgb(255,0,0); 		}
.ms-btn-num.n4 { color: rgb(100,0,100); 	}
.ms-btn-num.n5 { color: rgb(150,0,0); 		}
.ms-btn-num.n6 { color: rgb(0,100,100); 	}
.ms-btn-num.n7 { color: rgb(0,0,0); 		}
.ms-btn-num.n8 { color: rgb(100,100,100); 	}

/* Solitaire */
:root {
	--sltr-card-width: 80px;
	--sltr-card-height: 120px;
	--sltr-card-br: 5px; /* Karten Border-Radius */
	
	--sltr-c1: rgb(30,140,20);
	--sltr-c2: rgb(0,110,0);
}
.desktop-window[name='Solitaire'] {}
#solitaire {
	position: relative;
	background-color: rgb(30,140,20);
}
#solitaire canvas {
	display: block;
}

/* Taschenrechner */
:root {
	--calc-btn-height: 45px;
	--calc-btn-width: 60px;
}
#calculator { /* = .win-body-Element */
	display: flex; flex-direction: column;
	gap: 8px;
	
	padding: 8px;
	
	border: none;
}
#calc-output {
	height: 30px;
	padding: 2px;
	
	display: flex; justify-content: end;
	align-items: center;
	
	border: 2px solid;
	border-color: var(--desktop-border-color-2);
	background-color: var(--ctxt);
	color: var(--c1);
}
.calc-btn-row {
	display: flex; gap: 4px;
}
.calc-btn-row:first-child { margin-bottom: 8px; }
.calc-btn-row >:first-child { margin-right: 8px; }
.calc-btn {
	width: var(--calc-btn-width);
	height: var(--calc-btn-height);
	padding: 8px;
	
	display: flex; align-items: center;
	justify-content: center;
	
	border: 2px solid; 
	border-color: var(--desktop-border-color-1);
	
	hyphens: none;
	overflow: hidden;
	cursor: pointer;
}
.calc-btn:active {
	border-color: var(--desktop-border-color-2);
}
.calc-btn.red { color: rgb(255,0,0); }
.calc-btn.blue { color: rgb(0,0,255); }
.calc-btn[name='memory'] {
	width: calc(var(--calc-btn-height) - 6px);
	height: calc(var(--calc-btn-height) - 6px);
	margin: 3px 16px 2px 12px;
	
	border-color: var(--desktop-border-color-2);
	cursor: auto;
}
.calc-btn[name='Backspace'],
.calc-btn[name='CE'],
.calc-btn[name='C'] { width: auto; flex: 1 0 0; }

/* Feuerzeug */
#feuerzeug canvas {
	display: block;
	cursor: pointer;
}

/* ################################################## */
/* MEDIA QUERIES */
@media (hover: hover) and (pointer: fine) {
	/* ---------------------------------------- */
	/* Desktop Anwendung */
	.desktop-ctx-menu-item:hover { background-color: var(--c-desktop-5); }
	.desktop-ctx-menu-item:hover [name='title'] { color: var(--ctxt); }
	
	.start-menu-item:hover { background-color: var(--c-desktop-5); }
	.start-menu-item:hover > [name='name'] * { color: var(--ctxt) !important; }
	.start-menu-item:hover > .start-menu-item-submenu { display: flex; }
	.start-menu-item.has-submenu:hover::after { border-left-color: var(--ctxt); }
	
	.win-task-item:hover { background-color: var(--c-desktop-2); }
	
	/* Universelles Styling */
	.hover-underline-l2r:hover::after { width: 100%; }
	.hover-underline-mid:hover::after { width: 100%; }
}
@media only screen and (max-width: 1000px) {
}
@media only screen and (max-width: 800px) {
}
@media only screen and (max-width: 500px) {
}