61 lines
931 B
CSS
61 lines
931 B
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
#game {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100dvh;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#enemy-zone {
|
|
flex: 4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#info-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 8px;
|
|
border-top: 1px solid #ccc;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
#hand {
|
|
flex: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#hand .card {
|
|
width: 80px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
#hand .card.selected {
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
#hand .card.no-energy {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#overlay[hidden] { display: none; }
|