:root[data-event*=fireworks]{& .rocket,& .spark,& .boom{pointer-events:none}& .rocket{background-color:var(--color,#fff);border-radius:100%;width:2px;height:2px;transition-timing-function:ease-out;position:fixed;bottom:-10px}& .rocket.explode{filter:blur(20px);opacity:0;scale:20}& .spark{background-color:#eee;width:1px;height:5px;animation:1s ease-out forwards sparkFly;position:fixed}& .boom{background-color:var(--color,#fff);border-radius:100%;width:0;height:0;animation:5s cubic-bezier(.22,.61,.36,1) forwards boom;position:fixed}}@keyframes sparkFly{to{translate:var(--spark-horiz-offset,0) -50px;opacity:0;filter:blur(4px)}}@keyframes boom{to{height:var(--height,50px);width:var(--width,50px);filter:blur(10px);opacity:0;translate:var(--horiz-offset,0) var(--vertical-offset,0);rotate:var(--rotation)}}#scaryFace,#clueKeyboardBox{display:none}:root[data-event*=AlloWin]{color-scheme:dark;--main-color:#de8613;--main-transparent-semi:#de861388;--main-transparent:#de861333;--main-transparent-really:#de861311;background-color:#000;background-image:radial-gradient(at 50% 80%,#de861360 5%,#0000 20%);background-size:300%;background-attachment:fixed;animation:10s infinite flickeringLight,15s infinite passingShadow,7s infinite cursor;& body{cursor:inherit;background-image:url(/storage/cqlj/pictures/event/AlloWin/smoke.png),url(/storage/cqlj/pictures/event/AlloWin/smokeLarge.png);background-position-y:bottom;background-repeat:repeat-x;background-size:250px,500px;animation:15s cubic-bezier(.8,.4,.3,.7) infinite smoke}& #logo{filter:hue-rotate(401deg)brightness(2.4)saturate(.8)}& #currentGameStatsCont,& #cluesBtn{position:relative}& #currentGameStatsCont:before,& #cluesBtn:before{content:"";pointer-events:none;background:url(/storage/cqlj/pictures/event/AlloWin/web.png) no-repeat;width:48px;height:128px;display:block;position:absolute;top:100%;right:0}& #cluesBtn:before{top:100%;left:50%;transform:scaleX(-1)}& #scaryFace{z-index:4;pointer-events:none;height:4em;animation:2s linear both faceFlash;display:block;position:fixed}& #miniKeyboardBtn{background-color:#444;border:1px solid #666;border-radius:1px;width:1.5em;height:2em;padding:.3em .15em .15em}& #miniKeyboardButtons{clip-path:polygon(0% 0%,100% 0%,100% 76%,67% 76%,67% 100%,34% 100%,34% 76%,0% 76%);background-color:beige;background-image:repeating-linear-gradient(#0000 0% 90%,#c5c591 90% 100%),repeating-linear-gradient(90deg,#0000 0% 90%,#c5c591 90% 100%);background-size:.4em .38em;height:100%}& #clueKeyboardBox{background-color:#444;border:2px solid #666;border-radius:5px;width:fit-content;margin-block:1em;margin-inline:auto;display:block;position:relative;&:has(#keyboardLights[data-error=true]){animation:1s forwards errorShake}}& #keyboardLights{grid-template-columns:repeat(3,auto);justify-content:center;gap:.5em;padding:.5em;display:grid}& .keyboardLight{filter:brightness(.2);background-image:radial-gradient(at 20% 0,#9f9,#4cff4c);border-radius:1em;width:.5em;height:.5em;transition:all .5s;box-shadow:0 0 .5em -.5em #9f9;&[data-on=true]{filter:brightness();box-shadow:0 0 .5em #9f9}}& #keyboardLights[data-error=true] .keyboardLight{background-image:radial-gradient(at 20% 0,#f99,#ff4c4c);box-shadow:0 0 .5em #f99}& #clueKeyboard{grid-template-rows:repeat(4,3em);grid-template-columns:repeat(3,3em);padding:.5em;display:grid;& button{color:#222;background-color:beige;background-image:radial-gradient(#0000,#0002);border:2px solid #c5c591;border-radius:2px;margin:2px;font-size:1.3em;&:not(:disabled):active{filter:brightness(.8);scale:.95}}}& #clueKB_0{grid-column:2/3}& #keyboardAnswer{color:#111;pointer-events:none;background-color:#ffed8b;border-radius:10px;padding:.3em .5em;font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;transition:all 1s ease-out;animation:2s infinite bubUpDown;position:absolute;top:1em;right:2em;box-shadow:0 0 .5em #0008;&:after{content:"";border:.4em solid #0000;border-color:#ffed8b #0000 #0000 #ffed8b;position:absolute;left:100%}&:empty{opacity:0;transition:all;translate:0 -1em}}}@media screen and (width<700px){#onlyOnLargeScreen{display:none}}@keyframes errorShake{10%,30%,50%,70%,90%{translate:-1px}20%,40%,60%,80%{translate:1px}}@keyframes bubUpDown{50%{transform:translateY(.2em)}}@keyframes flickeringLight{0%,92%,94%,97%{filter:brightness()}93%,96%{filter:brightness(.4)}}@keyframes passingShadow{0%,30%,70%,to{background-position-x:0}35%,65%{background-position:-200%}}@keyframes cursor{0%,80%,85%,97%{cursor:default}81%,84%,99%{cursor:none}}@keyframes smoke{0%{background-position-x:0,0}to{background-position-x:250px,500px}}@keyframes faceFlash{0%{opacity:0;filter:brightness(.5)drop-shadow(0 0 0 orange);transform:scale(.8)}70%{opacity:.05;transform:scale(1)}75%{opacity:1;filter:brightness(1.5)drop-shadow(0 0 1em orange);transform:scale(3)}90%{opacity:0}to{opacity:0;transform:scale(5)}}.stalactite,.snowball,.snowflake{display:none}:root[data-event*=WINter]{color-scheme:dark;--main-color:#001dc4;--main-transparent-semi:#001dc488;--main-transparent:#001dc433;--main-transparent-really:#001dc411;& #logo{filter:hue-rotate(230deg)brightness(1.3)}& .stalactite{z-index:1;transform-origin:top;background:0 0/contain no-repeat;width:63px;animation:20s ease-out forwards stalactitesGrow;display:block;position:absolute}& .stalactite.break{animation:.5s ease-in forwards stalactitesFall}& .snowball{z-index:10;pointer-events:none;background-color:snow;background-image:url(/storage/cqlj/pictures/event/WINter/snowball.jpg);background-position:50% 0;border-radius:2em;width:1em;height:1em;animation:3s linear forwards snowballThrow;display:block;position:fixed;box-shadow:inset 2px -5px 5px #0008,inset -2px 5px 5px #fff8}& footer{background-color:#b7e5ff;position:relative}& footer:before{content:"";background-image:url(/storage/cqlj/pictures/event/WINter/snowBackground.svg);background-size:cover;height:2.8em;position:absolute;bottom:calc(100% - 7px);left:0;right:0}& .snowflake{z-index:1;height:var(--size);width:var(--size);filter:blur(var(--blur));opacity:.8;top:-10%;left:var(--start-offset);animation:7s linear both snowfall;display:block;position:fixed}}@keyframes stalactitesGrow{0%{transform:rotateX(90deg)scale(0)}to{transform:rotateX(0)scale(1)}}@keyframes stalactitesFall{0%{opacity:1}to{top:calc(var(--height) + 100px);opacity:0}}@keyframes snowballThrow{0%{filter:blur(2px);transform:scale(4)translate(0)}25%{transform:scale(2) translate(var(--horizontal-offset,.5em), -2em);filter:blur();box-shadow:0 0 0 #0000,0 0 2em #0000,inset 2px -5px 5px #0008,inset -2px 5px 5px #fff8}48%{transform:scale(1);box-shadow:0 0 0 0 #cacdc6,0 0 1em #000,inset 2px -5px 5px #0008,inset -2px 5px 5px #fff8}40%,to{background-position:0 500%}50%,80%{opacity:1;transform:scale(1);box-shadow:0 0 .5em .5em #cacdc6bb,0 0 .5em #000,inset 2px -5px 5px #0002,inset -2px 5px 5px #fff8}to{opacity:0;transform:translateY(1em)scale(.2)}}@keyframes snowfall{0%{top:-10%;left:calc(var(--start-offset))}0%,90%{opacity:1}to{left:calc(var(--start-offset) + var(--end-offset));opacity:0;top:100%;transform:rotate(360deg)}}:root[data-event*=Xmas]{& body{outline-offset:-.8em;outline:.5em dotted red;animation:10s steps(5,end) infinite garland;box-shadow:inset 0 0 1em #f008}}@keyframes garland{to,0%,20%{outline-color:red;box-shadow:inset 0 0 2em #f008}25%,45%{outline-color:#0f0;box-shadow:inset 0 0 2em #0f08}50%,70%{outline-color:#00f;box-shadow:inset 0 0 2em #00f8}75%,95%{outline-color:gold;box-shadow:inset 0 0 2em #ffd70088}}#eventGameMilestoneBtn{display:none}:root[data-event*=gameMilestone]{& #eventGameMilestoneBtn{color:#000;background-color:#b8860b;background-image:linear-gradient(-45deg,#b8860b 5%,gold 20%,#b8860b 80%);background-position:100% 100%;background-size:100% 100%;padding:1ch;transition:all .5s;display:inline-block;&:hover{background-size:150% 150%}}}#bestOfSuggestionsContainer,#threeYearsBirthdayBtn{display:none}:root[data-event*=birthday]{& #threeYearsBirthdayBtn{width:fit-content;animation:2s bdbtnFlash;display:inline-block}& #userAvatar{position:relative}& #userAvatar:before{content:"";background-image:url(/storage/cqlj/pictures/event/birthday/partyHat.svg);background-size:cover;width:1.3em;height:1.3em;position:absolute;bottom:70%;left:17%}& #confettiCounter{z-index:4;color:light-dark(#0002,#fff4);writing-mode:sideways-lr;pointer-events:none;inset-inline:0;border-block-end:1px dotted light-dark(#0008,#fff8);transition:all 1s;position:fixed;left:0;&:after{content:attr(data-count)}&.fadeOut:after{opacity:0}&:not([data-count="10"],[data-count="0"]){animation:2s infinite confettiHolderFlash}}& .confetti[data-active=true]{pointer-events:all;&:after{content:"";cursor:pointer;position:absolute;inset:-1em}&:hover{box-shadow:0 0 1em .1em #888}}& .confetti[data-active=false]{pointer-events:all;animation-play-state:paused;scale:3;--left:calc(10px * 2)!important}& #bestOfSuggestionsContainer{background-color:var(--main-transparent-really);padding:.5em 1em;border-radius:10px;margin-block-start:2em;padding-block-end:0;display:block;& h3{border-bottom:solid var(--main-transparent);margin:0;padding-block:.5em}}& #birthdayBestOfSuggestion{justify-content:center;display:flex;position:relative}& .bestSuggestionCont{opacity:0;pointer-events:none;flex:1;padding-block:.5em 1em;transition:all .5s;position:absolute;transform:translateY(-1em);&[data-active=true]{pointer-events:all;opacity:1;position:static;transform:translateY(0)}& .confetti{border-radius:0;width:5px;height:5px;position:absolute;&[data-variation="2"]{border-width:3px}}}& .bestSuggestion{margin:.5em;font-style:italic;&:before,&:after{content:"\"";margin-inline:.5ch}}& .suggestionAuthor{opacity:.7;font-size:.8em;position:relative}}@keyframes bdbtnFlash{0%{background-color:var(--main-color);transform:scaleX(1.2)}}@keyframes confettiHolderFlash{50%{background-color:var(--main-transparent)}}#aboutEventDialog{& ul{text-align:start;width:fit-content;margin-inline:auto}& table{border-collapse:collapse;margin-inline:auto;& td,& th{border-collapse:collapse;border:1px solid #888;padding:3px 5px}& caption{background-color:#8882;padding:5px 10px;font-size:.8em;font-style:italic}& td.gameWon{background-color:#32cd3225}}}#comboWeekCurrentValue{border:dashed 2px var(--main-transparent-semi);text-transform:uppercase;letter-spacing:2%;--fillPercentCurrent:calc(var(--combo) * 100% / 7);--fillPercentNext:calc((var(--combo) + 1) * 100% / 7);background-image:linear-gradient(to right, var(--main-transparent) var(--fillPercentCurrent), transparent var(--fillPercentNext));border-radius:5px;margin-block:10px;padding:.5ch 1ch;font-size:.6em;font-weight:600}
