@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Ruthie&display=swap";@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap";html,body{font-family:Fraunces,serif}input{all:unset}body{background-image:url(/assets/eastBlue-ClIsXDZ_.png);background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed}body:before{content:"";position:fixed;background-attachment:fixed;top:0;right:0;bottom:0;left:0;background-color:#1e2e4fe6;z-index:-1}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:default;height:100dvh}.login-page .modal-login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5dvh;color:#0a1931}.login-page .modal-login .section-one-piece-game-title{display:flex;justify-content:center;align-items:center;padding:10px 0;font-family:Fraunces,serif;width:400px;border-radius:5px;z-index:1;box-shadow:0 4px 12px #00000080;color:#e3c494}.login-page .modal-login .section-one-piece-game-title h3{font-family:Fraunces,serif;font-weight:600;font-size:26px}.login-page .modal-login .information-player{display:flex;justify-content:center;align-items:center;flex-direction:column;width:400px;text-align:center;gap:5px;border-radius:5px;padding:10px 0;background-color:#fef7e5;box-shadow:0 4px 12px #00000080;font-weight:500}.login-page .modal-login .information-player input{padding:10px 20px;width:60%;font-size:18px;text-align:center;background-color:#f0d8b6;border-radius:0}.login-page .modal-login .information-player input::placeholder{color:#7a5e3c;font-weight:500}.login-page .modal-login .information-player input,.login-page .modal-login .information-player button{padding:10px 20px;width:60%;font-size:clamp(16px,2vw,20px);background-color:#f0d8b6}.login-page .modal-login .information-player input:hover,.login-page .modal-login .information-player button:hover{cursor:pointer;background-color:#b3926f;transform:scale(1.03)}.login-page .modal-login .room-section{display:flex;justify-content:center;align-items:center;flex-direction:column;width:400px;padding:10px 0;border-radius:5px;gap:10px;background-color:#fef7e5;text-align:center;box-shadow:0 4px 12px #00000080;font-weight:500}.login-page .modal-login .room-section button:disabled{opacity:.4;cursor:default!important;filter:grayscale(100%);transform:none!important;pointer-events:none!important;-webkit-user-select:none!important;user-select:none!important}.login-page .modal-login .room-section .join-row{display:flex;justify-content:center;width:70%}.login-page .modal-login .room-section .join-game-section{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:5px;background-color:#fef7e5;width:100%}.login-page .modal-login .room-section button{padding:10px 0;width:70%;font-size:clamp(16px,2vw,20px);background-color:#f0d8b6}.login-page .modal-login .room-section button:hover{cursor:pointer;background-color:#b3926f;transform:scale(1.03)}.login-page .modal-login .room-input{background-color:#f0d8b6;text-align:center;width:70%;cursor:pointer}.free-content{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:300px;width:200px;padding:20px;border-radius:5px;background:#1b305333;box-shadow:0 4px 12px #00000080;border:3px solid rgb(44,62,92);color:#f0d8b6}.free-content h3{display:flex;justify-content:center;color:#b3926f;font-size:22px;font-weight:600}.free-content p{font-family:Fraunces,serif;font-size:16px;font-weight:500;margin:10px 0;color:#f0d8b6}.paying-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;width:200px;padding:20px;border-radius:5px;background:#1b305333;box-shadow:0 4px 12px #00000080;border:3px solid rgb(44,62,92)}.paying-container .content-description{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f0d8b6}.paying-container .paying-content{display:flex;flex-direction:column}.paying-container .paying-content p{color:#f0d8b6}.paying-container .paying-content .button-container{display:flex;justify-content:center;margin-top:10px}.paying-container .paying-content .button-container .button-premium{display:flex;justify-content:center;background-color:#b3926f;color:#0a1931;border-radius:15px;padding:10px 20px;font-weight:700}.paying-container .paying-content .button-container .button-premium:hover{cursor:pointer;transform:scale(1.05)}.paying-container h3{color:#b3926f;display:flex;justify-content:center;font-size:24px;font-weight:600}.paying-container p{font-family:Fraunces,serif;font-size:16px;font-weight:500;margin:15px 0}.info-collapses{display:flex;flex-direction:column;gap:15px}.info-collapses .collapse{border-radius:5px;overflow:hidden;box-shadow:0 4px 6px -4px #0000004d;width:400px;box-shadow:0 4px 12px #00000080;color:#0a1931}.info-collapses .collapse .collapse-header{all:unset;display:flex;justify-content:center;align-items:center;padding:10px 0;cursor:pointer;font-family:Fraunces,serif;font-weight:600;font-size:20px;width:100%;z-index:1;background:#f0d8b6}.info-collapses .collapse .collapse-header:hover{background-color:#b3926f}.info-collapses .collapse .collapse-content{background:#fef7e5;padding:5px 20px;font-family:Fraunces,serif;font-size:16px;color:#000;line-height:1.5}.info-collapses .collapse .collapse-content p{font-weight:500;font-size:16px;color:#0a1931}.login-wrapper{display:flex;align-items:center;gap:10dvh}@media (max-width: 1030px){.login-wrapper{flex-direction:column;align-items:center;gap:40px}}.modal-avatar-panel{display:grid;grid-template-columns:repeat(3,2);justify-content:center;align-items:center;background:#1b305333;border:3px solid rgb(44,62,92);box-shadow:0 4px 12px #00000080;width:320px;height:210px;border-radius:5px}.modal-avatar-panel .modal-avatar-header{display:flex;justify-content:center;margin:10px 0 15px}.modal-avatar-panel .modal-avatar-header h4{padding:0;margin:0;font-size:24px;font-family:Cinzel}.modal-avatar-panel .modal-avatar-header .close-btn{display:flex;all:unset;cursor:pointer;margin-right:15px;border:1px solid black;border-radius:50px;padding:2px 5px 0}.avatar-grid{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:17px}.avatar-grid img{height:80px;width:80px;border-radius:10px;object-fit:contain;cursor:pointer;border:1px solid #f0d8b6;image-rendering:auto}.avatar-grid img:hover{transform:scale(1.07);box-shadow:0 4px 6px -4px #0000004d}.avatar-grid img.selected{border:1px solid #b3926f;transform:scale(1.1)}footer{width:80%;display:flex;flex-direction:column;justify-content:center}footer .footer{display:flex;justify-content:center;align-items:center;gap:30px;width:100%;margin:0 0 15px;box-shadow:0 4px 12px #0000004d}footer .footer img{height:230px}footer .footer h3{display:flex;align-items:center;justify-content:center;background:#1b305380;color:#e3c494;width:100%;padding:10px 0;font-weight:400;font-family:Fraunces,serif;font-size:20px;box-shadow:0 4px 6px -4px #0000004d}footer .footer h3 span{padding-left:7px;font-weight:700}.footer-separate{display:flex;align-items:center;height:2px;width:210px;background-color:#b3926f;margin:0 auto 30px}.logo-j{position:relative;font-family:serif;font-size:37px;font-weight:400;margin:0;padding:0;color:#e3c494}header{position:relative;width:100%;background:#1b305380;font-family:Fraunces,serif;box-shadow:0 4px 12px #0000004d}header .header{display:flex;align-items:center;justify-content:space-around;padding:25px 0;width:100%;gap:15px}header .header .header-link{display:flex;align-items:center;justify-content:center}header .header .header-link h2{position:relative;font-family:Fraunces,serif;font-size:18px;font-weight:500;margin:0;padding:0;color:#e3c494}header .header .header-banner{position:absolute;left:50%;transform:translate(-50%);top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}header .header .header-banner h1{position:relative;font-family:Fraunces,serif;font-size:35px;font-weight:400;margin:0;padding:0;color:#e3c494}header .header .login-header{display:flex;justify-content:center;gap:40px}header .header .login-header .user-info{display:flex;gap:2vw;color:#e3c494;font-size:clamp(18px,2vw,19px)}header .header .login-header a{font-weight:600;font-size:18px;text-decoration:none;color:#e3c494}header .header .login-header button:hover{cursor:pointer;color:#b3926f}header .header-separate{display:flex;align-items:center;height:2px;width:210px;background-color:#b3926f;margin:0 auto}.container-card-name{display:flex;flex-direction:column;width:fit-content;max-height:500px;overflow-y:auto;padding:5px;gap:10px}.container-card-name::-webkit-scrollbar{width:8px}.container-card-name::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px}.container-card-name .player-wrapper{display:flex;align-items:center;gap:10px}.container-card-name .ready-status{width:20px;font-size:24px}.container-card-name .card-name{display:flex;align-items:center;background-color:#f0d8b6;height:85px;width:270px;border-radius:15px;border:3px solid #f0d8b6}.container-card-name .card-name img{height:85px;border-top-left-radius:15px;border-bottom-left-radius:15px}.container-card-name .card-name p{margin-left:10px;font-size:20px;width:155px;max-width:155px;font-family:Fraunces,serif;font-weight:400;color:#000}.result-page{display:flex;flex-direction:column;text-align:center;align-items:center;height:100dvh;justify-content:space-between}.result-page h2{font-size:30px;font-weight:500;margin-top:40px;color:#fff}.result-page .return-salon-container button{color:#f0d8b6;font-size:22px}.result-page .return-salon-container button:hover{color:#b3926f}.result-page .player-rank{font-size:40px;color:#b3926f;margin-right:30px}.result-page .player-rank .placement{font-size:20px;vertical-align:super;color:#b3926f}.result-page .player-score{font-size:20px;color:#fff;margin-left:20px}.result-page .results-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;margin:0 auto}.result-page .result-card{display:flex;align-items:center;justify-content:space-between;background:#222;padding:12px 16px;border-radius:12px;box-shadow:0 4px 10px #0000004d;color:#fff}.result-page .result-card .player-info{display:flex;align-items:center;gap:12px}.result-page .result-card .player-info .avatar-img{width:48px;height:48px;border-radius:50%;border:2px solid #fff}.result-page .result-card .player-info .username{font-size:1.2rem;font-weight:500}.result-page .result-card .score{font-size:1.2rem;font-weight:700;color:#fc0}button{all:unset;cursor:pointer}h2,h3{margin:0;padding:0}.separate{display:flex;align-items:center;height:2px;width:210px;background-color:#b3926f;margin:0 auto}.container-waiting .container-ready-button{display:flex;flex-direction:column;align-items:center;gap:40px;width:100%}.container-waiting .container-ready-button .waiting-room{display:flex;justify-content:center;align-items:center;background-color:#f0d8b6;font-family:Fraunces,serif}.container-waiting .container-ready-button .waiting-room h2{font-size:20px;padding:10px 105px;font-weight:600;color:#000}.container-waiting .container-ready-button .arc-selection{display:flex;flex-direction:column;background-color:#f0f0dc;gap:10px;padding:15px;border-radius:5px}.container-waiting .container-ready-button .arc-selection .select-all{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}.container-waiting .container-ready-button .arc-selection .select-all button{display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;width:300px;height:40px;background-color:#f0d8b6;font-weight:700;border-radius:5px}.container-waiting .container-ready-button .arc-selection .select-all button:hover{background-color:#b3926f;box-shadow:0 4px 6px -4px #0006;transform:scale(1.02)}.container-waiting .container-ready-button .arc-selection .choose-arc{display:flex;justify-content:center;font-size:18px;padding:10px}.container-waiting .container-ready-button .arc-selection .choose-arc h3{font-family:Fraunces,serif;font-weight:600}.container-waiting .container-ready-button .arc-selection .arc-buttons{display:grid;gap:10px 20px;grid-auto-flow:column;justify-content:center;grid-template-rows:repeat(3,auto);justify-items:center;align-items:center;margin-bottom:10px}.container-waiting .container-ready-button .arc-selection .arc-buttons .arc-button{width:180px;height:45px;font-size:18px;font-weight:700;text-align:center;border:2px solid transparent;transition:.2s ease;box-shadow:0 4px 6px -4px #0000004d;background-color:#f0d8b6;border-radius:5px}.container-waiting .container-ready-button .arc-selection .arc-buttons .arc-button.selected{background-color:#b3926f}.container-waiting .container-ready-button .arc-selection .arc-buttons .arc-button:disabled{background-color:#d6d6d6;color:#888;cursor:default;box-shadow:none;transform:none;opacity:.8}.container-waiting .container-ready-button .arc-selection .arc-buttons .arc-button:hover:not(:disabled){background-color:#b3926f;box-shadow:0 4px 6px -4px #0006;transform:scale(1.02)}.container-waiting .container-ready-button .ready-button{display:flex;gap:3vw}.container-waiting .container-ready-button .ready-button button{all:unset;display:inline-block;text-align:center;background-color:#bfbfbf;border-radius:25px;padding:15px 30px;color:#fff;font-size:18px;font-weight:700;font-family:Fraunces,serif;transition:all .2s ease;cursor:pointer}.container-waiting .container-ready-button .ready-button button:hover{transform:scale(1.03)}.container-waiting .container-ready-button .ready-button button:active{transform:scale(.98)}.container-waiting .container-ready-button .ready-button .back-to-mode a{all:unset}.waiting-room-guess .ready-button{display:flex;gap:3vw}.waiting-room-guess .ready-button button{all:unset;display:inline-block;text-align:center;background-color:#bfbfbf;border-radius:25px;padding:15px 30px;color:#fff;font-size:18px;font-weight:700;font-family:Fraunces,serif;transition:all .2s ease;cursor:pointer}.waiting-room-guess .ready-button button:hover{transform:scale(1.03)}.waiting-room-guess .ready-button button:active{transform:scale(.98)}.hidden-arcs{display:none!important}.ready-button{display:flex;gap:3vw}.ready-button button{all:unset;display:inline-block;text-align:center;background-color:#bfbfbf;border-radius:25px;padding:15px 30px;color:#fff;font-size:18px;font-weight:700;font-family:Fraunces,serif;transition:all .2s ease;cursor:pointer}.ready-button button:hover{transform:scale(1.03)}.ready-button button:active{transform:scale(.98)}.ready-button .back-to-mode a{all:unset}body{padding:0;margin:0}.container{display:flex;flex-direction:column;align-items:center;justify-content:space-between;cursor:default;height:100dvh}.container .container-salon{display:flex;align-items:center;justify-content:space-evenly;width:100%;height:100%;gap:20px}.container .container-waiting .mode-selection{display:flex;flex-direction:column;gap:20px}.container .container-waiting .mode-selection h2{padding-bottom:10px}.container .container-waiting .mode-selection button{display:flex;justify-content:center;align-items:center;text-align:center;font-size:clamp(16px,2vw,20px);border-radius:5px;gap:50px}.container .container-waiting .mode-selection button .mode-label{display:flex;justify-content:center;align-items:center;text-align:center;border-radius:10px;height:50px;width:280px;background-color:#f0d8b6}.container .container-waiting .mode-selection button .mode-label:hover{background-color:#b3926f;transform:scale(1.05);transition:transform .3s ease}.container .container-waiting .mode-selection button .mode-votes{display:flex;justify-content:center;align-items:center;text-align:center;border-radius:10px;height:50px;width:50px;background-color:#f0d8b6}.container .container-waiting .mode-selection .separate{display:flex;align-items:center;height:2px;width:210px;background-color:#b3926f;margin:10px auto}.mode-button.disabled{color:#777;cursor:not-allowed;opacity:.7;box-shadow:none;transform:none}.mode-button.disabled .mode-label{background-color:#cfcfcf}.mode-button.disabled .mode-label:hover{background-color:#cfcfcf;transform:none}.room-title{display:flex;align-items:center;gap:10px}.room-code{letter-spacing:4px}.toggle-room{cursor:pointer;font-size:30px;opacity:.8}.toggle-room:hover{opacity:1;transform:scale(1.1)}.container-question-component{display:flex;flex-direction:column;justify-content:space-between;height:100dvh}.container-question-component .container-question{display:flex;flex-direction:column;align-items:center;justify-content:space-around;margin:0;padding:0 15%;opacity:.9;font-family:Cormorant Garamond,serif;color:#f7f4f0;height:100dvh}.container-question-component .container-question .timer-circle{color:#b3926f;margin-top:40px}.container-question-component .container-question .timer-circle .timer-text{font-size:20px;font-weight:600;font-family:Fraunces,serif;color:#fff}.container-question-component .container-question .question-section{display:flex;flex-direction:column;align-items:center;gap:50px}.container-question-component .container-question .question-text{text-align:center;font-size:45px;font-weight:500;font-family:Cormorant Garamond,serif;padding-top:0;margin:0;color:#fff}.container-question-component .container-question input{all:unset;border-bottom:1px solid #b3926f;padding:5px 100px 10px 0;font-size:35px;font-family:Cormorant Garamond,serif;font-weight:500;width:500px}.container-question-component .container-question .difficulty-question{display:flex;justify-content:flex-start;font-size:22px;font-weight:600;font-family:Cormorant Garamond,serif;width:100%}.container-question-component .container-question .difficulty-question p{font-size:30px;padding:5px 15px;border-radius:8px;color:#fff;text-transform:capitalize;font-family:Fraunces,serif}.container-question-component .container-question .difficulty-question p.easy{color:#f0f0dc}.container-question-component .container-question .difficulty-question p.medium{color:#f0d8b6}.container-question-component .container-question .difficulty-question p.difficult{color:#b3926f}.container-question-component .container-question .button-container{display:flex;justify-content:center}.container-question-component .container-question .button-container button{margin:0 15px;padding:12px 20px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s ease}.container-question-component .container-question .button-container button:hover{opacity:.8}button.btn-correct,button.btn-wrong,button.btn-finish{all:unset;padding:12px 20px;border-radius:10px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s ease}button.btn-correct{background-color:#4caf50;color:#fff}button.btn-correct:hover{background-color:#45a049}button.btn-wrong{background-color:#f44336;color:#fff}button.btn-wrong:hover{background-color:#d32f2f}button.btn-finish{background-color:#2196f3;color:#fff}button.btn-finish:hover{background-color:#1976d2}.waiting-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100dvh}.waiting-screen p{font-size:40px;font-family:Cormorant Garamond,serif;margin:10px 0;color:#f7f4f0}.container-correction{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100dvh;gap:30px;padding:20px 15% 30px;color:#f7f4f0;font-family:Cormorant Garamond,serif}@media screen and (max-width: 1120px){.container-correction{height:600px}}.container-correction .correction{font-family:Fraunces,serif;font-size:30px;font-weight:400;margin-top:40px}.container-correction .main-correction{display:flex;flex-direction:column;align-items:center;gap:30px}.container-correction .main-correction .question-text{text-align:center;font-size:40px;font-weight:500;font-family:Cormorant Garamond,serif;padding-top:0;margin:0;color:#fff}.container-correction .main-correction .reponses-correction{display:flex;justify-content:center;flex-direction:column;gap:50px}.container-correction .main-correction .reponses-correction .reponse-text{text-align:center;font-size:35px;font-weight:700;font-family:Cormorant Garamond,serif;margin:0}.container-correction .main-correction .reponses-correction .reponse-text strong{font-weight:600;color:#ffaa6e}.container-correction .main-correction .reponses-correction .reponse-right{text-align:center;font-size:40px;font-weight:700;font-family:Cormorant Garamond,serif;margin:0;color:#b3926f}.container-correction .buttons-correction{display:flex;justify-content:center;gap:50px;padding-top:50px;font-size:20px;font-family:Fraunces,serif;font-weight:700}.container-correction .buttons-correction button{display:flex;justify-content:center;padding:15px 25px;background-color:#b3926f;font-weight:600;border-radius:20px;width:70px}p{font-family:Fraunces,serif;font-size:clamp(18px,2.5vw,22px);font-weight:500;color:#b3926f;margin:0 0 10px}h2{font-family:Fraunces,serif;font-size:clamp(18px,3vw,28px);font-weight:400;color:#b3926f}.register-page{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;gap:5vh 0px}.register-page .register-header{display:flex;flex-direction:column;justify-content:center;align-items:center}.register-page .register-form{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:5px;gap:5vh;color:#b3926f}.register-page .register-form .main-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background-color:#f0f0dc;padding:30px;border-radius:10px;width:270px}.register-page .register-form .auth-toggle p{font-family:Fraunces,serif}.register-page .register-form .auth-toggle span{position:relative;cursor:pointer;font-weight:600}.register-page .register-form .auth-toggle span:after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background-color:#b3926f;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.register-page .register-form .auth-toggle span:hover:after{transform:scaleX(1)}.register-page .register-form input{all:unset;height:40px;width:95%;cursor:text;box-shadow:0 4px 6px -4px #0000004d;color:#000;font-weight:600;font-size:20px}.register-page .register-form button{all:unset;display:inline-block;font-family:Fraunces,serif;font-size:20px;font-weight:600;color:#b3926f;border:2px solid #b3926f;border-radius:25px;padding:8px 20px;transition:all .3s ease;cursor:pointer;text-decoration:none;margin-top:10px}.register-page .register-form button:hover{background-color:#b3926f;color:#fff}