Jared Miller
90c2aca72e
Game div now starts hidden so map screen is the first thing visible. Combat event handlers guard against null state.
89 lines
1.2 KiB
CSS
89 lines
1.2 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#game {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100dvh;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#game[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#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;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
color: white;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#overlay[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#reward-cards {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
}
|
|
|
|
#reward-cards .reward-card {
|
|
width: 120px;
|
|
cursor: pointer;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
#reward-cards .reward-card:hover {
|
|
transform: scale(1.1);
|
|
}
|