body { background-color: #fff; color: #000; margin: 0;  font-family: Arial, Helvetica; }
#raetsel { display: flex; flex-direction: row; background-color: #fff; gap: 1rem; justify-content: center; flex-wrap: wrap; }
#copyright { font-size: 0.4rem; color: #999; font-family: Arial, Helvetica; }
#lst { display: flex; flex-direction: column; gap: 0.2rem; }
#lst > ul {list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.2rem; letter-spacing: 0.2rem; }
#lst a { display: flex; background-color: #fff; justify-content: space-between; padding: 0.2rem 0.4rem; font-family: monospace; font-size: 1rem; color: #000; text-decoration: none; border: 1px solid #000; border-bottom: 2px solid #000; }
#lst a.sel { background-color: #eef; border-color: #666; }
#lst a.placed { background-color: #eee; border-color: #999; }
.boardpanel { display: flex; flex-direction: column; gap: 0.5rem; }
#board { display: table; border-collapse: collapse; table-layout: fixed; }
#board .row { display: table-row; }
#board .cell { display: table-cell; width: 1.6rem; min-width: 1.6rem; height: 1.6rem; vertical-align: middle; }
#board .cell.plc { background-color: #fff; border: 1px solid #000; }
#board .cell.plc.lsg { background-color: #ddd; }
#board .cell.plc.start { background-color: #eef; }
#board .cell > span { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 0.7rem; position: relative; }
#board .cell > span span { position: absolute; padding: 0; top: 0; left: 0; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 1.2rem; }
#board .cell.fail > span span { animation: 0.7s ease 0s 1 normal none running shake; }
#board .cell > span span.mrk { position: absolute; padding: 0; font-size: 0.5rem; justify-content: end; align-items: end; width: 95%; }
#board .cell > span a { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; }
#board .cell.start span a { display: block; }
#board .cell.cross > span a { display: flex; justify-content: center; align-items: center; font-size: 0.8rem; color: #333; text-decoration: none; }
#lsg { display: flex; justify-content: center; }
#lsg div { border: 1px solid #000; width: 1.6rem; height: 1.6rem; display: block; position: relative; background-color: #fff; }
#lsg div span { position: absolute; padding: 0.05rem; right: 0; bottom: 0; font-size: 0.5rem; }
#lsg div .chr { font-size: 1.2rem; align-items: center; display: flex; justify-content: center; width: 100%; height: 100%; }


@media screen and (min-width: 768px) {
	iframe {
		height: 768px;
	}
	
}

@media screen and (min-width: 400px) {
	#board .cell { width: 2rem; min-width: 2rem; height: 2rem; }
	#board .cell span {  font-size: 1.2rem; }
	#lsg div { width: 2rem; height: 2rem; }
	#lsg div .chr { font-size: 1.2rem; }
}

@keyframes shake {
	0% { transform: translate(1px) rotate(0deg); }
	10% { transform: translate(-1px) rotate(-10deg); }
	20% { transform: translate(-3px) rotate(10deg); }
	30% { transform: translate(3px) rotate(0deg); }
	40% { transform: translate(1px) rotate(10deg); }
	50% { color: var(--core-error-color, rgb(255, 160, 160)); transform: translate(-1px) rotate(-10deg); }
	60% { transform: translate(-3px) rotate(0deg); }
	70% { transform: translate(3px) rotate(-10deg); }
	80% { transform: translate(-1px) rotate(10deg); }
	90% { transform: translate(1px) rotate(0deg); }
	100% { transform: translate(1px) rotate(-10deg); }
}