/* BIDROOM — Room Key artwork.
   The Cyber Entities art is dark by nature, so every surface it lands on is
   dark. Square, no rounding, no filters — the loop is shown as authored. */

.key-art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #07070a;
  border-radius: 0;
}

/* the frame a key sits in — always dark, never paper */
.key-frame {
  background: #07070a;
  border: 1px solid #050505;
  position: relative;
  overflow: hidden;
}
.key-frame.is-parked::after {
  content: "PARKED";
  position: absolute; left: 0; bottom: 0;
  background: #f2f1ed; color: #050505;
  font: 600 8.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em; padding: 5px 7px;
}

/* small thumbnails (parked lists, wallet rows) */
.key-art.thumb { width: 46px; height: 46px; flex: none; }
.key-art.thumb-lg { width: 74px; height: 74px; flex: none; }

/* trait chips read off the token metadata */
.key-traits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.key-trait {
  font: 500 9px/1 "IBM Plex Mono", monospace; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 6px;
  border: 1px solid rgba(242, 241, 237, 0.28); color: rgba(242, 241, 237, 0.72);
  display: inline-flex; gap: 5px;
}
.key-trait b { color: rgba(242, 241, 237, 0.42); font-weight: 500; }
/* on a paper surface, flip the chip contrast */
.on-paper .key-trait { border-color: rgba(5, 5, 5, 0.22); color: #26251f; }
.on-paper .key-trait b { color: #78736a; }

/* the park modal is a light card — give the art its own dark plate */
.pk-keyart {
  width: 92px; height: 92px; margin: 0 auto 14px;
  background: #07070a; overflow: hidden;
}
.pk-keyart .key-art { width: 100%; height: 100%; }