/* CSS style sheet used with Epic Games HTML5 projects
 *
 * much of this is for UE4 development purposes.
 *
 * to create a custom CSS file for your project:
 * - make a copy of this file - or make one from scratch
 * - and put it in: "your project folder"/Build/HTML/GameX.css.template
 */

html, body, .container {
	height: 100%;
	font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	background: rgb(50, 50, 50);
}

.h4, h4 {
	margin-top: 1pt;
	margin-bottom: 1pt;
	font-size: 10pt;
}

.container {
	display: table;
	vertical-align: middle;
	border: 0px;
	border-spacing: 0px;
}

.glyphicon-spin {
	animation: spin 2000ms infinite linear;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

@-webkit-keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

.wrapper {
	position: relative;
	margin: 0 auto 0 auto;
	text-align: center;
	min-width: 320px;
	width: 100%;
	height: 180px; /* initial height, will be dynamically adjusted at runtime */
	max-width: 100%;
	display: block;
	align-items: center;
	position: relative;
	text-align: center;
	justify-content: center;
}

.alert {
	white-space: nowrap;
}

.emscripten {
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-align: center;
	-moz-box-align: center;
	box-align: center;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	box-pack: center;
	
	outline: none;
}

#canvas:not([fullscreen]) {
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.texthalf {
	height: 37%;
	border: 0px;
	padding: 0px;
	overflow-y: scroll;
	font-size: 2em;
}

.buttonarea {
	/*
	position: relative;
	top: -50px;
	*/
	border-top: 0px;
	border-bottom: 0px;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	min-height: 35px;
}

.btn-primary { padding: 3px; text-align: center; min-width: 150px; max-height: 25px; margin: 10px 5px 10px 5px; }
.progress { background: rgba(245, 245, 245, 1); border: 0px solid rgba(245, 245, 245, 1); border-radius: 0px; height: 4px; }
.progress-bar-custom { background: rgba(153, 153, 153, 1); }
.centered-axis-xy {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

/* these styles convert the "blue buttons" into transparent buttons which are more subtle and less distracting */
/*
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: transparent;
	border-color: transparent;
	outline: none;
}
.btn-primary {
	color: rgba(200, 200, 200, 200);
}
.btn-primary:hover {
	color: rgba(235, 235, 235, 200);
}
.btn-primary:focus {
	color: rgba(225, 225, 225, 200);
}
.btn-primary:active {
	color: rgba(250, 250, 250, 200);
	outline: none !important;
	box-shadow: none;
}
*/

/** these styles hide the text on each button, leaving just the icon */
/*
.btn-primary .buttontext {
	display: none;
}
.btn-primary {
	min-width: 30px;
	margin-left: 30px;
	margin-right: 30px;
}
*/
/* Bootstrap CSS is at package root, so its ../fonts URLs point outside the package.
   Override only the font source using the existing packaged font files. */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('fonts/glyphicons-halflings-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
#klick3d-loader {
  --k3-bg: #14001f; --k3-text: #fff; --k3-accent: #b89a5a;
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: clamp(20px, 5vw, 72px);
  background: var(--k3-bg); color: var(--k3-text);
  background-size: cover; background-position: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: auto; transition: opacity .3s ease;
}
#klick3d-loader[hidden] { display: none; }
#klick3d-loader .k3-card {
  width: min(100%, 540px); padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--k3-accent); border-radius: 18px;
  background: rgba(20, 0, 31, .92); box-shadow: 0 20px 70px #0006;
}
#klick3d-loader .k3-brand { color: var(--k3-accent); letter-spacing: .24em; font-weight: 700; font-size: 14px; }
#klick3d-loader h1 { font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 22px 0 26px; }
#klick3d-loader p { line-height: 1.6; margin: 12px 0; }
#klick3d-loader progress { width: 100%; height: 7px; accent-color: var(--k3-accent); }
#klick3d-loader .k3-detail { opacity: .8; font-size: 12px; overflow-wrap: anywhere; }
#klick3d-loader img { max-width: 180px; max-height: 80px; margin-bottom: 24px; }
#klick3d-loader.k3-leaving { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #klick3d-loader { transition: none; } }

