:root{--color-bg-primary: #dcdad7;--color-bg-secondary: #d2d0cd;--color-bg-tertiary: #c0c0c0;--color-text-primary: #323948;--color-text-secondary: #777777;--border-radius: 5px;--shadow: 0px 3px 3px 0px rgba(0, 0, 0, .8);--black: #444444;--white: #fefefe;--gray: #d0d0d0;--red: indianred;--green: darkcyan;--blue: rgb(74, 136, 157);--lightblue: lightblue;--font-special: "Gidole", serif, sans-serif;--font-content: "Poppins", sans-serif;--text-lg: 28px;--text-md: 20px;--text-sm: 10px;--text-xs: 4px}[data-theme=dark]{--color-bg-primary: #323948;--color-bg-secondary: #3C4352;--color-bg-tertiary: #464D5C;--color-text-primary: #f0f0f0;--color-text-secondary: #b0b0b0;--shadow: 0px 3px 3px 0px rgba(0, 0, 0, .8);--black: #505766;--white: #e0e0e0;--gray: #464d5c;--red: #ff6b6b;--green: #4ecdc4;--blue: rgb(74, 136, 157);--lightblue: #7ca9d6}@keyframes undo-transform{0%{transform:translateY(3px)}to{transform:translateY(0)}}@keyframes horizontal-shaking{0%{transform:translate(0)}25%{transform:translate(5px)}50%{transform:translate(-5px)}75%{transform:translate(5px)}to{transform:translate(0)}}@keyframes vertical-shaking{0%{transform:translateY(0)}25%{transform:translateY(5px)}50%{transform:translateY(-5px)}75%{transform:translateY(5px)}to{transform:translateY(0)}}body{margin:0;padding:0;height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-special)}main{display:flex;flex:1;flex-direction:column;justify-content:flex-start;align-items:center;height:100vh;background-color:var(--color-bg-primary);color:var(--color-text-primary);font-family:var(--font-content)}header{display:flex;width:100%;justify-content:flex-end;align-items:center;width:300px}ul{list-style:none;margin:0;margin-block-start:0;margin-block-end:0;padding-inline-start:0px}nav{display:inline-flex;flex:1;justify-content:space-between}nav ul{display:inline-flex}nav ul li{display:inline-flex;justify-content:space-between;gap:5px;align-items:center;margin:5px}#container-game{display:flex;flex-direction:column;justify-content:flex-start;height:90vh}#grid{display:flex;position:relative;flex-direction:column}.row{display:flex}.grid-row{display:inline-flex;justify-content:center;align-items:center}.box{display:flex;justify-content:center;align-items:center;width:40px;height:40px;border:2px solid var(--gray);border-radius:var(--border-radius);background-color:var(--white);color:var(--black);margin:10px 5px;font-size:var(--text-lg);font-family:var(--font-content)}.result-box{display:grid;margin-left:20px}.result-box:has(.result:nth-child(4):last-child){grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.result-box:not(:has(.result:nth-child(4):last-child)){grid-template-columns:repeat(3,1fr)}.result{height:18px;width:18px;margin:5px;border-radius:50%;background-color:var(--gray);box-shadow:inset var(--shadow);display:flex;justify-content:center;align-items:center;text-align:center;color:var(--blue);font-size:var(--text-xs)}.bull{background-color:var(--black);box-shadow:var(--shadow);color:var(--white)}.cow{background-color:var(--white);box-shadow:var(--shadow);color:var(--black)}#container-numpad{margin:20px auto 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;grid-gap:2px;width:fit-content}.keypad-row{display:flex}.keypad-button{font-family:var(--font-special);margin:4px 6px;box-shadow:var(--shadow);border-radius:var(--border-radius);background-color:var(--blue);color:var(--white);font-size:var(--text-lg);border:none}.keypad-button>svg{fill:var(--white)}.keypad-button:hover{filter:brightness(1.1)}.keypad-button:active,.keypad-button.active{transform:translateY(2px);transition:transform .1s;animation:undo-transform .1s forwards}.disabled{background-color:var(--color-bg-secondary);color:var(--black)}.error{animation:horizontal-shaking .2s}.bg-blue{background-color:var(--lightblue);border:2px solid var(--lightblue)}.bg-gray{background-color:var(--color-bg-secondary);box-shadow:none}.bg-red{background-color:var(--red);border:2px solid var(--red);color:var(--white)!important}.bg-green{background-color:var(--green)!important;border:2px solid var(--green);color:var(--white)!important}.success{animation:vertical-shaking .2s ease-in-out}dialog{padding:0;border:none;box-shadow:var(--shadow);border-radius:var(--border-radius);background-color:var(--color-bg-primary);color:var(--black);width:300px;text-align:center;z-index:100}::backdrop{background-color:#000000b3}button.dialog-close{background-color:inherit;box-shadow:none;border:none;float:right;padding:10px;cursor:pointer}button.dialog-close:focus-visible{outline:none}button.dialog-close:hover{background-color:var(--color-bg-secondary)}button{font-family:var(--font-special);padding:15px 20px;border-radius:var(--border-radius);border:none;font-size:var(--text-md)}dialog button{box-shadow:var(--shadow);background-color:var(--blue);color:var(--white)}a,.link{cursor:pointer}#container-settings{display:flex;justify-content:center}#container-settings h3{width:100%;background-color:var(--blue);color:var(--white);padding:5px}.switch-wrapper{display:flex;align-items:center;gap:.5em;width:fit-content}.switch-label{font-size:1rem}.switch{position:relative;display:inline-block;width:3em;aspect-ratio:2 / 1}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-bg-secondary);transition:.4s;border-radius:9999px}.slider:before{position:absolute;content:"";height:70%;width:40%;left:5%;top:15%;background-color:var(--white);transition:.4s;border-radius:50%}.switch input:checked+.slider{background-color:var(--blue)}.switch input:checked+.slider:before{transform:translate(120%)}div.section-title{display:inline-flex;width:300px;padding:5px;justify-content:center;align-content:center;background-color:var(--color-bg-secondary)}section{display:flex;flex-direction:column;justify-content:flex-start;gap:20px}section>*{border:1px solid var(--color-border)}.text-special{font-family:var(--font-special)}.text-lg{font-size:var(--text-lg)}.text-md{font-size:var(--text-md)}.text-sm{font-size:var(--text-sm)}.selected{background-color:var(--blue);color:var(--white)}hr{width:100%;border:1px solid var(--color-bg-tertiary)}.margin-sm{margin:5px}.text-light{color:var(--color-text-secondary)}#container-stats{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:90vh}.stat{width:80%;display:inline-flex;justify-content:space-between;align-items:center}.label{font-size:var(--text-md);font-family:var(--font-special)}.content{font-size:var(--text-md);font-family:var(--font-content)}.count,strong{text-align:center;font-size:var(--text-lg);font-family:var(--font-special)}