body{
margin:0;
background:#ded9cf;
font-family:monospace;
}


/* CANVAS */

.ui-canvas{
position:relative;
width:100vw;
min-height:100vh;
}


/* UI ELEMENTS */

.ui-box{
position:absolute;
}


/* EDIT MODE */

.edit-mode .ui-box{
outline:2px dashed #3b82f6;
cursor:move;
user-select:none;
}


/* SAVE BUTTON */

.save-layout{
position:fixed;
top:20px;
right:20px;
padding:10px 16px;
background:black;
color:white;
border:none;
display:none;
z-index:999;
}

.edit-mode .save-layout{
display:block;
}


/* LOCK BUTTON */

.lock-btn{
position:absolute;
top:-10px;
right:-10px;
background:black;
color:white;
border:none;
width:22px;
height:22px;
font-size:12px;
cursor:pointer;
display:none;
}

.edit-mode .lock-btn{
display:block;
}


/* RESIZE HANDLE */

.resize-handle{
position:absolute;
width:14px;
height:14px;
right:-7px;
bottom:-7px;
background:#3b82f6;
cursor:nwse-resize;
display:none;
}

.edit-mode .resize-handle{
display:block;
}


/* CHARACTER PANEL */

.character-panel{
left:4%;
top:12%;
width:32vw;
max-width:520px;
font-size:18px;
line-height:1.5;
}

.character-name{
font-size:24px;
margin-bottom:8px;
}

.character-stats{
margin-bottom:8px;
}

.character-description{
margin-bottom:14px;
}

.character-buy{
padding:6px 10px;
border:2px solid black;
background:#ded9cf;
cursor:pointer;
}


/* SHOP FRAME */

.shop-frame{
left:38%;
top:18%;
width:900px;
max-width:42vw;
}

.shopborder1{
width:100%;
display:block;
pointer-events:none;
}


/* PRODUCT SAFE ZONE */

.product-zone{
position:absolute;
left:18%;
top:45%;
width:32%;
height:45%;

display:flex;
align-items:center;
justify-content:center;
}

.relic-product{
max-width:100%;
max-height:100%;
object-fit:contain;
}


/* QUESTERS PANEL */

.quester-panel{
right:4%;
top:12%;
width:220px;
border:3px solid black;
padding:12px;
background:#ded9cf;
}

.quester-title{
cursor:pointer;
font-weight:bold;
margin-bottom:6px;
}

.quester{
padding:3px 0;
}


/* NPC */

.npc-dialogue{
right:60px;
bottom:40px;
max-width:260px;
}

.dialogue-bubble{
background:white;
border:3px solid black;
padding:14px;
line-height:1.4;
}



/* ================================= */
/* MOBILE SHOP */
/* ================================= */

.mobile-shop{
display:none;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:#8b0000;
align-items:center;
justify-content:center;
flex-direction:column;
}


/* RELIC FRAME */

.mobile-frame{
position:relative;
width:70vw;
max-width:320px;
}


/* RELIC IMAGE */

.mobile-relic{
width:100%;
height:auto;
object-fit:contain;
}


/* ARROWS */

.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
background:none;
border:none;
color:white;
cursor:pointer;
}

.arrow-left{
left:20px;
}

.arrow-right{
right:20px;
}


/* MOBILE SWITCH */

@media (max-width:900px){

.ui-canvas{
display:none;
}

.mobile-shop{
display:flex;
}

}
@media (max-width: 768px) {

  html, body {
    height: auto !important;
    overflow-y: auto !important;
  }

  .ui-canvas {
    min-height: 120vh; /* gives extra space to scroll */
  }

}