@import "https://fonts.googleapis.com/css2?family=Preahvihear&display=swap";body{color:#fff;-webkit-user-select:none;user-select:none;background:#211f30 url(/images/bg.png) 0 0/cover no-repeat;flex-direction:column;align-items:center;font-family:Preahvihear,sans-serif;display:flex}header{position:relative}header img{width:64px;height:64px;position:absolute;top:70px;left:32px;transform:rotate(38deg)}canvas{border-radius:8px}h1{color:#fff;text-shadow:0 0 10px #0000001a;margin-bottom:0;font-size:4rem}#game{flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}#lobby-scene{flex-direction:column;align-items:center;display:none;position:absolute;top:50%;transform:translateY(-50%)}.choose-text{margin-bottom:12px}#character-picker{justify-content:space-between;align-self:stretch;margin-bottom:12px;display:flex}.character-tile{width:80px;height:80px;image-rendering:pixelated;box-shadow:none;cursor:pointer;opacity:.55;filter:saturate(.5);background:#ffffff26 0 0/880px 80px no-repeat;border:3px solid #ffffff59;border-radius:8px;margin:0;padding:0;transition:transform .15s ease-out,border-color .15s ease-out,opacity .15s ease-out,filter .15s ease-out;position:relative}.character-tile[data-char="0"]{background-image:url(/sprites/Characters/MaskDude/Idle%20\(32x32\).png)}.character-tile[data-char="1"]{background-image:url(/sprites/Characters/NinjaFrog/Idle%20\(32x32\).png)}.character-tile[data-char="2"]{background-image:url(/sprites/Characters/PinkMan/Idle%20\(32x32\).png)}.character-tile[data-char="3"]{background-image:url(/sprites/Characters/VirtualGuy/Idle\(32x32\).png)}.character-tile:hover{opacity:1;filter:none;background-position-y:0;transform:scale(1.1)}.character-tile.selected{opacity:1;filter:none;background-color:#ffffff59;border-color:#fff;animation:.55s steps(11,end) infinite charIdle;transform:scale(1.1)}@keyframes charIdle{0%{background-position-x:0}to{background-position-x:-880px}}.supername-wrap{z-index:1;margin:16px 0;position:relative}input{text-align:center;color:#172f58;background:#fff3;border:3px solid #fff;border-radius:8px;padding:0 16px;font-family:Preahvihear,sans-serif;font-size:1.75rem;transition:background-color .15s ease-out}input:focus{outline:none}.supername-wrap.selected>input{background-color:#ffffff59}.character-tile.selected:after,.supername-wrap.selected:after{content:"";background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5 5 9 9.5 3.5' fill='none' stroke='%23172f58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/12px 12px no-repeat;border-radius:50%;width:24px;height:24px;position:absolute;top:-10px;right:-10px}label{color:#fff;-webkit-user-select:none;user-select:none;font-size:30px;font-weight:700}button{color:#fff;cursor:pointer;background:url(/sprites/Background/Green.png);border:3px solid #fff;border-radius:8px;margin:16px 0;padding:8px 42px;font-family:Preahvihear,sans-serif;font-size:2rem;font-weight:700;transition:all .25s ease-out;box-shadow:0 0 10px #0000001a}button:hover{background-position-y:70px}button:disabled{filter:grayscale();opacity:.5;cursor:not-allowed;box-shadow:none}button:disabled:hover{background-position-y:0}#objective{cursor:pointer;opacity:0;background:#172f58d9;border:3px solid #fff;border-left:none;border-radius:0 8px 8px 0;width:280px;padding:14px 26px;transition:transform .4s ease-out,opacity .4s ease-out;position:absolute;top:96px;left:0;transform:translate(-105%)}#objective.show{opacity:1;transform:translate(0)}#objective h2{align-items:center;gap:8px;margin:0 0 8px;font-size:1.4rem;display:flex}#objective h2:before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z' fill='%23ffd83d'/%3E%3C/svg%3E") 50%/contain no-repeat;width:20px;height:20px}#objective p{margin:0;font-size:1rem;line-height:1.45}#controls-overlay{z-index:2;background:#00000080;justify-content:center;align-items:center;display:none;position:absolute;inset:0}#controls-overlay.open{display:flex}#controls-window{background:#172f58f2;border:3px solid #fff;border-radius:8px;width:440px;padding:20px 28px}#controls-window h2{text-align:center;margin:0 0 12px;font-size:1.6rem}#controls-window table{border-collapse:collapse;width:100%}#controls-window th{text-align:left;text-transform:uppercase;letter-spacing:.05em;opacity:.7;padding:4px 8px;font-size:.85rem}#controls-window td{border-top:1px solid #ffffff26;padding:8px}#controls-window kbd{color:#172f58;text-align:center;background:#fff;border-radius:6px;min-width:24px;padding:1px 8px;font-family:inherit;font-size:.9rem;display:inline-block}#controls-close{background-image:url(/sprites/Background/Pink.png);margin:16px auto 0;padding:4px 28px;font-size:1.25rem;display:block}.waiting{display:none}#status{color:#fff;align-items:center;font-family:Preahvihear,sans-serif;font-weight:700;display:none;position:absolute;bottom:12px;left:48px}#status:before{content:"";background:var(--background);border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-right:8px;position:absolute;left:-24px}#version{color:#fff;align-items:center;font-family:Preahvihear,sans-serif;font-weight:700;display:flex;position:absolute;bottom:12px;right:38px}.fade-in{animation:.5s ease-in-out fadeIn}.bump{animation:.5s ease-in-out bump}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bump{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}