pico.chat/hanabi.css

.hanabi {
    padding-top: 3em;
    grid-area: media;
    margin: 0 auto;
    width: 40vh;
}
.stacks {
    display: grid;
    background-color: forestgreen;
    padding: 1px;
    grid-gap: 1px;
    grid-template-columns: repeat(var(--ncols), 1fr);
    height: 40vh;
}
.col:before {
    position: relative;
}
.stack:after {
    content: attr(owner);
    position: absolute;
    top: 0;
    left: 0;
}
.stack {
    position: relative;
    height: 100%;
    background-color: #eee;
}
.own .stack {
    background-color: #aaa;
}
.rival .stack {
    background-color: #ccc;
}
.hand {
    position: absolute;
}
.stack .actions {
    display: none;
}
.stack:hover .actions {
    position: absolute;
    display: block;
    top: 100%;
    z-index: 999;
}
.card {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: 1px solid black;
    background-color: #555;
}
.card:after {
    content: attr(value);
}
.card.red {
    background-color: crimson;
}
.card.green {
    background-color: forestgreen;
}
.card.blue {
    background-color: royalblue;
}
.card.yellow {
    background-color: gold;
}
.card.white {
    background-color: ivory;
}
.col:not(.rival) .card:not(.face-up), .own .card {
    color: transparent;
    background-color: #555;
}
.counter {
    font-family: monospace;
}