body{margin:0;background-color:#101010;font-size:22px;color:#f0f0f0;font-family:sans-serif;overflow:hidden}div{position:relative;z-index:1}svg{position:absolute;left:0;top:0;width:100%;height:100%}input{background-color:#404040;color:#f0f0f0;margin-top:20px;margin-bottom:20px}input::placeholder{color:#b0b0b0;border-color:#767676}button{background-color:#404040;border-color:#767676;color:#f0f0f0;margin-top:20px;margin-bottom:20px}button[disabled]{opacity:.5}p{margin:20px 0 0;margin-bot:20px}.background_over_game{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;transition:opacity .5s ease;pointer-events:none}.background_over_game:not(.active_bg){opacity:0}.page{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto}.page:not(.active_view){display:none}.box{border-radius:3px;border:1px solid #404040;background-color:#303030;margin:20px;box-sizing:border-box;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.box.entry_box{flex-direction:row;flex-wrap:wrap;min-width:300px}.box.controls_box{font-size:12px;min-width:215px;max-width:355px}.box.controls_box p{width:100%;text-align:left}.room_list{min-width:200px;min-height:200px;max-width:650px;max-height:540px;overflow:auto}.team_label{position:absolute;left:0;top:0;font-size:10px}.team_boxes_row{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.team_box_container{display:flex;flex-direction:column;align-items:center}.team_box{padding-top:30px;width:300px;height:300px;overflow-x:hidden;overflow-y:auto}.player_entry{max-width:100%;overflow:hidden;white-space:nowrap}.game_overlay{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;user-select:none}.ov_item{position:absolute;left:0;top:0;transform:translate(var(--x-pos),var(--y-pos))}.ov_item.player_name{transform:translate(var(--x-pos),var(--y-pos)) translate(-30px,-65px);width:60px;text-align:center;display:flex;align-items:center;justify-content:center;white-space:nowrap}.ov_item.player_name.team1{color:#f77}.ov_item.player_name.team2{color:#7f7}.ov_item.player_health_bar{transform:translate(var(--x-pos),var(--y-pos)) translate(-20px,-40px);width:40px;height:8px;background-color:gray}.health_bar_inner{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:left;transform:scaleX(calc(100% * var(--health) / var(--max-health)))}.ov_item.player_health_bar.team1 .health_bar_inner{background-color:#f77}.ov_item.player_health_bar.team2 .health_bar_inner{background-color:#7f7}.ov_item.enemy_name{transform:translate(var(--x-pos),var(--y-pos)) translate(-30px,-53px);width:60px;text-align:center;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:10px;color:gray;opacity:.7}.ov_item.enemy_health_bar{transform:translate(var(--x-pos),var(--y-pos)) translate(-20px,-40px);width:40px;height:4px;background-color:gray}.ov_item.enemy_health_bar .health_bar_inner{background-color:#80c020}.ov_item.enemy_stagger_bar{transform:translate(var(--x-pos),var(--y-pos)) translate(-20px,-35px);width:40px;height:4px;background-color:gray}.stagger_bar_inner{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:left;transform:scaleX(calc(100% * var(--stagger) / var(--max-stagger)));background-color:#fff}.ov_item.plant_name{transform:translate(var(--x-pos),var(--y-pos)) translate(-30px,-53px);width:60px;text-align:center;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:10px;color:#99f199;opacity:.7}.ov_item.plant_growth_bar{transform:translate(var(--x-pos),var(--y-pos)) translate(-20px,-40px);width:40px;height:4px;background-color:#dee5c2}.ov_item.plant_growth_bar .growth_bar_inner{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:left;transform:scaleX(calc(100% * var(--growth) / var(--max-growth)));background-color:#18c30d}.ov_item.plant_power_bar{transform:translate(var(--x-pos),var(--y-pos)) translate(-20px,-35px);width:40px;height:4px;background-color:#9b8044}.ov_item.plant_power_bar .power_bar_inner{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:left;transform:scaleX(calc(100% * var(--power) / var(--max-power)));background-color:#e7e00a}.game_ui{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.game_status{position:absolute;left:0;bottom:0}.score_counter{position:absolute;right:0;bottom:0}.debug_ui{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.debug{color:#fff;font-size:10px;pointer-events:auto}.debug_ui button{pointer-events:auto}
