:root{font-family: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}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1600px;margin:0 auto;text-align:center;min-height:100vh;display:flex;flex-direction:column;gap:clamp(.8rem,1.5vh,1.5rem)}.logo{height:5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.header-section{display:flex;justify-content:center;align-items:center}.puck-logo{width:clamp(100px,15vw,320px);height:auto;-webkit-user-select:none;user-select:none;pointer-events:none}.main-content{display:flex;justify-content:space-between;align-items:flex-start;min-height:auto;flex-grow:0;flex-shrink:1;flex-basis:auto}.team-section{display:flex;flex-direction:column;align-items:center;width:clamp(150px,22vw,280px);flex-shrink:0}.teams-logo{width:clamp(80px,10vw,140px);height:auto;margin:0;-webkit-user-select:none;user-select:none;pointer-events:none}.team-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(.4rem,1vw,1rem);max-width:clamp(700px,50vh,800px);max-height:clamp(200px,25vh,500px);overflow-y:auto;padding:clamp(.6rem,1.2vw,1.2rem);border:clamp(2px,.2vw,3px) solid #683BC2;border-radius:clamp(6px,.8vw,12px);background-color:#242424e6}.team-hint{display:flex;flex-direction:column;align-items:center;width:clamp(35px,5vw,65px)}.team-logo{width:clamp(30px,4.5vw,60px);height:clamp(30px,4.5vw,60px);object-fit:contain;filter:drop-shadow(0 0 2px #000);-webkit-user-select:none;user-select:none;pointer-events:none}.team-years{font-size:clamp(.5rem,.8vw,.8rem);color:#fff;opacity:.8;text-align:center;margin-top:clamp(2px,.3vh,4px)}.main-game-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1vh,1.2rem);flex:1;justify-content:flex-start;max-width:clamp(280px,35vw,450px);margin:0 auto;padding-top:clamp(0rem,.2vh,.3rem)}.player-mug{width:clamp(120px,16vw,220px);height:clamp(160px,20vh,280px);border:clamp(2px,.25vw,4px) solid black;border-radius:10%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none}.search-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.6rem,1vh,1rem);width:100%;position:relative}.group{display:flex;justify-content:center;align-items:center;width:100%;position:relative}.input{width:100%;height:clamp(40px,4.5vh,50px);padding-left:clamp(2.2rem,3.5vw,3rem);box-shadow:0 0 0 1.5px #2b2c37,0 0 25px -17px #000;border:clamp(2px,.2vw,3px) solid black;border-radius:clamp(6px,.8vw,10px);background-color:#16171d;outline:none;color:#a47ef6;transition:all .25s cubic-bezier(.19,1,.22,1);cursor:text;font-size:clamp(.8rem,1.2vw,1.1rem)}.input::placeholder{color:#bdbecb}.input:hover{box-shadow:0 0 0 2.5px #2f303d,0 0 25px -15px #000}.input:active{transform:scale(.95)}.input:focus{box-shadow:0 0 0 2.5px #2f303d}.search-icon{position:absolute;left:clamp(.8rem,1.5vw,1.2rem);width:clamp(.9rem,1.3vw,1.2rem);height:clamp(.9rem,1.3vw,1.2rem);fill:#bdbecb;pointer-events:none;z-index:11}.dropdown{position:absolute;top:100%;left:0;right:0;margin-top:clamp(8px,1vh,12px);max-height:clamp(120px,15vh,180px);overflow-y:auto;background-color:#16171d;border:clamp(1px,.15vw,2px) solid black;border-radius:clamp(4px,.6vw,8px);z-index:6;animation:fadeInUp .3s ease-out forwards;opacity:0;box-shadow:0 5px 20px #0006}.dropdown-item{display:flex;justify-content:space-between;align-items:center;padding:clamp(6px,1vh,10px) clamp(10px,1.5vw,15px);border-bottom:1px solid #333;color:#fff;font-size:clamp(.7rem,1vw,.9rem)}.select-button{padding:clamp(3px,.6vh,6px) clamp(6px,1.2vw,10px);background-color:#683bc2;color:#fff;border:1px solid black;border-radius:clamp(4px,.6vw,6px);cursor:pointer;transition:.3s;font-size:clamp(.6rem,1vw,.8rem)}.select-button:hover{background-color:#a47ef6;color:#000}.buttons-section{display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,1.2vh,1.2rem)}.guess-button,.new-player-button{width:clamp(110px,14vw,170px);height:clamp(8px,4.5vh,40px);border:clamp(2px,.25vw,3px) solid black;border-radius:8%;background-color:#683bc2;color:#fff;cursor:pointer;transition:.4s;display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;font-size:clamp(.8rem,1.2vw,1.1rem);font-weight:500}.guess-button:hover,.new-player-button:hover{background-color:#a47ef6;color:#000}.guess-grid{display:flex;flex-direction:column;gap:clamp(6px,1vh,10px);width:100%;align-items:center}.guess-card{border:#683BC2 solid clamp(2px,.2vw,3px);border-radius:clamp(6px,.8vw,10px);padding:clamp(5px,1vh,10px);background-color:#242424;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;font-weight:700;font-size:clamp(.7rem,1.1vw,1rem);color:#fff;width:100%;text-align:center;min-height:clamp(8px,3.5vh,20px);display:flex;align-items:center;justify-content:center}.hint-section{display:flex;flex-direction:column;align-items:center;width:clamp(150px,22vw,280px);flex-shrink:0}.hint-logo{width:clamp(80px,10vw,140px);height:auto;margin:0;-webkit-user-select:none;user-select:none;pointer-events:none}.hint-block-container{display:flex;flex-direction:column;align-items:stretch;gap:clamp(.4rem,.6vh,.8rem);width:100%;max-height:clamp(200px,25vh,350px);overflow-y:auto}.hint-block{background-color:#222;color:#fff;padding:clamp(6px,1vh,12px) clamp(8px,1.2vw,15px);border-radius:clamp(5px,.6vw,8px);font-size:clamp(.65rem,.9vw,.9rem);text-align:center;border:clamp(2px,.2vw,3px) solid #683BC2;word-wrap:break-word;line-height:1.3}.bottom-section{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:auto;gap:clamp(.6rem,1vh,1rem)}.hint-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(4px,1vw,10px);justify-content:center;align-items:center;max-width:clamp(300px,60vw,700px)}.hint-button{width:clamp(50px,8vw,100px);height:clamp(35px,4.5vh,50px);border:clamp(2px,.25vw,3px) solid black;border-radius:8%;background-color:#683bc2;color:#fff;cursor:pointer;transition:.4s;font-size:clamp(.6rem,1vw,.9rem);font-weight:500;display:flex;align-items:center;justify-content:center;text-align:center;flex-shrink:0}.hint-button:hover{background-color:#a47ef6;color:#000}.hint-button.disabled{opacity:.5;cursor:not-allowed}button:focus:not(:focus-visible){outline:none}.search-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;background-color:#16171df2;padding:clamp(1.2rem,2vw,2.5rem);border-radius:clamp(6px,.8vw,12px);border:clamp(2px,.2vw,3px) solid #683BC2;box-shadow:0 0 25px #00000080;max-width:90vw;width:clamp(280px,30vw,450px)}.overlay-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:4}.blur{filter:blur(3px);pointer-events:none;-webkit-user-select:none;user-select:none}.animate-in{animation:fadeInUp .3s ease-out forwards;opacity:0}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.win-box,.lose-box,.welcome-box{background-color:#fff;color:#000;border-radius:clamp(8px,1vw,15px);text-align:center;border:clamp(3px,.3vw,5px) solid #683BC2;box-shadow:0 0 30px #00000080;max-width:clamp(320px,80vw,550px);max-height:90vh;overflow-y:auto;position:fixed;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;padding:clamp(.5rem,1.5vw,1.5rem);flex-direction:column;top:50%;left:50%;transform:translate(-50%,-50%)}.lose-box{border-color:#d32f2f}.lose-box h2{color:#d32f2f;font-size:clamp(1.2rem,2.5vw,1.8rem)}.win-box h2{margin-bottom:1rem;font-size:clamp(1.2rem,2.5vw,1.8rem)}.welcome-box{text-align:left}.welcome-box h2{text-align:center;color:#683bc2;margin-bottom:1rem;font-size:clamp(1.2rem,2.5vw,1.8rem)}.welcome-box h3{margin-top:1.5rem;margin-bottom:.5rem;color:#683bc2;font-size:clamp(1rem,2vw,1.3rem)}.rules-content{font-size:clamp(.8rem,1.4vw,1rem);line-height:1.4}.rules-content ul{margin:.5rem 0 1rem 1rem;padding-left:1rem}.rules-content li{margin-bottom:.3rem}.rules-content p{text-align:center;margin-top:1.5rem;font-size:clamp(.9rem,1.6vw,1.1rem)}.mugshot{width:clamp(80px,10vw,140px);height:clamp(100px,13vw,180px);object-fit:cover;border:clamp(2px,.25vw,4px) solid black;border-radius:10%;margin:clamp(.6rem,1.2vh,1.2rem) 0}.dismiss-button{position:absolute;top:clamp(.8rem,1.5vh,2rem);right:clamp(.8rem,1.5vh,2rem);z-index:10;padding:clamp(6px,1vh,10px) clamp(12px,1.8vw,20px);background-color:#683bc2;color:#fff;border:clamp(1px,.15vw,2px) solid black;border-radius:clamp(6px,.8vw,10px);cursor:pointer;transition:.3s ease;font-size:clamp(.7rem,1.2vw,1rem)}.dismiss-button:hover{background-color:#a47ef6;color:#000}.new-player-options{display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,1.5vh,1.2rem);margin-top:1rem;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;background-color:#fffffff2;padding:clamp(1.2rem,2.5vw,2.5rem);border-radius:clamp(8px,1vw,15px);border:clamp(2px,.25vw,4px) solid #683BC2;box-shadow:0 0 30px #0000004d}.option-button{padding:clamp(.6rem,1.4vh,1rem) clamp(1.2rem,2.2vw,2rem);font-size:clamp(.8rem,1.4vw,1.2rem);border:clamp(2px,.25vw,4px) solid black;border-radius:8%;background-color:#683bc2;color:#fff;cursor:pointer;transition:.4s;min-width:clamp(130px,20vw,180px);font-weight:500}.option-button:hover{background-color:#a47ef6;color:#000}.new-game-button{padding:clamp(6px,1vh,10px) clamp(12px,1.8vw,20px);background-color:#683bc2;color:#fff;border:clamp(1px,.15vw,2px) solid black;border-radius:clamp(6px,.8vw,10px);cursor:pointer;transition:.3s ease;font-size:clamp(.7rem,1.2vw,1rem);font-weight:500}.new-game-button:hover{background-color:#a47ef6;color:#000}.top-section{display:none}@media (max-width: 768px){.main-content{flex-direction:column;align-items:center;gap:clamp(.5rem,1vh,1rem)}.team-section,.hint-section{width:100%;max-width:400px}.team-section{order:1}.main-game-section{order:2;max-width:100%}.hint-section{order:3;margin-top:clamp(.5rem,1vh,1rem)}.guess-grid{order:4;margin-top:clamp(.5rem,1vh,1rem)}.hint-grid{gap:clamp(4px,1vw,10px);margin-bottom:clamp(.5rem,1vh,1rem)}}@media (max-width: 480px){.main-content{gap:clamp(.3rem,.8vh,.8rem)}.hint-section,.guess-grid{margin-top:clamp(.3rem,.6vh,.6rem)}.hint-button{width:clamp(56px,10vw,90px);height:clamp(30px,4vh,40px);font-size:clamp(.5rem,1.5vw,.8rem)}.guess-card{padding:clamp(4px,.8vh,8px);font-size:clamp(.6rem,.9vw,.8rem)}.player-mug{width:clamp(100px,18vw,160px);height:clamp(130px,22vh,150px)}}@media (min-width: 1200px){#root{max-width:1800px}.main-content{gap:clamp(2rem,3vw,4rem);padding:0 clamp(1rem,3vw,3rem)}}@media (max-width: 600px){.buttons-section{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:clamp(.6rem,1.2vw,1rem)}.guess-button,.new-player-button{width:clamp(100px,40vw,160px);height:clamp(35px,5vh,45px);font-size:clamp(.7rem,1.2vw,1rem)}}.guess-button:disabled{background-color:#ccc;color:#666;cursor:not-allowed;opacity:.7}.guess-logo{width:clamp(80px,10vw,140px);height:auto;margin:0 auto;display:block;-webkit-user-select:none;user-select:none;pointer-events:none}.hint-logo,.guess-logo{width:clamp(80px,10vw,140px);height:auto;-webkit-user-select:none;user-select:none;pointer-events:none;display:block}
