@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-XLight-c632d71599d4e271a59f1738beddf1fc.otf?vsn=d);font-style:normal;font-weight:200;font-display:swap}@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-Light-e0cf49b22f7a69be309b939b02e8beca.otf?vsn=d);font-style:normal;font-weight:300;font-display:swap}@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-Book-5fd222f7a89fdc326fd4ab5d8671cdc9.otf?vsn=d);font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-Medium-f2afb4c395f1bf4f604d816bc719664f.otf?vsn=d);font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-Bold-4efe66b7735599b207e789a7878aab87.otf?vsn=d);font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Gotham;src:url(/fonts/GothamSSm-Black-a0f909749a0a60dd627776fbcd188875.otf?vsn=d);font-style:normal;font-weight:800;font-display:swap}:root{--blurple-900: hsl(252deg, 100%, 6%);--blurple-850: hsl(255deg, 90%, 8%);--blurple-800: hsl(252deg, 57%, 12%);--blurple-700: hsl(251deg, 45%, 15%);--blurple-600: hsl(245deg, 39%, 23%);--blurple-550: hsl(244deg, 37%, 30%);--blurple-500: hsl(244deg, 35%, 39%);--blurple-400: hsl(244deg, 38%, 47%);--blurple-300: hsl(242deg, 38%, 60%);--blurple-200: hsl(240deg, 38%, 75%);--blurple-150: hsl(237deg, 51%, 80%);--blurple-100: hsl(230deg, 20%, 90%);--correct: #62d8c1;--incorrect: #ee3676;--kudos: hsl(0deg, 97%, 85%);--right-col-width: 320px}*{box-sizing:border-box}::-webkit-scrollbar{height:13px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-track-piece{background-color:transparent}::-webkit-scrollbar-thumb{border:3px solid transparent;background-clip:content-box;border-radius:6px;background-color:var(--blurple-500)}html,body{margin:0;padding:0;min-height:100%}body{font-family:Gotham,sans-serif;background:var(--blurple-800);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--blurple-100);margin:0}button{cursor:pointer;border:none;transition:.2s background-color;font-family:inherit;color:inherit;border-radius:4px;font-weight:500;font-size:16px;display:block;&:disabled{cursor:not-allowed}&.button--primary,&.button--outlined{&:hover:active:not(:disabled){transform:translateY(2px)}}&.button--primary{background-color:var(--blurple-400);padding:10px 22px;&:hover:not(:disabled){background-color:var(--blurple-500);&:active{background-color:var(--blurple-400)}}&:disabled{background-color:var(--blurple-700)}}&.button--outlined{outline:2px solid var(--blurple-400);outline-offset:-2px;background-color:transparent;padding:10px 22px;&:hover:not(:disabled){background-color:var(--blurple-600);&:active{background-color:var(--blurple-400)}}}&.button--tertiary{background-color:var(--blurple-300);padding:3px 5px;border-radius:4px;&:hover{background-color:var(--blurple-700)}}&.button--no-fill{background-color:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--blurple-300)}}h1,p{margin:0}.card{background-color:var(--blurple-600);padding:10px 20px}.flash{padding:10px;background-color:var(--blurple-400);transition:.4s opacity;font-weight:700;text-align:center;z-index:727;position:fixed;inset:0 0 auto;opacity:0}a{color:inherit;text-decoration:none}input,textarea{font-family:inherit;color:inherit}img{display:block;max-width:100%}.game-container{padding:50px 40px;max-width:1300px;min-width:900px;height:100vh;min-height:630px;max-height:800px;box-sizing:border-box;margin:auto}.the-game-title{font-size:35px;font-weight:700;color:transparent;background:linear-gradient(to bottom,white 0%,white 50%,var(--blurple-150) 50%);background-clip:text}.icon{display:inline-block;width:16px;height:16px}.icon--xs{width:12px;height:12px}.icon--sm{width:16px;height:16px}.icon--md{width:20px;height:20px}.icon--lg{width:24px;height:24px}.icon--xl{width:32px;height:32px}.user-icon{display:grid;place-items:center;font-weight:700;flex-shrink:0}.lobby{display:grid;grid-template-columns:1fr var(--right-col-width);gap:60px;height:100%}.lobby__left{display:flex;flex-direction:column;overflow:hidden;--hover-translate-right: 13px}.lobby__right{display:flex;flex-direction:column;gap:10px;overflow:hidden}.lobby-header{display:flex;align-items:center;.lobby-header__title{margin-right:auto}.lobby-header__host-match{margin-right:var(--hover-translate-right)}}.room-list{margin-top:40px;display:flex;flex-direction:column;overflow-y:scroll;scrollbar-width:none;z-index:8;&:hover:has(> *:hover:not(.rooms-list__row--closed)){&>*{opacity:.3}}.rooms-list__row{background-color:transparent;border-radius:0;padding:10px 0;border-bottom:2px solid var(--blurple-600);display:flex;margin-right:var(--hover-translate-right);gap:10px;transition:.1s all;&:hover:not(.rooms-list__row--closed){&:before{content:"";position:absolute;left:calc(-1 * var(--hover-translate-right));top:0;bottom:0;width:var(--hover-translate-right)}transform:translate(var(--hover-translate-right));opacity:1;&:active{opacity:.7}}&.rooms-list__row--closed{opacity:.7}.rooms-list__name{flex-shrink:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:700}.rooms-list__player-list{display:flex;gap:5px;overflow:auto;&::-webkit-scrollbar{display:none}&.player-list--empty{color:var(--blurple-200);font-size:20px;line-height:18px;transform:scaleX(.9)}}.rooms-list__state{margin-left:auto}}}.user-card{padding:15px 20px;.user-card__username{display:flex;gap:10px;align-items:center;font-weight:700;.username{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}}.user-card__login{font-size:14px;margin-top:10px;font-weight:500;color:var(--blurple-200)}.user-card__logout{margin-left:auto;font-size:15px;text-wrap:nowrap}& a{color:var(--blurple-100);text-decoration:underline;text-underline-offset:2px}}.chat-card{padding:0;overflow:hidden;flex-grow:1}.room-page{height:100%;display:flex;flex-direction:column;overflow:hidden}.room-page__header{margin-bottom:20px}.room-page__body{margin-top:20px;display:flex;gap:23px;flex:1;min-height:0}.room-body__main{flex:1;display:flex;flex-direction:column}.room-body__chat{width:var(--right-col-width);flex-shrink:0;background-color:var(--blurple-600)}.player-bar{display:flex;align-items:center;gap:27px;padding:15px 29px;background:var(--blurple-600);overflow-x:auto;flex-wrap:nowrap;flex-shrink:0}.player-bar__pill{display:flex;align-items:center;gap:8px;padding-right:10px;background:var(--blurple-900);flex-shrink:0;border-radius:5px}.player-bar__avatar{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}.player-bar__name{font-size:16px;font-weight:500;color:#fff;opacity:1;white-space:nowrap}.player-bar__total-score,.player-bar__current-round-score{font-size:16px;font-weight:500;color:#fff;white-space:nowrap}.player-bar__pill--correct{.player-bar__current-round-score{color:var(--correct)}}.player-bar__pill--incorrect{.player-bar__current-round-score{color:var(--incorrect)}}.player-bar__divider{width:1px;height:12px;background:rgba(255,255,255,.25);flex-shrink:0}@property --angle{syntax: "<percentage>"; initial-value: 0%; inherits: false;}.phase-waiting,.phase-countdown,.phase-game-over{padding-top:140px;height:100%;text-align:center}.phase-countdown{--bg: var(--blurple-600);background:linear-gradient(to right,var(--bg) 0%,var(--bg) var(--angle),transparent var(--angle));mask:linear-gradient(to right,var(--bg) 0%,var(--bg) var(--angle),rgba(83,88,119,.722) var(--angle));animation:2.9s countdown forwards linear}@keyframes countdown{0%{--angle: 0%}to{--angle: 100%}}.phase-waiting__room-name,.phase-countdown__header,.phase-game-over__winner{font-size:24px;font-weight:700;line-height:1.5;margin:0;color:#fff}.phase-countdown__number{font-size:80px;font-weight:700;letter-spacing:-1.52px;line-height:1.5;color:#fff}.phase-waiting__actions{margin-top:35px;justify-self:center;display:flex;gap:25px}.phase-waiting__room-subtitle{color:var(--blurple-200);font-weight:500;font-size:18px;margin-top:10px}.problem-card{height:100%;position:relative;background:var(--blurple-600);outline:3px solid var(--blurple-600);outline-offset:-3px;padding:45px 35px 30px;display:flex;flex-direction:column;&.problem-card--secondary{background:var(--blurple-700)}}.problem-card--secondary{.problem-card__timer{background-color:transparent}}.problem-card__round{font-size:16px;font-weight:500;color:var(--blurple-200)}.problem-card__timer{position:absolute;top:30px;right:35px;display:flex;align-items:center;gap:10px;padding:10px 15px;background:var(--blurple-800);color:var(--blurple-100);border-top:none;border-radius:10px;.problem-card__timer-icon{width:20px;aspect-ratio:1/1;flex-shrink:0}.problem-card__timer-value{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}}.problem-card__body{flex:1;margin-top:35px;overflow:auto;font-size:18px;line-height:1.5;word-break:break-word;white-space:pre-wrap;color:#fff;& img{filter:invert(1) hue-rotate(180deg);margin:auto;pointer-events:none}}.problem-card__hint{font-size:16px;font-weight:400;color:var(--blurple-100);margin:0}.problem-card__footer{margin-top:16px;padding-top:8px}.answer-form{display:flex;gap:16px;& button{opacity:.7}}.answer-form__input{font-size:16px;font-family:inherit;font-weight:500;padding:0 13px;background:var(--blurple-500);border:none;border-radius:4px;outline:0px solid transparent;transition:.1s all;color:#fff;&::placeholder{color:var(--blurple-200)}&:focus{background:var(--blurple-400);outline:5px solid var(--blurple-550)}}.answer-form__input:valid+button{opacity:1}.answer-feedback{max-width:482px;margin-bottom:10px;font-size:20px;font-weight:700}.answer-feedback--correct{color:var(--correct)}.answer-feedback--incorrect{color:var(--incorrect)}.answer-feedback--none{color:var(--blurple-400)}.chat-component{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;.chat-component__title{font-size:16px;font-weight:700;padding:25px 0;text-align:center;background:linear-gradient(to bottom,var(--blurple-600) 80%,transparent 100%);margin-bottom:-20px;z-index:9}.chat-component__messages{padding-top:20px;overflow:auto;flex-grow:1;margin-right:5px;display:flex;flex-direction:column;&.chat-component__messages--selecting-kudos{.message:not(.message--cannot-kudos):hover{cursor:pointer;background-color:var(--blurple-700)}}}.messages__empty:only-child{display:block;text-align:center;margin:20px auto;color:var(--blurple-200)}}.chat-component-blur-container{display:flex;flex-direction:column;position:absolute;inset:0;.blur{flex:1;background-color:#2824527f;background-color:hsl(from var(--blurple-600) h s l / 50%);z-index:99;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;justify-content:center;padding-top:100px;font-size:20px;font-weight:500;color:var(--blurple-200)}}.message{padding:10px 20px;position:relative;transition:.1s all;&.message--with-kudos{.message__username,.message__text{color:var(--kudos)}}}.message__header{display:flex;align-items:center}.message__username{font-weight:500;color:var(--blurple-200);margin-left:8px;margin-right:auto;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;min-width:0}.message__user-score{position:relative;height:20px;display:flex;align-items:center;color:var(--blurple-150);background-color:var(--blurple-400);border:1px solid var(--blurple-500);font-size:14px;font-weight:700;padding:0 22px 0 5px;margin-left:5px;border-radius:4px;isolation:isolate;& img{position:absolute;right:0;bottom:0;height:80%;z-index:-1;user-select:none}}.message__text{color:var(--blurple-100);word-break:break-word;font-size:14px;margin-top:9px;font-weight:500;line-height:1.4;white-space:pre-wrap}.message__kudos-container{margin-left:10px;display:flex;flex-shrink:0;flex-direction:row-reverse;height:20px;overflow-x:auto;&:hover>*+*{margin-right:3px}&>*+*{transition:.1s margin-right;margin-right:-3px;--border-thickness: 2px;filter:drop-shadow(var(--border-thickness) 0 0 var(--blurple-600)) drop-shadow(0 var(--border-thickness) 0 var(--blurple-600)) drop-shadow(calc(-1 * var(--border-thickness)) 0 0 var(--blurple-600)) drop-shadow(0 calc(-1 * var(--border-thickness)) 0 var(--blurple-600));z-index:1}&::-webkit-scrollbar{display:none}}.message__actions,.message__time{transition:.1s opacity}.chat-input-container{margin:12px 20px 20px;position:relative}.chat-input{width:100%;padding:10px 40px 10px 10px;background-color:var(--blurple-700);color:var(--blurple-100);font-family:inherit;outline:none;border:2px solid transparent;&:focus{border-color:var(--blurple-400)}}.chat-send-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background-color:transparent;& svg{height:15px;aspect-ratio:1/1;color:#fff;display:block}}.give-kudos-container{display:flex;flex-shrink:0;gap:10px;height:30px;align-items:center;margin:20px 20px 0;.give-kudos__text{font-size:14px;font-weight:500;color:var(--blurple-200)}& button{height:100%;padding:0 5px;display:flex;align-items:center;gap:5px;font-size:14px;& img{height:23px}}}.error{display:flex;flex-direction:column;align-items:center;.error__text{font-size:40px;text-align:center;margin:40px 0 10px;font-weight:medium}.error__subtitle{font-size:20px;text-align:center;font-weight:medium}& video{margin-top:40px;margin-inline:auto}& button{max-width:200px;margin-top:20px}}