:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#242424;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--footer-height: 50px;--white: #fff;--light-bg: #f9f9f9;--dark-bg: #213547;--dim-bg: rgba(0, 0, 0, .5);--mid-black: #363535;--gray: #a0aec0;--purplish: #646cff;--purplish-hover: #535bf2;--poke-red: #ef5350;--poke-yellow: #feca1b;--poke-yellow-hover: #dba91f;--poke-brown: #4e4742}#root{max-width:1280px;margin:0 auto;text-align:center;padding:0 1em}.main-content{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:calc(100vh - var(--footer-height));padding-bottom:var(--footer-height)}a{font-weight:500;color:var(--purplish);text-decoration:inherit}a:hover{color:var(--purplish-hover)}body{margin:0;display:flex;min-width:320px;min-height:100vh;background-color:var(--poke-red);background-image:-webkit-linear-gradient(30deg,var(--poke-red) 50%,var(--light-bg) 50%)}h1{font-size:3.2em;line-height:1.1}.btn{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--dark-bg);cursor:pointer;transition:border-color .25s}.landing{display:flex;flex-direction:column;width:100%;margin-top:3em}.play{border-radius:50%;border:none;background-image:-webkit-linear-gradient(180deg,var(--light-bg) 50%,var(--dark-bg) 50%)}.play,.back{background-color:var(--poke-yellow);color:var(--dark-bg);transition:background-color .3s ease-in-out;will-change:filter}.play:hover{background-color:var(--poke-yellow-hover);color:var(--dark-bg);filter:drop-shadow(0 0 2em var(--poke-brown))}.back:hover{background-color:var(--poke-yellow-hover);color:var(--dark-bg);filter:drop-shadow(0 0 2em var(--white))}.title{color:var(--poke-brown);font-size:3.5em;font-weight:700}.pikachu-logo{height:15em;will-change:transform;transition:transform .3s,filter .3s}.pikachu-logo:hover{transform:scale(.99);filter:drop-shadow(0 0 2em var(--poke-brown));cursor:pointer}.game-board{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:0 auto;max-width:800px;gap:2em}.scores{display:flex;justify-content:space-around;align-items:center;margin:2em auto;max-width:800px;border-radius:10px;border:5px solid var(--mid-black);color:var(--white);background-color:var(--dark-bg);transition:box-shadow .2s ease}.instruction{font-size:1.5em;font-weight:500;color:var(--mid-black);margin:1em auto}.scores:hover{box-shadow:.5em .5em 2em var(--poke-brown);cursor:pointer}.btn:focus,.btn:focus-visible,.btn-alt:focus,.btn-alt:focus-visible{outline:4px auto -webkit-focus-ring-color}.btn-alt{border:1px solid transparent;padding:.6em 1.2em;font-size:2em;font-weight:500;cursor:pointer;transition:color .5s ease-in-out}.btn-alt:hover{color:var(--gray);filter:drop-shadow(0 0 2em var(--light-bg))}@keyframes shakeAnimation{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.shake{animation:shakeAnimation .5s ease-in-out}.card{display:flex;justify-content:center;align-items:center;position:relative;width:150px;height:200px;perspective:1000px;background-color:var(--dark-bg);border-radius:8px}.card:hover{filter:drop-shadow(0 0 2em var(--purplish-hover));cursor:pointer}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s ease;animation:shuffle .75s ease forwards}@keyframes shuffle{0%{transform:rotateY(0)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}to{transform:rotateY(360deg)}}.card-shuffle-animation{animation:shuffle .75s ease forwards}.card-front,.card-back{display:flex;justify-content:center;align-items:center;position:absolute;width:100%;height:100%;backface-visibility:hidden}.card-img{max-width:125px;height:125px;animation:hideShowImage .75s ease forwards}@keyframes hideShowImage{to{visibility:visible}0%,25%,50%,75%{visibility:hidden}}.card-front{background-color:var(--dark-bg);border-radius:8px}.card-back{transform:rotateY(180deg);background-color:var(--poke-brown);opacity:0;border-radius:8px;animation:showBackground .5s ease forwards}@keyframes showBackground{0%{opacity:0}50%{opacity:1}to{opacity:0}}.btn{background-color:var(--purplish);color:var(--white);border:none;padding:10px 20px;margin-top:10px;cursor:pointer}.btn:hover{background-color:var(--purplish-hover)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;color:var(--white);background-color:var(--dim-bg);display:flex;justify-content:center;align-items:center;animation:showModal .1s ease forwards;z-index:100}@keyframes showModal{0%{opacity:0}25%{opacity:.25}50%{opacity:.5}75%{opacity:.75}to{opacity:1}}.modal-content{background-color:var(--dark-bg);padding:2em 5em;border-radius:8px;text-align:center}.footer{display:flex;justify-content:center;align-items:center;background-color:var(--dark-bg);color:var(--white);font-size:.9em;font-weight:700;width:100%;height:var(--footer-height);position:fixed;bottom:0;left:0}.footer-icon{vertical-align:middle;margin-left:8px;color:var(--white);font-size:1.2rem}@media (prefers-color-scheme: light){:root{color:var(--dark-bg);background-color:var(--light-bg)}a:hover{color:var(--purplish-hover)}.btn{background-color:var(--light-bg)}}@media (prefers-reduced-motion: no-preference){.card-logo{animation:logo-spin infinite 30s linear}}@media (max-width: 768px){.title{font-size:2.5em;margin:.5em auto}.card{width:120px;height:180px}.card-img{max-width:100px;height:100px}.scores{font-size:.8em}}@media (max-width: 480px){.title{font-size:2em;margin:.5em auto}.card{width:100px;height:75px}.card-img{max-width:70px;height:70px}.scores{font-size:.6em}.footer{font-size:.8em;align-items:flex-start;height:70px}}