.potential {
  color: var(--wa-color-green-70);
}

/* ---- score sheet ---- */
#score tr[id].not-allowed {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---- hold/free hover overlays (SS shape only: Yahtzee is always d6pips) ---- */
.SS span.hold {
  display: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 557 557" height="557" width="557"> <g> <rect fill="red" fill-opacity="0.27" stroke="red" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" width="547" height="547" x="5" y="5" rx="67.690636" /> <text font-size="210px" font-style="normal" font-variant="normal" font-weight="normal" font-stretch="normal" line-height="125%" letter-spacing="0px" word-spacing="0px" fill="red" fill-opacity="1" stroke="none" font-family="sans-serif" > <tspan y="278" x="278" text-anchor="middle" dominant-baseline="central">Hold</tspan> </text> </g> </svg>')
    no-repeat;
  background-size: cover;
}
.SS span.free:hover {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 557 557" height="557" width="557"> <g> <rect fill="green" fill-opacity="0.27" stroke="green" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" width="547" height="547" x="5" y="5" rx="67.690636" /> <text font-size="210px" font-style="normal" font-variant="normal" font-weight="normal" font-stretch="normal" line-height="125%" letter-spacing="0px" word-spacing="0px" fill="green" fill-opacity="1" stroke="none" font-family="sans-serif" > <tspan y="278" x="278" text-anchor="middle" dominant-baseline="central">Hold</tspan> </text> </g> </svg>')
    no-repeat;
  background-size: cover;
}