.zombie-invasion { position: fixed; z-index: 19; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(290px, 40vw); pointer-events: none; }
.zombie-invasion[hidden], .invasion-alert[hidden] { display: none !important; }
.invasion-route { width: 100%; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: #14180ff2; border: 1px solid #b4ce58; border-left: 4px solid #d8f45b; color: #def593; text-align: left; font: 17px/1.15 'Street Terminal', monospace; pointer-events: auto; cursor: pointer; }
.invasion-route strong, .invasion-route > span > span { display: block; }
.invasion-route > span > span { margin-top: 3px; color: #c4c9a7; font-size: 14px; }
.invasion-route:hover, .invasion-route:focus-visible { background: #2d3520; outline: 2px solid #d8f45b; outline-offset: 2px; }
.invasion-icon { flex: 0 0 25px; height: 29px; }
.invasion-icon svg, .invasion-alert-icon svg { display: block; width: 100%; height: 100%; }
.invasion-alert { position: fixed; z-index: 32; pointer-events: none; top: 23%; left: 50%; transform: translateX(-50%) rotate(-1deg); width: min(590px, 88vw); box-sizing: border-box; display: grid; grid-template-columns: 66px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 22px 28px; border-block: 3px solid #d8f45b; background: linear-gradient(105deg, #11170ffa, #263218ed); color: #d8f45b; font-family: 'Street Terminal', monospace; text-shadow: 3px 3px #080b07; animation: invasion-arrive .2s ease-out; }
.invasion-alert-icon { grid-row: span 2; width: 66px; height: 74px; }
.invasion-alert strong { font-size: clamp(28px, 4.6vw, 48px); line-height: 1; letter-spacing: .04em; }
.invasion-alert > span:last-child { font-size: 25px; color: #e3e4c3; margin-top: 5px; }
.invasion-alert[data-reward="true"] { color: #f6d481; border-color: #f6d481; }
@keyframes invasion-arrive { from { opacity: 0; transform: translateX(-50%) translateY(-12px) rotate(-1deg); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-1deg); } }
@media (max-width: 760px) { .zombie-invasion { top: calc(62px + env(safe-area-inset-top)); width: min(280px, 65vw); } .invasion-route { padding: 6px 8px; font-size: 15px; } .invasion-alert { padding: 17px; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; } .invasion-alert-icon { width: 42px; height: 52px; } .invasion-alert > span:last-child { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .invasion-alert { animation: none; } }