.piece.covered{
  isolation:isolate;
  overflow:hidden;
  color:#d8c08a!important;
  border:2px solid #8f7546;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.08),transparent 22%),
    repeating-radial-gradient(circle at center,transparent 0 8px,rgba(187,154,88,.12) 9px 10px,transparent 11px 14px),
    linear-gradient(145deg,#1b2324 0%,#0d1517 48%,#05090a 100%);
  box-shadow:
    0 6px 12px rgba(0,0,0,.72),
    0 0 0 2px #11191a,
    0 0 0 4px rgba(161,128,66,.62),
    0 0 14px rgba(92,213,220,.16),
    inset 0 0 0 2px rgba(224,195,129,.18),
    inset 0 -9px 14px rgba(0,0,0,.52),
    inset 0 7px 10px rgba(255,255,255,.035);
  text-shadow:0 1px 0 #000,0 0 7px rgba(221,190,118,.25);
  transform-style:preserve-3d;
}
.piece.covered::before{
  content:"";
  position:absolute;
  inset:15%;
  z-index:-1;
  border:1px solid rgba(205,173,103,.58);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 2px rgba(22,31,32,.9),
    0 0 0 1px rgba(232,209,157,.08);
}
.piece.covered::after{
  content:"◆";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:-1;
  color:rgba(199,167,98,.28);
  font:700 .48em/1 serif;
  transform:rotate(45deg);
  text-shadow:none;
}
.piece.covered:hover{
  border-color:#b99a5a;
  filter:brightness(1.08);
  box-shadow:
    0 8px 15px rgba(0,0,0,.78),
    0 0 0 2px #11191a,
    0 0 0 4px rgba(195,158,84,.75),
    0 0 18px rgba(94,222,229,.25),
    inset 0 0 0 2px rgba(235,208,147,.24),
    inset 0 -9px 14px rgba(0,0,0,.52);
}
.piece.covered.selected{
  transform:translateY(-5px) scale(1.03);
  border-color:#e0c173;
  box-shadow:
    0 10px 18px rgba(0,0,0,.82),
    0 0 0 2px #101718,
    0 0 0 5px rgba(227,193,112,.85),
    0 0 24px rgba(73,221,232,.42),
    inset 0 0 0 2px rgba(255,232,178,.32),
    inset 0 -9px 14px rgba(0,0,0,.5);
}
.piece.revealed::before{
  color:#d8c08a;
  border-color:#8f7546;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.08),transparent 22%),
    repeating-radial-gradient(circle at center,transparent 0 8px,rgba(187,154,88,.12) 9px 10px,transparent 11px 14px),
    linear-gradient(145deg,#1b2324 0%,#0d1517 48%,#05090a 100%);
  box-shadow:
    0 6px 12px rgba(0,0,0,.72),
    0 0 0 2px #11191a,
    0 0 0 4px rgba(161,128,66,.62),
    0 0 14px rgba(92,213,220,.16),
    inset 0 0 0 2px rgba(224,195,129,.18),
    inset 0 -9px 14px rgba(0,0,0,.52);
  text-shadow:0 1px 0 #000,0 0 7px rgba(221,190,118,.25);
}

@media(prefers-reduced-motion:reduce){
  .piece.covered:hover,.piece.covered.selected{filter:none}
}