:root {
  --relief: #d8d8d2;
  --grund: #4f625b;
  --rand: #45494a;
}

* { box-sizing: border-box; }
 .shield-stage { font-family: 'Open Sans', sans-serif; font-size: 20px; color: #fff; }
.shield-stage { position: relative; width: min(100vw, 2250px); margin: 0 auto; overflow: hidden; line-height: 0; background: #ead996; }
.shield-stage img { display: block; width: 100%; height: auto; }
.search-box { position: absolute; z-index: 6; top: 18px; left: 18px; display: grid; gap: 4px; width: min(300px, calc(100% - 36px)); font: 20px/1.2 'Open Sans', sans-serif; color: #fff; }
.search-toggle { position: relative; width: 42px; height: 42px; border: 1px solid #fff; border-radius: 50%; background: #0460a4; cursor: pointer; }
.search-toggle::before { content: ''; position: absolute; top: 10px; left: 10px; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; }
.search-toggle::after { content: ''; position: absolute; top: 24px; left: 25px; width: 9px; height: 2px; background: #fff; transform: rotate(45deg); transform-origin: left center; }
.search-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.search-box input { width: 100%; border: 1px solid #fff; border-radius: 0; padding: 8px 10px; background: #fff; color: #000; font: 20px/1.2 'Open Sans', sans-serif; }
.search-box input { display: none; }
.search-box.is-open input { display: block; }
.search-box input::placeholder { color: #000; opacity: .7; }
.search-box input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.search-box input:focus { outline: none; }
#search-status { min-height: 24px; font-size: 14px; }
.nail-layer { position: absolute; inset: 0; pointer-events: none; }
.nail { position: absolute; width: clamp(5px, .28vw, 7px); aspect-ratio: 1; border: 1px solid rgba(35, 25, 18, .7); border-radius: 50%; box-shadow: inset 1px 1px 1px rgba(255,255,255,.55), 0 1px 2px rgba(30, 15, 5, .75); pointer-events: auto; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%230460a4' stroke='white'/%3E%3Ctext x='9' y='14' text-anchor='middle' font-family='Arial' font-size='13' font-weight='bold' fill='white'%3Ei%3C/text%3E%3C/svg%3E") 9 9, pointer; transform: translate(-50%, -50%) scale(0); animation: set-nail .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--delay); padding: 0; }
.nail.RE { background: var(--relief); }.nail.SG { background: var(--grund); }.nail.SR { background: var(--rand); }
.nail:hover, .nail:focus-visible { z-index: 3; outline: 1px solid #fff; outline-offset: 1px; animation: none; transform: translate(-50%, -50%) scale(3); }
.nail.is-dimmed { opacity: .12; }
.nail.is-match { z-index: 4; animation: none; transform: translate(-50%, -50%) scale(4); }
.nail-label { position: absolute; z-index: 4; display: none; padding: 3px 6px; background: #0460a4; color: #fff; font: 20px/1.2 'Open Sans', sans-serif; white-space: nowrap; transform: translate(8px, -115%); pointer-events: none; }
.nail-label.is-visible { display: block; }
@keyframes set-nail { to { transform: translate(-50%, -50%) scale(1); } }
.hover-card { position: absolute; z-index: 5; display: none; min-width: 120px; padding: 7px 9px; background: #0460a4; color: #fff; font: 20px/1.2 'Open Sans', sans-serif; pointer-events: none; transform: translate(8px, -125%); }
.hover-card.is-visible { display: block; }