@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');


*{
box-sizing:border-box;
}


body{

margin:0;

background:#f5f5f3;

font-family:Inter,sans-serif;

color:#111;

overflow:hidden;

}



/* LOADING */


#loading{

position:fixed;

inset:0;

background:#111;

color:white;

display:flex;

justify-content:center;

align-items:center;

z-index:100;

transition:1.2s cubic-bezier(.77,0,.18,1);

}



#loading.hide{

transform:translateY(-100%);

}



.loading-content{

text-align:center;

}



.loading-content h1{

font-size:72px;

line-height:.95;

letter-spacing:-3px;

margin:25px 0;

}



.loading-content p{

opacity:.6;

}



.loading-content span{

font-size:24px;

}



.loading-line{

height:2px;

width:150px;

background:white;

margin:40px auto;

animation:load 2s infinite;

}



@keyframes load{

from{

transform:scaleX(.2);

}

to{

transform:scaleX(1);

}

}





/* EDITOR */


#editor{

min-height:100vh;

padding:40px;

display:flex;

flex-direction:column;

align-items:center;

transform:translateY(100%);

transition:1.2s cubic-bezier(.77,0,.18,1);

}



#editor.show{

transform:translateY(0);

}



header{

text-align:center;

}



header h1{

font-size:42px;

margin:0;

}



header p{

color:#777;

}





.workspace{

width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:35px;

margin-top:30px;

}





/* BOUQUET */


.bouquet-box{

width:560px;

height:650px;

position:relative;

overflow:hidden;

}



#bushBack,
#bushFront{

position:absolute;

width:430px;

left:50%;

bottom:0;

transform:translateX(-50%);

}



#bushBack{

z-index:1;

}



#flowerLayer{

position:absolute;

width:100%;

height:100%;

z-index:2;

}



#bushFront{

z-index:100;

pointer-events:none;

}





/* FLOWER */


.flower-object{

position:absolute;

width:120px;

height:120px;

cursor:move;

touch-action:none;

}



.flower-object img{

width:100%;

height:100%;

object-fit:contain;

pointer-events:none;

}





/* PANEL */


.side-panel{

display:flex;

gap:12px;

}



.bush-control{

display:flex;

flex-direction:column;

gap:10px;

}



.bush-btn{

width:42px;

height:42px;

border-radius:50%;

border:1px solid #ddd;

background:white;

cursor:pointer;

}



.bush-btn.active{

background:#111;

color:white;

}





.flower-panel{

width:290px;

height:620px;

background:white;

border-radius:25px;

padding:20px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

overflow:auto;

-webkit-overflow-scrolling:touch;

touch-action:pan-x;

}


.flower-item{

touch-action:pan-x;

user-select:none;

-webkit-user-select:none;

}


.flower-item{

background:#f7f7f7;

border-radius:18px;

padding:12px;

text-align:center;

cursor:grab;

}



.flower-item img{

width:70px;

height:70px;

object-fit:contain;

}



.flower-item span{

font-size:12px;

}






/* CURSOR */


#cursorComment{

position:fixed;

z-index:200;

background:rgba(0,0,0,.7);

color:white;

padding:10px 15px;

border-radius:12px;

font-size:13px;

pointer-events:none;

display:none;

}






/* FINISH */


#finishButton{

margin-top:25px;

padding:15px 40px;

border:none;

border-radius:50px;

background:#111;

color:white;

cursor:pointer;

}






/* RESULT */


#resultScreen{

position:fixed;

inset:0;

background:#f5f5f3;

display:none;

flex-direction:column;

align-items:center;

justify-content:center;

z-index:300;

}



#resultImage{

width:420px;

max-width:80vw;

}



.result-buttons{

display:flex;

gap:15px;

margin-top:25px;

}



.result-buttons button{

padding:14px 30px;

border-radius:40px;

border:1px solid #ddd;

background:white;

}







/* CAMERA */


#cameraScreen{

position:fixed;

inset:0;

width:100vw;

height:100dvh;

background:#000;

display:none;

overflow:hidden;

z-index:99999;

}



#cameraVideo{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

transform:scaleX(-1);

z-index:1;

}




#cameraTitle{

position:absolute;

top:20px;

left:50%;

transform:translateX(-50%);

width:100%;

margin:0;

padding:0;

color:#fff;

font-size:clamp(56px,12vw,110px);

font-weight:700;

line-height:.95;

letter-spacing:-3px;

text-align:center;

background:transparent;

pointer-events:none;

z-index:20;

}




#cameraBouquet{

position:absolute;

width:300px;

max-width:70vw;

top:50%;

left:50%;

transform:translate(-50%,-50%);

z-index:10;

touch-action:none;

}





.camera-controls{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:20;

}





#captureButton{

width:78px;

height:78px;

border-radius:50%;

border:5px solid white;

background:transparent;

padding:0;

font-size:0;

cursor:pointer;

}





#closeCamera{

position:absolute;

top:30px;

left:30px;

width:45px;

height:45px;

border-radius:50%;

border:1px solid rgba(255,255,255,.7);

background:rgba(0,0,0,.25);

color:white;

font-size:24px;

display:flex;

align-items:center;

justify-content:center;

backdrop-filter:blur(10px);

z-index:30;

}



#captureCanvas{

display:none;

}





@media(max-width:1000px){

body{

overflow:hidden;

}



#editor{

padding:20px;

height:100vh;

overflow:auto;

}



header h1{

font-size:30px;

}



header p{

font-size:14px;

}



.workspace{

flex-direction:column;

gap:15px;

margin-top:15px;

}



/* BOUQUET MOBILE */


.bouquet-box{

width:90vw;

height:90vw;

max-height:500px;

}



#bushBack,
#bushFront{

width:75vw;

}



.flower-object{

width:90px;

height:90px;

}





/* PANEL MOBILE */


.side-panel{

width:100%;

flex-direction:column;

align-items:center;

}



.bush-control{

flex-direction:row;

justify-content:center;

}



.bush-btn{

width:36px;

height:36px;

font-size:12px;

}





.flower-panel{

width:100%;

height:130px;

display:flex;

gap:10px;

padding:15px;

overflow-x:auto;

overflow-y:hidden;

border-radius:20px;

}



.flower-item{

min-width:90px;

height:100px;

padding:10px;

}



.flower-item img{

width:55px;

height:55px;

}



.flower-item span{

font-size:11px;

}




#finishButton{

width:90%;

margin-bottom:30px;

}





/* RESULT MOBILE */


#resultScreen h1{

font-size:28px;

text-align:center;

}



#resultImage{

width:80vw;

}




.result-buttons{

flex-direction:column;

width:80%;

}



.result-buttons button{

width:100%;

}





/* CAMERA MOBILE */


/* CAMERA TITLE OVERLAY */

#cameraTitle{

position:absolute;

top:-35px;

left:50%;

transform:translateX(-50%);

width:120%;

margin:0;

padding:0;

font-size:clamp(55px,12vw,120px);

font-weight:600;

line-height:.8;

letter-spacing:-5px;

text-align:center;

color:white;

background:transparent!important;

z-index:20;

pointer-events:none;

text-shadow:none;

}



#cameraBouquet{

width:65vw;

}



#closeCamera{

top:20px;

left:20px;

width:42px;

height:42px;

}



#captureButton{

width:70px;

height:70px;

}



.camera-controls{

bottom:25px;

}


}

@media(max-width:1000px){

#cameraTitle{

top:10px;

font-size:52px;

line-height:.85;

letter-spacing:-3px;

width:150%;

}

}