.hero {
  overflow: clip;
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"%3E%3Cpath fill="none" stroke="%23060f08" stroke-width="4" stroke-linecap="round" d="M16 3v8m0 10v8M3 16h8m10 0h8"/%3E%3Cpath fill="none" stroke="%239cff69" stroke-width="1.7" stroke-linecap="round" d="M16 3v8m0 10v8M3 16h8m10 0h8"/%3E%3Ccircle cx="16" cy="16" r="1.25" fill="%23deffbc"/%3E%3C/svg%3E') 16 16, crosshair;
  touch-action: manipulation;
}

.hero :is(a, button) { cursor: pointer; }
.hero:focus-visible { outline: 1px solid #bcff7f; outline-offset: -2px; }
.field-mark .range-hint { margin-top: 4px; color: #d7ffae; }
.touch-hint { display: none; }

.keyboard-aim {
  position: absolute;
  z-index: 5;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  color: #a6ff72;
  filter: drop-shadow(0 0 2px #14360d);
  pointer-events: none;
}

.weapon-name,
.weapon-next {
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.weapon-name { color: #dcffc2; font-weight: 900; letter-spacing: .1em; }
.weapon-next { color: #a6c690; font-size: 7px; letter-spacing: .12em; }

.weapon-callout {
  position: absolute;
  z-index: 2;
  left: calc(50% + 76px);
  bottom: calc(100% + 27px);
  display: grid;
  gap: 4px;
  width: max-content;
  padding: 10px 14px;
  border: 1px solid #affc75a1;
  border-radius: 11px 11px 11px 0;
  color: #e9ffcf;
  background: linear-gradient(151deg, #2b5127ee, #0b160eed 68%);
  box-shadow: 0 0 21px #96fa4b47, 0 4px 16px #060e06;
  pointer-events: none;
  animation: upgrade-callout .23s ease-out both;
}

.weapon-callout > span,
.weapon-callout > small { color: #c2ff8e; font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.weapon-callout > strong { font-size: 13px; text-shadow: 0 0 10px #7dff40aa; }

@keyframes upgrade-callout {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.damage-glass { position: absolute; z-index: 7; inset: 0; overflow: hidden; pointer-events: none; }
.damage-fracture {
  position: absolute;
  width: min(91vw, 860px);
  aspect-ratio: 760 / 580;
  transform: translate(-50%, -50%);
  animation: glass-fracture 10.5s ease-out both;
}
.damage-fracture svg { display: block; width: 100%; height: 100%; overflow: visible; }
.damage-fracture path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crack-web { stroke: #c9f1ca8c; stroke-width: 1.35; filter: drop-shadow(1px 1px 0 #05110a) drop-shadow(0 0 2px #daffae3c); }
.crack-core { stroke: #e3ffdbd7; stroke-width: 1.9; filter: drop-shadow(0 0 3px #91d97d7a); }

@keyframes glass-fracture {
  0% { opacity: 1; }
  8%, 78% { opacity: .81; }
  100% { opacity: 0; }
}

@media (max-width: 650px) and (orientation: portrait) {
  .weapon-callout { left: auto; right: 0; bottom: calc(100% + 96px); border-radius: 11px 11px 0 11px; }
  .weapon-name { font-size: 7px; }
  .weapon-next { font-size: 6px; }
}

@media (hover: none) {
  .mouse-hint { display: none; }
  .touch-hint { display: inline; }
}