@font-face{font-family:Orbitron;src:url(../assets/fonts/Orbitron/static/Orbitron-Regular.ttf)format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Orbitron;src:url(../assets/fonts/Orbitron/static/Orbitron-Bold.ttf)format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Orbitron;src:url(../assets/fonts/Orbitron/static/Orbitron-Black.ttf)format("truetype");font-weight:900;font-style:normal}@font-face{font-family:Almarai;src:url(../assets/fonts/Almarai/Almarai-Regular.ttf)format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Almarai;src:url(../assets/fonts/Almarai/Almarai-Bold.ttf)format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Red Rose;src:url(../assets/fonts/Red_Rose/static/RedRose-Regular.ttf)format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Red Rose;src:url(../assets/fonts/Red_Rose/static/RedRose-Bold.ttf)format("truetype");font-weight:700;font-style:normal}*{box-sizing:border-box}body{color:#fff;background-color:#303131;margin:0;padding:0;font-family:Almarai,sans-serif}button{cursor:pointer;background:0 0;border:none;font-family:Almarai,sans-serif;transition:all .2s ease-out}.home-screen{background-color:#303131;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.home-screen .home-faint-bg{pointer-events:none;width:60vh;position:absolute;bottom:-15vh;left:-10vw}.home-screen .home-faint-bg img{width:100%;height:auto;animation:6s ease-in-out infinite float}.home-screen .home-content{z-index:2;color:#fff;flex-direction:column;align-items:center;display:flex}.home-screen .text-wrapper{text-align:left;margin-bottom:4rem}.home-screen .text-wrapper .subtitle{letter-spacing:0;margin-bottom:.5rem;font-family:Almarai,sans-serif;font-size:48px;font-weight:400;line-height:100%}.home-screen .text-wrapper .title{letter-spacing:0;margin:0;font-family:Red Rose,sans-serif;font-size:140px;font-weight:700;line-height:100%}.home-screen .btn-play{color:#303131;letter-spacing:0;cursor:pointer;background-color:#f0ea6e;border:none;border-radius:4px;justify-content:center;align-items:center;gap:1rem;padding:1rem 3rem;font-family:Red Rose,sans-serif;font-size:40px;font-weight:700;line-height:100%;transition:transform .2s ease-out,box-shadow .2s ease-out;display:flex}.home-screen .btn-play:hover{transform:translateY(-4px);box-shadow:0 10px 20px #0003}.home-screen .btn-play:hover .btn-icon{transform:rotate(-25deg)}.home-screen .btn-play .btn-icon{width:44px;height:32px;transition:transform .2s ease-out}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}.settings-screen{color:#303131;background-color:#fff;justify-content:center;align-items:center;width:100vw;height:100vh;padding:2rem;display:flex}.settings-container{flex-direction:column;display:flex}.settings-container .s-title-wrap{width:fit-content;margin-bottom:3rem}.settings-container .s-title-wrap h2{text-align:left;margin:0;font-family:Red Rose,sans-serif;font-size:54px;font-weight:700;line-height:100%}.settings-container .s-title-wrap .s-line-decor{background-color:#f0ea6e;width:100%;height:4px;margin-top:4px;position:relative}.settings-container .s-title-wrap .s-line-decor:before{content:"";background-color:#f0ea6e;width:12px;height:12px;position:absolute;top:-4px;left:-6px;transform:rotate(45deg)}.settings-container .settings-body{justify-content:space-between;align-items:stretch;width:1103px;display:flex}.settings-container .settings-body .settings-left{flex-direction:column;justify-content:space-between;width:320px;display:flex}.settings-container .settings-body .s-group{border:none;margin:0 0 2rem;padding:0}.settings-container .settings-body .s-group:last-child{margin-bottom:0}.settings-container .settings-body .s-group .s-group-title{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.settings-container .settings-body .s-group .s-group-title img{width:32px;height:32px}.settings-container .settings-body .s-group .s-group-title h3{margin:0;font-family:Almarai,sans-serif;font-size:24px;font-weight:700;line-height:100%}.settings-container .settings-body .s-group .s-options{flex-direction:column;gap:.8rem;padding-left:3rem;display:flex}.settings-container .settings-body .radio-label{cursor:pointer;align-items:center;gap:.8rem;font-family:Almarai,sans-serif;font-size:20px;font-weight:400;line-height:100%;display:flex}.settings-container .settings-body .radio-label input[type=radio]{accent-color:#303131;cursor:pointer;width:20px;height:20px}.settings-container .settings-body .radio-label input[type=radio]:checked~.label-text{font-weight:700;position:relative}.settings-container .settings-body .radio-label input[name=theme]:checked~.label-text:after{content:"";background-color:#f0ea6e;width:30px;height:4px;position:absolute;top:50%;left:calc(100% + 15px);transform:translateY(-50%)}.settings-container .settings-body .radio-label input[name=theme]:checked~.label-text:before{content:"";background-color:#f0ea6e;width:12px;height:12px;position:absolute;top:50%;left:calc(100% + 45px);transform:translateY(-50%)rotate(45deg)}.settings-container .settings-body .settings-right{flex-direction:column;align-items:flex-end;gap:45px;display:flex}.settings-container .settings-body .settings-right .s-preview{width:460px;height:412px}.settings-container .settings-body .settings-right .s-preview img{max-width:100%;max-height:100%}.settings-container .settings-body .settings-right .s-bottom-bar{background-color:#f9f9f9;border-radius:4px;justify-content:space-between;align-items:center;gap:3rem;padding:1rem 1.5rem;transition:all .3s;display:flex}.settings-container .settings-body .settings-right .s-bottom-bar .s-status{color:#303131;align-items:center;gap:1.5rem;font-family:Almarai,sans-serif;font-size:20px;display:flex}.settings-container .settings-body .settings-right .s-bottom-bar .s-status .placeholder{color:#999}.settings-container .settings-body .settings-right .s-bottom-bar .s-status .slash{background-color:#f0ea6e;width:4px;height:35px;display:inline-block;transform:skew(-15deg)}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start{color:#303131;cursor:pointer;background-color:#f0ea6e;border:none;border-radius:0;align-items:center;gap:.8rem;padding:.8rem 2rem;font-family:Almarai,sans-serif;font-size:20px;font-weight:700;transition:transform .2s,box-shadow .2s,background-color .2s;display:flex}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:disabled{color:#999;cursor:not-allowed;background-color:#d3d3d3}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:disabled:hover{box-shadow:none;transform:none}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:disabled:hover .btn-icon{transform:none}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:disabled .btn-icon{opacity:.4}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 10px 20px #0003}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start:not(:disabled):hover .btn-icon{transform:rotate(-25deg)}.settings-container .settings-body .settings-right .s-bottom-bar .btn-start .btn-icon{width:24px;height:24px;transition:transform .2s ease-out}.game-screen{color:#fff;background-color:#303131;flex-direction:column;align-items:center;width:100vw;min-height:100vh;padding:2rem 4rem;display:flex}.game-screen .game-header{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin-bottom:4rem;display:flex;position:relative}.game-screen .game-header .score-box{background:#86e9d633;border-radius:4px;gap:2rem;padding:.5rem 1rem;display:flex}.game-screen .game-header .score-box .s-blue,.game-screen .game-header .score-box .s-orange{align-items:center;gap:.5rem;font-family:Red Rose,sans-serif;font-size:24px;font-weight:700;line-height:100%;display:flex}.game-screen .game-header .score-box .s-blue{color:#2bb1ff}.game-screen .game-header .score-box .s-orange{color:#ff9f2b}.game-screen .game-header .active-player{align-items:center;gap:.5rem;font-family:Red Rose,sans-serif;font-size:26px;font-weight:400;line-height:100%;display:flex;position:absolute;left:50%;transform:translate(-50%)}.game-screen .game-header .btn-exit{color:#fff;cursor:pointer;background:#86e9d633;border:2px solid #4dd5bc;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-family:Red Rose,sans-serif;font-size:24px;font-weight:700;line-height:100%;transition:box-shadow .2s,transform .2s;display:flex}.game-screen .game-header .btn-exit:hover{transform:translateY(-2px);box-shadow:0 0 12px #4dd5bc}.game-screen .board{perspective:1000px;gap:15px;display:grid}.game-screen .board.size-4x4{grid-template-columns:repeat(4,1fr)}.game-screen .board.size-4x6,.game-screen .board.size-6x6{grid-template-columns:repeat(6,1fr)}.game-screen .card{cursor:pointer;perspective:1000px;background-color:#0000;width:120px;height:120px;transition:transform .2s}.game-screen .card:hover{transform:translateY(-4px)}.game-screen .card .card-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;border-radius:12px;transition:transform .8s ease-in-out;position:relative}.game-screen .card.flipped .card-inner{transform:rotateY(180deg)}.game-screen .card.matched .card-inner{transform:rotateY(-180deg)}.game-screen .card.matched .card-back{border:5px solid #4dd5bc;box-shadow:6px 6px 8px #4dd5bc4d}.game-screen .card .card-front,.game-screen .card .card-back{backface-visibility:hidden;border-radius:12px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.game-screen .card .card-front{background-color:#444;background-image:url(../assets/img/code_vibe_theme/Front1.svg);background-position:50%;background-size:cover}.game-screen .card .card-back{background-color:#f8f8f8;transform:rotateY(180deg)}.game-screen .card .card-back img{object-fit:contain;width:85%;height:85%}.popup-overlay{z-index:100;background:#303131cc;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.popup-overlay.hidden{display:none}.popup-overlay .popup-content{text-align:center;background:#fff;border-radius:8px;padding:3rem 4rem;animation:.3s ease-out forwards slideUp}.popup-overlay .popup-content p{color:#303131;margin-top:0;margin-bottom:2.5rem;font-family:Red Rose,sans-serif;font-size:32px;font-weight:700;line-height:40px}.popup-overlay .popup-content .popup-actions{justify-content:center;gap:1.5rem;display:flex}.popup-overlay .popup-content .popup-actions button{cursor:pointer;border-radius:0;padding:1rem 2rem;font-family:Red Rose,sans-serif;font-size:20px;font-weight:700;line-height:100%;transition:transform .2s,box-shadow .2s,outline-offset .2s,outline-color .2s}.popup-overlay .popup-content .popup-actions button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.popup-overlay .popup-content .popup-actions .btn-cancel{color:#fff;background:#4dd5bc;border:3px solid #4dd5bc;transition:background-color .2s}.popup-overlay .popup-content .popup-actions .btn-cancel:hover{box-shadow:none;background-color:#76dfcc;transform:none}.popup-overlay .popup-content .popup-actions .btn-confirm{color:#4dd5bc;background:#f0faf8;border:2px solid #4dd5bc}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}body.theme-gaming .game-screen{background-color:#2f4f5e}body.theme-gaming .game-screen .game-header{background-color:#4c576c;border-radius:8px;padding:.5rem 2rem}body.theme-gaming .game-screen .game-header .score-box{background:#fff;border-radius:8px;padding:.5rem 1rem}body.theme-gaming .game-screen .game-header .score-box .score-text{color:#ea6900;font-family:Orbitron,sans-serif}body.theme-gaming .game-screen .game-header .score-box .s-blue .score-text{color:#097fc5}body.theme-gaming .game-screen .game-header .active-player{color:#fff;font-family:Orbitron,sans-serif}body.theme-gaming .game-screen .game-header .btn-exit{color:#fff;background-color:#0000;border:1px solid #ed1b76;border-radius:8px;font-family:Orbitron,sans-serif;transition:all .2s}body.theme-gaming .game-screen .game-header .btn-exit img{transition:all .2s}body.theme-gaming .game-screen .game-header .btn-exit:hover{color:#fff;background-color:#0000;transform:translateY(-2px);box-shadow:5px 5px 8px #ed1b764d}body.theme-gaming .game-screen .game-header .btn-exit:hover img{filter:brightness(0)saturate()invert(26%)sepia(85%)saturate(3015%)hue-rotate(318deg)brightness(97%)contrast(98%)drop-shadow(0 0 5px #ed1b7680)}body.theme-gaming .game-screen .board{gap:2px}body.theme-gaming .game-screen .card{width:100px;height:110px;box-shadow:none;background-color:#0000}body.theme-gaming .game-screen .card .card-front,body.theme-gaming .game-screen .card .card-back{margin-top:-7.5px;margin-left:-12.5px;width:125px!important;height:125px!important;box-shadow:none!important;background-color:#0000!important;border:none!important}body.theme-gaming .game-screen .card .card-front{background-image:url(../assets/img/game_cards_theme/front_game.svg);background-position:50%;background-repeat:no-repeat;background-size:contain}body.theme-gaming .game-screen .card .card-back img{object-fit:contain;width:100%;height:100%}body.theme-gaming .game-screen .card.matched .card-back{transform:rotateY(180deg);box-shadow:none!important;border:none!important}body.theme-gaming .game-screen .card.matched .card-back:after{content:"";box-sizing:border-box;pointer-events:none;border:5px solid #ed1b76;border-radius:15.4px;width:101.1px;height:114.2px;position:absolute;top:.2px;left:6.7px;box-shadow:5px 5px 8px #ed1b764d}body.theme-gaming .popup-overlay .popup-content{background-color:#f1f5f8}body.theme-gaming .popup-overlay .popup-content p{color:#2f4f5e;font-family:Orbitron,sans-serif}body.theme-gaming .popup-overlay .popup-content .btn-cancel{color:#fff;background-color:#ed1b76;border:2px solid #ed1b76;border-radius:8px;font-family:Orbitron,sans-serif;transition:all .2s}body.theme-gaming .popup-overlay .popup-content .btn-cancel:hover{color:#ed1b76;background-color:#fff}body.theme-gaming .popup-overlay .popup-content .btn-confirm{color:#ed1b76;background-color:#f6dce6;border:1px solid #ed1b76;border-radius:8px;font-family:Orbitron,sans-serif}.end-screen{background-color:#303131;justify-content:center;align-items:center;width:100vw;min-height:100vh;display:flex;position:relative;overflow:hidden}.end-screen .phase{flex-direction:column;align-items:center;gap:2rem;animation:.5s ease-out fadeIn;display:flex}.end-screen .phase.hidden{display:none}.end-screen .game-over-title{color:#4dd5bc;text-shadow:-7px 0 8px #4dd5bc80;-webkit-text-stroke:2px white;margin:0;font-family:Red Rose,sans-serif;font-size:140px;font-weight:700;line-height:100%}.end-screen .final-score-text{color:#fff;margin-top:2rem;margin-bottom:.5rem;font-family:Red Rose,sans-serif;font-size:26px;font-weight:400}.end-screen .final-score-box{background:#ffffff0d;border-radius:4px;gap:3rem;padding:1rem 2rem;display:flex}.end-screen .final-score-box .s-blue,.end-screen .final-score-box .s-orange{align-items:center;gap:.5rem;font-family:Red Rose,sans-serif;font-size:24px;font-weight:700;line-height:100%;display:flex}.end-screen .final-score-box .s-blue img,.end-screen .final-score-box .s-orange img{width:24px;height:28px}.end-screen .final-score-box .s-blue{color:#2bb1ff}.end-screen .final-score-box .s-orange{color:#ff9f2b}.end-screen .confetti{pointer-events:none;width:100%;height:auto;position:absolute;top:0;left:0}.end-screen .winner-subtitle{color:#fff;z-index:2;margin:0;font-family:Red Rose,sans-serif;font-size:40px;font-weight:400}.end-screen .winner-title{z-index:2;margin:0;font-family:Red Rose,sans-serif;font-size:60px;font-weight:700;line-height:100%}.end-screen .winner-title.blue{color:#2bb1ff}.end-screen .winner-title.orange{color:#ff9f2b}.end-screen .winner-title.draw{color:#4dd5bc;text-shadow:-7px 0 8px #4dd5bc80;-webkit-text-stroke:2px white;font-size:100px}.end-screen .winner-icon{z-index:2;width:200px;height:250px;margin-top:1rem;margin-bottom:2rem}.end-screen .draw+.winner-icon{width:339px;height:272px}.end-screen .btn-cancel{cursor:pointer;color:#fff;z-index:2;background:#86e9d633;border:2px solid #4dd5bc;border-radius:4px;padding:1rem 2rem;font-family:Red Rose,sans-serif;font-size:24px;font-weight:700;line-height:100%;transition:transform .2s,box-shadow .2s}.end-screen .btn-cancel:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4dd5bc66}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}body.theme-gaming .end-screen{background-color:#2f4f5e}body.theme-gaming .end-screen .game-over-title{color:#ed1b76;text-shadow:none;-webkit-text-stroke:0;font-family:Orbitron,sans-serif;font-weight:900}body.theme-gaming .end-screen .final-score-text{color:#fff;font-family:Orbitron,sans-serif}body.theme-gaming .end-screen .final-score-box{background-color:#fff;border:none;border-radius:8px}body.theme-gaming .end-screen .final-score-box .score-label{display:none}body.theme-gaming .end-screen .final-score-box .score-text{color:#ea6900;font-family:Orbitron,sans-serif}body.theme-gaming .end-screen .final-score-box .s-blue .score-text{color:#097fc5}body.theme-gaming .end-screen .winner-subtitle{color:#fff;font-family:Orbitron,sans-serif}body.theme-gaming .end-screen .winner-title{font-family:Orbitron,sans-serif;font-weight:900}body.theme-gaming .end-screen .winner-title.blue{color:#097fc5;text-shadow:2px 2px #00000080}body.theme-gaming .end-screen .winner-title.orange{color:#ea6900;text-shadow:2px 2px #00000080}body.theme-gaming .end-screen .winner-title.draw{color:#ed1b76;text-shadow:2px 2px #00000080}body.theme-gaming .end-screen .btn-cancel{background-color:#0000;border:1px solid #ed1b76;border-radius:8px;font-family:Orbitron,sans-serif;font-size:20px}body.theme-gaming .end-screen .btn-cancel:hover{transform:translateY(-2px);box-shadow:5px 5px 8px #ed1b764d}
