.material-interaction { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.material-map { position: absolute; inset: 0; width: 896px; height: 675px; overflow: visible; pointer-events: none; }
/* Three soft surface highlights; original image alpha isolates the 1000% toy. */
.large-toy-map { overflow: visible; }
.material-zone { cursor: none; outline: none; }
.material-surface { fill: #fff; stroke: none; pointer-events: none; opacity: .03; animation: material-surface-breathe 3.2s ease-in-out infinite; }
.material-hit { fill: transparent; stroke: none; pointer-events: all; }
.material-surface.material-hit { fill: #fff; }
.material-zone[data-material="visor"] .material-surface { animation-delay: .6s; }
.material-zone[data-material="metal"] .material-surface { animation-delay: 1.2s; }
.material-interaction.is-inspecting .material-surface { animation-play-state: paused; opacity: 0 !important; }
@keyframes material-surface-breathe { 0%,100% { opacity: .02; } 45%,60% { opacity: .27; } }
.material-tooltip { position: absolute; left: 0; top: 0; width: 129px; height: 161px; padding: 0; color: #fff; pointer-events: none; font-family: "Map Sans",sans-serif; z-index: 2; isolation: isolate; will-change: transform; }
.material-tooltip[hidden],.material-cursor[hidden] { display: none; }
.material-swatch { position: relative; width: 129px; height: 125px; border: 1px solid #6a738f; border-radius: 8px; flex: none; overflow: hidden; }
.material-sample { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.material-card[data-kind="metal"] .material-swatch { width: 127px; height: 122px; }
.material-card[data-kind="metal"] .material-sample { object-fit: fill; object-position: bottom; }
.material-details { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 23px; flex: none; }
.material-name,.material-color { display: block; margin: 0; font: 700 12px/14.4px "Map Sans",sans-serif; color: #fff; white-space: nowrap; }
.material-cursor { position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 1px solid #fff; border-radius: 50%; background: #ffffff22; box-shadow: 0 0 0 1px #03030355; pointer-events: none; z-index: 3; will-change: transform; }
.material-source { width: 928px; margin: 8px auto 0; color: #777; font-size: 11px; line-height: 20px; }
.material-source a { text-decoration: underline; text-underline-offset: 3px; }
@media(prefers-reduced-motion:reduce) { .material-surface { animation: none; opacity: .16; } }




/* Keep all decoded assets mounted; crossfade image and text together without a blank frame. */
.material-card { position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; width: 129px; opacity: 0; transition: opacity 180ms ease-in-out; pointer-events: none; }
.material-card[data-kind="metal"] { width: 127px; }
.material-card.is-active { opacity: 1; }
.material-tooltip.is-initial .material-card { transition: none; }
@media(prefers-reduced-motion:reduce) { .material-card { transition: none; } }