#app{width:100%;display:flex;justify-content:stretch}button{color:#fff}button:focus{outline:none!important}*{box-sizing:border-box}:root{--timing: cubic-bezier(.175, .885, .32, 1.275)}h1,h2,h3,h4,h5{margin:0}body{background:#222}.overline{font-size:.9rem;letter-spacing:.25em;text-transform:uppercase;font-weight:500;opacity:.8}.game{-webkit-user-select:none;user-select:none;flex:1;padding:2rem 4rem 4rem;height:100vh;display:flex;flex-direction:column;gap:2rem}.game-header{display:flex;justify-content:space-between;align-items:center}.game-players{display:flex;gap:1rem;justify-content:space-between}.game-challenges{flex:1;position:relative}.controls{display:flex;gap:.5rem}.challenge{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.challenge.current{animation:PopIn .2s ease;pointer-events:all;opacity:1}.challenge h1{margin-left:1rem}.search{flex:1;display:flex;flex-direction:column;gap:1rem;border-radius:1.5rem;background-color:#111;padding:1rem}.search-icon{font-size:.75em;margin-right:.25em}.completions{display:grid;grid-template-columns:auto;gap:.5rem;flex:1}.player{flex:1;color:#fff;border-radius:1rem;padding:1rem;transition:transform .2s var(--timing),background-color .2s ease;transform:scale(.9);opacity:.5;display:flex;justify-content:space-between;font-size:2rem}.player.current,.game.over .player{opacity:1;transform:scale(1)}.player .points{font-weight:700;white-space:nowrap}.game-over{display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:2rem;color:#fff;text-align:center;opacity:0;transform:translateY(1rem);animation:PopIn .2s ease;animation-fill-mode:forwards;animation-delay:.2s;margin-top:4rem;margin-bottom:2rem}.completion{display:flex;align-items:center;justify-content:space-between;background-color:#151515;border-radius:1rem;padding:0 1rem;font-size:2rem;transition:background-color .2s ease,transform .2s var(--timing);animation:CompletionIn .2s var(--timing);animation-fill-mode:both;line-height:1;position:relative;border:3px solid transparent}.completion:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0}.comletion.guessed{animation:PopIn .2s ease;animation-fill-mode:forwards}.completion.guessed.rank-1:before{background-color:gold;border-radius:1rem;background-image:url(https://media4.giphy.com/media/yBwgX64KAPrHW2ltZ2/200w.gif?cid=6c09b9529ve5wtme90echatfrr1ux8ackwxkfhd5jmuc468e&ep=v1_gifs_search&rid=200w.gif&ct=g);animation:HighestRankedCompletion 10s linear infinite;opacity:.5;z-index:-1}.completion:hover{background-color:#222;cursor:pointer}.completion .points{line-height:.5;font-size:2.5rem;font-weight:700;animation:PointsIn .5s var(--timing);white-space:nowrap}.completion:nth-child(0){animation-delay:0s}.completion:nth-child(1){animation-delay:.2s}.completion:nth-child(2){animation-delay:.4s}.completion:nth-child(3){animation-delay:.6s}.completion:nth-child(4){animation-delay:.8s}.completion:nth-child(5){animation-delay:1s}.completion:nth-child(6){animation-delay:1.2s}.completion:nth-child(7){animation-delay:1.4s}.completion:nth-child(8){animation-delay:1.6s}.completion:nth-child(9){animation-delay:1.8s}@keyframes CompletionIn{0%{opacity:0;transform:translateY(-1rem) scale(.99)}to{transform:translateY(0) scale(1)}}@keyframes PointsIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(2)}to{transform:scale(1)}}@keyframes PopIn{0%{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}@keyframes HighestRankedCompletion{0%{background-position:0 0}to{background-position:100% 0}}.cursor{display:inline-block;width:2px;height:1em;background-color:#fff;animation:blink .75s infinite;vertical-align:middle}@keyframes blink{0%,40%,90%,to{opacity:1}50%,80%{opacity:0}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}