#content .stone {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    vertical-align: -.15em;
    box-shadow: inset 0 0 0 1px #0003, 0 1px 1px #0004;
}

#content .stone.dark {
    background: radial-gradient(circle at 38% 32%, #986a3f, #6a4326 45%, #35200f);
}

#content .stone.light {
    background: radial-gradient(circle at 38% 32%, #f7e7c6, #e4c592 46%, #bf9a63);
}

#content .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em;
    margin: .6em 0;
}

#content .legend span {
    display: inline-flex;
    align-items: center;
    gap: .45em;
}

#content .ring {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    vertical-align: -.15em;
    flex: none;
}

#content .ring.urgent {
    box-shadow: inset 0 0 0 3px #d4482c;
    background: radial-gradient(circle, #d4482c55 0 30%, transparent 32%);
}

#content .ring.warn {
    box-shadow: inset 0 0 0 2px #e8a13c;
    background: radial-gradient(circle, #e8a13c44 0 26%, transparent 28%);
}

#content .ctl {
    font-weight: 600;
    white-space: nowrap;
}