:root{--primary-color: #00ffff;--secondary-color: #ff00ff;--background-color: #1a1a1a;--text-color: #ffffff;--border-color: #444;--glitch-text-shadow-1: -.05em 0 0 var(--secondary-color), .05em 0 0 var(--primary-color);--glitch-text-shadow-2: -.05em 0 0 var(--primary-color), .05em 0 0 var(--secondary-color)}body{background-color:var(--background-color);color:var(--text-color);font-family:Courier New,Courier,monospace;display:flex;justify-content:center;align-items:center;min-height:100vh;text-align:center;padding:1rem;margin:0}#app{width:100%;max-width:600px;border:2px solid var(--primary-color);padding:2rem;box-shadow:0 0 15px var(--primary-color),0 0 25px var(--secondary-color) inset;animation:glitch-border 5s infinite alternate;margin:0 auto;text-align:center}header{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.logo{height:4em;animation:glitch-logo 6s infinite alternate;padding:0;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 1.5em var(--primary-color))}h1{font-size:2.5em;text-transform:uppercase;text-shadow:var(--glitch-text-shadow-1);animation:glitch-text 3s infinite alternate;margin:0;line-height:1.1}section{margin-bottom:2rem}h2{color:var(--primary-color);text-transform:uppercase;font-size:1.5em;text-shadow:var(--glitch-text-shadow-2)}input[type=text]{background-color:transparent;border:1px solid var(--secondary-color);color:var(--text-color);padding:.8em;font-family:inherit;width:60%}button{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color);padding:.8em 1.5em;cursor:pointer;text-transform:uppercase;transition:background-color .3s,color .3s,border-color .25s;border-radius:8px;font-size:1em;font-weight:500;font-family:inherit}button:hover{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#add-friend-form{display:flex;justify-content:center}#friends-list{list-style:none;padding:0;min-height:50px}#friends-list li{margin:.5em 0;font-size:1.2em}#secret-friend-result{font-size:2em;color:var(--secondary-color);text-shadow:var(--glitch-text-shadow-1);min-height:1.5em}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:1000;opacity:0;display:none;transition:opacity .3s ease-in-out;justify-content:center;align-items:center}.popup.visible{opacity:1;display:flex}.popup-content{background-color:var(--background-color);padding:2rem;border:2px solid var(--secondary-color);box-shadow:0 0 15px var(--secondary-color);text-align:center;max-width:80%}.popup:not(.hidden) .popup-content{animation:glitch-popup .5s forwards}#popup-message{margin:0 0 1.5rem;font-size:1.2em}#close-popup{border-color:var(--secondary-color);color:var(--secondary-color)}#close-popup:hover{background-color:var(--secondary-color);color:var(--background-color)}#shuffle-popup .popup-content{border-color:var(--primary-color);box-shadow:0 0 15px var(--primary-color)}#shuffle-name{font-size:3em;color:var(--primary-color);text-shadow:var(--glitch-text-shadow-2);min-height:1.5em;animation:shuffle-glitch .1s infinite}@keyframes shuffle-glitch{0%{text-shadow:var(--glitch-text-shadow-1);transform:translate(0)}25%{text-shadow:var(--glitch-text-shadow-2);transform:translate(2px,-2px)}50%{text-shadow:var(--glitch-text-shadow-1);transform:translate(-2px,2px)}75%{text-shadow:var(--glitch-text-shadow-2);transform:translate(2px,2px)}to{text-shadow:var(--glitch-text-shadow-1);transform:translate(0)}}@keyframes glitch-popup{0%{transform:scale(.5) skew(-15deg);opacity:0}to{transform:scale(1) skew(0);opacity:1}}@keyframes glitch-border{0%{box-shadow:0 0 15px var(--primary-color),0 0 25px var(--secondary-color) inset}50%{box-shadow:0 0 20px var(--secondary-color),0 0 30px var(--primary-color) inset}to{box-shadow:0 0 15px var(--primary-color),0 0 25px var(--secondary-color) inset}}@keyframes glitch-text{0%,49%{text-shadow:var(--glitch-text-shadow-1)}50%,99%{text-shadow:var(--glitch-text-shadow-2)}to{text-shadow:var(--glitch-text-shadow-1)}}@keyframes glitch-logo{0%{filter:drop-shadow(0 0 .5em var(--primary-color))}50%{filter:drop-shadow(0 0 1em var(--secondary-color))}to{filter:drop-shadow(0 0 .5em var(--primary-color))}}@keyframes glitch-text-2{0%{transform:translate(0);text-shadow:none}20%{transform:translate(-3px,3px);text-shadow:var(--glitch-text-shadow-1)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px);text-shadow:var(--glitch-text-shadow-2)}80%{transform:translate(3px,-3px)}to{transform:translate(0);text-shadow:none}}