body{--unit:48px;-webkit-user-select:none;user-select:none;color:#fff;background:#222;margin:0;font-family:system-ui,Helvetica,sans-serif}@media (prefers-color-scheme:light){body{background:#444}}a{color:#faf;text-decoration:none}a:hover{text-decoration:underline}input{color:#000;background:#aaa;border-radius:6px;padding:4px 8px}input:focus{background:#fff}.loading:after{content:"/";animation:.5s infinite loading}@keyframes loading{0%{content:"/"}25%{content:"-"}50%{content:"\\"}75%{content:"|"}}.PlayerView{--x:0;--y:0;--w:.5;--h:.875;--d:1;left:calc(50% + var(--x) * var(--unit));top:calc(50% - var(--y) * var(--unit));width:calc(var(--w) * var(--unit));height:calc(var(--h) * var(--unit));z-index:1;position:absolute;transform:translate(-50%,-50%)}.PlayerView.self{z-index:2}.PlayerView.fly{filter:drop-shadow(0 0 4px #fff)}.PlayerView{--sprite-x:0;--sprite-y:0;--hue:0}.PlayerView:before{width:var(--unit);height:calc(var(--unit) * 1.5);content:"";background-image:url(../../../player.svg);background-size:800%;background-position-x:calc(var(--sprite-x) * var(--unit) * -1);background-position-y:calc(var(--sprite-y) * var(--unit) * -1.5);filter:hue-rotate(calc((var(--hue) - 184) * 1deg));transform:translateX(-50%) scaleX(var(--d));position:absolute;bottom:0;left:50%}.PlayerView label{text-align:center;width:20ch;color:hsl(var(--hue), 100%, 80%);text-shadow:1px 1px #000;font-size:14px;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)}.PlayerView.self label{font-weight:700}.PlayerView .chat{color:#fff;text-shadow:1px 1px #000;text-overflow:ellipsis;text-align:center;width:160px;max-height:2em;font-size:14px;line-height:1;position:absolute;bottom:calc(100% + 24px);left:50%;overflow:hidden;transform:translate(-50%)}.PlayerView .chat:empty{display:none}.PlayerView .time{color:#ff0;text-shadow:1px 1px #000;font-size:14px;position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%)}