#wopu-container {
margin-top: 20px;    
position: relative;
display: none;
z-index: 0;
}
#wopu-palette {
margin: 0 auto;
margin-bottom: 20px;
z-index: 1;
}
#wopu-board {
margin: 0 auto;
z-index: 1;
background-color: #c0c0c0;
box-shadow: 
0 4px 12px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);
}
#wopu-canvas {
position: absolute;
display: block;
margin: 0 auto;
background-color: #ffffff;
}
#wopu-overlay {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 4;
}
.wopu-movable {
position: absolute;
box-sizing: border-box;
display: inline-block;
line-height: 30px;
font-weight: bold;
font-size: 18px;
color: #000;
background-color: rgba(255, 255, 255, 1); border-radius: 4px;
box-shadow: 3px 3px 10px #c0c0c0;
cursor: grab;
z-index: 2;
touch-action: none;
background: linear-gradient(#f6f3e8, #e8e2cf);
box-shadow:
0 2px 4px rgba(0,0,0,0.15),
inset 0 1px 0 rgba(255,255,255,0.7);    
}
.wopu-movable:hover {
transform: scale(0.95);
box-shadow: 0 6px 14px rgba(0,0,0,0.2);
z-index: 3;
}
#wopu-found-words {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
color: #006400;
}
#wopu-found-words li {
margin-bottom: 0px;
line-height: 1.4;
text-transform: capitalize;
}
#wopu-total-score {
font-size: 20px;
font-weight: bold;
color: #000;
margin-top: 10px;
padding-top: 10px;
}
#wopu-score-form, #wopu-share-form {
width: 400px;
margin-top: 20px;
padding: 10px;
border: 1px solid #c0c0c0;
background-color: #f9f9f9;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.08);
z-index: 100;
margin: 0 auto;
}
#wopu-score {
margin: 10px 0;
font-size: 18px; }
#wopu-result-board {
border: 1px solid #c0c0c0;
background-color: #ffffff;
box-shadow: 3px 3px 10px #c0c0c0;
margin: 0 auto;
}
.wopu-highscore-table {
width: auto;
border-collapse: collapse;
margin-top: 20px;
margin: 0 auto;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.08);
}
.wopu-highscore-table th, .wopu-highscore-table td { padding: 1px;
text-align: left;
padding: 6px 10px 0 10px;
}
.wopu-highscore-table th {
background-color: #f0f0f0;
font-weight: normal;
}
.wopu-top-score td {
background-color: #fff8dc;
}
.wopu-highscore-table a {
color: #000;
text-decoration: none !important;
}
.wopu-highscore-table a:hover {
text-decoration: underline !important;
}
#wopu-highscore-image-container {
display: none;
margin-top: 20px;
text-align: center;
margin: 0 auto;
margin-top: 20px;
}
#wopu-highscore-image {
position:relative;
border: 1px solid #c0c0c0;
background-color: #ffffff;
padding:20px;
margin: 0 auto;
}
.wopu-score-entry .wopu-score-place {
text-align: right;
}
#wopu-error-message {
width: 400px;
margin-top: 20px;
padding: 10px;
border: 1px solid #c00000;
background-color: #ffffff;
color: #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.08);
z-index: 100;
margin: 0 auto;
}