@font-face{font-family:Overwatch;src:url(/assets/big_noodle_titling-CmfBXbpw.ttf) format("truetype");font-weight:400;font-style:normal}html{background-image:url(/withblur.png);background-repeat:no-repeat;background-position:center;background-size:cover;min-height:100%;background-attachment:fixed}body{font-family:Overwatch,sans-serif;text-align:center;color:orange;height:100%;margin:0;background:transparent;min-height:100vh}@media(min-height:1000px){body{overflow:hidden}}.shadowText{text-shadow:0px 0px 5px black,0px 0px 15px black;font-size:clamp(1rem,.8rem + .7vw,1.5rem)}.warningText{text-shadow:0px 0px 5px black,0px 0px 15px black;color:red;font-size:clamp(1.25rem,1rem + 1vw,2rem)}input[type=checkbox]{display:none}.title{font-weight:700;text-shadow:0px 0px 5px black,0px 0px 15px black;font-size:clamp(1.75rem,1.2rem + 2.5vw,3.25rem)}.footer{width:100%;bottom:.5rem;margin-top:1rem;font-size:clamp(.75rem,.6rem + .4vw,1rem)}.roleTitle{font-size:clamp(1rem,.85rem + .9vw,1.75rem)}.varRoleTitle{font-size:clamp(1rem,.85rem + .9vw,1.75rem);display:grid;align-items:center}.variantText{text-wrap:nowrap;font-size:clamp(1rem,.85rem + .9vw,1.75rem)}.heroDisplay{background-color:#000c;max-width:700px;width:min(92%,700px);margin:10px auto;padding:clamp(16px,2.5vw,30px);border-radius:12px}@media(max-width:800px){.heroDisplay{padding:clamp(20px,5vw,50px)}}.owButtons{width:clamp(110px,12vw,170px);height:clamp(44px,6vw,72px);padding:clamp(6px,1vw,12px);margin:10px;font-size:clamp(.9rem,.6rem + .8vw,1.25rem);background-color:#00000045;border:3px solid orange;color:orange;box-shadow:0 0 5px #000,0 0 15px #000;text-shadow:0px 0px 5px black,0px 0px 15px black;border-radius:5%;transition:.3s}@media(hover:hover)and (pointer:fine){.owButtons:not(:disabled):hover{opacity:1;background-color:orange;color:#000;transform:scale(1.08);text-shadow:none}}.owButtons:not(:disabled):active{transform:scale(.96)}.owButtons:disabled{animation:scaleincrease .75s alternate infinite;pointer-events:none;opacity:.2}@media(max-width:768px){.owButtons{width:clamp(120px,60vw,220px);height:clamp(48px,12vw,70px)}}.modalButtons{display:flex;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}.modalButton{width:clamp(100px,10vw,150px);height:clamp(40px,5vw,60px);padding:clamp(6px,1vw,12px);margin:10px;font-size:clamp(.85rem,.6rem + .6vw,1.05rem);background-color:#fff0;border:3px solid orange;color:orange;border-radius:5%;transition:.3s}@media(hover:hover)and (pointer:fine){.modalButton:hover{opacity:1;background-color:orange;color:#000;transform:scale(1.08)}}#close{color:red;border-color:red}@media(hover:hover)and (pointer:fine){#close:hover{background-color:red;color:#000;font-weight:600}}@media(max-width:1000px){.modalButton{width:clamp(80px,60vw,100px);height:clamp(48px,12vw,70px)}}.modalButton:active{transform:scale(.96)}.varModalButtonDiv{display:flex;align-items:center;justify-content:center}.varModalButton{width:clamp(90px,9vw,140px);height:clamp(36px,4.5vw,54px);margin:10px;font-size:clamp(.8rem,.55rem + .6vw,1rem);background-color:#fff0;border:3px solid orange;color:orange;border-radius:5%;transition:.3s}@media(hover:hover)and (pointer:fine){.varModalButton:hover{opacity:1;background-color:orange;color:#000;transform:scale(1.08)}}.varModalButton:active{transform:scale(.96)}.modalHero{color:orange;width:min(90%,1200px);background-color:#000000d3}.variantModal{color:orange;width:min(90%,500px);background-color:#000000d3}.imagesSelected{width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);border:3px solid green;border-radius:10%;transition:.3s}.images{width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);border:3px solid red;border-radius:10%;opacity:.3;transition:.3s;transform:scale(.9)}.randomImages{width:clamp(120px,12vw,240px);height:clamp(120px,12vw,240px);padding:clamp(6px,1vw,12px);border:2px solid orange;border-radius:clamp(6px,.8vw,12px)}.varImages{width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);border:3px solid red;border-radius:10%;opacity:.3;transition:.3s;transform:scale(.96)}.varImagesSelected{width:clamp(72px,8vw,96px);height:clamp(72px,8vw,96px);border:3px solid green;border-radius:10%;transition:.3s}.bmacTotal{position:fixed;left:.5vw;top:50%}.bmacImage img{width:clamp(40px,2vw,60px);height:clamp(40px,2vw,60px);cursor:pointer;display:block}.bmacText{position:absolute;top:60%;left:0%;background:#000;color:#fff;padding:6px 10px;border-radius:6px;font-size:clamp(.75rem,.6rem + .4vw,.95rem);white-space:nowrap;opacity:0;transform:translate(-20px);transition:all .3s ease}@media(hover:hover)and (pointer:fine){.bmacTotal:hover .bmacText{opacity:1;transform:translate(0)}}.gold{animation:grow .8s alternate infinite;color:gold;transform-origin:center;display:inline-block;text-shadow:0px 0px 5px gold,0px 0px 10px gold}.jade{animation:grow .8s alternate infinite;color:#023002;transform-origin:center;display:inline-block;text-shadow:0px 0px 4px rgb(11,231,11),0px 0px 15px rgb(12,235,12)}.galactic{animation:grow .8s alternate infinite;color:purple;transform-origin:center;display:inline-block;text-shadow:0px 0px 4px purple,0px 0px 10px purple}.crimson{animation:grow .8s alternate infinite;color:#dc143c;transform-origin:center;display:inline-block;text-shadow:0px 0px 4px rgb(255,0,51),0px 0px 10px rgb(255,0,51)}.competitive{color:red}.legacy{color:#fff}@keyframes grow{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes scaleincrease{0%{transform:scale(1)}to{transform:scale(1.1)}}.roleLayout{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start}.roleGrid{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:12px}@media(max-width:1100px){.roleGrid{grid-template-columns:repeat(2,minmax(90px,1fr))}}@media(max-width:900px){.roleLayout{grid-template-columns:1fr}.roleGrid{grid-template-columns:repeat(3,minmax(90px,1fr))}}.heroCard{display:flex;flex-direction:column;align-items:center;gap:6px}.varRoleGrid{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:12px}@media(max-width:1100px){.varRoleGrid{grid-template-columns:repeat(4,minmax(115px,1fr))}}@media(max-width:900px){.varRoleGrid{grid-template-columns:repeat(4,minmax(90px,1fr))}}@media(max-width:430px){.varRoleGrid{grid-template-columns:repeat(2,minmax(90px,1fr))}}