/* === SCLPlayer Widget CSS === */


/* Modal overlay */
.scleg_screenModal {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #4b0082;
}

/* Outer wrapper — add header/footer as siblings inside here later */
#scleg_game-wrapper, .scleg_player.scleg_game {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

/* The area available to the game (between any future header/footer) */
#scleg_game-area {
	flex: 1 1 auto;
	position: relative;
	display: flex;
	overflow: hidden;
	justify-content: flex-start;
	align-items: flex-start;
}

#scleg_game-inner {
	display: flex;  /* row or column depending on mode */
}

#scleg_game-area.controls-bottom #scleg_game-inner {
	flex-direction: column;
	align-items: center;
}

#scleg_game-area.controls-right #scleg_game-inner {
	flex-direction: row;
	align-items: flex-start;
}

/* --- Layout modes set by JS --- */

/* Controls on bottom */
#scleg_game-area.controls-bottom {
	flex-direction: column;
	align-items: center;
}

#scleg_game-area.controls-bottom #scleg_canvas-container {
	flex: 1 1 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

#scleg_game-area.controls-bottom #scleg_canvasButtonBar {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Controls on right */
#scleg_game-area.controls-right {
	flex-direction: row;
	justify-content: center;  /* centers the inner pair horizontally */
	align-items: flex-start;
}

#scleg_game-area.controls-right #scleg_canvas-container {
	flex: 0 0 auto;  /* shrinks to canvas size */
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: hidden;
}

#scleg_game-area.controls-right #scleg_canvasButtonBar {
	flex: 0 0 auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

canvas {
	display: block;
	/* Actual width/height set by JS */
}

/* --- Demo styles — replace with your own --- */
#scleg_canvasButtonBar {
	background: #2e004f;
	padding: 8px 16px;
	color: white;
	font-family: sans-serif;
	font-size: 14px;
	font-weight: bold;
	white-space: nowrap;
}

#scleg_canvasButtonBar button {
	background-color: rgb(155,100,185);
	width: 50px;
	height: 50px;
}
#scleg_canvasButtonBar button:hover {
	background-color: rgb(255,200,285);
}

/* https://fonts.google.com/icons */
#scleg_btnFullScreen { background-image: url('game-images/fullscreen.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
#scleg_btnRestart    { background-image: url('game-images/restart.svg');    background-size: contain; background-repeat: no-repeat; background-position: center; }
#scleg_btnPause      { background-image: url('game-images/pause.svg');      background-size: contain; background-repeat: no-repeat; background-position: center; }

canvas {
	background: #4b0082;
}