*,:after,:before{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}#root{height:100vh;width:100vw}.app{background-color:#2f3542;display:grid;height:100vh;position:relative;width:100vw}.app,button{font-family:DM Sans,sans-serif;font-optical-sizing:auto;font-style:normal;font-weight:400}.menu{display:flex;gap:30px}.menu>button{cursor:pointer;height:50px;width:50px}.player-menu{display:flex}.people,.refresh,.settings{background-color:initial;border:none}.player-selector{background-color:#fff;border:1px solid #a3a2a282;border-radius:10px;color:#000;font-size:1.5rem}.player-selector:hover{background-color:#eae9e9}.overlay{height:100vh;left:0;position:absolute;top:0;width:100vw;z-index:2000}.settings-modal{padding:15px}.player{border-radius:25px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;margin:5px;overflow:hidden;position:relative}.player>button{align-items:center;background-color:#fff3;border:2px solid #0003;color:#000;cursor:pointer;display:flex;font-family:DM Sans,sans-serif;font-optical-sizing:auto;font-size:3rem;font-style:normal;font-weight:400;justify-content:center;position:relative;z-index:1000}.player>button:hover{background-color:#ffffff59}.player button>svg{height:3rem;width:3rem}.player p{color:#fff;display:inline;font-size:8.5rem;left:50%;position:absolute;top:50%}.player1{background-color:#60a3bc}.player2{background-color:#e55039}.player3{background-color:#78e08f}.player4{background-color:#fad390}@media only screen and (min-width:300px) and (min-height:300px) and (orientation:portrait){.app{grid-template-columns:1fr 1fr;grid-template-rows:1fr 50px 1fr}.menu{flex-direction:row-reverse;grid-column:span 2;grid-row-end:3;grid-row-start:2;justify-content:center}.player-menu{flex-direction:row}.one{grid-template-rows:2fr 1fr 1fr 50px 2fr}.one .player1{grid-column:span 2;grid-row-end:4;grid-row-start:2}.one .menu{grid-row-end:5;grid-row-start:4}.one .player{grid-template-columns:1fr 1fr}.one .player .add{grid-column-start:2;grid-row:span 2}.one .player .subtract{grid-column-start:1;grid-row:span 2}.one .player p{transform:translateX(-50%) translateY(-50%)}.two .player1,.two .player2{grid-column:span 2}.two .player2{grid-row-end:4;grid-row-start:3}.two .player{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.two .player1 .add{grid-column-end:2;grid-column-start:1;grid-row-end:2;grid-row-start:1}.two .player1 p{transform:translateX(-50%) translateY(-50%) rotate(180deg)}.two .player2 p{transform:translateX(-50%) translateY(-50%)}.three{grid-template-rows:1.8fr 50px 1fr}.three .player3{grid-column:span 2}.three .player2 .add{grid-row-end:2;grid-row-start:1}.three .player3{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.three .player3 p{transform:translateX(-50%) translateY(-50%)}.three .player1 svg,.three .player2 svg{transform:rotate(90deg)}.three .player1 p{transform:translateX(-50%) translateY(-50%) rotate(90deg)}.three .player2 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.four .player1 p,.four .player3 p{transform:translateX(-50%) translateY(-50%) rotate(90deg)}.four .player2 p,.four .player4 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.four .player2 .add,.four .player4 .add{grid-row-end:2;grid-row-start:1}.four .player svg{transform:rotate(90deg)}}@media only screen and (min-width:300px) and (max-width:600px) and (min-height:300px) and (max-height:600px){.app{grid-template-columns:1fr 1fr;grid-template-rows:1fr 50px 1fr}.menu{flex-direction:row-reverse;grid-column:span 2;grid-row-end:3;grid-row-start:2;justify-content:center}.player-menu{flex-direction:row}.one{grid-template-rows:2fr 1fr 1fr 50px 2fr}.one .player1{grid-column:span 2;grid-row-end:4;grid-row-start:2}.one .menu{grid-row-end:5;grid-row-start:4}.one .player{grid-template-columns:1fr 1fr}.one .player .add{grid-column-start:2;grid-row:span 2}.one .player .subtract{grid-column-start:1;grid-row:span 2}.one .player p{transform:translateX(-50%) translateY(-50%)}.two .player1,.two .player2{grid-column:span 2}.two .player2{grid-row-end:4;grid-row-start:3}.two .player{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.two .player1 .add{grid-column-end:2;grid-column-start:1;grid-row-end:2;grid-row-start:1}.two .player1 p{transform:translateX(-50%) translateY(-50%) rotate(180deg)}.two .player2 p{transform:translateX(-50%) translateY(-50%)}.three{grid-template-rows:1.8fr 50px 1fr}.three .player3{grid-column:span 2}.three .player2 .add{grid-row-end:2;grid-row-start:1}.three .player3{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.three .player3 p{transform:translateX(-50%) translateY(-50%)}.three .player1 svg,.three .player2 svg{transform:rotate(90deg)}.three .player1 p{transform:translateX(-50%) translateY(-50%) rotate(90deg)}.three .player2 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.four .player1 p,.four .player3 p{transform:translateX(-50%) translateY(-50%) rotate(90deg)}.four .player2 p,.four .player4 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.four .player2 .add,.four .player4 .add{grid-row-end:2;grid-row-start:1}.four .player svg{transform:rotate(90deg)}}@media only screen and (min-width:600px) and (min-height:300px) and (orientation:landscape){.app{grid-template-columns:1fr 50px 1fr;grid-template-rows:1fr 1fr}.menu{flex-direction:column;grid-column-end:3;grid-column-start:2;grid-row-end:3;grid-row-start:1;justify-content:center}.player-menu{flex-direction:column-reverse}.settings{margin:15px 0}.people,.player-selector,.refresh{transform:rotate(-90deg)}.one{grid-template-columns:1fr 4fr 1fr;grid-template-rows:1fr 1fr 50px .5fr}.one .menu{flex-direction:row-reverse}.one .people,.one .player-selector,.one .refresh{transform:rotate(0)}.one .player-menu{flex-direction:row}.one .player{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.one .player1{grid-column-end:3;grid-column-start:2;grid-row-end:3;grid-row-start:1}.one .menu{grid-column-end:end;grid-column-start:1;grid-row-end:4;grid-row-start:3}.one .player1 p{transform:translateX(-50%) translateY(-50%)}.two{grid-template-rows:1fr}.two .player1{grid-column-end:2;grid-column-start:1}.two .player{grid-row-end:2;grid-row-start:1;grid-template-columns:1fr;grid-template-rows:1fr 1fr}.two .player1 .add{grid-row-end:3;grid-row-start:2}.two .player2 .add{grid-row-end:2;grid-row-start:1}.two .player svg{transform:rotate(90deg)}.two .player1 p{transform:translateX(-50%) translateY(-50%) rotate(90deg)}.two .player2 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.three{grid-template-columns:1.7fr 50px 1fr;grid-template-rows:1fr 1fr}.three .player1,.three .player2{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.three .player1{grid-row-end:3;grid-row-start:2}.three .player1,.three .player2{grid-column-end:2;grid-column-start:1}.three .player2{grid-row-end:2;grid-row-start:1}.three .player3{grid-column-end:4;grid-column-start:3;grid-row-start:1;grid-row:span 2;grid-template-columns:1fr;grid-template-rows:1fr 1fr}.three .player2 .add,.three .player3 .add{grid-column-end:2;grid-column-start:1;grid-row-end:2;grid-row-start:1}.three .player1 p{transform:translateX(-50%) translateY(-50%)}.three .player2 p{display:block;transform:translateX(-50%) translateY(-50%) rotate(180deg)}.three .player3 p{transform:translateX(-50%) translateY(-50%) rotate(-90deg)}.three .player3 svg{transform:rotate(90deg)}.three .player1 svg,.three .player2 svg{transform:rotate(180deg)}.four .player2,.four .player4{grid-column-start:3}.four .player{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.four .player1{grid-row-end:3;grid-row-start:2}.four .player2{grid-column-end:2;grid-column-start:1}.four .player2,.four .player4{grid-row-end:2;grid-row-start:1}.four .player4{grid-column-end:4;grid-column-start:3}.four .player1 .subtract{grid-column-end:2;grid-column-start:1}.four .player1 .subtract,.four .player2 .add,.four .player4 .add{grid-row-end:2;grid-row-start:1}.four .player2 .subtract,.four .player4 .subtract{grid-column-end:3;grid-column-start:2;grid-row:span 2}.four .player1 p,.four .player3 p{transform:translateX(-50%) translateY(-50%)}.four .player2 p,.four .player4 p{transform:translateX(-50%) translateY(-50%) rotate(180deg)}.four .player svg{transform:rotate(180deg)}}@media only screen and (orientation:landscape){.two .settings-modal{transform:rotate(-90deg)}}
/*# sourceMappingURL=main.7cb54401.css.map*/