.purchase-map { position: relative; height: max(420px, calc(100dvh - 165px)); min-width: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--tone-d5e0e4, #d5e0e4); background: #0e1626; isolation: isolate; }
.purchase-map .purchase-map-canvas { font-family: inherit; height: 100%; width: 100%; z-index: 0; }
.purchase-map-toolbar { position: absolute; z-index: 500; top: 12px; right: 12px; display: flex; gap: 6px; align-items: center; background: var(--surface, white); padding: 6px 9px; border-radius: 8px; box-shadow: 0 2px 12px #142e3820; max-width: calc(100% - 70px); }
.purchase-map-status { font-size: 13px; color: var(--tone-234951, #234951); }
.purchase-coin-marker { position: absolute; width: 30.82px; height: 30.82px; background: transparent; border: 0; }
.purchase-coin { display: flex; align-items: center; justify-content: center; width: 30.82px; height: 30.82px; box-sizing: border-box; border-radius: 50%; border: 3px solid #c68a16; background: radial-gradient(circle at 30% 25%, #fff5b5, #f5c64c 55%, #d89a21); box-shadow: inset 0 0 0 2px #ffe398, 0 3px 8px #49320755; color: #523609; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; animation: purchase-coin-drop 850ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes purchase-coin-drop { 0% { transform: translateY(-240px) scale(.75) rotate(-35deg); opacity: 0; } 65% { transform: translateY(0) scale(1.08) rotate(7deg); opacity: 1; } 82% { transform: translateY(-14px) scale(.98) rotate(-3deg); } 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .purchase-coin { animation: none; } }
@media (max-width: 640px) { .purchase-map { height: 65dvh; min-height: 380px; } .purchase-map-status { max-width: 150px; } }

.purchase-map .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.purchase-heatmap-legend { position: absolute; top: 12px; left: 12px; z-index: 500; display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 8px; background: var(--surface, white); color: var(--tone-234951, #234951); font-size: 13px; box-shadow: 0 2px 12px #142e3830; }
.purchase-heatmap-legend[hidden] { display: none; }
.purchase-heatmap-scale { width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(to right, #1ea0b4, #3cc86e, #f0dc46, #fa8c23, #dc2d23); }
.purchase-heatmap-legend:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }