/*
 * TEMPORARY VOTING-MACHINE EASTER EGG
 * To remove it, delete this file and the two marked includes in locations.html.
 */
.travel-icon[role="button"] { cursor: pointer; }
.travel-icon[role="button"]:focus-visible { outline: 3px solid rgba(20,120,162,.45); outline-offset: 3px; }
.travel-icon.vote-switch-pressed { box-shadow: 0 0 0 3px #1478a2, 0 0 18px rgba(20,120,162,.5); transform: scale(.92); }

.vote-hack-effects { position: fixed; inset: 0; z-index: 9997; overflow: hidden; pointer-events: none; }
.vote-party-panes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); opacity: .18; }
.vote-party-panes span { animation: vote-pane-party 2.8s ease-in-out infinite; }
.vote-party-panes span:nth-child(2n) { animation-delay: -.9s; }
.vote-party-panes span:nth-child(3n) { animation-delay: -1.8s; }
.vote-paper-rain { position: absolute; inset: 0; }
.vote-paper {
    position: absolute;
    top: -70px;
    left: var(--x);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    width: 54px;
    height: 31px;
    padding: 4px 5px;
    border: 2px solid #3d2c1f;
    border-radius: 3px;
    background: #faf7f2;
    color: #3d2c1f;
    box-shadow: 2px 3px 0 rgba(61,44,31,.25);
    font-family: var(--font-body);
    animation: vote-paper-fall var(--duration) linear var(--delay) infinite;
}
.vote-paper b { font-size: 8px; letter-spacing: .08em; }
.vote-paper i { display: grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; font-size: 11px; font-style: normal; }

.vote-machine-party .town-map-frame,
.vote-machine-party .route-map { transform: rotate(180deg); transition: transform .8s cubic-bezier(.2,.8,.2,1); }

.vote-hack-message {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: min(90vw, 900px);
    padding: clamp(1rem, 3vw, 2rem);
    border: 2px solid rgba(255,255,255,.78);
    border-radius: 18px;
    background: rgba(8,17,22,.86);
    color: #fff;
    font: 800 clamp(2.2rem, 8vw, 6.5rem)/.92 var(--font-display);
    letter-spacing: -.045em;
    text-align: center;
    box-shadow: 0 18px 55px rgba(0,0,0,.62), inset 0 0 30px rgba(255,255,255,.06);
    -webkit-text-stroke: 1px rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    pointer-events: none;
    transform-style: preserve-3d;
}
.vote-hack-message--hacked {
    text-shadow: 3px 3px 0 #1478a2, 6px 6px 0 #073e68, 0 10px 28px #000;
    animation: vote-hacked-text 3s ease-in-out forwards;
}
.vote-hack-message--caught {
    text-shadow: 3px 3px 0 #e4162f, 6px 6px 0 #8d0d1d, 0 10px 28px #000;
    animation: vote-caught-text 3s ease-in-out forwards;
}

.vote-machine-busted .vote-party-panes { opacity: .28; }
.vote-machine-busted .vote-party-panes span { animation: vote-pane-police 1.3s steps(1, end) infinite; }
.vote-machine-busted .vote-paper { animation-play-state: paused; }

@keyframes vote-pane-party {
    0%, 100% { background: #ff2d8a; }
    25% { background: #19c3ff; }
    50% { background: #ffd229; }
    75% { background: #9b5cff; }
}
@keyframes vote-pane-police {
    0%, 49% { background: #e4162f; }
    50%, 100% { background: #1769e0; }
}
@keyframes vote-paper-fall {
    0% { transform: translate3d(0,-80px,0) rotate(0deg); }
    100% { transform: translate3d(var(--drift),calc(100vh + 110px),0) rotate(var(--spin)); }
}
@keyframes vote-hacked-text {
    0% { opacity: 0; transform: translate(-50%,-50%) perspective(700px) rotateX(70deg) scale(.45); }
    22%, 62% { opacity: 1; transform: translate(-50%,-50%) perspective(700px) rotateX(-5deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%,-65%) perspective(700px) rotateX(-45deg) scale(1.2); }
}
@keyframes vote-caught-text {
    0% { opacity: 0; transform: translate(-50%,-50%) perspective(700px) translateZ(-400px); }
    18%, 78% { opacity: 1; transform: translate(-50%,-50%) perspective(700px) translateZ(0); }
    100% { opacity: 0; transform: translate(-50%,-50%) perspective(700px) translateZ(180px); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-party-panes span,
    .vote-paper,
    .vote-hack-message { animation-duration: .01ms; animation-iteration-count: 1; }
    .vote-machine-party .town-map-frame,
    .vote-machine-party .route-map { transition: none; }
}