@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{--color-primary-10: #b2b0e8;--color-primary-30: #7778dd;--color-primary-70: #262376;--color-purple-10: #464093;--color-purple-30: #3c3a75;--color-blue-10: #a4c4f4;--color-blue-50: #588ad7;--color-pink-50: #c43ba9;--color-green-50: #88be24;--color-gray-10: #ededf1;--color-gray-30: #8e90a2;--color-bg-dark: #15151e;--color-border: rgba(101, 129, 227, .8);--shadow-card: 0 4px 10px rgba(0, 0, 0, .25);--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}*{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{transform:translateY(2px)}}&.button--primary{background-color:var(--blurple-400);padding:10px 22px;&:hover{background-color:var(--blurple-500);&:active{background-color:var(--blurple-400)}}}&.button--outlined{outline:2px solid var(--blurple-400);outline-offset:-2px;background-color:transparent;padding:10px 22px;&:hover{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)}}}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;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-top:50px;padding-bottom:50px;max-width:1100px;height:100vh;min-height:630px;max-height:1000px;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 320px;gap:70px;height:100%}.lobby__left{display:flex;flex-direction:column;overflow:hidden}.lobby__right{display:flex;flex-direction:column;gap:10px;overflow:hidden}.lobby-header{display:flex;align-items:center;.lobby-header__title{margin-right:auto}}.room-list{margin-top:40px;display:flex;flex-direction:column;overflow:auto;&:hover{&>*{opacity:.5}}.rooms-list__row{padding:10px 0;border-bottom:2px solid var(--blurple-600);margin-bottom:1px;display:flex;gap:10px;transition:.1s all;&:hover{padding-left:10px;opacity:1;cursor:pointer}.rooms-list__name{flex-shrink:0;text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden;font-weight:700}.rooms-list__player-count{display:flex;gap:5px;overflow:auto;&::-webkit-scrollbar{display:none}}}}.user-card{display:flex;gap:10px;align-items:center;font-weight:700;padding:15px 20px}.chat-card{padding:0;overflow:hidden;flex-grow:1}.player-count--empty{color:var(--blurple-200);font-size:20px;line-height:18px;transform:scaleX(.9)}.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:308px;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:.8;white-space:nowrap}.player-bar__name--correct{color:var(--correct);opacity:1}.player-bar__name--incorrect{color:var(--incorrect);opacity:1}.player-bar__divider{width:1px;height:12px;background:rgba(255,255,255,.25);flex-shrink:0}.player-bar__score{font-size:16px;font-weight:500;color:#fff;white-space:nowrap}.phase-waiting,.phase-countdown,.phase-game-over{margin-top:140px;text-align:center}.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;.problem-card__text{font-size:20px;line-height:1.5;word-break:break-word;margin:0;color:#fff}}.problem-card__hints{margin-top:10px;display:flex;flex-direction:column;gap:5px;flex:1}.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{height:100%;overflow:hidden;display:flex;flex-direction:column;.chat-component__title{font-size:16px;font-weight:700;margin:15px auto}.chat-component__messages{overflow:auto;flex-grow:1;margin-right:5px}.messages__empty:only-child{display:block;text-align:center;margin:20px auto;color:var(--blurple-200)}}.messages-list{display:flex;gap:15px;flex-direction:column}.message{padding:0 25px;position:relative;&:hover{.message__actions{opacity:1}.message__time{opacity:0}}}.message__header{display:flex;gap:8px;align-items:top;.message__username{font-weight:500;color:var(--blurple-200)}.message__time{margin-left:auto;font-size:14px;color:var(--blurple-200)}.message__text{color:var(--blurple-100);word-break:break-word;font-size:14px}}.message__actions{opacity:0;position:absolute;top:0;right:20px;.message__kudos{display:flex;gap:5px;align-items:center;color:#fff;& svg{height:16px;aspect-ratio:1/1}}}.message__actions,.message__time{transition:.1s opacity}.chat-input-container{margin:15px 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}}