#code-reader #qr-reader video{width:100%!important;height:auto!important}.modal-container{position:absolute;top:0;left:0;z-index:10;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background-color:#000000bf}.modal-container,.modal-container .modal{padding:1.25rem}.modal-container .modal{flex:1;position:relative;background-color:#fff;color:#000;border-radius:1rem;gap:2.5rem}.modal-container .modal.only-exit{padding:3.5rem 2.5rem 2.5rem}.modal-container .modal,.modal-container .modal .modal-content{display:flex;flex-direction:column}.modal-container .modal .modal-content{gap:1.25rem}.modal-container .modal .modal-content h2,.modal-container .modal .modal-content p{margin:0}.modal-container .modal .modal-content h2{font-size:1.5rem;line-height:1.5rem}.modal-container .modal .modal-content p{white-space:pre-line}.modal-container .modal .cross{position:absolute;top:1.25rem;right:1.25rem;color:var(--color-others-dark)}.modal-container .modal .actions{display:flex;justify-content:stretch;gap:1.25rem}.modal-container .modal .actions button{flex:1}#qr-code-container svg{height:auto;width:100%}#host #code{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem}#host #code #left,#host #code #flashcode{flex:1}#host #code #peerId{text-align:center;font-weight:700;font-size:1.25rem;line-height:1.25rem}#host #code #flashcode{display:flex;flex-direction:column;align-items:center;gap:.625rem}#host #code #flashcode svg{height:auto;width:100%;max-width:100px}#host #code #flashcode #zoom-text{font-size:.75rem}#join #inputs{display:flex;flex-direction:column;gap:1.25rem}#join #inputs #input-row{display:flex;justify-content:space-between;align-items:center;gap:1.25rem}#join #inputs #input-row :disabled{opacity:50%}#join #inputs #input-row :disabled,#join #inputs #input-row :disabled #peerId-input,#join #inputs #input-row :disabled #scanner{cursor:not-allowed}#join #inputs #input-row #scanner{font-size:2.25rem}#join #inputs #input-row #peerId-input{width:100%;font-weight:700;padding:.5rem 1rem;border-radius:.5rem;border:3px solid var(--color-secondary-default)}.title{font-family:jua;display:flex;flex-direction:column;align-items:center;color:var(--color-primary-default)}.title h1,.title h2{margin:0;font-weight:400;text-align:center}.title.landing{margin-top:10vh}.title.landing h1{font-size:80px}.title.landing h2{font-size:60px;margin-top:-45px}.title.small h2{margin-top:-15px}#connection{z-index:1;align-items:center}#connection .decoration{bottom:0;width:403px}#connection #top{position:relative;width:100%}#connection #top #close{position:absolute;top:0;right:0}#connection #connection-content{width:100%}#connection #connection-content h2{margin:0}#connection #connection-content #switch-tabs{margin:0 auto;display:flex;justify-content:center;background-color:var(--color-secondary-default);border-radius:2rem;width:100%}#connection #connection-content #switch-tabs .tab-item{cursor:pointer;letter-spacing:.3px;line-height:1.25rem;font-size:1rem;flex:1;font-weight:700;border-radius:2rem;padding:.5rem .25rem;color:var(--color-primary-default)}#connection #connection-content #switch-tabs .tab-item.selected{cursor:default;color:var(--color-others-dark);background-color:var(--color-primary-default)}#connection #connection-content #switch-tabs .tab-item p{text-align:center;margin:0}#connection #connection-content #switch-tabs .tab-item:disabled{cursor:not-allowed;opacity:.25}#connection #connection-content #container{flex:1;padding:0 1.25rem;display:flex;flex-direction:column;justify-content:center}#connection #connection-content #container .connection-box{display:flex;flex-direction:column;gap:2.5rem;border-radius:1rem;padding:1.25rem;color:var(--color-others-dark);background-color:var(--color-others-light)}#connection #connection-content #container .connection-box h2,#connection #connection-content #container .connection-box p{margin:0}#connection #connection-content #container .connection-box .btn{width:100%}#connection #connection-content #container .connection-box .box-title{line-height:1.5rem}#connection #connection-content #state{padding:1.25rem 0}@media screen and (min-height: 800px){#connection #connection-content #state{padding:2.5rem 0 0}}#connection #connection-content #state h2{text-align:center;font-size:1.5rem;line-height:1.5rem;color:var(--color-primary-default)}#board{flex:1;position:relative}#board canvas{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}header{position:relative}header .btn#reset{left:0}header .btn#exit{right:0}.player{display:flex;justify-content:center;gap:2rem;border-radius:1.25rem}.player.hide{display:none}.player h2{margin-top:0}.player .sprite-selector{font-size:2rem;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:.625rem;padding:0 .5rem .75rem}@keyframes flash{0%,50%,to{background-color:transparent}25%,75%{color:var(--color-secondary-darker);background-color:var(--color-primary-default)}}.player .sprite-selector.flashing{animation:flash .75s ease-in backwards}.player .sprite-selector p{margin:0;line-height:.75}.player .sprite-selector .sprite{width:60px;margin-bottom:.5rem}.player .sprite-selector.selected{color:var(--color-secondary-darker);background-color:var(--color-primary-default)}.player .sprite-selector.disabled{opacity:25%;cursor:not-allowed}#home #home-content #infos{display:flex;justify-content:space-between;width:100%}#home #home-content #infos #data{display:flex;flex-direction:column;gap:.25rem}#home #home-content #infos #data p{margin:0}#home #home-content #infos #turn{font-weight:700;text-align:center;font-size:1.5rem;line-height:1.5rem;margin:0}#landing{z-index:1;align-items:center;justify-content:space-between;padding:2.5rem 1.25rem;background-color:var(--color-secondary-darker)}#landing #credits{position:absolute;top:1.25rem;right:1.25rem;color:var(--color-secondary-default);background-color:var(--color-others-light);border-radius:50rem;width:2rem;height:2rem}#landing #sprite1{width:163px;left:41%;bottom:182px}@media screen and (max-width: 300px){#landing #sprite1{left:38%}}@media screen and (max-width: 250px){#landing #sprite1{left:36%}}#landing #sprite2{width:47px;left:13%;bottom:263px;transform:rotate(18deg)}#landing #image{bottom:100px;width:403px}#landing #play{display:flex;flex-direction:column;gap:1.25rem;width:100%}#landing #play .btn{line-height:unset!important}@media screen and (min-height: 700px){#landing #play{padding-bottom:.625rem}}#frame{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:stretch;overflow:hidden;width:100svw;height:100svh;max-width:393px;max-height:852px}@media screen and (min-height: 860px){#frame{border-radius:1rem}}:root{--color-primary-default: #ffbf2b;--color-secondary-default: #173a5d;--color-secondary-darker: #082046;--color-others-light: #ffffff;--color-others-dark: #000000;--color-others-alert: #ff3d3d;--color-others-valid: #0cbf30}*,*:before,*:after{box-sizing:border-box}.material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}html,body,#root{height:100%}body{font-family:"Baloo 2",sans-serif;margin:0;color:var(--color-others-light);background-color:var(--color-others-dark)}#root{display:flex;justify-content:center;align-items:center}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}p{letter-spacing:.3px;line-height:1.25rem}button{background:transparent;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;border:none;outline:none;margin:0;padding:0;font-family:"Baloo 2",sans-serif;cursor:pointer}.btn,button.btn{text-align:center;text-decoration:none;font-weight:700;font-size:1rem;line-height:1rem}.btn:disabled,button.btn:disabled{opacity:50%}.btn:before,.btn:after,button.btn:before,button.btn:after{border-radius:.5rem}.btn.rounded:before,.btn.rounded:after,button.btn.rounded:before,button.btn.rounded:after{border-radius:2rem}.btn.icon,button.btn.icon{position:absolute!important;top:0;display:flex;align-items:center;justify-content:center;width:35px;height:40px}.btn.primary,.btn.valid,.btn.alert,button.btn.primary,button.btn.valid,button.btn.alert{position:relative;z-index:0;color:var(--color-others-dark);padding:calc(.5rem + 3px) 1rem calc(.5rem + 7px) 1rem}.btn.primary:hover:not(:disabled),.btn.valid:hover:not(:disabled),.btn.alert:hover:not(:disabled),button.btn.primary:hover:not(:disabled),button.btn.valid:hover:not(:disabled),button.btn.alert:hover:not(:disabled){padding-top:calc(.5rem + 8px);padding-bottom:calc(.5rem + 2px)}.btn.primary:hover:not(:disabled):before,.btn.primary:hover:not(:disabled):after,.btn.valid:hover:not(:disabled):before,.btn.valid:hover:not(:disabled):after,.btn.alert:hover:not(:disabled):before,.btn.alert:hover:not(:disabled):after,button.btn.primary:hover:not(:disabled):before,button.btn.primary:hover:not(:disabled):after,button.btn.valid:hover:not(:disabled):before,button.btn.valid:hover:not(:disabled):after,button.btn.alert:hover:not(:disabled):before,button.btn.alert:hover:not(:disabled):after{top:5px;bottom:0}.btn.primary:before,.btn.primary:after,.btn.valid:before,.btn.valid:after,.btn.alert:before,.btn.alert:after,button.btn.primary:before,button.btn.primary:after,button.btn.valid:before,button.btn.valid:after,button.btn.alert:before,button.btn.alert:after{content:"";z-index:-1;position:absolute;left:0;right:0;top:0}.btn.primary:after,.btn.valid:after,.btn.alert:after,button.btn.primary:after,button.btn.valid:after,button.btn.alert:after{bottom:5px;border:3px var(--color-others-dark) solid;background-color:var(--color-primary-default)}.btn.primary:before,.btn.valid:before,.btn.alert:before,button.btn.primary:before,button.btn.valid:before,button.btn.alert:before{bottom:0;background-color:var(--color-others-dark)}.btn.valid:after,button.btn.valid:after{background-color:var(--color-others-valid)}.btn.alert:after,button.btn.alert:after{background-color:var(--color-others-alert)}.btn.secondary,button.btn.secondary{color:var(--color-primary-default)}.btn.secondary:hover,button.btn.secondary:hover{text-decoration:underline}.view{flex:1;position:relative;display:flex;flex-direction:column}.view.default{background:linear-gradient(var(--color-secondary-darker),var(--color-secondary-default));padding:1.25rem;gap:1.25rem}.content{flex:1;display:flex;flex-direction:column;gap:1.25rem}@media screen and (min-height: 700px){.content{padding:1.25rem 0}}@media screen and (min-height: 800px){.content{padding:2.5rem 0}}.decoration{position:absolute;z-index:-1}