Cockatrice/webclient/src/components/Game/StackColumn/StackColumn.css
2026-04-25 14:42:41 -05:00

63 lines
1.4 KiB
CSS

/* Permanent vertical strip between the PlayerInfoPanel and the
Battlefield. Mirrors desktop's territorial framing — rust/brown
background distinguishes it from the battlefield lanes and the
blue-tinted info rail. */
.stack-column {
width: 76px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 4px;
background: #5a2020;
border-right: 1px solid #2a0c0c;
border-left: 1px solid #2a0c0c;
color: #f2d7d7;
font-size: 11px;
overflow: hidden;
}
.stack-column--mirrored {
/* Mirror the card stacking order so the top-of-stack (last-cast) card
sits closest to the battlefield for the opponent half. */
flex-direction: column-reverse;
}
.stack-column__cards {
flex: 1 1 auto;
min-height: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
overflow: hidden;
}
.stack-column--mirrored .stack-column__cards {
flex-direction: column-reverse;
}
.stack-column__thumb {
width: 64px;
height: 88px;
background: #1a0808;
border: 1px solid #2a0c0c;
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.stack-column__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stack-column__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #3a1414 0%, #1a0808 100%);
}