/* Cahaya Para Nabi - game page fullscreen shell */
#cpn-stage {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 1050;
}

#cpn-stage #canvas {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

#cpn-stage #canvas:focus { outline: none; }

#status, #status-splash, #status-progress {
	position: absolute;
	left: 0;
	right: 0;
}

#status, #status-splash { top: 0; bottom: 0; }

#status {
	background-color: #242424;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	visibility: hidden;
}

#status-splash {
	max-height: 100%;
	max-width: 100%;
	margin: auto;
	height: 100%;
	width: 100%;
	object-fit: contain;
	image-rendering: pixelated;
}

#status-progress, #status-notice { display: none; }

#status-progress {
	bottom: 10%;
	width: 50%;
	margin: 0 auto;
}

#status-notice {
	background-color: #5b3943;
	border-radius: 0.5rem;
	border: 1px solid #9b3943;
	color: #e0e0e0;
	font-family: 'Noto Sans', Arial, sans-serif;
	line-height: 1.3;
	margin: 0 2rem;
	overflow: hidden;
	padding: 1rem;
	text-align: center;
	z-index: 1;
}

#cpn-back {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 20;
	color: #fff4d6;
	background: rgba(13, 13, 20, 0.55);
	border: 1px solid rgba(255, 244, 214, 0.35);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 13px;
	font-family: 'Noto Sans', Arial, sans-serif;
	text-decoration: none;
	opacity: 0.75;
}

#btn-fs {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 20;
	color: #fff4d6;
	background: rgba(13, 13, 20, 0.55);
	border: 1px solid rgba(255, 244, 214, 0.35);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0.75;
}

#cpn-stage.touch-mode #btn-fs {
	right: auto;
	left: 10px;
	top: 52px;
}

#cpn-cloud {
	position: absolute;
	left: 50%;
	top: 10px;
	transform: translateX(-50%);
	z-index: 20;
	color: #fff4d6;
	background: rgba(13, 13, 20, 0.55);
	border: 1px solid rgba(255, 244, 214, 0.35);
	border-radius: 8px;
	padding: 4px 12px;
	font-size: 12px;
	font-family: 'Noto Sans', Arial, sans-serif;
	opacity: 0.85;
	white-space: nowrap;
}

#cpn-cloud:empty { display: none; }

#cpn-cloud a { color: #ffd97a; text-decoration: underline; }

/* touch controls */
#touch-ui {
	display: none;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	font-family: 'Noto Sans', Arial, sans-serif;
	-webkit-user-select: none;
	user-select: none;
}

#cpn-stage.touch-mode #touch-ui { display: block; }

#dpad {
	position: absolute;
	left: 4vw;
	bottom: 5vh;
	width: 34vmin;
	height: 34vmin;
	max-width: 180px;
	max-height: 180px;
	border-radius: 50%;
	background: rgba(255, 244, 214, 0.10);
	border: 2px solid rgba(255, 244, 214, 0.35);
	pointer-events: auto;
	touch-action: none;
}

#dpad-knob {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 38%;
	height: 38%;
	border-radius: 50%;
	background: rgba(255, 244, 214, 0.45);
	transform: translate(-50%, -50%);
}

.tbtn {
	position: absolute;
	width: 15vmin;
	height: 15vmin;
	max-width: 76px;
	max-height: 76px;
	border-radius: 50%;
	background: rgba(255, 244, 214, 0.14);
	border: 2px solid rgba(255, 244, 214, 0.4);
	color: #fff4d6;
	font-size: 4vmin;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	touch-action: none;
}

.tbtn.small {
	width: 11vmin;
	height: 11vmin;
	max-width: 56px;
	max-height: 56px;
	font-size: 3vmin;
	border-radius: 12px;
}

.tbtn.pressed { background: rgba(255, 244, 214, 0.4); }

#btn-act { right: 5vw; bottom: 10vh; }
#btn-ok { right: 22vw; bottom: 5vh; }
#btn-journal { right: 4vw; top: 14vh; }
#btn-codex { right: 4vw; top: 27vh; }
#btn-menu { right: 4vw; top: 2vh; }