@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");*{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;height:100%}body{font-family:Roboto,sans-serif;color:#fff;line-height:1.6;display:flex;justify-content:center;align-items:center;background:url(/bg.png);background-size:cover}h2{font-size:40px}.panel{border-radius:32px;padding:32px;border:6px solid rgba(255 255 255/15%);justify-content:center;align-items:center;width:800px;background:linear-gradient(122.54deg,rgba(255,255,255,.1),rgba(153,153,153,.1));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.panel,.panel .inner{display:flex;flex-direction:column;gap:32px}.panel .inner{width:400px}main h1{font-size:96px;font-family:Cherry Cream Soda,system-ui;font-weight:400;font-style:normal}main h1,main p{text-align:center}main p{font-size:24px}.buttons{flex-direction:column}.leaderboard{width:1000px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:600px}.leaderboard .header,.round .header{display:flex;justify-content:space-between;align-items:flex-end}.leaderboard .top{gap:16px}.leaderboard .top,.leaderboard ul{display:flex;flex-direction:column;width:100%}.leaderboard ul{gap:12px}.end ul li,.leaderboard ul li{list-style-type:none;padding:16px;border-radius:8px;background:rgba(0 0 0/20%);display:flex;justify-content:space-between}.end ul{display:flex;flex-direction:column;gap:12px;width:400px;margin:32px auto 0}.end ul li.yourself{background:#fff;color:#000}.end ul li p,.leaderboard ul li p{font-size:20px}.end ul li p.pts,.leaderboard ul li p.pts{font-family:Cherry Cream Soda,system-ui}.leaderboard-item.yourself{background:#fff;color:#000}.round{justify-content:center;align-items:center}input{background:rgba(255 255 255/20%);border:2px solid rgba(255 255 255/50%);border-radius:8px;font-size:20px;color:#fff;height:55px;padding:16px;transition:.12s ease-out;box-shadow:inset 4px 4px 8px rgb(0 0 0/10%),inset -4px -4px 8px rgba(255 255 255/3%)}input::placeholder{color:rgba(255 255 255/50%)}input:hover{border-color:rgba(255 255 255/80%)}input:focus{outline:3px solid #fff;outline-offset:-3px}.buttons{display:flex;gap:24px}.buttons.row{flex-direction:row;width:100%}.buttons.row button:not(.back){flex:1 1}.buttons button.back{width:-moz-fit-content!important;width:fit-content!important}.buttons button:last-child{width:100%!important}.start h2{font-size:48px;text-align:center}button{border:none}button:focus-visible{outline:4px solid #0ad6a1;outline-offset:4px}button.secondary:focus-visible{outline:4px solid #fff;outline-offset:4px}button.tertiary:focus-visible{outline:4px solid #fff;outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.5}.lobby{display:flex;flex-direction:row;gap:4px}.lobby .left{display:flex;flex-direction:column;gap:16px;width:400px;border-top-right-radius:4px;border-bottom-right-radius:4px;justify-content:flex-start}.lobby .left,.lobby .right{align-items:flex-start;height:650px}.lobby .right{justify-content:space-between;border-top-left-radius:4px;border-bottom-left-radius:4px}.lobby .player{padding:16px;border-radius:8px;display:flex;gap:8px;width:100%;background:rgba(0 0 0/20%)}.lobby .yourself{background:#fff}.lobby .waiting p{font-style:italic;opacity:50%}.lobby .yourself p{color:#000}.lobby .player-list{gap:12px}.lobby .player-list,.panel .top{display:flex;flex-direction:column;width:100%}.panel .top{height:100%}.inner h2,.panel .top h2{text-align:center}.panel.yPadding{padding-top:64px;padding-bottom:64px;height:650px}.panel .code-wrapper{width:300px;margin:0 auto;height:100%;flex-direction:column;align-items:center}.panel .code,.panel .code-wrapper{display:flex;justify-content:center}.panel .code{font-size:48px;width:100%;padding:8px 32px;background:#fff;color:#2b5d8e;font-weight:700;letter-spacing:8px;border-top-left-radius:12px;border-top-right-radius:12px;font-family:IBM Plex Mono,monospace}.panel .code-wrapper button,.panel .copy-btn{width:100%;border-top-left-radius:0!important;border-top-right-radius:0!important}.round{width:1000px;display:flex;flex-direction:column;gap:16px}.round .header{display:flex;justify-content:space-between;width:100%}.round .header p{font-size:20px}.round .header .time{padding:4px 6px;border-radius:8px;background:#fff;color:#000}.round .header .slash{opacity:50%}.round .panel{width:100%;position:relative}.round .panel p{font-size:28px;font-family:Cherry Cream Soda,system-ui}.round .panel:before{top:0;left:0}.round .panel:after,.round .panel:before{content:'"';position:absolute;font-size:150px;opacity:20%;font-family:Cherry Cream Soda,system-ui}.round .panel:after{bottom:0;right:0;bottom:-120px}.round .option{width:50%;height:200px;border-radius:16px;padding:16px;background:#fff;box-shadow:0 6px 0 #a6a6a6;transition:.12s ease-out;cursor:pointer;width:100%;color:black;font-family:Cherry Cream Soda,system-ui;font-size:150%;text-align:center;position:relative;overflow:hidden}.option .checkmark,.option .xmark,.round .option{display:flex;align-items:center;justify-content:center}.option .checkmark,.option .xmark{position:absolute;top:0;right:0;width:64px;height:64px;border-bottom-left-radius:8px;background-color:#ff5d5d}.option.correct .checkmark{background-color:#0ad6a1!important}.option .checkmark svg{width:32px;height:32px;color:white}.round .option:hover{box-shadow:0 10px 0 #a6a6a6;transform:translateY(-4px)}.round .option:active{box-shadow:0 4px 0 #a6a6a6;transform:translateY(2px)}.round .option.correct,.round .option.correct:active,.round .option.correct:hover{border:2px solid #0ad6a1;box-shadow:0 6px 0 #0ad6a1;transform:none}.round .option.incorrect,.round .option.incorrect:active,.round .option.incorrect:hover{border:2px solid #ff5d5d;box-shadow:0 6px 0 #ff5d5d;transform:none}.round .options-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:10px;gap:10px;width:1000px}.create .inner,.join .inner{justify-content:space-between;height:100%}.unfilled{border:none;background-color:transparent!important;box-shadow:none!important;transform:none!important;padding:12px;cursor:pointer;transition:.12s ease-out}.unfilled:hover{transform:scale(1.1)!important}.unfilled:active{transform:scale(.97)!important}.unfilled svg{color:#fff}.btn:not(.unfilled){padding:.5rem 2rem;border-radius:8px;font-weight:500;font-size:20px;height:55px;display:inline-block;cursor:pointer;transition:.12s ease-out;border:none;display:flex;gap:8px;align-items:center;justify-content:center}.btn:active{opacity:.8}.btn.primary{--bg:#0ad6a1;--shadow:#008462;--color:#000;background-color:var(--bg);color:var(--color);box-shadow:0 6px 0 var(--shadow)}.btn.primary:hover{background-color:#0aeab0;box-shadow:0 10px 0 var(--shadow);transform:translateY(-4px)}.btn.primary:active{box-shadow:0 4px 0 var(--shadow);transform:translateY(2px)}.btn.secondary{--bg:#e7e7e7;--shadow:#a6a6a6;--color:#000;background-color:var(--bg);color:var(--color);box-shadow:0 6px 0 var(--shadow)}.btn.secondary:hover{background-color:#ffffff;box-shadow:0 10px 0 var(--shadow);transform:translateY(-4px)}.btn.secondary:active{box-shadow:0 4px 0 var(--shadow);transform:translateY(2px)}.btn.tertiary{--bg:#2b5d8e;--shadow:#082e53;--color:#fff;background-color:var(--bg);color:var(--color);box-shadow:0 6px 0 var(--shadow)}.btn.tertiary:hover{background-color:#326aa1;box-shadow:0 10px 0 var(--shadow);transform:translateY(-4px)}.btn.tertiary:active{box-shadow:0 4px 0 var(--shadow);transform:translateY(2px)}.btn:focus-visible{outline:4px solid #0ad6a1;outline-offset:4px}.btn.secondary:focus-visible,.btn.tertiary:focus-visible{outline:4px solid #fff}.btn:disabled{cursor:not-allowed;opacity:.5}.panel .input{display:flex;flex-direction:column;gap:16px}.error{padding:6px 12px;border-radius:8px;background:#ff5d5d26;border:2px solid #ff5d5d;color:#ff5d5d}.error p{font-size:20px}.player-count{font-size:24px}.tabs-container{position:relative;display:flex;width:100%;background:#fff;border-radius:12px;overflow:hidden;padding:4px;transition:.12s ease-out}.tabs-highlight{position:absolute;top:4px;bottom:0;background:#0ad6a1;border-radius:8px;transition:transform .35s cubic-bezier(.25,1.25,.5,1);box-shadow:0 6px 0 #007658;height:50px;font-family:Roboto,sans-serif}.tab-button.active:hover~tabs-highlight{background-color:#0aeab0;box-shadow:0 10px 0 #007658;transform:translateY(-4px)}.tabs-highlight:active{box-shadow:0 4px 0 #007658;transform:translateY(2px)}.tab-button{position:relative;z-index:1;flex:1 1;padding:12px 20px;height:55px;font-size:20px;background:none;border:none;cursor:pointer;color:#000;opacity:.5;transition:.12s ease-out;font-family:Roboto,sans-serif;font-weight:400}.tab-button:focus{outline:none!important}.tab-button.active{color:#000;opacity:1}.tabs-container:focus-visible{outline:4px solid #0ad6a1;outline-offset:4px}.end{text-align:center;font-family:sans-serif}.podium{display:flex;justify-content:center;align-items:flex-end;gap:1rem;margin:2rem 0;flex:1 1;width:100%}.podium-step{width:100px;display:flex;flex-direction:column;align-items:center;flex:1 1}.podium-step .player-name{font-weight:700;margin-bottom:.5rem}.podium-step .player-points{margin-bottom:.5rem}.podium-step .podium-base{background:#ccc;width:100%;text-align:center;font-weight:700;padding:.5rem 0;border-radius:2px 2px 16px 16px}.step-1 .podium-base{background:#ffae00;height:120px}.step-2 .podium-base{background:silver;height:90px}.step-3 .podium-base{background:#cd7f32;height:70px}.end .home{margin-top:32px;width:100%}