/* The Compass (compass.js): brass on its bow, its needle turned by the script. */
.compass { position: relative; display: block; width: 100px; aspect-ratio: 200 / 260; transform-origin: 50% 10%; }
.compass-body { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35)); }
.compass-letter { fill: #3a2a10; font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 700; text-anchor: middle; }
.compass-letter.is-north { fill: #8f1c18; }
/* From the wallet it hangs under the left leaf, on a shorter chain of its own; the watch has the right. */
.wallet-fob.is-compass { right: auto; left: 44px; width: 84px; }
.wallet-desk:has(.wallet-compass) { padding-bottom: 100px; }
.wallet-compass .compass { width: 84px; }

/* On the showcase, and up close. */
.compass-showcase { width: 100px; }
.compass-preview .compass, .showcase-inventory-preview .compass { width: 100%; }
.profile-showcase .compass-preview, .compass-showcase .compass-preview { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; cursor: zoom-in; }
.compass-showcase .compass-preview:hover { transform: none; background: transparent; }
.inspector-object.is-compass { --compass: min(300px, 60vw); border-radius: 40%; }
.inspector-object.is-compass .compass { width: var(--compass); }
.card-page-inspected .card-page-preview .inspector-object.is-compass { --compass: min(260px, 56vw); }
.inspector-object.is-compass .card-inspector-glare { display: none; }