#jappa-app{
width:100%;
max-width:500px;
margin:20px auto;
font-family:system-ui,sans-serif;
user-select:none;
-webkit-user-select:none;
} .jappa-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}
#jappa-label{
font-size:35px;
font-weight:700;
line-height:1;
}
#jappa-clear{
width:48px;
height:48px;
border:none;
border-radius:50%;
background:#eee;
font-size:24px;
cursor:pointer;
} #jappa-canvas-wrapper{
position:relative;
width:100%;
aspect-ratio:1/1;
border:2px solid #da291c;
background:#fff;
overflow:hidden;
overscroll-behavior:none;
touch-action:none;
}
#jappa-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
touch-action:none;
}
#jappa-overlay{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:.55;
display:none;
pointer-events:none;
} #jappa-answer-wrapper{
margin-top:10px;
}
#jappa-answer{
width:100%;
box-sizing:border-box;
padding:14px;
font-size:24px;
text-align:center;
} .jappa-buttons{
display:flex;
margin-top:18px;
}
.jappa-buttons button{
flex:1;
padding:16px;
font-size:18px;
cursor:pointer;
}
#jappa-next{
display:none;
} @media (max-width:900px){
#jappa-app{
max-width:470px;
}
} @media (orientation:landscape) and (max-width:900px){
#jappa-app{
max-width:none;
width:100%;
margin:5px auto;
}
#jappa-canvas-wrapper{
width:min(90vw, 75vh);
height:min(90vw, 75vh);
margin:0 auto;
}
}