.Icon{text-align:center}.Icon.S{min-height:16px;min-width:16px;height:16px;width:16px;font-size:16px;line-height:16px}.Icon.M{min-height:24px;min-width:24px;height:24px;width:24px;font-size:24px;line-height:24px}.Icon.L{min-height:32px;min-width:32px;height:32px;width:32px;font-size:32px;line-height:32px}.Icon.XL{min-height:48px;min-width:48px;height:48px;width:48px;font-size:48px;line-height:48px}.Icon.rotating{-webkit-animation:rotation 1.5s linear infinite;animation:rotation 1.5s linear infinite}@-webkit-keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.IconButton{border:0;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;outline:none;padding:0;background-color:initial;opacity:.3;transition:opacity .35s ease-out;color:inherit}.IconButton.clickable{cursor:pointer}.IconButton:not(.clickable){opacity:.1}.IconButton.active,.IconButton:hover.clickable{opacity:1}.IconButton:focus{background-color:red}.IconButton.default{background-color:initial}.IconButton.primary{background-color:#9db7ff}.IconButton.danger{background-color:#ffa8a8}.IconButton .IconButtonTitle{margin-left:5px}.IconButton .IconButtonTitle.S{font-size:12px;line-height:16px}.IconButton .IconButtonTitle.M{font-size:15px;line-height:24px}.IconButton .IconButtonTitle.L{font-size:20px;line-height:32px}.Head{flex-direction:column;flex-shrink:0;align-self:stretch;border-bottom:1px solid;border-color:#000;transition:border-color .3s ease-in-out}.Head,.Head .HeadInner{display:flex;align-items:center}.Head .HeadInner{flex-direction:row;justify-content:space-between;padding:.75rem;width:50%;min-width:600px;max-width:600px}@media screen and (max-width:600px){.Head .HeadInner{width:100%;min-width:auto;max-width:none}}.Head .HeadInner .RoomLink{flex-shrink:0}.Head .HeadInner .RoomMeta{display:flex;flex-direction:row;flex-grow:1;justify-content:center;align-items:center;padding:0 .5rem;line-height:14px;font-size:12px;font-weight:700;overflow:hidden;white-space:nowrap}.Head .HeadInner .RoomMeta .RoomName{overflow:hidden;text-overflow:ellipsis}.Head .HeadInner .RoomMeta .RoomSize{opacity:.6}.Head .HeadInner .RoomExit{flex-shrink:0}body.dark .Head{border-color:rgba(0,0,0,.1)}body.light .Head{border-color:hsla(0,0%,100%,.1)}.Cover{display:flex;flex-direction:row;justify-content:center;align-items:center;height:36px;min-height:36px;width:36px;min-width:36px;background-position:50%;background-size:cover;box-shadow:0 1px 3px rgba(25,25,34,.2);border-radius:.25rem;opacity:.7;transition:opacity .3s ease-in-out,box-shadow .3s ease-in-out}.Cover.playable{cursor:pointer}.Cover.playable:hover,.Cover.playing{box-shadow:0 1px 3px rgba(25,25,34,.5);opacity:1}.Cover .Icon{opacity:0;transition:opacity .3s ease-in-out}.Cover.playing .Icon,.Cover:hover .Icon{opacity:.5}.Media{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;overflow:hidden;padding:.25rem 0;opacity:.7;transition:opacity .2s ease-in-out}.Media:hover{opacity:1}.Media .Metas{display:flex;flex-direction:column;flex-grow:1;align-items:stretch;font-size:14px;line-height:18px;overflow:hidden}.Media .Metas .Meta{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Media .Actions{flex-shrink:0}.Media>*{margin-left:10px}.Media>:first-child{margin-left:0}.Queue{padding:.5rem .5rem .5rem .75rem;height:100%;overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;width:50%;min-width:600px;max-width:600px}@media screen and (max-width:600px){.Queue{width:100%;min-width:auto;max-width:none}}.Queue::-webkit-scrollbar{width:.25rem}.Queue::-webkit-scrollbar-track{background-color:initial}.Queue::-webkit-scrollbar-thumb{-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out;background-color:#000}.Queue .QueueEmpty{display:flex;flex-direction:column;flex-grow:1;justify-content:center;align-items:center;text-align:center;height:100%}.Queue .QueueEmpty>*{margin-top:1rem}.Queue .QueueEmpty>:first-child{margin-top:0}body.dark .Queue::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}body.light .Queue::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.3)}.AudioPlayerControls{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.Progress{display:flex;flex-direction:column;flex-shrink:0;align-self:stretch;padding:.75rem 0}.Progress progress{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:.25rem}.Progress progress::-webkit-progress-bar{border-radius:1rem;-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out;background-color:#000}.Progress progress::-webkit-progress-value{border-radius:1rem;background-color:#0f0!important}body.dark .Progress progress::-webkit-progress-bar{background-color:rgba(0,0,0,.1)}body.light .Progress progress::-webkit-progress-bar{background-color:hsla(0,0%,100%,.1)}.QueueControls{flex-direction:row;justify-content:space-between}.QueueControls,.RoomControls{display:flex;align-items:center;align-self:stretch}.RoomControls{flex-direction:column;flex-shrink:0;border-top:1px solid;border-color:#000;transition:border-color .3s ease-in-out}.RoomControls .ControlsInner{display:flex;align-items:center;justify-content:center;padding:.75rem;position:relative;width:50%;min-width:600px;max-width:600px}@media screen and (max-width:600px){.RoomControls .ControlsInner{width:100%;min-width:auto;max-width:none}}.RoomControls .ControlsInner.extended{flex-direction:column}.RoomControls .ControlsInner.compact{flex-direction:row;justify-content:space-between}.RoomControls .ControlsInner .AudioPlayerControls{display:flex;flex-direction:row;justify-content:space-between;align-items:center;min-width:130px}@media screen and (max-width:220px){.RoomControls .ControlsInner .AudioPlayerControls{align-self:stretch;min-width:auto}}body.dark .RoomControls{border-color:rgba(0,0,0,.1)}body.light .RoomControls{border-color:hsla(0,0%,100%,.1)}.Messages{position:fixed;bottom:1rem;z-index:100000;opacity:.9;flex-direction:column;align-self:center}.Message,.Messages{display:flex;align-items:center}.Message{flex-direction:row;justify-content:space-between;background-color:#fff;padding:.5rem;margin-top:.5rem;color:#000;box-shadow:0 1px 6px rgba(0,0,0,.3);border-radius:.25rem;max-width:90vw;min-width:300px}.Message .MessageBody{overflow:hidden}.Message .MessageActions{margin-left:5px}.Message-error{background-color:#dc3545;color:#fff}.Message-info{background-color:#fff;color:#000}.Message-success{background-color:#28a745;color:#fff}.Message-enter{opacity:0}.Message-enter.Message-enter-active{opacity:1;transition:opacity .2s ease-in}.Message-exit{opacity:1}.Message-exit.Message-exit-active{opacity:.01;transition:opacity .35s ease-out}.FormModal input[type=password],.FormModal input[type=text],.FormModal select{border:1px solid #ccc;height:30px;line-height:30px;border-radius:.25rem;padding:0 5px}.GameOverModal .ModalBody{align-items:center}.SeaBattleHelpModal .HelpModalSection{padding:.5rem .5rem 0}.SeaBattleHelpModal .HelpModalSection .HelpModalSectionTitle{font-weight:700}.SeaBattleHelpModal .HelpModalSection .SeaBattleWeaponSelection{height:20px}.SeaBattle{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;flex-grow:1;align-items:stretch;align-self:stretch;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.SeaBattle::-webkit-scrollbar{width:.25rem}.SeaBattle::-webkit-scrollbar-track{background-color:initial}.SeaBattle::-webkit-scrollbar-thumb{-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out;background-color:#000}.SeaBattle .SeaBattleHelp{position:fixed;bottom:.5rem;left:.5rem}.SeaBattle .SeaBattleJoin{display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 155px);width:calc(100vh - 155px)}.SeaBattle .SeaBattleJoin .IconButton{margin-top:.75rem}.SeaBattle .SeaBattlePlayer{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;flex-grow:1;flex-shrink:0}.SeaBattle .SeaBattlePlayer .SeaBattleControls{display:flex;align-self:center;flex-direction:row;justify-content:space-around;padding:.75rem 0;width:300px}.SeaBattle .SeaBattlePlayer .SeaBattleControls .SeaBattleOpponentSelection{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.SeaBattle .SeaBattlePlayer .SeaBattleControls .SeaBattleOpponentSelection .SeaBattleOpponentSelectionLabel{font-size:12px;line-height:24px;white-space:nowrap}.SeaBattle .SeaBattlePlayer .SeaBattleControls .SeaBattleWeaponSelection{height:24px}.SeaBattle .SeaBattlePlayer .SeaBattleMap{height:calc(100vh - 155px);width:calc(100vh - 155px)}@media screen and (max-width:500px){.SeaBattle .SeaBattlePlayer .SeaBattleMap{height:90vw;width:90vw}}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat{fill:#000}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat.clickable{cursor:pointer}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat.ko{fill:#e52524}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat.ok:hover:not(.selected){fill:#555}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat.ok.selected{fill:#ff0}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoatAnim{transition:transform .3s ease-in-out}.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleBoat:not(.clickable),.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleHit,.SeaBattle .SeaBattlePlayer .SeaBattleMap .SeaBattleWeapon{pointer-events:none}.Room{justify-content:space-between;align-items:center;max-height:100vh}.Room,.Splash{height:100vh}.Room,.Splash,.Splash .Top{display:flex;flex-direction:column}.Splash .Top{justify-content:flex-start;align-items:center;padding:.75rem;height:30vh}.Splash .Top .Description{line-height:20px;font-size:10px;text-align:center}.Splash .Top .PoweredWith{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;line-height:20px;font-size:10px}.Splash .Top .Logo{display:flex;flex-direction:row;align-items:center;line-height:50px;font-size:50px;font-weight:700;text-align:center;text-decoration:none;text-transform:uppercase}.Splash .Top .Logo img{height:50px;margin-right:.5rem}.Splash .Middle{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:.75rem;height:40vh}.Splash .Middle .Menu{display:flex;flex-direction:row;flex-grow:1;justify-content:space-evenly;align-items:center}.Splash .Bottom{padding:.75rem;height:30vh}.Splash .Bottom,.Splash .Bottom .Menu{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.Splash .Bottom .Menu{flex-grow:1}.Overlay{position:fixed;z-index:100;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:background-color .3s,opacity .3s}.Overlay.enter{background-color:initial;opacity:0}.Overlay.enter-active,.Overlay.enter-done,.Overlay.exit{background-color:rgba(0,0,0,.5);opacity:1}.Overlay.exit-active{background-color:initial;opacity:0}.Overlay .OverlayWrapper{color:#000;display:flex;flex-direction:column;justify-content:flex-start;max-height:80%;width:400px;min-width:400px;max-width:400px}@media screen and (max-width:500px){.Overlay .OverlayWrapper{width:90%;min-width:auto;max-width:none}}.Overlay .OverlayWrapper .Modal{display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}.Overlay .OverlayWrapper .Modal .ModalHead{background-color:#f0f0f0;border-bottom:1px solid #dcdcdc;position:relative;display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;align-items:center;justify-content:center;padding:.5rem .75rem;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.Overlay .OverlayWrapper .Modal .ModalHead .ModalTitle{text-align:center;flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .5rem}.Overlay .OverlayWrapper .Modal .ModalHead .ModalHeadBack,.Overlay .OverlayWrapper .Modal .ModalHead .ModalHeadClose{padding:0;border-radius:0;background-color:initial!important}.Overlay .OverlayWrapper .Modal .ModalHead .ModalHeadBack.hidden,.Overlay .OverlayWrapper .Modal .ModalHead .ModalHeadClose.hidden{visibility:hidden}.Overlay .OverlayWrapper .Modal .ModalBody{background-color:#fff;display:flex;flex-direction:column;flex-shrink:1;justify-content:flex-start;overflow-y:scroll;padding:.5rem}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField{display:flex;flex-direction:column;flex-shrink:0}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField label{font-weight:700}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField label+*{margin-top:5px}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField .XXX{display:flex;flex-direction:column;flex-shrink:0;padding:.25rem 0}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField input::-webkit-contacts-auto-fill-button{color:red;visibility:hidden;display:none!important}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField input:-moz-read-only{font-style:italic;color:#333}.Overlay .OverlayWrapper .Modal .ModalBody .ModalField input:read-only{font-style:italic;color:#333}.Overlay .OverlayWrapper .Modal .ModalBody::-webkit-scrollbar{width:.25rem}.Overlay .OverlayWrapper .Modal .ModalBody::-webkit-scrollbar-track{background-color:#ddd}.Overlay .OverlayWrapper .Modal .ModalBody::-webkit-scrollbar-thumb{background:#777}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem{padding:.5rem 0;cursor:pointer;transition:background-color .3s ease-in-out;display:flex;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;justify-content:flex-start;align-items:center;outline:none}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem .ModalListItemText{flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem .ModalListItemIcon{padding:0 1rem}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem .ModalListItemImage{width:20px;height:20px;padding:0 1rem}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem .ModalListItemNext{opacity:.2;transition:opacity .3s ease-in-out;padding:0 1rem}.Overlay .OverlayWrapper .Modal .ModalBody .ListModalItem:hover .ModalListItemNext{opacity:1}.Overlay .OverlayWrapper .Modal .ModalFoot{background-color:#f0f0f0;border-top:1px solid #dcdcdc;display:flex;align-self:stretch;flex-direction:row;flex-shrink:0;flex-wrap:nowrap;justify-content:center;min-height:1rem;padding:.25rem;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.Overlay .OverlayWrapper .Modal .ModalFoot .IconButton{margin-left:1rem;padding:.5rem;border-radius:.25rem}.Overlay .OverlayWrapper .Modal .ModalFoot .IconButton:first-child{margin-left:0}.SearchModal{display:flex;flex-direction:column}.HelpModal .HelpModalSection{padding:.5rem .5rem 0}.HelpModal .HelpModalSection .HelpModalSectionTitle{font-weight:700}.App{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}body{background:#fff;font-family:"Roboto",Arial,sans-serif;font-size:15px;line-height:20px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body,div,img,p{margin:0;padding:0}div{box-sizing:border-box}button,input[type=password],input[type=text],select,textarea{margin:0;padding:0;border:0;font-size:inherit;box-sizing:border-box}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}body{transition:color .3s ease-in-out,background-color .3s ease-in-out}body.dark{color:#000}body.light{color:#fff}