#root{width:100%;height:100%}*{box-sizing:border-box}body{background-blend-mode:multiply;background-color:#000000f2;background-image:url(background.jpg);width:100vw;height:100vh;margin:0;font-family:Rubik}.screen-background{background-blend-mode:multiply;background-color:#000000d9;background-image:url(background.jpg);background-repeat:repeat}.screen{aspect-ratio:16/9;grid-template-rows:7% 54% 39%;width:min(100vw,177.778vh);margin:0 auto;display:grid}p{margin:0}.top-bar{height:100%;position:relative}.top-bar-red{background:linear-gradient(179deg,#00b7fa 0%,#fff 22%,#ffd000 41%,red 42%);height:60%}.top-bar-button1{cursor:pointer;clip-path:polygon(0 0,100% 0%,75% 100%,0% 100%);z-index:2;background-color:red;border:none;width:8%;height:90%;position:absolute}.top-bar-button1 img{filter:brightness(5);opacity:.8;width:auto;height:100%;margin:auto 10% auto auto}.top-bar-button1:hover img{opacity:1}.top-bar-button1-border{clip-path:polygon(0 0,100% 0%,75% 100%,0% 100%);background-color:#640303;width:8.2%;height:94%;position:absolute}.top-bar-button1:hover+.top-bar-button1-border{background-color:orange}.paralel2{cursor:pointer;clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%);z-index:2;background-color:red;border:none;width:8%;height:90%;position:absolute;left:6.2%}.paralel2-border{clip-path:polygon(25% 0%,100% 0%,75% 100%,0% 100%);background-color:#640303;width:8.2%;height:94%;position:absolute;left:6.2%}.paralel2:hover+.paralel2-border{background-color:orange}.top-bar-combatmode{color:#000;z-index:2;clip-path:polygon(3% 0,98% 0,100% 50%,98% 100%,3% 100%,0% 50%);background:linear-gradient(90deg,#ffd000 0% 100%);justify-content:center;align-items:center;width:35%;height:80%;font-size:max(1.5vh,1.5vw);font-weight:800;display:flex;position:absolute;top:10%;left:17%}.top-bar-combatmode:after{content:"";clip-path:polygon(50% 100%,100% 0,0 0);background-color:#835705;width:4%;height:30%;position:absolute;right:5%}.top-bar-combatmode-border{clip-path:polygon(3% 0,98% 0,100% 50%,98% 100%,3% 100%,0% 50%);background-color:#000;width:37%;height:90%;position:absolute;top:2%;left:16%}.top-bar-randomize{cursor:pointer;clip-path:polygon(100% 0,0% 0%,25% 100%,100% 100%);z-index:2;background-color:red;border:none;justify-content:right;align-items:center;width:8%;height:90%;font-size:1.25rem;display:flex;position:absolute;right:0}.top-bar-randomize img{width:auto;height:100%;margin-right:20%}.top-bar-randomize:hover img{filter:brightness(50%)sepia()hue-rotate(10deg)saturate(1000%)}.top-bar-randomize:active img{transition:all .1s;transform:scale(1.25)}.top-bar-randomize-border{clip-path:polygon(100% 0,0% 0%,25% 100%,100% 100%);background-color:#640303;width:8.2%;height:94%;position:absolute;right:0}.top-bar-randomize:hover+.top-bar-randomize-border{background-color:orange}.character-grid{background:url(/ssbu-select-screen/noise.jpg) 0 0/1500px 100%;grid-template-columns:repeat(12,1fr);width:90%;height:fit-content;margin:0 auto;animation:120s linear infinite bg;display:grid;position:relative}@keyframes bg{0%{background-position-x:0}to{background-position-x:10000px}}@keyframes bgWave{0%{background-position-y:0}25%{background-position-y:-20px}50%{background-position-y:0}75%{background-position-y:20px}to{background-position-y:0}}.character-cell{z-index:2;background-color:#0000;border:2px solid #000;position:relative;overflow:hidden;aspect-ratio:16/9!important}.character-cell:hover{outline-offset:-2px;z-index:3;outline:4px solid red;animation:1.5s infinite border-glow}.selected{outline-offset:-4px;z-index:3;outline-width:6px;outline-style:solid;animation:1.5s infinite border-glow}.selected.red{outline-color:red}.selected.blue{outline-color:#0060ff}.selected.yellow{outline-color:#ffbe00}.selected.green{outline-color:#0f0}.selected.orange{outline-color:#ff8000}.selected.cyan{outline-color:#0096ff}.selected.pink{outline-color:#ff73b8}.selected.purple{outline-color:#7346f5}@keyframes border-glow{0%{}30%{outline-color:#fff}to{}}.character-cell p{color:#fff;z-index:3;text-align:center;text-shadow:.1em 0 #000,0 .1em #000,-.1em 0 #000,0 -.1em #000,-.1em -.1em #000,-.1em .1em #000,.1em -.1em #000,.1em .1em #000;width:100%;font-weight:800;line-height:100%;position:absolute;bottom:0;font-size:1.25cqmin!important}.character-cell img{object-fit:cover;z-index:2;width:140%;height:135%;position:absolute;left:50%;right:50%;transform:translate(-50%,-10%)}.player-bar{background:linear-gradient(50deg,#6000fa 0%,#00fff7 80%,#f3ffff 100%);grid-template-columns:95% 5%;display:grid;position:relative}.player-bar:before{content:"";background-color:#000;width:95%;height:5%;position:absolute;bottom:0}.player-bar-add-players{clip-path:polygon(0 0,100% 20%,100% 100%,0% 100%);background-color:#0a0a0a;flex-direction:column;justify-content:end;align-self:flex-end;align-items:center;gap:10px;width:90%;height:70%;margin-left:1px;padding-top:20px;padding-bottom:10px;display:flex;position:relative;overflow:hidden}.player-bar-add-players button{color:#000;cursor:pointer;background-color:#dfdfdf;border:none;width:80%;height:50%;font-weight:900}.button-plus{z-index:2;clip-path:polygon(0 0,100% 35%,100% 100%,0% 100%)}.button-plus img{width:100%;height:auto;margin-top:50%}.button-minus{z-index:2;clip-path:polygon(0 0,100% 0,100% 65%,0% 100%)}.button-minus img{width:100%;height:auto;margin-bottom:70%}.button-plus:disabled,.button-minus:disabled{cursor:default;background-color:#323232}.button-plus:disabled img,.button-minus:disabled img{filter:brightness(0)}.button-plus-border{content:"";clip-path:polygon(0 0,100% 35%,100% 100%,0% 100%);background-color:#0a0a0a;width:90%;height:50%;position:absolute;top:3%;left:5%}.button-minus-border{content:"";clip-path:polygon(0 0,100% 0,100% 65%,0% 100%);background-color:#0a0a0a;width:90%;height:48.5%;position:absolute;bottom:0;left:5%}.button-plus:enabled:hover+.button-plus-border,.button-minus:enabled:hover+.button-minus-border{background-color:orange}.player-slot-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;padding:1% 0 0 1%;display:grid;overflow:hidden}.player-slot-container{position:relative}.player-slot{clip-path:polygon(25% 0,100% 0%,100% 100%,0 100%,0 25%);width:100%;height:100%;color:inherit;background:#ffffff80;border:4px solid #0a0a0a;border-top-width:10px;border-bottom:none;position:relative;overflow:hidden}.player-slot-background{background-color:inherit;--base-color:color-mix(in srgb, currentColor 75%, transparent);background:linear-gradient(25deg, #ffffff26 0%, #ffffff26 25%, transparent 25.1%), linear-gradient(35deg, #ffffff40 0%, #ffffff40 35%, transparent 35.1%), linear-gradient(50deg, var(--base-color) 0%, var(--base-color) 60%, #ffffffa6 60%);width:100%;height:100%;position:absolute}.player-slot-corner-border{clip-path:polygon(20% 0,25.2% 0,0 25.2%,0 20%);background-color:#0a0a0a;width:100%;height:100%;position:absolute;top:0;left:0}.player-slot img{cursor:pointer;-webkit-user-select:none;user-select:none;width:auto;height:100%;animation:.15s slide;position:absolute;top:50%;left:50%;translate:-50% -60%;scale:1.25}@keyframes slide{0%{translate:-45% -60%}to{translate:-50% -60%}}.player-character-name{color:#fff;text-align:right;text-shadow:.05em 0 #000,0 .05em #000,-.05em 0 #000,0 -.05em #000,-.05em -.05em #000,-.05em .05em #000,.05em -.05em #000,.05em .05em #000;filter:drop-shadow(calc(.1vw + .1vh) calc(.1vw + .1vh) #000);width:95%;font-size:calc(1.5vw + 1.5vh);font-weight:800;line-height:.8;position:absolute;bottom:40%}.player-slot-grid>div:first-child{color:red}.player-slot-grid>div:nth-child(2){color:#0060ff}.player-slot-grid>div:nth-child(3){color:#ffbe00}.player-slot-grid>div:nth-child(4){color:#0f0}.player-slot-grid>div:nth-child(5){color:#ff8000}.player-slot-grid>div:nth-child(6){color:#0096ff}.player-slot-grid>div:nth-child(7){color:#ff73b8}.player-slot-grid>div:nth-child(8){color:#7346f5}.player-slot-grid>div:first-child>div:nth-child(2)>div:nth-child(4){background:#ff9696cc}.player-slot-grid>div:nth-child(2)>div:nth-child(2)>div:nth-child(4){background:#9696ffcc}.player-slot-grid>div:nth-child(3)>div:nth-child(2)>div:nth-child(4){background:#ffff96cc}.player-slot-grid>div:nth-child(4)>div:nth-child(2)>div:nth-child(4){background:#96ff96cc}.player-slot-grid>div:nth-child(5)>div:nth-child(2)>div:nth-child(4){background:#ffbe7dcc}.player-slot-grid>div:nth-child(6)>div:nth-child(2)>div:nth-child(4){background:#a3eaffcc}.player-slot-grid>div:nth-child(7)>div:nth-child(2)>div:nth-child(4){background:#ffb0d8cc}.player-slot-grid>div:nth-child(8)>div:nth-child(2)>div:nth-child(4){background:#9775ffcc}.player-name{border:.15em solid #0a0a0a;place-content:center;align-items:center;width:65%;height:15%;font-size:calc(.75vw + .75vh);font-weight:800;display:flex;position:absolute;bottom:22%;left:50%;right:50%;transform:translate(-50%)}.player-name p{color:#0f0f0f;overflow:hidden}.player-status{text-align:center;z-index:3;clip-path:polygon(5% 0,95% 0,100% 30%,100% 100%,80% 100%,20% 100%,0 100%,0 30%);background:currentColor;border-bottom:none;justify-content:right;align-items:center;width:85%;height:20%;display:flex;position:absolute;bottom:0;left:50%;right:50%;transform:translate(-50%)}.player-status-border{content:"";z-index:2;clip-path:polygon(5% 0,95% 0,100% 30%,100% 100%,80% 100%,20% 100%,0 100%,0 30%);background:#0a0a0a;width:87%;height:21%;display:block;position:absolute;bottom:0;left:50%;right:50%;transform:translate(-50%)}.player-status:after{content:"";background:repeating-linear-gradient(120deg,#0003,#0003 2%,#00000040 2% 5%);width:100%;height:100%;position:absolute;-webkit-mask-image:linear-gradient(120deg,#000 0% 40%,#0000 40%);mask-image:linear-gradient(120deg,#000 0% 40%,#0000 40%)}.player-status-number{color:#000;text-shadow:.05em 0 #fff,0 .05em #fff,-.05em 0 #fff,0 -.05em #fff,-.05em -.05em #fff,-.05em .05em #fff,.05em -.05em #fff,.05em .05em #fff;filter:drop-shadow(calc(.05vw + .05vh) calc(.05vw + .05vh) #fff);margin-right:15%;font-size:calc(1.5vw + 1.5vh);font-weight:900}.player-slot-skin-selector{z-index:1;background-color:#000000a6;border:.15cqw solid #fff;border-bottom:none;width:100%;height:110%;position:absolute;overflow:hidden;transform:translateY(-2%);box-shadow:inset 0 0 10px 5px #c9c9c9}.player-slot-skin-selector-image{-webkit-user-select:none;user-select:none;width:auto;height:100%;position:absolute;top:50%;left:50%;translate:-50% -60%;scale:1.1}.player-slot-skin-selector-grid{grid-template-columns:repeat(8,1fr);width:100%;height:20%;display:grid;position:absolute;bottom:20%}.player-slot-skin-selector-grid img{width:100%;height:auto}.player-slot-skin-selector-selected{outline-color:inherit;outline-offset:-5px;z-index:4;outline-width:5px;outline-style:solid;animation:1.5s infinite border-glow}.player-slot-skin-selector p{text-align:center;color:#323232;background-color:#ffffffbf;border-radius:50px;width:80%;padding:3%;font-size:calc(.65vw + .65vh);font-weight:400;position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.modal{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.menubutton button{cursor:pointer;color:#000;background-color:#0050ff;border:2px solid #000;padding:.5rem 2rem;font-weight:800}.menubutton button:hover{background-color:#fff}.modal-content{clip-path:polygon(10% 0%,100% 0%,100% 100%,10% 100%,0% 50%);background-color:#ff5050;border-radius:10px;width:100%;max-width:800px;max-height:85vh;position:relative;overflow-y:auto}.help-message{text-align:center;color:#fff;padding:1rem}.hand-cursor{pointer-events:none;cursor:none;z-index:3;width:calc(3vw + 3vh);height:auto;position:fixed}.hand-cursor:first-child{filter:sepia(.25)hue-rotate(300deg)saturate(400%);bottom:15%;left:12%}.hand-cursor:nth-child(2){filter:sepia(.25)hue-rotate(180deg)saturate(400%);bottom:15%;left:37%}.final-selected{animation:.35s select-animation!important}.slot-final-selected{animation:.1s linear slot-select-animation!important}@keyframes select-animation{0%{filter:drop-shadow(20px 20px #ffffff4d)drop-shadow(-20px 20px #ffffff4d)drop-shadow(20px -20px #ffffff4d)drop-shadow(-20px -20px #ffffff4d)brightness(1.5);transform:scale(1.1)}to{filter:drop-shadow(0 0 #fff0)drop-shadow(0 0 #fff0)drop-shadow(0 0 #fff0)drop-shadow(0 0 #fff0)brightness();transform:scale(1)}}@keyframes slot-select-animation{0%{top:0}50%{top:10px}to{top:0}}
