#fullHeight{scrollbar-width:thin;grid-template-rows:auto 1fr;max-height:100vh;display:grid;position:relative;overflow-y:auto}.mirroredX{transform:scaleX(-1)}#trainingGameInfos{z-index:2;background-color:var(--main-color);color:#fff;width:100%;max-width:unset;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;padding:.5em;display:flex;position:sticky;top:0;left:0;right:0}#whatGameTraining{transition-duration:1s;transition-timing-function:linear(0, .007 1.4%, .028 2.8%, .112 6%, .22 9%, .582 18.1%, .773 24%, .844 26.8%, .904 29.7%, .953 32.7%, .989 35.8%, 1.031 41.8%, 1.044 49%, 1.005 77.7%, 1);margin-block:0;font-weight:300}#main:has(#submitBtn:disabled) #whatGameTraining{opacity:0;transition-duration:.5s;transition-timing-function:ease-in;transform:translate(-10vw)}#gameNameTraining{color:var(--main-color);padding:.2em;background-color:#fff;border-radius:10px;padding-inline-end:.4em;font-weight:600;display:inline-block}#gameNameTraining.loading{animation:1s infinite flash}@keyframes flash{0%,to{opacity:1}50%{opacity:.5}}#trainingStats{z-index:2;background-color:var(--main-color);color:#fff;transform-origin:100% 100%;border-radius:100px;justify-content:center;align-items:center;width:3em;height:3em;transition:all .5s;display:flex;position:absolute;bottom:3.5em;right:10px;&:after{content:"";offset-path:border-box;aspect-ratio:1;filter:blur(2px);opacity:0;background-color:gold;border-radius:50%;height:.7ch;transition:offset-distance 1s;position:absolute;transform:translate(10px)}& #combo{font-size:1.3em}& #maxCombo{background-color:var(--main-transparent-semi);backdrop-filter:blur(.5em);border:2px solid;border-radius:100px;width:fit-content;padding-inline:.4em;font-size:.7em;transition:all .5s;position:absolute;bottom:-.9em}&.newRecordCombo{border:5px solid gold;animation:3s infinite newCombo;&:after{opacity:1;animation:2s linear infinite deco-spin}}&.victory{background-color:#04c804;scale:1.2}&.defeat{background-color:red}}@keyframes deco-spin{0%{offset-distance:0}to{offset-distance:100%}}#trainingStats.newRecordCombo #maxCombo{opacity:0}@keyframes newCombo{0%{box-shadow:0 0 #ffd900}25%{box-shadow:0 0 4em #ffd90080}50%,to{box-shadow:0 0 8em #ffd90000}}#trainingFormSection{flex-direction:column;width:min(100%,120ch);display:flex}#formTraining{user-select:none;overflow-x:hidden}#picturesContainer{--banner-height:calc(2.4em + 1em + .4em);--no-image-height:calc(1.7em + 1em + 20px);--submit-height:calc(1.4em + 2em + .5em);height:calc(100vh - var(--banner-height) - var(--no-image-height) - var(--submit-height));grid-template-columns:1fr 1fr;gap:10px;margin:auto;display:grid}#formTraining label{cursor:pointer;justify-content:center;align-items:center;height:100%;transition:all .5s;display:flex}#formTraining input[type=radio]{opacity:0;width:0;height:0;position:absolute}.imageChoiceTraining{border-radius:5px;max-width:100%;max-height:100%;animation-name:imgAppear;animation-duration:.5s;animation-fill-mode:both}.inputPicCont:first-child .imageChoiceTraining{transform-origin:100% 100%}.inputPicCont:nth-child(2) .imageChoiceTraining{transform-origin:0 100%}.inputPicCont:nth-child(3) .imageChoiceTraining{transform-origin:100% 0}.inputPicCont:nth-child(4) .imageChoiceTraining{transform-origin:0 0}.imageChoiceTraining.fadeOut{animation:.5s both fadeOut}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}.trainOption label{border:solid 2px var(--main-transparent-semi);border-radius:10px;padding:.5vh}.inputPicCont{min-width:0;min-height:0;position:relative;& label{backdrop-filter:blur(3em)}}.backgoundColor{background-image:var(--img-src);opacity:0;background-position:50%;background-size:cover;border-radius:10px;transition:opacity .5s ease-in-out;position:absolute;inset:0}.inputPicCont:is(:focus-within,:hover) .backgoundColor{opacity:.5}#formTraining .inputPicCont:has(input[type=radio]):before,#trainingNoAnswer:has(input[type=radio]):before{content:url(/storage/cqlj/pictures/checkmark.svg) / "";z-index:1;opacity:0;pointer-events:none;width:1em;height:1em;transition:transform .3s,opacity .3s;display:block;position:absolute;top:5px;left:5px;transform:scale(2)}#trainingNoAnswer{margin:10px 0;display:block;position:relative;& label{padding:.5em 1em}}#formTraining .inputPicCont:has(input[type=radio]:checked):before,#trainingNoAnswer:has(input[type=radio]:checked):before{opacity:1;transform:scale(1)}#formTraining .inputPicCont:has(input[type=radio]:hover:not(:checked)) label,#trainingNoAnswer:has(input[type=radio]:hover:not(:checked)) label{border-color:var(--main-transparent-semi)}#formTraining .inputPicCont:has(input[type=radio]:checked) label,#trainingNoAnswer:has(input[type=radio]:checked) label{border-color:var(--main-color);background-color:var(--main-transparent-semi);animation:4s cubic-bezier(.77,0,.18,1) .3s infinite checked}@keyframes checked{0%,to{filter:brightness()}50%{filter:brightness(1.2)}}#formTraining .inputPicCont:has(input[type=radio]:focus) label,#trainingNoAnswer:has(input[type=radio]:focus) label{border-color:var(--main-color);background-color:var(--main-transparent-semi);z-index:1}#picturesContainer .inputPicCont:first-child img{animation-delay:0s}#picturesContainer .inputPicCont:nth-child(2) img{animation-delay:.1s}#picturesContainer .inputPicCont:nth-child(3) img{animation-delay:.2s}#picturesContainer .inputPicCont:nth-child(4) img{animation-delay:.3s}@keyframes imgAppear{0%{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}#submitBtn{text-transform:uppercase;margin-block-end:0;margin-inline:0;padding:1em;font-family:Tektur,sans-serif;font-weight:700}#resultFeedback{z-index:1;pointer-events:none;opacity:0;border-radius:100%;padding:1em;display:flex;position:fixed;top:calc(50% - 1.5em);left:calc(50% - 1.5em)}#resultFeedback.feedbackWin{background-color:var(--input-valid-color);animation:1s ease-in forwards growFade}#resultFeedback.feedbackLose{background-color:var(--input-invalid-color);animation:1s ease-in forwards growFade}@keyframes growFade{0%,to{opacity:0}40%,60%{opacity:.5}to{scale:4}}#options{flex-wrap:wrap;justify-content:center;font-size:.8em;display:flex}@media screen and (width<=1000px){#fullHeight{max-height:unset}#trainingGameInfos{font-size:.8em}#picturesContainer{max-height:unset;grid-template-columns:1fr}}