:root{--header_height: 5rem;--footer_height: 3.5rem;--small-gap: 1rem;--normal-gap: 2rem;--black: #000000;--white: #ffffff;--lightgray: #dadada;--green: #008a61;--gold: #ffd700;--background_color: #f0f0f0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:monospace;font-size:1em;list-style:none;text-decoration:none}body{width:100%;height:100dvh;background-color:var(--black)}main{width:100%;height:calc(100% - var(--header_height) - var(--footer_height));display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;background-color:var(--background_color)}h1{font-size:2.5rem}a:hover{text-decoration:underline}header{width:100%;height:var(--header_height);padding:0 2rem;display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:var(--white);background-color:var(--black)}nav{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--small-gap);z-index:999}#logo_container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--normal-gap)}#logo_container img{width:25px;height:25px}#logo_container a{text-decoration:none;color:var(--white)}#informations_menu_container{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--small-gap)}#informations_menu_container li a{text-transform:uppercase;color:var(--white)}#game_mode_menu_container{padding:.5rem;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:2rem;background-color:var(--white)}#game_mode_menu_container .game_mode_button input{display:none}#game_mode_menu_container .game_mode_button span{padding:.5rem 1rem;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:2rem;text-transform:uppercase;color:var(--black);cursor:pointer}#game_mode_menu_container .game_mode_button span.disabled_button{color:var(--lightgray);cursor:not-allowed}#game_mode_menu_container .game_mode_button input:checked+span{font-weight:800;color:var(--white);background-color:var(--black)}#restart_button{display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;transition:all .1s ease-in-out}#restart_button img{height:2rem}#restart_button:hover{transform:scale(1.1)}#hamburger_icon{position:relative;width:25px;height:25px;display:none;cursor:pointer;z-index:9999}.bar{position:absolute;top:50%;left:50%;width:100%;height:2px;border-radius:2.5px;background-color:var(--white);transform:translate(-50%,-50%)}#hamburger_icon .bar:nth-last-child(1){top:25%}#hamburger_icon .bar:nth-last-child(3){top:75%}#hamburger_icon.active .bar:nth-last-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}#hamburger_icon.active .bar:nth-last-child(2){opacity:0}#hamburger_icon.active .bar:nth-last-child(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg)}#othello_game_board_border{border:15px solid var(--black);border-radius:10px;box-shadow:25px 25px 35px #00000080}#othello_game_container{position:relative}#othello_game_container:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 25px #000;pointer-events:none}#game_board_layer{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--black)}.disc{width:65px;height:65px;border-radius:50%;box-shadow:2.5px 2.5px 5px #00000080}.disc.black{border:.5px solid #3c3c3c;background:radial-gradient(circle at 30% 30%,#333333,var(--black) 70%)}.disc.white{border:1px solid #c9c9c9;background:radial-gradient(circle at 30% 30%,var(--white),#cccccc 70%)}.highlighted_disc{outline:2px solid var(--gold)}.score_container{width:175px;height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--normal-gap);text-transform:uppercase}.score{font-size:5rem;font-weight:900;line-height:1}.lobby-container{width:100%;max-width:800px;margin:0 auto;padding:2rem}.lobby-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.lobby-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border:none;border-radius:.5rem;font-size:1rem;cursor:pointer;text-transform:uppercase;font-weight:700;transition:all .2s ease}.btn-primary{background-color:var(--green);color:var(--white)}.btn-primary:hover{background-color:#006d4e}.btn-secondary{background-color:var(--white);color:var(--black);border:2px solid var(--black)}.btn-secondary:hover{background-color:var(--lightgray)}.game-list{display:flex;flex-direction:column;gap:1rem}.game-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background-color:var(--white);border-radius:.5rem;box-shadow:0 2px 4px #0000001a}.room-code{font-family:monospace;font-size:1.25rem;font-weight:700;color:var(--green)}.room-code-form{display:flex;gap:.5rem;align-items:center}.room-code-input{padding:.75rem 1rem;font-size:1.25rem;font-family:monospace;text-transform:uppercase;letter-spacing:.25rem;border:2px solid var(--black);border-radius:.5rem;width:10rem;text-align:center}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000}.modal-content{background-color:var(--white);padding:2rem;border-radius:1rem;max-width:400px;width:90%}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:700}.form-group input{width:100%;padding:.75rem;border:2px solid var(--lightgray);border-radius:.5rem;font-size:1rem}.form-group input:focus{outline:none;border-color:var(--green)}.oauth-buttons{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.divider{display:flex;align-items:center;margin:1.5rem 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background-color:var(--lightgray)}.divider span{padding:0 1rem;color:var(--lightgray)}.game-status{text-align:center;padding:1rem;font-size:1.25rem;font-weight:700}.game-status.waiting{color:var(--gold)}.game-status.your-turn{color:var(--green)}.game-status.opponent-turn{color:var(--lightgray)}footer{width:100%;height:var(--footer_height);display:flex;flex-direction:row;justify-content:center;align-items:center;color:var(--white);background-color:var(--black)}@media(max-width:1200px){#hamburger_icon{display:block}nav{position:fixed;top:0;left:-100%;width:100%;height:100%;flex-direction:column;gap:50px;background-color:#000000e6;transition:all .3s ease-in-out}@supports (backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px)){nav{background-color:#000c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}}nav.active{left:0}nav span{display:none}#informations_menu_container{gap:50px;font-size:2rem;flex-direction:column}#game_mode_menu_container{width:100%;gap:25px;font-size:2rem;border-radius:0;flex-direction:column}#restart_button img{width:50px;height:50px}}@media(max-width:992px){#othello_game_board_border{border:13px solid var(--black);border-radius:9px;box-shadow:23px 23px 33px #00000080}}@media(max-width:768px){main{flex-direction:column}#othello_game_board_border{border:12px solid var(--black);border-radius:8px;box-shadow:21px 21px 30px #00000080}.score_container{flex-direction:row;transform:scale(.8)}}@media(max-width:576px){#othello_game_board_border{border:7px solid var(--black);border-radius:6px;box-shadow:15px 15px 22px #00000080}}@media(max-height:400px){main{flex-direction:row}nav{gap:5px}#informations_menu_container,#game_mode_menu_container{gap:5px;font-size:1.5rem}#othello_game_board_border{border:5.5px solid var(--black);border-radius:4px;box-shadow:10px 10px 14px #00000080}.score_container{transform:scale(.8)}}