#klick3d-loader { font-family: var(--k3-font, sans-serif); }
#klick3d-loader[data-panel-position="bottom-left"] { place-items: end start; }
#klick3d-loader[data-panel-position="bottom-center"] { place-items: end center; padding-bottom: 5vh; }
#klick3d-loader .k3-card {
  width: min(100%, var(--k3-panel-width, 540px));
  padding: min(5vw, var(--k3-panel-padding, 40px));
  border-radius: var(--k3-radius, 18px);
  background: rgba(var(--k3-panel-rgb, 20, 0, 31), var(--k3-panel-opacity, .85));
  border-color: var(--k3-panel-border, #B89A5A);
}
#klick3d-loader h1 { font-size: clamp(22px, 4vw, var(--k3-title-size, 32px)); }
#klick3d-loader .k3-subtitle, #klick3d-loader .k3-explanation { color: var(--k3-muted, #e6e2da); }
#klick3d-loader .k3-explanation { font-size: 12px; margin-top: 24px; }
#klick3d-loader [hidden] { display: none !important; }
#klick3d-loader[data-panel-style="compact"] { padding-left: 16px; padding-right: 16px; }
#klick3d-loader[data-panel-style="compact"] .k3-card {
  width: min(100%, var(--k3-panel-width, 50vw), var(--k3-panel-max-width, 600px));
  padding: var(--k3-panel-padding, 16px); border-width: 1px; box-shadow: none;
}
#klick3d-loader[data-panel-style="compact"] .k3-brand { font-size: 10px; letter-spacing: .18em; }
#klick3d-loader[data-panel-style="compact"] h1 { font-size: var(--k3-title-size, 20px); line-height: 1.25; margin: 7px 0 8px; }
#klick3d-loader[data-panel-style="compact"] p { margin: 5px 0; font-size: 12px; line-height: 1.35; }
#klick3d-loader[data-panel-style="compact"] progress { display:block; height:4px; margin:8px 0 6px; accent-color:var(--k3-panel-accent, #B89A5A); }
#klick3d-loader[data-panel-style="compact"] progress { appearance:none; border:0; border-radius:2px; background:#ffffff26; }
#klick3d-loader[data-panel-style="compact"] progress::-webkit-progress-bar { background:#ffffff26; border-radius:2px; }
#klick3d-loader[data-panel-style="compact"] progress::-webkit-progress-value { background:var(--k3-panel-accent, #B89A5A); border-radius:2px; }
#klick3d-loader[data-panel-style="compact"] progress::-moz-progress-bar { background:var(--k3-panel-accent, #B89A5A); border-radius:2px; }
#klick3d-loader[data-panel-style="compact"] .k3-detail { color:var(--k3-muted, #E6E2DA); opacity:1; font-size:10px; }
@media (max-width:900px) {
  #klick3d-loader[data-panel-style="compact"] .k3-card { width:min(90vw, 100%, var(--k3-panel-max-width, 600px)); }
}

.k3-stage { position: relative; }
.k3-stage #buttonarea.k3-controls {
  position: absolute; top: 12px; left: 0; right: 0; width: auto;
  display: flex; justify-content: center; align-items: flex-start; gap: 7px;
  height: 0; min-height: 0; margin: 0; padding: 0 12px;
  z-index: 100; pointer-events: none;
}
.k3-stage #buttonarea[data-position="top-right"] { justify-content: flex-end; }
.k3-stage #buttonarea[data-position="top-left"] { justify-content: flex-start; }
.k3-stage #buttonarea[data-position="bottom-center"] { top: auto; bottom: 52px; }
.k3-stage .k3-controls .btn {
  pointer-events: auto; min-width: 0; max-height: none; margin: 0; padding: 8px 11px;
  font: 12px/1.25 system-ui, sans-serif; border-radius: 7px;
  background: rgba(20, 0, 31, .8); border: 1px solid var(--k3-toolbar-accent, #b89a5a);
  color: var(--k3-toolbar-text, #e6e2da); box-shadow: 0 2px 9px #0004;
}
.k3-stage .k3-controls[data-appearance="neutral"] .btn { background: #242424d9; border-color: #aaa8; color: white; }
.k3-stage .k3-controls .btn:hover { background: #3c2347; }
.k3-stage .k3-controls .btn:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.k3-stage .k3-controls[hidden], #buttonarea[hidden] { display: none !important; }
.k3-stage:fullscreen {
  width: 100vw !important; height: 100vh !important; max-width: none;
  background: #14001f; display: flex; justify-content: center; align-items: center;
}
.k3-stage:fullscreen #canvas { flex: none; margin: auto; }
/* Keep the existing canvas render/display dimensions together in fullscreen.
   No CSS stretching or replacement backbuffer sizing system is introduced. */
#k3-toolbar-status { position: absolute; left: 12px; bottom: 12px; z-index: 101; color: white; background: #14001fee; padding: 10px; max-width: calc(100% - 24px); }
#k3-toolbar-status[hidden] { display: none; }
@media (max-width: 640px) { .k3-stage .k3-controls .btn { font-size: 11px; padding: 7px 9px; } }

#klick3d-loader #k3-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--k3-video-opacity, 1); pointer-events:none; }
#klick3d-loader .k3-card { position:relative; z-index:1; }