@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap";[data-theme=light]{--absolute-bg:#fff;--primary-bg:#f2efea;--secondary-bg:#a8b5a2;--tertiary-bg:#d8e5e2;--absolute-color:#000;--primary-text-color:#5e6b55;--secondary-text-color:#202020;--tertiary-text-color:#88977d}[data-theme=dark]{--absolute-bg:#000;--primary-bg:#101010;--secondary-bg:#a8b5a2;--tertiary-bg:#a8b5a2;--absolute-color:#fff;--primary-text-color:#5e6b55;--secondary-text-color:#202020;--tertiary-text-color:#88977d}[data-orientation=vertical]{--font-scale:1;--header-scale:1;--icon-scale:1;--primary-font:500 calc(20px * var(--font-scale)) "Inter", sans-serif;--secondary-font:500 calc(16px * var(--font-scale)) "Inter", sans-serif;--primary-header-font:300 calc(30px * var(--header-scale)) "Inter", sans-serif;--secondary-header-font:600 calc(22px * var(--header-scale)) "Inter", sans-serif;--icon-size:calc(24px * var(--icon-scale));--toggle-icon-size:calc(25px * var(--icon-scale));--navigation-icon-size:calc(18px * var(--icon-scale));--loading-icon-size:calc(40px * var(--icon-scale));--loading-font-size:calc(20px * var(--font-scale));--button-height:60px;--button-height-grid-view:200px}[data-orientation=horizontal]{--font-scale:1;--header-scale:1;--icon-scale:1;--primary-font:500 calc(20px * var(--font-scale)) "Inter", sans-serif;--secondary-font:500 calc(16px * var(--font-scale)) "Inter", sans-serif;--primary-header-font:300 calc(30px * var(--header-scale)) "Inter", sans-serif;--secondary-header-font:300 calc(22px * var(--header-scale)) "Inter", sans-serif;--icon-size:calc(24px * var(--icon-scale));--toggle-icon-size:calc(25px * var(--icon-scale));--navigation-icon-size:calc(24px * var(--icon-scale));--loading-icon-size:calc(40px * var(--icon-scale));--loading-font-size:calc(20px * var(--font-scale));--button-height:10vh;--button-height-grid-view:35vh}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;transition:background-color .1s,color .1s}*::-webkit-scrollbar{display:none}html,body{width:100%;height:100%;font-family:Inter,sans-serif}p,i,input{color:var(--primary-text-color)}#app{width:100dvw;height:100dvh;padding:env(safe-area-inset-top) 0 0 0;flex-direction:column;display:flex;position:relative;overflow:hidden}#app[data-orientation=horizontal]{flex-direction:row-reverse}#app{background-color:var(--secondary-bg)}.panel-container{background-color:var(--primary-bg);width:100%;height:100%;display:flex;overflow:hidden}[data-orientation=horizontal] .panel-container{border-radius:12px 0 0 12px}.app-panel{flex-direction:column;flex-shrink:0;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.panel-bar{z-index:10;background-color:#0000;background-image:linear-gradient(to bottom, var(--primary-bg) 30%, transparent);justify-content:space-between;align-items:center;width:100%;height:fit-content;padding:5px 15px;display:flex;position:absolute;top:0;left:0}.panel-name-div{align-items:center;gap:10px;display:flex}.panel-name{font:var(--secondary-header-font);color:var(--primary-text-color)}.utility-div{align-items:center;gap:10px;display:flex}.panel-content{flex-direction:column;flex-grow:1;align-items:center;width:100%;min-height:0;padding:60px 0 200px;display:flex;position:relative;overflow:hidden auto}.content{flex-grow:1;width:100%;min-width:0;min-height:0}#home-search-bar{--height:50px;z-index:1;height:var(--height);border-radius:calc(var(--height) / 2);width:calc(100% - 40px);max-width:600px;font:var(--primary-font);border:none;outline:none;flex-shrink:0;margin:0 auto;padding:0 16px;position:sticky;top:0}#game-container{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-auto-rows:minmax(200px,auto);place-content:space-evenly center;place-items:stretch stretch;gap:20px;width:100%;height:fit-content;padding:20px;display:grid}.game-btn{background-color:var(--secondary-bg);border:none;border-radius:24px;display:flex;overflow:hidden}.game-btn p{font:var(--secondary-header-font);color:var(--primary-text-color)}.game-btn-image-div{background-color:var(--tertiary-bg);justify-content:center;align-items:center;width:30%;height:100%;display:flex}.game-btn-image{max-width:100%;max-height:100%}.game-btn-main-div{flex-direction:column;justify-content:space-between;align-items:center;width:70%;height:100%;display:flex}.game-btn-info-div{flex-direction:column;flex-grow:1;justify-content:flex-start;align-items:flex-start;width:100%;padding:8px;display:flex}.game-btn-header{width:100%;font:var(--secondary-header-font);text-align:left;margin-bottom:10px}.game-btn-description{width:100%;font:var(--primary-font);text-align:left}.game-btn-action-div{justify-content:center;align-items:center;width:100%;height:fit-content;display:flex}.game-btn-play-button{margin:12px 12px 12px auto}.action-btn{cursor:pointer;touch-action:manipulation;height:var(--height);width:fit-content;padding:0 var(--padding);border-radius:calc(var(--height) / 2);justify-content:center;align-items:center;gap:var(--gap);background-color:var(--primary-text-color);border:none;margin:10px 0;display:flex}.action-btn p,.action-btn i{color:var(--primary-bg)}.action-btn.small{--height:45px;--gap:8px;--padding:12px}.action-btn.small p{font:var(--primary-font)}.action-btn.small i{font-size:var(--toggle-icon-size)}.action-btn.large{--height:60px;--gap:12px;--padding:16px}.action-btn.large p{font:var(--secondary-header-font)}.action-btn.large i{font-size:var(--toggle-icon-size)}.action-btn.center-x{margin-left:auto;margin-right:auto}.action-btn.center-y{margin-top:auto;margin-bottom:auto}.action-btn.center-both{margin:auto}.toggle-btn{--height:45px;cursor:pointer;touch-action:manipulation;height:var(--height);width:var(--height);background-color:var(--secondary-bg);border:none;border-radius:50%;place-items:center;display:grid}.toggle-btn i{color:var(--primary-text-color);font-size:var(--toggle-icon-size)}@keyframes flip{to{transform:rotateX(180deg)}}@keyframes flip-first-half{to{transform:rotateX(90deg)}}@keyframes flip-second-half{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(10px)}50%{transform:translate(0)}75%{transform:translate(-10px)}to{transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide-in-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes scan-loading{0%{background-position:0 0}to{background-position:100% 100%}}.timer-div{align-items:center;gap:10px;display:flex}.timer-div p{word-spacing:2px;color:var(--primary-text-color);font:var(--secondary-header-font);font-weight:700}.timer-div i{color:var(--primary-text-color);font-size:var(--large-icon)}@keyframes move-gradient{to{background-position:0 0}}#board-container{aspect-ratio:1;border:2px solid var(--primary-text-color);width:90vw;max-height:70vh;margin:0 auto;display:flex;position:relative}#board-container.loading{background:linear-gradient(-45deg, transparent, var(--secondary-bg), transparent);background-position:-200%;background-size:300% 300%;animation:1s linear infinite move-gradient}#board-container.load-error{--primary-text-color:#cf5454}.error-message{width:fit-content;height:fit-content;font:var(--secondary-header-font);color:var(--primary-text-color);margin:auto}.board{aspect-ratio:1;background-color:var(--primary-bg);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:100%;height:100%;display:grid}.board.locked{touch-action:none;pointer-events:none;background:0 0}.board.locked .board-entry.read-only{background-color:var(--primary-text-color)}.board.revealing-first-half .board-entry.read-only{animation:.25s linear flip-first-half}.board.revealing-second-half .board-entry.read-only{animation:.25s linear flip-second-half}.board-box{border:1.5px solid var(--primary-text-color);grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid}.board-entry{--size:40px;min-height:var(--size);min-width:var(--size);border:1px solid var(--primary-text-color);place-items:center;display:grid}.board-entry.read-only span{color:var(--primary-text-color)}.board-entry.wrong{--primary-text-color:orange}.board-entry.wrong.focused{--primary-text-color:red}.board-entry.impact{background-color:var(--absolute-bg)}.board-entry.focused{background-color:var(--secondary-bg)}.board-entry span{color:var(--absolute-color);font:var(--secondary-header-font)}#info-div{flex-direction:column;align-items:center;gap:10px;width:90vw;margin:10px auto;display:flex}.info-text-div{align-items:center;gap:10px;width:100%;height:fit-content;padding:5px 0;display:flex}.info{font:var(--secondary-text-font);color:var(--primary-text-color)}.info.value{border-radius:5px}.progress{--height:15px;--value:0%;height:var(--height);border:.5px solid var(--primary-text-color);border-radius:calc(var(--height) / 2);width:100%}.progress .progress-fill{height:100%;width:var(--value);border-radius:calc(var(--height) / 2);background-color:var(--primary-text-color);transition:width .2s}#numpad{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:10px;width:100%;height:fit-content;margin:auto 0 0;padding:10px;display:grid}.numpad-btn{--height:55px;touch-action:manipulation;-webkit-user-select:none;user-select:none;height:var(--height);border-radius:calc(var(--height) / 2);background-color:var(--primary-text-color);border:none;width:100%}.numpad-btn.num p{color:var(--primary-bg);font:var(--secondary-header-font)}.numpad-btn i{color:var(--primary-bg);font-size:var(--medium-icon)}.numpad-btn:active{border-radius:10px}.numpad-btn{transition:border-radius .2s}.input-div{--in-height:55px;--in-radius:10px;min-height:var(--in-height);border-style:solid;border-width:2px;border-color:var(--primary-text-color);border-radius:var(--in-radius);align-items:center;width:100%;padding:10px;display:flex;position:relative}.input-div.wrong{--primary-text-color:#da2424}.input-div.shake{animation:.1s ease-in-out 3 shake}#source-input-div{width:90%;margin:5px auto}.input-div.selected .input-label{width:fit-content;padding:0 5px;transform:translateY(-25px)scale(.8)}.type-input{width:100%;height:100%;font:var(--secondary-text-font);color:var(--primary-text-color);background:0 0;border:none;outline:none;padding:0}.input-label{pointer-events:none;background:var(--primary-bg);width:calc(100% - 10px);font:var(--secondary-text-font);color:var(--primary-text-color);transform-origin:0;margin:auto 0;padding:0;transition:transform .2s,padding .2s;position:absolute}.flip{animation:.4s ease-in-out flip}.flip-first-half{animation:.25s ease-in flip-first-half}.flip-second-half{animation:.25s ease-out flip-second-half}@keyframes shake-x{0%{transform:translate(0)}25%{transform:translate(10px)}50%{transform:translate(0)}75%{transform:translate(-10px)}to{transform:translate(0)}}.shake-x{animation:.5s linear 2 shake-x}.spin{transform-origin:50%;animation:1.2s linear infinite spin}.anim-slide-in-bottom{animation:.5s ease-out slide-in-bottom}.scan-loading{background:linear-gradient(135deg, var(--secondary-bg) 0% 40%, var(--primary-text-color) 45% 55%, var(--secondary-bg) 60% 100%);background-size:300% 300%;min-width:100px;min-height:30px;animation:1.5s infinite scan-loading}#account-btn{background:var(--primary-bg);background-size:cover;font-size:1.5rem}#playing-box-container{flex-direction:column;align-items:center;gap:10px;width:100%;height:fit-content;margin:10px auto;display:flex}.attempt-row{justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.attempt-box{--size:50px;height:var(--size);aspect-ratio:1;background:0 0;border:1px solid #000;border-radius:10px;justify-content:center;align-items:center;display:flex}.attempt-box.selected{border:3px solid var(--secondary-bg)}.attempt-box p{text-transform:uppercase;color:var(--primary-text-color);font:500 25px Nunito}.attempt-box.wrong{background:#afafaf50;border-color:#afafaf}.attempt-box.present{background:#ffab2b50;border-color:#ffab2b}.attempt-box.correct{background:#0e770050;border-color:#0e7700}.attempt-box:active{background:#fafafa50;border-color:#fafafa}#resultPanel{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#0000004d;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#resultMessage{background:0 0;border:none;font-size:1.5rem;font-weight:700}#keyboard{--key-height:11vw;--key-width:8.5vw;--key-gap:calc(calc(100vw - calc(10 * var(--key-width))) / 11);z-index:1;height:fit-content;padding:10px 5px;padding-bottom:clamp(env(safe-area-inset-bottom), 10vw, 100%);align-items:center;gap:calc(5px + var(--key-gap));background:0 0;border-radius:20px;flex-direction:column;margin:auto 0 0;display:flex;position:absolute;inset:10px}.keyboard-row{justify-content:center;align-items:center;gap:var(--key-gap);width:100%;display:flex}.key{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;height:var(--key-height);width:var(--key-width);background:var(--secondary-bg);border:none;border-radius:5px;flex-shrink:1;place-items:center;transition:all .2s ease-out;display:grid;box-shadow:1px 1px 0 .1px gray}.key p{text-transform:uppercase;color:var(--primary-text-color);font:500 20px Nunito}.key.action{flex-grow:1}.key.action i{font-size:var(--large-icon);color:var(--primary-text-color)}#keyboard .key.wrong{background:#afafaf}#keyboard .key.present{background:#ffab2b}#keyboard .key.correct{background:#0e7700}#keyboard .key:active{background:#fafafa}#playing-box{--box-gap:5px;gap:var(--box-gap);background:var(--primary-text-color);border:none;outline:none;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;margin:auto;display:grid}.box{--box-size:clamp(100px, 25vw, 20vh);height:var(--box-size);width:var(--box-size);background:var(--primary-bg);border:none;place-items:center;display:grid}.box .icon{font-size:50px}.box .icon.ph-x{color:#ff4d6d}.box .icon:not(.ph-x){color:#4cc9f0}@keyframes expand{0%{scale:.5}to{scale:1}}.expand{animation:.15s cubic-bezier(.42,0,.44,1.7) expand}@keyframes disappear{to{scale:.5}}.disappear{animation:.15s linear disappear}