:root {
	--spmsg-bgc: rgba(255,255,255,0.8);
	--spmsg-text: #000;
}

body { background-image: linear-gradient(180deg,#000,#042d59); background-size:100% 100dvh; background-repeat:no-repeat; background-color:#042d59; }

.mainbox { min-height:70vh; padding-bottom:20px; color:#DDD; }

h1 { margin:5px 0 15px 0; padding:0; text-align:center; }

.spmsg { box-sizing:border-box; width:96%; max-width:840px; margin:20px auto; padding:20px 8px; border-radius:20px; background-color:var(--spmsg-bgc); text-align:center; font-size:18pt; color:var(--spmsg-text); }
.spmsg.xpadv { padding:50px 8px; }
.spmsg p { margin:15px 0 0 0; padding:0; font-size:14pt; }
.spmsg .xapp { display:inline-block; box-sizing:border-box; width:45%; max-width:400px; margin:20px 2% 0 2%; padding:10px; border-radius:15px; background-color:#FFF; font-size:16pt; font-weight:bold; color:#444; }
.spmsg .xapp .xqr { display:block; box-sizing:border-box; width:100%; margin:10px 0 0 0; }

#camcover { box-sizing:border-box; width:96%; max-width:600px; margin:10px auto; padding:0; }
#cambox { position:relative; box-sizing:border-box; width:100%; max-width:80vh; aspect-ratio:1; border-radius:20px; background-color:#444; overflow:hidden; }
#cambox .xfbox { position:absolute; left:40%; top:40%; box-sizing:border-box; width:20%; height:20%; 
	box-shadow: 0 0 0 600px rgba(0, 0, 0, 0.25);
	--c: #FFF;
	--w:4px;
	--l:18px;
	background:
	linear-gradient(var(--c) 0 0) top left / var(--l) var(--w) no-repeat,
	linear-gradient(var(--c) 0 0) top left / var(--w) var(--l) no-repeat,
	linear-gradient(var(--c) 0 0) top right / var(--l) var(--w) no-repeat,
	linear-gradient(var(--c) 0 0) top right / var(--w) var(--l) no-repeat,
	linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--w) no-repeat,
	linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--l) no-repeat,
	linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w) no-repeat,
	linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l) no-repeat;
}
#cambox .xflabel { position:absolute; left:2%; top:62%; box-sizing:border-box; width:96%; text-align:center; font-size:12pt; color:#FFF; text-shadow:0 0 4px #000; }
#cambox .xtorchbt { position:absolute; left:50%; bottom:2%; height:60px; margin:0 0 0 -30px; opacity:0.4; cursor:pointer; }
#cambox .xtorchbt.active { opacity:1; }
#cambox .xchklabel { position:absolute; left:0; top:50%; box-sizing:border-box; width:100%; margin:-20px 0 0 0; padding:5px 0; background:linear-gradient(90deg,transparent,#000,transparent); text-align:center; font-size:20pt; line-height:30px; font-weight:bold; color:#0F0; text-shadow:0 0 6px #000; }
#camvideo { width:100%; height:100%; object-fit:cover; }

.spapp { display:block; box-sizing:border-box; width:96%; max-width:600px; margin:10px auto 20px auto; padding:6px; border-radius:20px; box-shadow:0 0 3px #000; background-color:var(--spmsg-bgc); text-align:left; color:var(--spmsg-text); white-space:nowrap; animation:spapp_ani 1s; }
.spapp img { display:inline-block; box-sizing:border-box; width:72px; height:72px; border-radius:18px; vertical-align:middle; }
.spapp .xlabel { display:inline-block; box-sizing:border-box; width:calc(100% - 72px); padding:0 0 0 8px; vertical-align:middle; white-space:normal; font-size:14pt;}

@keyframes camvideo_ani {
	from { opacity:0; }
	to { opacity:1; }
}
@keyframes fbox_ani {
	0% { transform: scale(0.2); opacity:0; }
	80% { transform: scale(1.15); opacity:1; }
	100% { transform: scale(1); opacity:1; }
}
@keyframes flabel_ani {
	0% { opacity:0; }
	30% { opacity:0; }
	100% { opacity:1; }
}
@keyframes chklabel_ani {
	0% { transform:scaleY(0); opacity:0; }
	100% { transform:scaleY(1); opacity:1; }
}
@keyframes spmsg_ani1 {
	0% { background-color:var(--spmsg-bgc); }
	50% { background-color:#FF0; }
	100% { background-color:var(--spmsg-bgc); }
}
@keyframes spmsg_ani2 {
	0% { background-color:var(--spmsg-bgc); }
	50% { background-color:#0F0; }
	100% { background-color:var(--spmsg-bgc); }
}
@keyframes spapp_ani {
	0% { transform:translateY(40px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}

#btn-torch { background-color:#444; color:#bbb; }
#btn-torch:disabled { background-color:#666; color:#aaa; }
#btn-torch.active { background-color:#040; color:#0d0; }

@media (max-width:700px) {
	.spmsg .xapp { display:block; box-sizing:border-box; width:96%; margin:20px auto 0 auto; padding:10px; border-radius:15px; background-color:#FFF; font-size:16pt; font-weight:bold; color:#444; }
}