<style style='display:none'>
	/***********************
	** generic styles
	***********************/
	style {display:none}
	script {display:none}
	html {font-size:medium}
	* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
	html, body {margin: 0; padding:0; width:100%; height:100%; font-family:arial; overflow:hidden}
	body > *{display:inline-block; margin:0; padding:0; top:0; left:0; width:100%; height:100%}
	.center {position:relative;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}

	/******************************
	** specific styles 
	******************************/
	html { --orientation:undefined; --titleHeight:2rem; --whoHeight:1.7rem; --mainTop:3.7rem}
	
	#titleBar {left:0; top:0; height:var(--titleHeight); line-height:var(--titleHeight); font-size:1.7em; width:100%; position:absolute}
	#frmWho  {left:0; top:var(--titleHeight); height:var(--whoHeight); width:100%; position:absolute; }
	
	@media screen and (orientation: landscape) {
	#frmChat {left:0; top:var(--mainTop); bottom:0; width:50%; position:absolute; border-right:solid 1px #888}
	#frmPlay {right:0; top:var(--mainTop); bottom:0; width:50%; position:absolute}
	}
	
	@media screen and (orientation: portrait) {
	#frmChat {left:0; top:var(--mainTop); height:calc(50% - var(--mainTop) / 2); width:100%; position:absolute}
	#frmPlay {left:0; bottom:0; height:calc(50% - var(--mainTop) / 2); width:100%; position:absolute}
	#uiGameTitle {display:none}
	}

	/* portrait orientation with onscreen keyboard: hide frmPlay */
	body[data-portraitkeyboard]  #frmChat {left:0; top:var(--mainTop); bottom:0; width:100%; position:absolute}
	body[data-portraitkeyboard]  #frmPlay {display:none}
	body[data-portraitkeyboard]  #uiGameTitle {display:none}
	
	#frmLogon {display:inline-block}
	#frmMatch {display:inline-block}
	#frmPlay > * {top:0; left:0; width:100%; height:100%; display:inline-block; position:absolute}
	#frmNoGame {font-size:1.5rem; text-align:center}
	#frmGameEnd {background-color:#00400040; text-align:center}
	#frmGameEnd > * {font-size:20vmin; display:block; color:white; text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black;}

	#frmHelp {display:none; z-index:1000; top:0; left:0; bottom:0; right:0; position:absolute; overflow-y:scroll; background-color:white; padding:1em}
	#frmHelp > button {font:inherit; top:1em; right:1.5em; width:8em; height:2em; position:fixed}
	#helpText {display:none}

	body[data-state=logon]	#frmMatch {display:none}
	
	body[data-state=nogame]	#frmLogon {display:none}
	body[data-state=nogame]	#frmGame {display:none}
	body[data-state=nogame]	#frmGameEnd {display:none}
	
	body[data-state=game]	#frmLogon {display:none}
	body[data-state=game]	#frmGameEnd {display:none}
	body[data-state=game]	#frmNoGame {display:none}
	
	body[data-state=gameEnd]	#frmPlay {pointer-events: none}
	body[data-state=gameEnd]	#frmLogon {display:none}
	body[data-state=gameEnd]	#frmNoGame {display:none}

	.dialog {font-size:130%}
	.dialog * {font:inherit}
	.dialog button:not(.close) {min-width:5em}
</style>