:root{--primary: #61DAFB;--inverse: #FA815F;--dark: #1f3a41;--input-bg: #294147;--input-fg: #FFFFFF;--input-dark: #0D1416;--frame: #092127eb;--margin: 8px;--padding: var(--margin);--spacing: var(--margin);--button-light: #327588;--button-dark: #1f3a41}*{padding:0;margin:0;box-sizing:border-box}::selection{background-color:var(--primary);color:#000}body{background-color:#000;color:#fff;font-family:"Titillium Web",sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;right:0;bottom:0}.frame{border:1px solid var(--dark);background-color:var(--frame);padding:var(--margin);text-align:left}.frame.frame-error{border-color:#fa5f5f}.frame p{padding:var(--margin) 0}.raised{border:1px solid var(--dark)}.text-center{text-align:center}.margin{margin:var(--margin)}.margin-top{margin-top:var(--margin)}.margin-right{margin-right:var(--margin)}.margin-bottom{margin-bottom:var(--margin)}.margin-left{margin-left:var(--margin)}.margin-horizontal{margin-left:var(--margin);margin-right:var(--margin)}.margin-vertical{margin-top:var(--margin);margin-bottom:var(--margin)}.padding{padding:var(--padding)}.padding-top{padding-top:var(--padding)}.padding-right{padding-right:var(--padding)}.padding-bottom{padding-bottom:var(--padding)}.padding-left{padding-left:var(--padding)}.padding-horizontal{padding-left:var(--padding);padding-right:var(--padding)}.padding-vertical{padding-top:var(--padding);padding-bottom:var(--padding)}.flex-row{display:flex;flex-direction:row}.flex-row.spacing>*+*{margin-left:var(--spacing)}.flex-column{display:flex;flex-direction:column}.flex-column.spacing>*+*{margin-top:var(--spacing)}.flex-row.align-start,.flex-column.align-start{align-items:flex-start}.flex-row.align-center,.flex-column.align-center{align-items:center}.flex-row.align-end,.flex-column.align-end{align-items:flex-end}.flex-row.align-stretch,.flex-column.align-stretch{align-items:stretch}.flex-row.justify-start,.flex-column.justify-start{justify-content:flex-start}.flex-row.justify-center,.flex-column.justify-center{justify-content:center}.flex-row.justify-end,.flex-column.justify-end{justify-content:flex-end}.grow{flex-grow:1}.buttons{text-align:right}#welcome{max-width:400px;width:100%;height:100%;padding:16px;display:flex;flex-direction:column}#welcome>*{flex:1 0 0}#welcome-message-container{display:flex;justify-content:center;align-items:flex-end}#welcome-message-box{margin-bottom:16px}#welcome-frame{flex-grow:0}h1{padding:var(--margin) 0}.field{display:flex;align-items:center}.field label{display:block;flex-grow:1}.field input{width:160px}button{padding:8px 16px;font-size:inherit;font-family:inherit;color:#fff;border:2px solid var(--button-light);background-color:rgba(36,117,139,.2);transition:background-color .1s linear}button:hover{color:var(--primary)}button:focus{outline:none}button:focus:not(:active){border:2px solid var(--primary)}button:not(:disabled):active{background-color:var(--primary);color:#000}button:disabled{border-color:#444;color:#666}input{padding:8px 16px;font-size:inherit;font-family:inherit;color:#fff;background-color:var(--input-bg);color:var(--input-fg);border:2px solid var(--input-dark);width:50px}input:focus{border:2px solid var(--primary);outline:none}.game{width:100%;height:100%;position:relative}.hud{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;display:flex;flex-direction:column}.game>canvas{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%}.hud-menu{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;user-select:none;pointer-events:none}.hud-menu button{text-align:left;pointer-events:initial}.hud-menu-content{display:flex;flex-direction:column}.hud-menu-content button{margin-top:4px}.leave-button{margin-top:12px !important;color:var(--inverse);border-color:var(--inverse)}.hud-fleet-actions{position:absolute;bottom:0px;left:0px;padding:10px;text-align:left;user-select:none;pointer-events:none}.hud-fleet-actions>*+*{margin-top:4px}.hud-fleet-actions button{pointer-events:initial}.ship-class-buttons{display:flex;flex-direction:column}.ship-class-buttons>button{display:flex;flex-direction:row}.ship-class-buttons>button+*{margin-top:4px}.ship-class-buttons>button .name{flex-grow:1;text-align:left}.ship-class-buttons>button .price{margin-left:10px;display:block;color:var(--inverse);justify-self:flex-end}.ship-class-buttons>button .key{display:block;width:25px;text-align:left;color:var(--inverse)}.hud-system-actions{position:absolute;bottom:0px;right:0px;padding:10px;text-align:right;pointer-events:none;user-select:none}.hud-system-actions>*+*{margin-top:4px}.hud-system-actions button{pointer-events:initial}.hud-selected-empire{position:absolute;bottom:0;right:0;padding:10px;font-size:1.25em;color:#ac52ac;text-align:right;pointer-events:none;user-select:none}.fps-counter{position:absolute;top:50px;left:10px}.hud-scores{position:absolute;top:0;right:0;padding:10px;pointer-events:none;user-select:none}.hud-scores>div{display:flex;flex-direction:row;justify-content:space-between}.hud-scores>div>:first-child{margin-right:10px}.hud-scores>div .guest:after{display:inline;content:"(guest)";color:#bbb;font-size:.7em;margin-left:5px;font-style:italic}.hud-scores>.self{color:var(--primary)}#connection-lost{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}#help-modal{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}#help-modal>.frame{max-width:600px;max-height:100%;overflow-y:auto}button>.key{color:var(--inverse);margin-right:4px}.spinner:before{content:"";display:block;width:16px;height:16px;border:1px solid rgba(0,0,0,0);border-bottom-color:var(--primary);border-left-color:var(--primary);border-radius:50%;animation:spinner-spin .5s linear infinite}figure{text-align:center}figure img{border:1px solid #318656;max-width:100%}@keyframes spinner-spin{100%{transform:rotate(360deg)}}