.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}@media (width>=0){.dice{border:.25rem solid #000;border-radius:1rem;width:3rem;height:3rem}.pip{width:.5rem;height:.5rem}}@media (width>=576px){.dice{border:.4rem solid #000;border-radius:1.33rem;width:4rem;height:4rem}.pip{width:.75rem;height:.75rem}}@media (width>=768px){.dice{border:.5rem solid #000;border-radius:1.75rem;width:6rem;height:6rem}.pip{width:1rem;height:1rem}}.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}@media (width>=0){.dice-container{gap:.5rem;margin:1rem 0}}@media (width>=576px){.dice-container{gap:.75rem;margin:1.5rem 0}}@media (width>=768px){.dice-container{gap:1rem;margin:2rem 0}}.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}@media (width>=0){.btn{padding:.5rem 2rem;font-size:1.25rem}}@media (width>=576px){.btn{padding:.5rem 2.5rem;font-size:1.75rem}}@media (width>=768px){.btn{padding:.5rem 3rem;font-size:2rem}}.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}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}.container{height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);grid-template:"header header header""game line score"1fr"game line rules"/8fr 1fr 4fr;margin:auto;display:grid;position:relative}@media (width>=0){.container{grid-template-areas:"header header header""game game game""score score score";max-width:100%}}@media (width>=576px){.container{max-width:540px}}@media (width>=768px){.container{max-width:720px}}@media (width>=992px){.container{max-width:960px}}@media (width>=1200px){.container{max-width:1140px}}@media (width>=1400px){.container{grid-template-areas:"header header header""game line score""game line rules";max-width:1320px}}.header-container{grid-area:header;position:relative}#main-title{height:20vh;font-family:Ranchers,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:3rem;font-style:normal;font-weight:400}@media (width>=0){#main-title{height:100%}}@media (width>=768px){#main-title{height:20vh}}.header-links{justify-content:space-between;width:100%;margin-top:1rem;display:flex;position:absolute;top:0;left:0}.hl-large{justify-content:space-between}.hl-small{justify-content:end}@media (width>=0){.hl-large{display:none}.hl-small{display:flex}}@media (width>=1400px){.hl-large{display:flex}.hl-small{display:none}}.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}#btn-open-menu{margin-right:1rem}.game-container{grid-area:game;padding:0 1rem 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}.melds-btn-container{justify-content:center;margin-top:auto;display:flex}.btn-view-melds{color:#2580e9;background-color:#0000}.btn-view-melds:hover{color:#fff;background-color:#2580e9}.btn-view-melds:active{background-color:#98c0ec}@media (width>=0){.melds-container{background-color:#fff;border:2px solid #2580e9;border-radius:2rem;flex-direction:column;width:90%;height:90%;margin:5%;padding:1rem;display:flex;position:absolute;top:0;left:0}#melds-title{display:none}.btn-view-melds{display:inline}}@media (width>=1400px){.melds-container{background-color:#0000;border:none;border-radius:0;width:auto;height:auto;margin:0;padding:0;display:block;position:relative}#melds-title{display:inline}.btn-view-melds{display:none}}.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}@media (width>=0){.overlay-message{font-size:2rem}.winner-message{font-size:2.5rem}}@media (width>=576px){.overlay-message{font-size:2.25rem}.winner-message{font-size:2.75rem}}@media (width>=768px){.overlay-message{font-size:2.5rem}.winner-message{font-size:3rem}}.line-container{grid-area:line}@media (width>=0){.line-container{display:none}}@media (width>=1400px){.line-container{display:block}}.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:0 0 1rem;font-size:1.5rem;font-weight:700;display:flex}.score-container>div{border-radius:2rem;flex-direction:column;width:100%;height:fit-content;padding:2rem 0;display:flex}@media (width>=0){.score-container{flex-direction:column;gap:.5rem;margin:0 1rem}.score-container>div{flex-direction:row;justify-content:space-between;align-items:center;padding:.5rem 1rem}}@media (width>=1400px){.score-container{flex-direction:row;gap:1rem;margin:0 0 1rem}.score-container>div{flex-direction:column;justify-content:center;align-items:center;padding:2rem 0}}.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;justify-content:center;width:100%;height:97%;padding-bottom:0;display:flex;overflow-y:hidden}@media (width>=0){.rules-wrapper{z-index:20;border-radius:0;grid-area:auto;height:100vh;padding-bottom:4rem;position:fixed;top:0;left:0}}@media (width>=1400px){.rules-wrapper{z-index:auto;border-radius:2rem;grid-area:rules;height:97%;padding-bottom:0;position:relative}}.rules-container{color:#fff;scrollbar-color:#ffffffb3 transparent;padding:0 3rem;font-size:1.75rem;overflow-y:auto}.rules-menu{flex-direction:column;display:flex}@media (width>=0){.rules-menu{display:flex}}@media (width>=1400px){.rules-menu{display:none}}#btn-close-menu{color:#fff;background-color:#0000;border:1px solid #fff;border-radius:2rem;width:fit-content;margin:1rem 0 1rem auto;padding:.5rem 1rem;font-size:1rem;transition:all .1s ease-in}#btn-close-menu:hover{cursor:pointer;color:#2580e9;background-color:#fff}.rules-menu a,.rules-menu .btn-open-how-to{color:#fff;text-align:start;background-color:#0000;border:none;padding:.5rem 0;font-size:1.5rem;text-decoration:none}.rules-menu a:hover,.rules-menu .btn-open-how-to:hover{cursor:pointer;background-color:#126cd3}.rules-dice{align-items:center;gap:.25rem;display:flex}.rules-row>p{margin-top:.25rem}hr.tapered{background:linear-gradient(90deg,#0000 0%,#aaa 10% 90%,#0000 100%);border:none;width:90%;height:1px;margin:2rem auto}@media (width>=0){hr.tapered{margin:1rem auto}}@media (width>=576px){hr.tapered{margin:1.5rem auto}}@media (width>=768px){hr.tapered{margin:2rem auto}}.hidden{display:none}.how-to-body{color:#fff;scrollbar-color:#ffffffb3 transparent;background-color:#2580e9;border-radius:2rem;max-height:90%;margin:3rem;padding:3rem 5rem;position:relative;top:0;left:0;overflow-y:auto}.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}@media (width>=0){.how-to-body{padding:2rem}.how-to-body h2{font-size:1.5rem}.how-to-body p,#btn-close-how-to{font-size:1rem}}@media (width>=576px){.how-to-body{padding:3rem}.how-to-body h2{font-size:2rem}.how-to-body p,#btn-close-how-to{font-size:1.25rem}}@media (width>=768px){.how-to-body{padding:3rem 5rem}.how-to-body h2{font-size:2.5rem}.how-to-body p,#btn-close-how-to{font-size:1.5rem}}