@font-face {
font-family: 'RobotoWeb';
src: url('font/roboto400.eot');
src: url('font/roboto400.eot?#iefix') format('embedded-opentype'),
url('font/roboto400.woff') format('woff'),
url('font/roboto400.svg') format('svg'),
url('font/roboto400.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

@font-face {
font-family: 'RobotoWeb';
src: url('font/roboto700.eot');
src: url('font/roboto700.eot?#iefix') format('embedded-opentype'),
url('font/roboto700.woff') format('woff'),
url('font/roboto700.svg') format('svg'),
url('font/roboto700.ttf') format('truetype');
font-weight: bold;
font-style: normal;
} 

/*
Font Roboto is licensed under the Apache License, Version 2.0
http://www.apache.org/licenses/LICENSE-2.0
*/
/*
@font-face {
font-family: 'ArchivoNarrow';
src: url('font/archivonarrow.woff') format('woff'),
url('font/archivonarrow.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 
*/
/*
Font Archivo Narrow is licensed under the SIL Open Font License (OFL)
http://scripts.sil.org/OFL
*/


* {margin:0;padding:0;}

#dsgame {font-size:8px; margin:0; font-family: "RobotoWeb", sans-serif; touch-action: pan-x pan-y; width: 100%;}

kwr {
	font-size: inherit;	
	display:block;
	margin:0 auto 3em;
	width:48em;
	height:48em;
	position:relative;
	border: 2px solid #000000;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	padding:0;	
}

kwr > .sd-kwr-bg, .sd-kwr-input {
	width: inherit;
	height: inherit;
	position:absolute;
	top:0;
	left:0;
}

kwr block, kwr iblock {
	float:left;
	padding:0;
	margin:0;
	width:2em;
	height:2em;
    color: #000;
    font-family:  "RobotoWeb", sans-serif;;
    font-size: 2em;
    font-weight: bold;
    line-height: 2.25em;
    overflow: hidden;
    text-align: center;
	text-transform:uppercase;
	user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select: none; -webkit-user-select: none;
	cursor: default;
}


kwr block {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border:0;
	border-top:1px solid #000;
	border-left:1px solid #000;
	position:relative;
}


kwr block:before {
    content: attr(data-value);
}

kwr block[data-clue] { 
	background-color: rgba(26,155,211,0.33);
}

kwr block[data-hint="1"]:before { 
    content: attr(data-default);
}

kwr block[data-hint="1"] { 
	color:rgba(0,25,191,1);
}


kwr block[data-clue] { 
    height: 5em;
    font-size: 0.8em;
    width: 5em;
	font-weight:normal;
	line-height:1.15em;
	text-align:center;
	text-transform:none;
}


kwr block[data-clue]:before { 
	content:attr(data-clue);
	text-transform:none;
	display:table-cell;
	vertical-align:middle;
	height:5em;
	width:5em;
	white-space: pre;
/*
	content:attr(data-clue);
	font-size:0.49em;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	text-transform:none;
	display:table-cell;
	vertical-align:middle;
	height:4em;
	width:4em;
	font-family: "ArchivoNarrow";
*/
}

kwr block:after { 
	content: '';
	background-image: url(arrow_free.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}


kwr block[data-clue]:after { 
	content: '';
	background-image: url(arrow_free.svg);
	height:5em;
	width:5em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}


kwr block[data-arrow="1"]:after { 
	content: '';
	background-image: url(arrow_1.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="2"]:after { 
	content: '';
	background-image: url(arrow_2.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="3"]:after { 
	content: '';
	background-image: url(arrow_3.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="4"]:after { 
	content: '';
	background-image: url(arrow_4.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="5"]:after { 
	content: '';
	background-image: url(arrow_5.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="6"]:after { 
	content: '';
	background-image: url(arrow_6.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}

kwr block[data-arrow="23"]:after { 
	content: '';
	background-image: url(arrow_23.svg);
	height:2em;
	width:2em;
	position:absolute;
	left:0;
	top:0;
	background-size:cover;
	background-repeat:no-repeat;
}



kwr block.false, kwr block[data-check="-1"] , kwr block[data-check="-2"] {color:#800;}

kwr block.true {color:#080;}

kwr.false {backgroun-color:#800;}

kwr.true {background-color:#080;}

kwr block[data-clue] { color: #000 !important;}

kwr block.selected { background-color:rgb(225,225,225);}
kwr block[data-clue].selected { background-color: rgba(26,155,211,0.75);}
kwr block.active { background-color:rgba(228,54,30,0.66) !important;}



keyboard {
	position:fixed;
	bottom:-0.4em;
	left:-1%;
	height:6em;
	width:102%;
	background-color: rgba(255,255,255,0.8);
	border-top: 1px solid rgba(0,0,0,1);
    font-size: 2.4em;
    z-index: 9999999;
}

keyboard kb1 {
	display:block;
}

keyboard kb2 {
	display:none;
}

keyboard.kb2 kb1 {
	display:none;
}

keyboard.kb2 kb2 {
	display:block;
}

keyboard line {
	overflow:hidden;
	margin:0.2em auto;
	display:table;
	width: 21em;
}

keyboard key, key.desktopkey {
	float:left;
	width:1.6em;
	height:1.6em;
	margin:0 0.1em;
	background-color:rgb(230,230,230);
	border-radius:0;
	display:block;
	color:#000;	
    font-family:  "RobotoWeb", sans-serif;
    font-weight: normal;
    line-height: 1.5em;
    overflow: hidden;
    text-align: center;
	text-transform:uppercase;
	user-select:none; -o-user-select:none; -moz-user-select:none; -khtml-user-select: none; -webkit-user-select: none;
	cursor: default;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border:1px solid #000;
}

key.desktopkey {
float: none;
position: absolute;
bottom: -2em;
left: 0px;
width: auto;
padding: 0px 2em;
font-size: 1.2em;
}

keyboard key[data-function] { 
	width: 2.6em;
	background-color: rgb(180,180,180);
}

keyboard kb2 key[data-function] { 
	width: 10em;
}

keyboard key[data-value]:before {
    content: attr(data-value);
}

keyboard key[data-function="back"] span {
	display:block;
	height: inherit;
	width: inherit;
	margin:auto;
	background: url("backspace.svg") no-repeat center center rgba(0, 0, 0, 0);
	background-size:1.6em 1.6em;
}

keyboard key[data-function="hint"]:before {
    content: "_?";
}

key.desktopkey[data-function="hint"]:before {
    content: "Buchstabe vorgeben";
}

key.desktopkey[data-function="hint"] {
left: 16em;
}


key.desktopkey[data-function="keyboard"] {
    left:0;
}

key.desktopkey[data-function="keyboard"][data-value="0"]:before {
    content: "Tastatur einblenden";
}

key.desktopkey[data-function="keyboard"][data-value="1"]:before {
    content: "Tastatur ausblenden";
}


keyboard kb1 key[data-function="options"]:before {
    content: "Optionen";
	font-size:0.66em;
}

keyboard kb2 key[data-function="options"]:before {
    content: "ABC";
	font-size:0.66em;
}

keyboard kb2 key[data-function="check"]:before {
	font-size:0.66em;
}

keyboard kb2 key[data-function="new"]:before {
	font-size:0.66em;
}

keyboard kb1 line:nth-child(2) {
	padding-left:1.18em;
}

keyboard kb1 line:nth-child(2)  key[data-function] {
	width:3.2em;
}

keyboard line:nth-child(3) {
	padding-left:2.1em;
}

keyboard kb2 line:nth-child(3) key {
	visibility:hidden;
}

keyboard kb2 line:nth-child(3) key[data-function] {
	visibility: visible;
}

keyboard line:nth-child(3)  key[data-function] {
	margin-left: 2em;
	width: 4em;
	line-height: 1.35em;
	background-color: rgb(140,140,140);
}


keyboard clueline {
	display:block;
	height:2em;
	line-height:2em;
	font-size:0.8em;
	text-align:center;
	position:absolute;
	top:-2em;
	left:0;
	width:100%;	
	background-color: rgba(26,155,211,0.8);
	border-top: 1px solid rgba(0,0,0,1);
	border-bottom: 1px solid rgba(0,0,0,1);
	box-sizing: border-box;
}

keyboard clueline[data-clue]:before {
	content: attr(data-clue);
	text-align:center;
	width:100%;
}

keyboard clueline[data-clue=""] {
	display:none;
}



/*
@media (min-width: 120px) { 
	#dsgame {font-size:2px;}
}

@media (min-width: 170px) { 
	#dsgame {font-size:3px;}
}

@media (min-width: 220px) { 
	#dsgame {font-size:4px;}
}

@media (min-width: 270px) { 
	#dsgame {font-size:5px;}
}

@media (min-width: 320px) { 
	#dsgame {font-size:6px;}
}

@media (min-width: 370px) { 
	#dsgame {font-size:7px;}
}

@media (min-width: 420px) { 
	#dsgame {font-size:8px;}
}

@media (min-width: 470px) { 
	#dsgame {font-size:9px;}
}

@media (min-width: 520px) { 
	#dsgame {font-size:10px;}
}

@media (min-width: 570px) { 
	#dsgame {font-size:11px;}
}

@media (min-width: 620px) { 
	#dsgame {font-size:12px;}
}

@media (min-width: 670px) { 
	#dsgame {font-size:13px;}
}

@media (min-width: 720px) { 
	#dsgame {font-size:14px;}
}

@media (min-width: 770px) { 
	#dsgame {font-size:15px;}
}

@media (min-width: 820px) { 
	#dsgame {font-size:16px;}
}

@media (min-width: 870px) { 
	#dsgame {font-size:17px;}
}

@media (min-width: 920px) { 
	#dsgame {font-size:18px;}
}

@media (min-width: 970px) { 
	#dsgame {font-size:19px;}
}

@media (min-width: 1020px) { 
	#dsgame {font-size:20px;}
}

@media (min-width: 1070px) { 
	#dsgame {font-size:21px;}
}

@media (min-width: 1120px) { 
	#dsgame {font-size:22px;}
}

@media (min-width: 1170px) { 
	#dsgame {font-size:23px;}
}

@media (min-width: 1220px) { 
	#dsgame {font-size:24px;}
}

@media (min-width: 1270px) { 
	#dsgame {font-size:25px;}
}
*/