.dice{box-sizing:border-box;border:.5rem solid #000;border-radius:1.75rem;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);align-content:center;width:6rem;height:6rem;padding:.5rem;font-weight:700;transition:all .1s ease-in;display:grid}.pip{background-color:#000;border-radius:50%;width:1rem;height:1rem;margin:auto;transition:all .1s ease-in}.active-dice .dice:hover{cursor:pointer;background-color:#98c0ec;border-color:#093b74;box-shadow:0 0 1rem .2rem #98c0ec}.active-dice .dice:active{background-color:#bed5f0;border-color:#2580e9;box-shadow:0 0 1.5rem .5rem #bed5f0}.active-dice .dice:hover .pip{background-color:#093b74}.active-dice .dice:active .pip{background-color:#2580e9}.rules-dice .dice{border:.25rem solid #fff;border-radius:.9rem;width:3rem;height:3rem}.rules-dice .pip{background-color:#fff;width:.5rem;height:.5rem}.meld-line .dice{border:.25rem solid #888;border-radius:.9rem;width:3rem;height:3rem}.meld-line .pip{background-color:#888;width:.5rem;height:.5rem}.top-left{grid-area:1/1}.top-right{grid-area:1/3}.mid-left{grid-area:2/1}.center{grid-area:2/2}.mid-right{grid-area:2/3}.bottom-left{grid-area:3/1}.bottom-right{grid-area:3/3}.dice-container{gap:1rem;margin:2rem 0;display:flex}.btn{color:#fff;background-color:#2580e9;border:2px solid #2580e9;border-radius:2rem;padding:.5rem 3rem;font-family:Arial,Helvetica,sans-serif;font-size:2rem;font-style:normal;font-weight:500;transition:all .1s ease-in}.btn:hover{cursor:pointer;color:#2580e9;background-color:#0000}.btn:active{background-color:#cddcee}.btn:disabled{cursor:default;color:#888;background-color:#0000;border:2px solid #888}.end-btn{background-color:#ce3a34;border:2px solid #ce3a34}.end-btn:hover{color:#ce3a34}.end-btn:active{background-color:#e7c3c2}.end-btn:disabled{cursor:default;color:#888;background-color:#0000;border:2px solid #888}.btn-new-game{border:2px solid #fff;width:fit-content;margin-top:1rem}.btn-new-game:hover{background-color:#fff}.btn-new-game:active{background-color:#bfd7f0}html,body{height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}.container{grid-template-columns:8fr 1fr 4fr;grid-template-areas:"header header header""game line score""game line rules";height:100vh;margin:auto;display:grid;position:relative}@media (width>=768px){.container{max-width:708px}}@media (width>=992px){.container{max-width:932px}}@media (width>=1200px){.container{max-width:1140px}}@media (width>=1400px){.container{max-width:1340px}}.header-container{grid-area:header;position:relative}.header-links{justify-content:space-between;width:100%;margin-top:1rem;display:flex;position:absolute;top:0;left:0}.header-links a,.header-links button{color:#2580e9;cursor:pointer;background-color:#0000;border:1px solid #2580e9;border-radius:2rem;padding:.5rem 1rem;font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-style:normal;font-weight:400;text-decoration:none;transition:all .1s ease-in}.header-links a:hover,.header-links button:hover{color:#fff;background-color:#2580e9}.header-links a:active,.header-links button:active{background-color:#98c0ec}.game-container{grid-area:game;padding:0 1rem;position:relative;overflow-y:auto}.roll-header{justify-content:space-between;align-items:center;display:flex}.active-player{color:#fff;border-radius:1rem;padding:.5rem 1rem;font-weight:600}.active-one{background-color:#32c72c}.active-two{background-color:#ce3a34}.roll-message{color:#888;border:1px solid #888;border-radius:1rem;justify-content:center;font-family:Arial,Helvetica,sans-serif;font-size:1.25rem;font-style:normal;font-weight:600;display:flex}.select-message{color:#2580e9;border:1px solid #2580e9}.farkle-message{color:#ce3a34;border:1px solid #ce3a34}.hand-container{grid-template-columns:6fr 1fr;align-items:center;display:grid}.hand-score{font-family:Arial,Helvetica,sans-serif;font-size:1.75rem}.meld-line{justify-content:end;align-items:center;gap:.25rem;margin-bottom:1rem;font-family:Arial,Helvetica,sans-serif;font-size:1.75rem;display:flex}.overlay-container{-webkit-backdrop-filter:blur(3px);z-index:10;background-color:#ffffff80;width:100%;height:100%;position:absolute;top:0;left:0}.overlay-message{text-align:center;color:#fff;background-color:#2580e9;border-radius:2rem;flex-direction:column;align-items:center;margin:0 2rem;padding:3rem 0;font-size:2.5rem;font-weight:700;display:flex;position:relative;top:25%;left:0}.winner-message{font-size:3rem}.line-container{grid-area:line}.vertical-line{background:linear-gradient(#0000 0%,#aaa 10% 90%,#0000 100%);border:none;width:1px;height:90%;margin:0 auto}.score-container{color:#fff;text-align:center;grid-area:score;gap:1rem;margin-bottom:1rem;font-size:1.5rem;font-weight:700;display:flex}.score-container>div{border-radius:2rem;flex-direction:column;width:100%;padding:2rem 0;display:flex}.score{font-size:2rem}.player-one{background-color:#32c72c}.player-two{background-color:#ce3a34}.player-cpu{background-color:#888}.rules-wrapper{background-color:#2580e9;border-radius:2rem;grid-area:rules;height:97%;display:flex;overflow-y:hidden}.rules-container{color:#fff;scrollbar-color:#ffffffb3 transparent;padding:0 3rem;font-size:1.75rem;overflow-y:auto}.rules-dice{align-items:center;gap:.25rem;display:flex}.rules-row>p{margin-top:.25rem}#main-title{font-family:Ranchers,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:3rem;font-style:normal;font-weight:400}hr.tapered{background:linear-gradient(90deg,#0000 0%,#aaa 10% 90%,#0000 100%);border:none;width:90%;height:1px;margin:2em auto}.hidden{display:none}.how-to-body{color:#fff;background-color:#2580e9;border-radius:2rem;margin:3rem;padding:3rem 5rem;position:relative;top:0;left:0;overflow:hidden}.how-to-body h2{text-align:center;font-size:2.5rem}.how-to-body p{font-size:1.5rem}.how-to-btn-container{justify-content:center;margin-top:3rem;display:flex}