@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/vt323/v18/pxiKyp0ihIEF2isQFJXGdg.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/vt323/v18/pxiKyp0ihIEF2isRFJXGdg.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:VT323;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/vt323/v18/pxiKyp0ihIEF2isfFJU.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}html,button{font-family:VT323,SansSerif}canvas{display:block}body{margin:0;overflow:hidden;user-select:none;display:grid;grid-template-columns:1fr 200px;grid-template-rows:30px 1fr;height:100vh;background:#000}header{background:#e53;grid-column:1 / span 2;grid-row:1;display:flex;justify-content:space-between;border-bottom:3px solid black;font-size:18px;text-align:center;.game-title{width:100%;font-weight:700;padding:2px;user-select:all}#player{display:flex;gap:5px;button{padding:0 8px;border:0;border-left:2px solid black;border-right:2px solid black;font-size:16px;background:#2288f7;color:#fff;font-weight:700;cursor:pointer}.player-name{user-select:all;white-space:nowrap;padding-right:8px}background:#f79122;span{padding:2px}}#awards,#rating{display:flex;gap:5px;button{padding:0 8px;border:0;border-right:2px solid black;font-size:16px;background:#2288f7;color:#fff;font-weight:700;cursor:pointer}background:#f79122;span{padding:2px}}.game{padding-left:5px;padding-right:5px;gap:5px;border-left:2px solid black;display:none;&.has-game{display:flex;white-space:nowrap}.game-name{max-width:200px;text-overflow:ellipsis;overflow:hidden}span{padding:2px}}}.sidebar{border-left:3px solid black;min-height:40px;grid-column:2;grid-row:2;background:#6f7984;display:flex;flex-direction:column;justify-content:space-between;#dlg-logo{min-height:200px;height:200px;display:flex;img{width:100%}border-bottom:2px solid black}#dlg-game{min-height:200px;height:200px;.dialog-wrapper{height:100%;display:flex;flex-direction:column;justify-content:space-between;.content-header{position:relative;display:flex;justify-content:space-between}.stars-container{margin-top:auto;display:flex;justify-content:center;.stars{margin:3px 0;img{height:20px}cursor:pointer;display:flex;justify-content:center;&.own-game{pointer-events:none;cursor:auto}}}.buttons{padding:5px;flex-direction:column;button{font-size:18px;padding:5px}}}.content{width:100%;font-size:20px;font-weight:700;user-select:all;text-align:center;text-overflow:ellipsis;overflow:hidden;z-index:20;max-height:calc(2.4em + 4px);border-bottom:2px solid black;&:hover{position:absolute;width:100%;top:0;white-space:wrap;word-break:break-word;max-height:none;overflow:visible;height:min-content;background:#6f7984}}border-bottom:2px solid black;.dlg-btn-awards{position:relative;.count{position:absolute;top:-5px;right:-5px;width:30px;img{filter:invert(.5) sepia(1) saturate(5) hue-rotate(400deg);width:30px}span{line-height:28px;color:#000;font-weight:1000;font-size:15px}}}}.my-ratings{font-weight:700;padding-top:5px;text-align:center}#dlg-games{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding:5px;.content{text-align:center}.stars{img{height:20px}width:100%;display:flex;justify-content:center}overflow:auto;.game{cursor:pointer;user-select:none;padding:5px;border:1px solid black;border-radius:5px;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;background:#f79122}}}.canvas-container{grid-column:1;grid-row:2;overflow:hidden;canvas{width:100%;height:100%}}.buttons{display:flex;gap:5px;button{cursor:pointer;background:#2288f7;color:#fff;border:none;padding:10px;border-radius:5px;flex-basis:100%;font-size:20px;font-weight:700}}.dialog{.content{font-size:25px;text-align:center}user-select:none;min-width:20%;background:gray;border:3px solid blue;border-radius:10px;.dialog-wrapper{display:flex;flex-direction:column;gap:5px;height:100%;justify-content:space-between}}#dlg-username{input{width:calc(100% - 10px);text-align:center;font-size:35px}}#dlg-award-ranking{max-width:50%;.award-ranking{.content{padding-left:10px;padding-right:10px;gap:15px;display:flex;justify-content:space-between;.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.award-count{min-width:75px;display:flex;justify-content:space-between}}}}#dlg-rating-ranking{max-width:50%;.rating-ranking{.content{padding-left:10px;padding-right:10px;gap:15px;display:flex;justify-content:space-between;.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stars{display:flex;justify-content:center;img{height:20px}font-size:40px;font-family:monospace}}}}#dlg-rating{.stars{display:flex;justify-content:center;cursor:pointer;img{height:20px}font-size:40px;font-family:monospace}.buttons{button.inactive{pointer-events:none;background:#696969}}}#dlg-awards{width:50%;.content{display:flex;flex-flow:wrap;justify-content:space-evenly;gap:5px;button{border:1px solid black;border-radius:10px;padding:0;display:flex;position:relative;justify-content:end;flex-direction:column;height:140px;width:95px;.bg{top:0;position:absolute;width:100%;&.count{width:30px;right:0;top:-3px;img{filter:invert(.5) sepia(1) saturate(5) hue-rotate(400deg);width:30px}span{line-height:36px;width:100%;color:#000;font-weight:1000}}img{margin-top:5px;width:80px;fill:#00f;&.aw-2{height:80px}}&.icon{display:flex;justify-content:center;font-size:20px;.aw-0{margin-top:27px;border-radius:40px}.aw-1{margin-top:15px}.aw-2{margin-top:39px;border-radius:40px}}}.name{color:#fff;font-weight:700;background:#0009;border-bottom-left-radius:9px;border-bottom-right-radius:9px;border-top:1px solid black;padding:2px;height:45px;display:flex;flex-direction:column;justify-content:center}}}}*:focus{outline:none}