*{margin:0;padding:0}a{color:#646cff;text-decoration:inherit}h2{color:var(--color-text);line-height:1.5}h1,h2,h3,h4,h5,p,li{color:var(--color-text)}body{font-family:Raleway;margin:0;min-width:320px;min-height:100dvh}h1{font-size:3.2em;line-height:1.1}h3{font-size:2.2em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s;border:none;color:var(--color-button-text)}input:focus{border:none;outline:none;caret-color:#00000040}imput{font-family:inherit}button:focus,button:focus-visible{outline:none}a:hover{color:#747bff}button{background-color:var(--color-button-primary);transition:transform .5s ease-out}button.disabled{transition:0}button:hover{border-color:var(--color-button-border-hover);transform:scale(.9);background-color:var(--color-button-primary-hover)}:root{--color-button-border-hover: #cadfe0;--color-button-primary: #6d6875;--color-button-primary-hover: #6d6875;--color-button-submit: #473C00;--color-button-submit-hover: #A28900;--color-text: #474747;--color-button-text: white;--color-input-focus-border: #474747;--color-input-hover: #FFFCEA;--color-chatdisplay: #ffb4a2;--color-playersList: #ffb4a2;--color-userBox: #ffb4a2;--color-moreInfoBox: #ffb4a2;--color-rectangle: #e5989b;--color-alertWindow: #e5989b;--color-textbox: #e5989b;--shadow-medium: 0 4px 20px rgba(0, 0, 0, .2);--color-li: #87878720;--color-h2-background: #b5838d;--color-moreInfoBox-border: #b5838d;--color-playersList-border: #b5838d;--color-writter: #38A700;--color-timeBar-conatiner: #FDFBD4;background:linear-gradient(to bottom,#ffcdb2 70%,#fff)}.btn-primary{padding:8px 16px;border-radius:12px;border:none;background:var(--color-button-submit);color:#fff;cursor:pointer}.btn-primary:hover{background-color:var(--color-button-submit-hover);opacity:.9}.btn-secondary{padding:8px 16px;border-radius:12px;cursor:pointer}.btn-secondary:hover{background:#f3f3f3}.btn-close{width:32px;height:32px;border-radius:50%;border:1px solid #ddd;background:#fff;cursor:pointer;text-align:center}.overlay{position:fixed;inset:0;background:#00000080;display:grid;place-items:center}.modal{background:var(--color-chatdisplay);border-radius:16px;padding:24px;max-width:400px;width:100%;box-shadow:0 4px 20px #0003;z-index:10002}.modal-header{display:flex;justify-content:space-between;align-items:start;gap:12px}.modal-form{margin-top:16px;display:flex;flex-direction:column;gap:8px}.modal-form input{padding:8px;border:1px solid #ccc;border-radius:8px;outline:none}.modal-form input:focus{border-color:var(--color-input-focus-border)}.error{color:red;font-size:14px}.modal-actions{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}@media (max-width:768px){.modal{max-width:200px}}.overlay{position:fixed;inset:0;background-color:#00000080;display:grid;place-items:center;z-index:1001}.window{background-color:var(--color-alertWindow);border-radius:16px;padding:24px;max-width:400px;width:100%;box-shadow:var(--shadow-midium)}.window p{font-family:inherit;padding-bottom:10px;font-weight:20;font-size:1.2rem;font-weight:250;color:#213547}.button-div{display:grid;place-items:center}.window button{padding:8px 16px;border-radius:12px;background:var(--color-button-primary);cursor:pointer}.window button:hover{background:var(--color-button-primary-hover)}@media (max-width:768px){.window{max-width:200px}}.home-container{position:relative;place-items:center;display:grid;margin:2% 0;height:100%}.create-button{position:relative;display:inline-block;width:200px;padding:3px;border-radius:12px;z-index:0;background:transparent}.create-button>button:hover{background:inherit;color:inherit;transition:background .5s ease,color .5s ease}@property --angle{syntax: ""; initial-value: 0deg; inherits: false;}.create-button:after,.create-button:before{position:absolute;top:0;left:0;content:"";width:100%;height:100%;border-radius:inherit;background-image:conic-gradient(from var(--angle),transparent,white);animation:2.5s spin linear infinite}.create-button:hover:after,.create-button:hover:before{animation:none;background-image:none}.create-button:hover{background:#ffffff1a;z-index:1}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}.create-button:before{filter:blur(1.5rem);opacity:.5;z-index:0}.create-button:after{z-index:-1}.create-button>button{display:block;width:100%;border-radius:inherit;background-color:var(--color-button-primary);color:var(--color-button-text);padding:.6em 1.2em;border:none;position:relative;z-index:1}.home-container-button{display:flex;flex-direction:column;gap:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arrow-container{display:contents}.arrow{pointer-events:none;position:absolute;width:250px;height:250px}.arrow-1{bottom:calc(100% + 10px);right:calc(60% + 10px)}.arrow-2{bottom:calc(100% + 10px);left:calc(40% + 10px)}.arrow-3{top:calc(30% + 10px);left:calc(60% + 10px)}.arrow-4{top:calc(30% + 10px);right:calc(80% + 10px)}@media (max-width: 768px){.home-container{margin:10% 0}.arrow{width:150px;height:150px}.home-container-button button{width:100%}.arrow-1{bottom:calc(100% + 5px);right:calc(80% + 5px)}.arrow-2{bottom:calc(100% + 5px);left:calc(60% + 5px)}.arrow-3{top:calc(60% + 5px);left:calc(60% + 5px)}.arrow-4{top:calc(30% + 5px);right:calc(80% + 5px)}}.cart{position:absolute;margin:50%;transform:translate(-50%,-50%);max-width:400px;width:100%;border-radius:16px;z-index:10;background-color:var(--color-chatdisplay)}.overlay{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:10000}.cart-form{display:flex;align-items:center;margin-top:16px;flex-direction:column;gap:4px;padding:10px}.cart-form>input{text-align:center}.cart-header{display:flex;justify-content:space-between;align-items:start;gap:12px}@media (max-width: 768px){.cart{max-width:200px}}.chat{display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--shadow-medium);border-radius:0 0 1rem 1rem;width:30vw;height:100%}.chat-input{width:100%;background-color:var(--color-chatdisplay);display:grid;place-items:center;border-radius:0 0 1rem 1rem}.chat-input input{font-size:20px;width:90%;box-sizing:border-box;border:none;border-radius:.8em;padding:10px;margin:.8em auto;background-color:var(--color-textbox);color:#000}.chat-input input:hover{opacity:.66}.chat-display ul{padding:0;margin:2%}.chat-display li{overflow-wrap:break-word;font-size:25px}.chat-display{display:flex;flex-direction:column;position:static;overflow-y:auto;overflow-x:hidden;background:linear-gradient(to bottom,white,var(--color-chatdisplay),var(--color-chatdisplay));width:100%;height:100%;white-space:normal;overflow-wrap:break-word;text-overflow:ellipsis}@media (max-width: 768px){.chat{width:80vw;max-width:90%;height:60dvh}}.chat-box{position:static;display:inherit;border:var(--color-chatdisplay) 2px solid;border-radius:16px 16px 0 0;background:var(--color-textbox);overflow:auto;width:99.5%;height:70dvh}.chat-box ul{padding:0;margin:2%}.chat-box ul li{font-size:25px}@media (max-width: 768px){.chat-box{height:60dvh}}input{font-size:20px;width:90%;box-sizing:border-box;border:none;border-radius:.8em;padding:10px;margin:.8em auto;background-color:var(--color-textbox);color:var(--color-text)}input:hover:not(:disabled){opacity:.66}input:disabled{opacity:.5;cursor:not-allowed}.chat-input{width:100%;background-color:var(--color-chatdisplay);display:grid;place-items:center}.player-avatar{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1dvh;width:5vw;height:5vw;border-radius:50%;transform:translate(-50%,-50%);color:#fff;background-color:#a9a9a9}.player-avatar .avatar-initial{display:flex;justify-content:center;align-items:center;height:100%;cursor:default;font-size:2vw}.player-avatar.me{background-color:var(--color-writter);width:inherit * 2.1;height:inherit * 2.1}.player-avatar.writter{border:powderblue .5vw solid}.player-avatar.me .avatar-full-name{background-color:var(--color-writter)}.player-avatar .avatar-full-name{font-size:2vw;background-color:#a9a9a9;width:max-content;border-radius:5px;display:none;cursor:default}.player-avatar:hover .avatar-full-name{display:block}.player-avatar:hover .avatar-initial{display:none}.time-bar-container{display:grid;grid-area:1/1;width:100%;max-width:250px;height:30px;background-color:var();border-radius:5px;overflow:hidden;z-index:1;border:5px outset black}.time-bar{height:60px;text-align:center;line-height:30px;color:#fff;font-weight:700;transition:width 1s linear}ul{display:flex;flex-direction:column;text-align:left;list-style-type:none;padding:0%;margin:0 0%;gap:.3em;box-sizing:border-box}.h1-wrapper{height:58px}.lobby-container{display:flex;flex-direction:row;justify-content:space-between;margin:0;height:80dvh}.players-box h2{background-color:var(--color-h2-background);border-radius:inherit;margin-bottom:10px}.main-div{display:flex;flex-direction:column;align-items:center;margin:2% auto 0;box-sizing:border-box}.player-grid-container{width:60vw;height:60dvh;width:min(50vw,50dvh);height:min(50vw,50dvh);margin:auto;display:grid;gap:5px;box-sizing:border-box}.right-column{container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:400px;margin-top:2%;margin-right:2%}@container (max-width:190px){.right-column>*{display:none}}.more-info-box{border-radius:10px;border:5px solid var(--color-moreInfoBox-border);width:80%;height:auto;background-color:var(--color-moreInfoBox);box-shadow:var(--shadow-medium)}.more-info-box p{text-align:left;margin:5%;line-height:1.6}.player-cell{display:flex;justify-content:center;align-items:center;overflow:hidden}.player-button{width:100%;height:100%;border:2px solid #333;background-color:var(--color-button-primary);cursor:pointer;font-size:clamp(.5rem,1.5vw + 1.5dvh,2rem);text-align:center;padding:0;margin:0;box-sizing:border-box;white-space:normal;line-height:1.2}.player-button.disabled:hover,.player-button:disabled:hover{background-color:#95a5a6;cursor:not-allowed;transform:none}.player-button.disabled,.player-button:disabled{background-color:#95a5a6;color:#ecf0f1;cursor:not-allowed}.player-button:hover{background-color:var(--color-button-primary-hover)}.left-column{display:flex;flex-direction:column;gap:40px;width:20vw;margin:2% 0 0 2%}.left-column .more-info-box,.more-info-box{margin-top:auto}.players-box{display:flex;border-radius:20px 20px 0 0;flex-direction:column;background:linear-gradient(to bottom,var(--color-h2-background),var(--color-playersList));box-shadow:var(--shadow-medium);width:90%;height:400px}.players-toggle{display:none}.chat-div{display:flex;flex-direction:column;box-shadow:var(--shadow-medium);margin:1em;place-items:center;border-radius:.01rem}.chat-div-playing{position:relative;display:grid;place-items:center;margin:1em auto;width:40vw;height:auto;border-radius:.01rem}.player-positions{grid-area:1/1;z-index:1;width:100%;height:100%;position:relative}.player-circle{width:75px;height:75px;background-color:gray;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transform:translate(-50%,-50%)}.player-circle.me{background-color:var(--color-writter)}.player-circle.writer{border:powderblue 10px solid}.table-container{z-index:0;grid-area:1/1;width:100%;height:100%;object-fit:contain}.chat-stack{display:flex;flex-direction:column;justify-content:center;align-items:center;grid-area:1/1;width:90%;max-width:600px;height:100%;min-height:200px;max-height:300px;border-radius:10%;overflow:hidden;z-index:2}.button-box{display:grid;place-items:center}li::marker{content:none}.players-box li{width:100%;background-color:var(--color-li);padding:.3em 1em;font-size:1.5rem}.chat-display li{border-bottom:2px solid var(--color-moreInfoBox-border);box-sizing:content-box;padding:0}li{width:100%;padding:0 .5em;font-size:1.5rem;box-sizing:border-box}h2{padding:0% 1%;margin:0% 0}@keyframes scaleIn{0%{font-size:2.5em;opacity:.8}to{font-size:3em;opacity:1}}h1{animation-name:scaleIn;animation-duration:.8s;animation-timing-function:ease-out;animation-fill-mode:forwards}.start-game-btn{display:flex;margin:2% 0;align-items:center;justify-content:center}.right-chat,.left-chat{display:flex;align-items:center;margin:0 2%}.start-game-btn button{box-shadow:var(--shadow-medium);width:200px;height:50px;font-size:20px}.left-chat-toggle,.right-chat-toggle{display:none}@media (max-width: 768px){.players-box{position:absolute;display:none}.right-chat,.left-chat{display:none}.main-div{display:flex;flex-direction:column;align-items:center;margin:10px auto 0}.player-circle{width:25px;height:25px}.right-column{display:none}.lobby-container{margin:0}.more-info-box{display:none}.players-toggle{position:absolute;bottom:0;left:0;margin:0 0 2% 2%;display:block}.left-column{width:0;margin:0}.players-toggle button{padding:1%}.chat-div-playing{width:100%}.players-overlay{top:0;position:absolute;background:#0006;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:100vw;height:100dvh}.players-box.active{opacity:1;display:flex;position:absolute;border-radius:0 20px 20px 0;height:50%;width:60%;z-index:100}.left-chat-toggle,.right-chat-toggle{display:inline;position:absolute;bottom:1dvh}.left-chat-toggle{left:1dvh}.right-chat-toggle{right:1dvh;transform:scaleX(-1)}.playing-overlay{top:0;position:absolute;background:#0006;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);width:100vw;height:100dvh;z-index:3}.left-chat.lactive{display:flex;flex-direction:column;align-items:start;left:0}.right-chat.ractive{display:flex;flex-direction:column;align-items:end;right:0}.right-chat.ractive,.left-chat.lactive{box-sizing:border-box;position:absolute;width:auto;height:auto;z-index:4;margin:0}}h1,h2,h3,h4,h5,p{text-align:center;z-index:1;position:relative;padding:10px}p{font-size:20px}.outer-container{position:relative;z-index:100;margin:0 17%}.decor-rectangle{position:absolute;background-color:var(--color-rectangle);z-index:101}@media (max-width: 768px){.outer-container{margin:0}}.navbar-container{display:flex;width:100%;position:relative;height:5dvh}.navbar-container a{width:100%;height:100%;flex:1}.navbar-container button{width:100%;border-radius:0;flex:1;height:100%}.navbar-container button:hover{transform:none}.nav-links{display:flex;flex-direction:row;justify-content:space-between;width:100%;align-items:center;height:100%}.menu-toggle{font-size:1.5rem;margin-left:1%;margin-top:2%;cursor:pointer;display:none;z-index:1001}.backdrop{position:fixed;top:0;left:0;width:100vw;height:100dvh;background:#0006;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000}@media (max-width: 768px){.navbar-container button{flex-direction:column;text-align:left}.nav-links{position:absolute;top:3rem;left:0;right:0;flex-direction:column;background:#333;opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:1002}.menu-toggle{display:block;cursor:pointer}.nav-links.active{opacity:1;transform:translateY(0);pointer-events:auto;display:flex;flex-direction:column;position:absolute;top:1rem;left:0}}